The way to invoke the JQuery object is simple:
Most jquery methods are called as above, and these methods are in the $.fn namespace, which is called the JQuery object method.
But there are also methods that do not need to rely on the selector's result set, which is in the jquery namespace, which is called the jquery core approach. If you find it difficult to understand, remember the following two lines:
- All JQuery selector methods are located within the $.fn namespace.
- The methods within the $ are generally useful functional methods that do not rely on selectors, and the parameters and return values of these methods are very different.
Some object methods are the same as the names of the core methods, such as $.fn.each and $.each, which require extra attention when used.
There are many practical ways to do this in the $ namespace for JQuery:
To remove a blank string two times:
$.trim (' lots of extra whitespace ');
Return to ' lots of extra whitespace '
To iterate between arrays and objects:
$.each ([' foo ', ' Bar ', ' baz '], function (idx, val) {
console.log (' element ' + idx + ' is ' + val);
});
$.each ({foo: ' Bar ', Baz: ' BIM '}, function (k, v) {
Console.log (k + ': ' + V);
});
Returns the index of an element in an array and returns 1 if the element does not exist
var myarray = [1, 2, 3, 5];
if ($.inarray (4, myarray)!==-1) {
console.log (' found ');
}
To extend another object with one object:
var firstobject = {foo: ' Bar ', A: ' B '};
var secondobject = {foo: ' Baz '};
var newobject = $.extend (Firstobject, secondobject);
Console.log (Firstobject.foo); ' Baz '
console.log (newobject.foo); ' Baz '
If you don't want to change the value in the first object, pass in a null object in the first argument of $.extend:
var firstobject = {foo: ' Bar ', A: ' B '};
var secondobject = {foo: ' Baz '};
var newobject = $.extend ({}, Firstobject, secondobject);
Console.log (Firstobject.foo); ' Bar '
console.log (newobject.foo); ' Baz '
To change the scope of a function:
var myfunction = function () {console.log (this);
var myObject = {foo: ' Bar '};
MyFunction (); Logs Window object
var myproxyfunction = $.proxy (MyFunction, myObject);
Myproxyfunction (); Logs MyObject Object
Then combine the events to see how to change the scope of the function:
var myObject = {
myfn:function () {
console.log (this);
}
};
$ (' #foo '). Click (MYOBJECT.MYFN); Logs DOM element #foo
$ (' #foo '). Click ($.proxy (MyObject, ' myfn '));//Logs MyObject
JavaScript itself has a method of type detection, which is also available in jQuery, and does better:
var myvalue = [1, 2, 3];
Use JavaScript's typeof operator to determine the type
typeof myvalue = = ' string ';//False
typeof myvalue = ' number ';//False
Ty peof myvalue = = ' undefined '; False
typeof myvalue = = = ' Boolean '//False
//= null
myvalue = = NULL detected by constant = =//False
//using JQuery method To determine the type
jquery.isfunction (myvalue);//False
Jquery.isplainobject (myvalue);//False
Jquery.isarray ( MyValue); True
To add additional data to an HTML element:
$ (' #myDiv '). Data (' KeyName ', {foo: ' Bar '});
$ (' #myDiv '). Data (' KeyName '); {foo: ' Bar '}
The data you want to add can be any type:
$ (' #myList Li '). each (the function () {
var $li = $ (this), $div = $li. Find (' div.content ');
$li. Data (' Contentdiv ', $div);
});
No need to find the div again;
//Can be read directly from the list
var $firstLi = $ (' #myList li:first ');
$firstLi. Data (' Contentdiv '). HTML (' new content ');