jquery Learning Notes (1)

Source: Internet
Author: User

$ is a shorthand form of jquery

such as $ (' #foo ') and jquery (' #foo ') are equivalent, $.ajax and Jquery.ajax are equivalent $ notation is a shorthand form of jquery

Window.onload versus $ (document). Ready ()

jquery Objects and Dom objects

jquery objects are the objects that are created after the jquery package

jquery objects cannot use any method of Dom objects, DOM objects and methods that cannot be used in jquery

1.jQuery objects converted to DOM objects

The jquery object is an array-like object that can be obtained by using the [index] and get (index) methods for the corresponding DOM object

var $cr =$ ("#cr"); jquery Object

var cr= $cr [0]; Dom Object

var cr= $cr. Get (0); Dom Object

2.DOM objects into jquery objects

You can get a jquery object by wrapping the DOM object with $ (). Way $ (DOM object)

var Cr=document.getelementbyid ("Cr"); Dom Object

var $cr =$ (CR); jquery Object

The jquery objects used are all created by the $ () function, and the $ () function is the manufacturing plant of a jquery object.

if (cr.checked) Dom mode

if ($CR. Is (": Checked")) jquery mode

Resolve conflicts with jquery and other libraries

In two cases, the jquery library is imported after and before other libraries

If it is imported later

1.

<script language= "JavaScript" >

Jquery.noconflict (); Transfer control of variable $ to other libraries

JQuery (function () {

jquery ("P"). Click (function () {alert (jquery (this). text ());})

})

$ ("pp"). Style ...//Other libraries use the shortcut

2.

var $j =jquery.noconflict ();

$j (function () {

$j ("P"). Click ...

})

3.

Jquery.noconflict ();

JQuery (function ($) {

$ ("P"). Click ()

........

})

4.

Jquery.noconflict ();

(function ($) {

$ (function () {

$ ("P"). Click ()

.......

});

}) (JQuery);

If it was previously imported

You can use jquery directly to do some jquery work without calling the Jquery.noconflict () function

<script>

jquery (function () {//use jquery directly without calling the Jquery.noconflict () function

JQuery ("P"). Click () ...

})

$ ("pp"). style.display= ' None '//Use prototype

</script>

jquery Selector

Common CSS Selectors

There is also a pseudo-class selector: sub-selector > Proximity selector + property Selector []

If there is no element document.getElementById ("tt") with an ID of TT in the page, the error will need to be judged by the IF (document.getElementById ("tt"))

$ ("tt") there is no need to determine if there is a TT element, no and no error. $ ("tt") gets the object, even if the element is not on the page. When you want to use jquery to check if an element exists on a Web page

To judge by the length of the obtained element,

if ($ ("tt"). length>0) {}

or turn it into a DOM object to judge

if ($ ("#tt") [0]) {}//jquery object is an array-like object

jquery selectors are divided into basic selectors, hierarchical selectors, filter selectors, form selectors

You can use the next () method instead of the $ (' prev+next ') selector

Replace the $ (' prev~siblings ') selector with the Nextall () method

Siblings () method: As long as the peer node can be matched, regardless of the position of the front and back

jquery Learning Notes (1)

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.