The learning and growth of jquery (I.)

The difference between JS and jquery

JS is a scripting language, and jquery encapsulates it to make JS easier to develop.

Ii. new Web Project steps

1. When creating a new Web project, select the second one and take a project name.

2, the system generated redundant folders deleted, leaving only scripts and Web. config:

3, modify the Scripts folder for JS, new folder CSS and image, and in the corresponding location to add the required pages, CSS style files and JS files.

4. Drag the. min.js file into the HTML and drag its new JS file below it

* Here to introduce JS in order to first refer to the jquery file, and then reference JS.

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.

Third, jquery execution process and notation

1. 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 ();

Jquey notation

Example: to the HTML ID name is called btn Execution of a click event, the content of the execution event is the popup aaaa;

Html:

<input type= "button" value= "JQ button" id= "Btn"/>

Js:

$ (function () {$ ("#btn"). Click (function () {alert ("AAAA"); });

});

JS notation

$ (function () {

document.getElementById ("btn"). onclick = function () {alert ("AAAA");

});

2.JS object to jquery object

var V=document.getelementbyid ("V"); Dom object var $v =$ (v); After the jquery object is converted, you can use the JQuery method arbitrarily.

Example:

Html:

<input type= "button" value= "JS button" id= "Btn"/>

Js:

var obj = document.getElementById ("btn"); Dom object var $obj = $ (obj);     The jquery object $obj. Click (function () {alert ("AAAA"); });

3.jquery Object->js

$ ("#btn")//jquery Object $ ("#btn") get (0)//jquery Object--Native DOM object

Example: jquery object->js, you can execute the JS event

Html:<input type= "button" value= "JQ button" id= "Btn"/>

Js:var obj = $ ("#btn"). Get (0);     Obj.onclick = function () {alert ("AAA"); }

Priority issue: When the CSS and JQ set the style at the same time, follow the nearest principle, at this time the JQ notation, similar to the HTML tag with a style to write, so priority JQ.

Iv. JQ Selector

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

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

"Example" table effect of interlaced color

$ (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

});

2. 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 of the TR label to be selected.

3. Special

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.

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

("a[href$=pdf]") selects all hyperlinks, and the href attribute of these hyperlinks ends with "PDF";

4. function Function

$trim (sstring); Remove the front and back spaces;

Remove the middle space:

Using the Regular:

var sstring = "Hello World";     String.prototype.NoSpace = function () {return this.replace (/\s+/g, "");} Alert (Sstring.nospace ());

Convert to array: "

Example "Remove the middle space of a string: (Turn the string into a character array and then replace 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

5. creating DOM elements

var ONEWP = $ ("<p> This is a touching story </p>");  Create DOM element Onewp.insertafter ("#btn"); InsertAfter () method

Insert DOM element p after the #btn tag

6. attribute Selector

6.1 All tags ("a tag [a property]"): Select a tag with a certain attribute.

6.1.1$ ("A[title]"). AddClass ("MyClass") adds MyClass style to the title property of the A tag

6.1.2 $ ("a[href= ' 10-9.html ')"). AddClass ("MyClass") adds href= style to the 10-9.html ' MyClass ' property of the A tag

6.2.3 $ ("a[href^=http://]"). AddClass ("MyClass") all a tags starting with http://

6.2.4 $ ("a[href$=html]"). Addlclass ("MyClass") all the A tags ending in html

6.2.5 $ ("A[HREF*=ISAAC]"). AddClass ("MyClass") all href contains Isaac a label

7. 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

8. 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 tag Add class style

$ ("P"). EQ (4). addclass ("MyClass")

$ ("P"). EQ (4). CSS ("Color", "red") equivalent to style

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.

9. Filter Selector

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.

The learning and growth of jquery (I.)