A brief introduction to some core methods in jquery programming _jquery

Source: Internet
Author: User

The way to invoke the JQuery object is simple:

$ (' H1 '). Remove ();

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:

    1. All JQuery selector methods are located within the $.fn namespace.
    2. 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 ');


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.