JQuery $() (.Click)... This is how to achieve

The above problem is simplified as follows:
If I wrote a JS file inside, the $('id').Test ('string') after the execution of the text label for id='id''string'.

For example: click the a tab to p text into 123456,

<p id='asd'>Seek help</p>
<a onclick = $('asd').test('123456')><a>


In the example above $('id').Test ('string') how? I write only ($.test). $(.Test) (written) no, not that.

Started by Molly at February 01, 2016 - 10:09 PM

$('#id').test('string')

Posted by Avery at February 10, 2016 - 10:56 PM

You don't understand what I said! I'm not talking with jQuery is to write a $own (.Test) () to achieve the above functions

Posted by Molly at February 11, 2016 - 11:39 PM

There are 3 ways to write jQuery plug-ins:
1, Global plug-ins, such as your$.test(),
2, Object method plug-ins, the more common,
3, Picker plug-in, less used, suggest to study

Posted by Clifford at February 24, 2016 - 12:24 AM

$.test()This really is not easy, because after going to a good package will not touch the DOM command, but $.test () so a written, because in the test method to write the DOM command so that it is not convenient.
So I want to know jQuery's $() (.X) is how to achieve.

Posted by Molly at February 25, 2016 - 1:22 AM

Like this

<script type="text/javascript">
function ClassObj(id)
{
this.dom = document.getElementById(id);
}
ClassObj.prototype.html = function (e)
{
if(e)
{
this.dom.innerHTML = e;
return this;
}
else
return this.dom.innerHTML;
}

var $ = function (id)
{
return new ClassObj(id);
};
</script>

<p id='asd'>Seek help</p>
<input type="button" value="xxxxxxxxxxx" onclick="$('asd').html('123456')" />


Posted by Miriam at February 27, 2016 - 1:31 AM

$.fn.test= funciton(){}
The direct modification of $propotype, after all the $(). With this method.
But this is not recommended to add, is mainly the people development often have the naming conflicts, or have a unified add the FN decision-making mechanism to prevent such phenomenon.

Posted by Reginald at March 11, 2016 - 1:45 AM

JS novice, for detailed comments, thank you, my concept of the object is not very understanding, look at the recent closure also see very angry

Posted by Molly at March 19, 2016 - 1:48 AM

JS novice, for detailed comments, thank you, my concept of the object is not very understanding. Propotype this thing, searched the Internet, but everybody says the pitch-dark, really do not understand, ask a simple explanation, thank you

Posted by Molly at March 30, 2016 - 2:29 AM

LZ must first understand how to create the object, the $() function returns an object instance is

Posted by Miriam at April 06, 2016 - 2:34 AM


(function(window){
_$ = window.$;
$ = function(o){
if(Boolean(o) == false)
return event.srcElement;
else
return typeof(o) == "string"?document.getElementById(o):o;
};
$.test=function(str){
document.write('Fucking depressing'+str);
}
}(window))


The above $.test () can perform; but for $() () is not solved,.Test

Posted by Molly at April 12, 2016 - 2:46 AM

Why not say. The $() function to return an object

Posted by Miriam at April 22, 2016 - 3:24 AM

You have to work, go to see the jQuery API, you need to learn, to go with the native JavaScript, you go to learn native jQuery JavaScript, find their own tired, there are a lot of advanced JavaScript method using jQuery, you did not play a good foundation to understand the principles of jQuery, since has increased learning complexity.

propotype, JavaScript is the primary class implementation mechanism, for public method class package, mainly is the shared memory, multiple instances of a class share a program fragment, to save memory.

function A() {
this.name= "A";
this.show = function(){
alert(this.name);
}
}

function B (){
this.name= "B";
}
B.prototype.show = function(){
alert(this.name);
}

Here, you new A (); B (New); their show () method is the same, but the general recommendation is written with second. The benefits of a is to save memory, another convenient extension, you can write a base class, and then extended to this class in other files, and can directly modify the JavaScript built-in objects Array, String, Function, prototype expansion.
Of course, the built-in objects JavaScript prototype extension there are two opposing ideas, a thought it contaminated the native JavaScript, easy to cause the version control chaos, tend to use other methods to achieve, is representative of jQuery, another is the extension that the reasonable is a must, simplified API, let the program to better understand, representative is Mootools.

Posted by Reginald at April 28, 2016 - 3:26 AM

function $(id){
if(typeof id == 'undefined'){
alert('must a string');
}
if(this == window){
return new $(id);
}

this.dom = document.getElementById(id);
}

$.prototype = {
test : function(text){
this.dom.innerText = text;
}
}

Posted by Bert at May 05, 2016 - 3:35 AM

It is the old jQuery style.

The following is a new jQuery method.
function $(id){
if(typeof id == 'undefined'){
alert('must a string');
}
return new $.prototype.init(id);
}

$.prototype = {
test : function(text){
this.dom.innerText = text;
},
init : function(id){
this.dom = document.getElementById(id);
}
}
$.prototype.init.prototype = $.prototype;

Posted by Bert at May 17, 2016 - 3:37 AM

In fact, just use the debugger, it is easier.

Posted by Bert at May 26, 2016 - 3:54 AM

return new $(id);

Regard themselves as the object returned to how to understand? In using the $() (.Test) when the equivalent (new $(ID)) (.Test)? And then returns an object (new (new $(ID))) (.Test)? Don't understand

Posted by Molly at June 10, 2016 - 4:04 AM

If in that before, which can let you new two times.
I I mean, if you call me, using the $(ID) this form, will give you fix it, on the home was to use new $(ID). Does not rule out some people are lazy, forget to add new. So, give you a if, then you add to new. If you are using new, the if could not go.

Posted by York at June 11, 2016 - 4:06 AM

Then? The object new finish back to who? Test using the DOM attribute, don't use that object o.

Posted by Molly at June 24, 2016 - 4:56 AM

Nobody answered. He doesn't need to answer, because the direct use of ligatures.

<p id='asd'>Seek help</p>

<script>
function $(id){
this.dom = document.getElementById(id)
}

$.prototype = {
changeText : function(){
this.dom.innerText = 'fuck ?';
return this;
},
changeStyle : function(){
this.dom.style.color = 'red';
return this;
}
}
new $('asd').changeText().changeStyle();


</script>

Posted by Bert at July 06, 2016 - 5:51 AM


var divDrag = {
o: null,
init: function (divHeader, DivContent) {
divHeader.onmousedown = this.start;
DivContent.onmousedown = this.start;
},
start: function (e) {
var o;
divDrag.o = o = document.getElementById("tanchu_warrper");
e = divDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
o.x = e.clientX - divDrag.o.offsetLeft + 239;
o.y = e.clientY - divDrag.o.offsetTop + 150;
document.onmousemove = divDrag.move;
document.onmouseup = divDrag.end;
},
move: function (e) {
e = divDrag.fixEvent(e);
var oLeft, oTop;
oLeft = e.clientX - divDrag.o.x + 239;
oTop = e.clientY - divDrag.o.y + 150;
divDrag.o.style.left = oLeft + 'px';
divDrag.o.style.top = oTop + 'px';
divleft = oLeft * 1;
divtop = oTop * 1;
},
end: function (e) {
e = divDrag.fixEvent(e);
divDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function (e) {
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
divDrag.init(div, divBox);

= - = like the packaging method can be achieved

Posted by Asa at July 18, 2016 - 6:45 AM

This can read but to the anonymous function Meng, see online, said to the object is mounted to the window object, such as the $, online said window.$mount the object, but $inside and other attributes, in other words a level attributes that I got very confused, don't know how to handle link attribute and the parent property.

Posted by Molly at July 19, 2016 - 7:20 AM

function $(id){
if(typeof id == 'undefined'){
alert('must a string');
}
if(this == window){
return new $(id);
}

this.dom = document.getElementById(id);
}

$.prototype = {
test : function(text){
this.dom.innerText = text;
}
}

Posted by Edith at July 21, 2016 - 7:52 AM

It has been this code.

Posted by Molly at December 10, 2016 - 6:25 PM

Posted by Christian at December 22, 2016 - 6:57 PM

Not what is not well understood.
You only need to $(id)
As document.getElementById (ID) abbreviation
You can
So o = $(ID) o has the ID'id'DOM object all properties and methods.

Posted by Griffith at December 27, 2016 - 7:07 PM

Well yes I think so, but several of the above said the $() as an object returned, I don't quite understand. Because some friends in accordance with the above code, return $(not used). This.dom is used as the attribute.
function $(id){
if(typeof id == 'undefined'){
alert('must a string');
}
if(this == window){
return new $(id);
}

this.dom = document.getElementById(id);
}

$.prototype = {
test : function(text){
this.dom.innerText = text;
}
}


But my code does not return an object, but can't realize the $(ID).Test (STR) this, only then $.test (STR), but it can not use $() get to respond to the events tab, only to write the document... In a word used alone () can, for only $$.test().

(function(window){
_$ = window.$;
$ = function(o){
if(Boolean(o) == false)
return event.srcElement;
else
return typeof(o) == "string"?document.getElementById(o):o;
};
$.test=function(str){
document.write('Fucking depressing'+str);
}
}(window))

Posted by Molly at January 03, 2017 - 7:56 PM

LZ must first understand how to create an object, you this is not an instance object, your $and $.test only two independent function, only the function name used namespaces.

Can you give examples is a bit complicated, have a look below

function Class(id)
{
//Object constructor
}
Class.prototype.mt = function ()
{
//A method of object
alert(34);
}

//Using the method of the Class object is
//Methods 1:
var obj = new Class(123);
obj.mt();

//Methods 2:
new Class(123).mt();

//Methods 3:
var $ = function (id)
{
return new Class(id);
};
$(123).mt();


Method 3 is what you want.

Posted by Miriam at January 05, 2017 - 9:11 PM

This time to understand
Thanks a million
Class.prototype is to add attributes to the class.
class.prototype={

}

Posted by Molly at January 09, 2017 - 8:43 PM