Selectors in jquery in layman's

With the development of JavaScript, a variety of should be shipped for the convenience of jquery into the library

PROTOTYPE,YUI,EXTJS,BINDOWS,JSVM (Domestic), which is now more popular is jquery

, this is a lightweight JavaScript library, it has many advantages: open source, compatible with various browsers, inherit CSS

, Html,javascript,ajax and so on, according to statistics, currently the world's top 10,000 most visited sites, there are

More than 60% of them are using jquery, and have to say that in the current front end, if you say you won't jquery,

Then estimate a lot of people will be to you oh DA, currently led by Dave Methvin Team great God to develop

Maintenance, okay, a brief introduction to jquery, let's take a look at its selector first.

As we all know, JavaScript is used to dynamically manipulate web pages, and it is JavaScript

The continuous development of this function, just let our front-end rapid development, and jquery as a JavaScript

Library, then it applies most of what we use to manipulate HTML, and for its basic part, we

Roughly can be divided into, style, Dom operations, event binding, animation, and then to its internal source schema

For analysis, so today, let's look at its style operations, style operations, that is, the CSS style of the

For

1 $ (' #box ')//ID selector 2 $ ('. Demo ')// class selector 3 $ (' div ')   Tag name selector 4 $ (' * ')// full selector 56 <div id= "box" class = "Demo" ></div>

Here are a few selectors that we often use, in JavaScript we also have, where we use the dollar sign $

To make a choice in the jquery source code at the end of the sentence

1 window.jquery = window.$ = JQuery;

Here, the $ symbol is a property of the Window object, which is equivalent to jquery, which returns a jquery

Object, this object is not equivalent to our DOM object, so our DOM object is not able to use jquery

Inside of the extension method, but Youyi part of the basic tool method can still be called, so, here we first

Let's take a look. Conversion issues between DOM objects and jquery objects:

1 var $div = $ (' div '); 2 var div = $div. Get (0); // get DOM Object 3 4 var div = document.getElementById (' id '); 5 var $div = $ (div); // convert a DOM object to a jquery object by using the $ () method

With the conversion, let's look at the selector in jquery:

1  //descendant selector: $ (S1 s2) gets all s2 in S1 to2$ ("div span"). CSS (' Color ', ' red ');//The color property of all spans in the Div is set to red3 //This is Kobe, Iverson, Carter are all red, note that McGrady is in the Div, so will not select McGrady4 5 6  //$ (parent>child); child only belongs to parent, sub-label (not grandson tag);7$ ("div > span"). CSS (' color ', ' yellow ');//Select the immediate child element span in the DIV, don't lower the span Allen Iverson, Kobe Bryant, Carter for yellow here Carter was chosen for the reason that Carter's parent element is also Div,8 9 //Brother Selector, select the next adjacent sibling elementTen$ ("Div+span"). CSS (' Color ', ' blue ');//This is James will be blue One //All Brothers Selector, select all sibling elements A$ ("Div~span"). CSS (' color ', ' orange ')//then James and Paul were orange - 

 -<div> the<span> Iverson </span> -<span> Kobe Bryant </span> -<div> McGrady <span> Carter </span></div> -</div> +<span> James </span> -<span> Paul </span>

Above is a few of our simple selectors, then in the case above, we will encounter a sudden selection of many elements, or

We want to select some specific elements, then we have a filter selector:

1$ (' li '). css (' Color ', ' red ');//all are set to red2             //2 Set the first one inside3$ (' Li:first '). CSS (' Color ', ' blue ');//Blue in the vault.4             //2 Set the last one5$ (' Li:last '). CSS (' color ', ' yellow ');//Lillard to Yellow6             //sets the specified one7$ (' Li:eq (2) '). CSS (' color ', ' orange ');//Harden to Orange8             //select Great with an index greater than several than GT () but do not select index9$ (' Li:gt (2) '). CSS (' Color ', ' pink ');//Ross and Lillard are pink .Ten             //Select less than LT (index) than index, but also do not select Index One$ (' Li:lt (2) '). CSS (' color ', ' black ');//Owen and the vault are black. A             //: Even select even rows -             //: Odd Select odd Line -$ (' Li:even '). CSS (' backgroundcolor ', ' green ')); the$ (' li:odd '). CSS (' backgroundcolor ', ' gray '); -             //: The header selects all the title tags in the body body -$ (': Header '). css (' backgroundcolor ', ' red ');//the stars and sneakers are red . -              +             //at this point, we can also use the LT GT combination to select some elements -$ (' Li:gt (1): LT (3) '). CSS (' backgroundcolor ', ' yellow ')); +                     //Note that the selection here is Hadenross, where the starting point changes to 1 and then the starting point is less than 3 . A  at - -<div> -<ul> -<li> Owen </li> -<li> in the library </li> in<li> Harden </li> -<li> Ross </li> to<li> Lillard </li> +  -</ul>

So, after we've learned most of the styling and property filters, our choice of HTML node elements is basically

Is able to select all the HTML nodes to operate, then in order to more convenient for our choice, so that our choice more efficient and convenient

We also have several more commonly used selectors:

  //Content Selector$ (' Div:contains (' South Sea ') '). CSS (' backgroundcolor ', ' red ');//then the background color of the first box will turn red .            //Empty content Selector$ (' Div:empty '). CSS (' backgroundcolor ', ' red ');//The background color of the 3rd box will turn red .            //HSA (), in which you need to get to the selector specified in this selector            $(' Div:has (. Kobe) '). CSS (' backgroundcolor ', ' green ');//At this point the fourth box will turn green, note that the choice here is. kobed the parent element of the box            //the element selected by the parent must be a parent tag,$ (' div:parent '). CSS (' background ', ' Pink ');//except for the third empty one, the other boxes are pink .<div> Nanhai is China's </div><div> Philippines is also China's </div><div style= "width:100px;height:100px;" ></div><div> <span class= "Kobe" > Want to go nba</span></div>

When we select a node element, we start to get its properties, set its properties, and

We directly use CSS () This function to set the properties of the style compared to when we are going to a node element of its own property into the

Line operation, we can use the attr () function in jquery to set up and manipulate it:

1   //gets the value of the Name property2Alert ($ (' #text_id '). attr (' name ')));3             //set the value of the Name property4$ (' #text_id '). attr (' name ', ' Allen ');//This will change the name value of input to Allen,5Alert ($ (' #text_id '). attr (' name ')));6             //So here we should also be able to see, when the attr inside is a parameter, is to get to the value of this parameter7             //when there are two parameters in attr (), it is necessary to set the property value for the first parameter .8             //when we need to modify multiple properties, we can use JSON data as a way to set9             varAtts = {' value ': ' 123 ', ' Address ': ' Shanghai '};Ten$ (' Input:first '). attr (Atts); One              A             //In addition, we can also use the return value of the function to set -(' Input:first '). attr (' value '),function (){ -                 return20+30; the             }) -  -  -<input type= "text" name= "textfiled" value= "123456" id= "text_id" address= "Beijing" >

All of these actions are for CSS styles and properties, so if we can manipulate this CSS file,

When we switch the overall style, such as the responsive layout, the browser interface, such as skin changes, our operation is to become very efficient,

Of course, the great gods have already devised a way to operate class:

<style>. text1{background:red;}. Text2{background:yellow;}. Text3{background:green;} </style><script>$ (function() {    $ (' div '). addclass ('. Text1 ');   Add class name    $ (' div ') by addclass (). Removeclass ('. Text1 ')// Delete class name via Removeclass    $ (' div '). Toggleclass ('. Text2 ')//Toggle class via Toggleclass}) </script><div style= "Width:200px;height : 200px; " > </div>    

Well, today's share is here, there are insufficient places also please point out, greatly appreciated,

Selectors in jquery in layman's