Tenth course Highlights (JQ selector: ID, class, label, parity, EQ, nth-child, child element, attribute, inclusion, location, filter)

1. New JQ project in VS:

Select the second when creating a new Web Form:

　　

Delete the extra folders generated by the system, leaving only scripts and Web. config:

　　

Rename the Scripts folder to our familiar JS (also can not change, only recommend change), and create new folder CSS and image, and add pages in the corresponding location, HTML, CSS, JS

Drag the. min.js file that your mouse refers to in the HTML, and drag your new JS file underneath it.

　　

* The relationship between the upper and lower positions do not eat, min.js must be on the top.

Drag the first JS file (_references.js) in the script folder to the top of your new JS file,

　　

* This step function: Let JQ display smart tips, easy to write code.

Complete the above steps to begin normal program writing.

2, the JQ selector (the difference between the wording and JS):

　　

"Example" declares an event on the button and pops up "AAAA" when clicked:

　　JS notation:

In HTML:

<input type= "button" value= "I am a button" onclick= "A ()"/>//appears a Click event A ()

JS in:

function A ()//declaring the role of event A ()

{

Alert ("AAAA"); Pop-up box showing AAAA

}

　　JQ notation:

In HTML:

<input type= "button" value= "I am a button" id= "btn"/>//Set an ID selector with the name BTN

JS in:

$ (function () { //load the page, execute JQ after loading ( to use JQ to write this sentence first, this is a fixed statement, the internal write is the JQ content)

$ ("#btn"). Click (function () {//Find to ID selector btn, perform a click on it event, the event is declared with function, the content is:

Alert ("AAAA"); Pop-up box showing AAAA

});

});

* Equivalent to JS is to spread the whole thing into the HTML and JS to write, only use this time, JQ is similar to CSS set a selector, and then the selector for the event settings, can be used many times.

　　Summarize:

1) JS and JQ can be converted to each other.

2) The JQ execution process is divided into the following 5 steps:

A, load the page: $ (function () {});

B. Locate the object, such as ID tag: $ ("#btn")

C, execute object corresponding event: click ();

D, declaring the event: function () {}

E, the implementation of the event content: alert ();

3) priority issue: when the CSS and JQ in the same style, followed by the nearest principle, at this time the JQ notation, similar to the HTML tag in a style to write, so priority JQ.

3. ID Selector: $ ("#btn")

Like CSS, first declare an ID selector in HTML: id= "BTN", and then find this ID selector in the JS page: $ ("#btn"), and then perform an event operation on it.

4. Class Selector: $ (". Btn")

First declare a class selector in HTML: class= "BTN", then find this ID selector in the JS page: $ (". Btn"), and then perform an event operation on it.

5. Tag Selector: $ ("tr")

The tag selector is found in the JS page based on the label written in the HTML, such as TR, TD, and the event action on it.

6, Parity selector: odd (even), even (odd)

　　$ ("tr:odd"), select All < tr > marks in the even line

$ ("Tr:even"), select All < tr > marks in odd lines

"Example" Alternate color table:

$ (function () {

$ ("tr:odd"). CSS ("Background", "#f8f3d2"); The background color of even rows is #f8f3d2

$ ("Tr:even"). CSS ("Background", "#ffcdcd"); The background color of odd lines is #ffcdcd

});

6. EQ(n) selector: $ ("X:eq (n)")

You can also write $ ("x") for the n+1 x tag of the x tag. EQ (n).

such as: $ ("tr"). EQ (2) refers to the third line.

7,Nth-child(n) selector: $ ("X:nth-child (n)")

Select the nth x label for the x tag.

such as: $ ("Td:nth-child (3)") means the 3rd column; $ ("Li:nth-child (4)"), which is the 4th Li tag.

"Supplemental" EQ (n) differs from Nth-child (n):

EQ (n): Select the n+1 x tag that all x tags are sorted in order, but only one x tag is selected on the whole page.

Nth-child (n): For all x tags will be sub-parent, child, grandchild, each level in order to arrange the nth label, all of them selected, you can select more than one label.

Detail visible: http://blog.csdn.net/aspnet2002web/article/details/7701335

8, child element selector: $ ("Li>a")

$ ("Li>a"), returns all child elements of the <li> tag <a>, but does not include the grandchild tag.

"Example" finds all child tags under li A, the text color is red:

<ul>

<li>

<a href= "#" >XXXX</a>

<div><a href= "#" >YYYY</a></div>

<a href= "#" >XXXX</a>

<a href= "#" >XXXX</a>

</li>

</ul>

$ ("Li>a"). CSS ("Color", "red");

Effect: Only xxxx is red, yyyy is not changed, because YYYY is the Sun tag for Li (li>div>a).

9. function function Prefix:

　　$.trim (s); Remove the front and back spaces of the S string.

"Example" removes the middle space in the string: (Turns the string into a character array and then replaces the space with none)

var s= "Das das";

var achar=s.split (""); To change a string into a character array

for (var i=0; i<achar.length;i++)

{

if (achar[i]== "")//When a character is encountered as a space

{

S=s.replace ("," ""); Replace this space with none (the space is not replaced by a hyphen)

}

}

alert (s); Print S

10. Attribute selector:

$ ("A tag [a property]"): Select a tag with a certain attribute. such as:

1) $ ("A[target]") to select a tag with the target attribute;

2) $ ("a[href= ' b.html ')" selects a tag with href= ' b.html ' attribute;

3) $ ("a[href^=http://]") Select a tag that begins with http://;

4) $ ("a[href$=html]") Select a tag ending in HTML

5) $ ("a[href*=bbb]") Select a label containing BBB

11. Include Selector

$ ("A tag: has (a property)"): Selects all the tags that contain a property. such as: $ ("Li:has (A)") contains all Li tags for hyperlinks

12. Position Selector

$ ("A tag: a location"): Select a tag in a particular location. Such as:

1) $ ("P:first") select the first P label in the page

2) $ ("P:last") select the last P label in the page

3) $ ("P:first-child") selects all P tags, and these p tags are the first tag of their parent tag.

4) $ ("P:last-child") selects all P tags, and these p tags are the last tag of their parent tag.

5) $ ("P:nth-child (Odd)"). AddClass ("MyClass") selects all P tags, and these p-tags are even rows of their parent tags.

6) $ ("p:odd"). AddClass ("MyClass") an even line P tag for the entire page

7) $ ("P:eq (4)"). AddClass ("MyClass") Fifth P mark

8) $ ("P:GT (N)"). AddClass ("MyClass") the nth (starting from 0, excluding n itself) all P tags after the p tag, that is, starting from the first n+2 tag, such as $ ("P:GT (2)") is starting from fourth p.

13. Filter Selector

* Note: $ (": File") equivalent to $ ("input[type=file]")

$ (": Button")	All buttons
$ (": checkbox")	All check boxes, equivalent to $ ("input[type= ' checkbox ']")
$ ("Div:contains (' foo ')")	All elements that contain the text "foo"
$ (":d isable")	All disabled elements (this is a problem, instead of the notation: $ ("input[disabled=disabled]"). attr ("value", "AAA");)
$ (": Enable")	All elements that are not disabled
$ (": File")	All upload files
$ (": input")	All form elements
$ (": Selected")	Selected items in all drop-down menus
$ (": visible")	All visible elements
$ (": Submit")	All Submit button

14, Reverse Filter:

　　$ ("tag: not (: a property)"): Selects any label that does not have a property.

Filter out all tags that contain "one attribute" and leave other tags that do not have the attribute.

For example: $ ("A:not (: Target)"), which means to select all a tags that do not write target.

Tenth course Highlights (JQ selector: ID, class, label, parity, EQ, nth-child, child element, attribute, inclusion, location, filter)