jquery Usage Second Wave

Filter filters

Attribute Filter Selector:

$ ("Div[id]") select the <div> with ID attribute

$ ("#id")

$ ("div[title=test]") select <div>with title Property "test" , getelementsbyname is not encapsulated in JQuery , with $ ("input[name=abc]")

$ ("div[title!=test]") select the title attribute is not "test" <div>

You can also choose to start, end, include, and so on, and the conditions can be compounded. (*)

Form Object Selector (filter):

$ ("input:enabled") selects all enabled elements in a form with ID Form1

$ ("input:disabled") selects all disabled elements in a form with ID Form1

$ ("input:checked") selects all selected elements (Radio,CheckBox)

$ ("Select option:selected") selects all selected option elements ( drop-down list)

Relative positioning

$ (Select,querycontext) Example: //$ ("TD", $ ("#mytr")) is relative to the line tr under the search for TD $ ("TD", $ ("#mytr")). CSS ("Background", "green");

Example

$ (function () {

$ (' tr '). Click (function () {

$ (' TD ', ' table tr '). css (' backgroundcolor ', ');

$ (' Td:even ', $ (this)). CSS (' backgroundcolor ', ' red ');

$ (' td:odd ', $ (this)). CSS (' backgroundcolor ', ' yellow ');

})

});

the Dom operation of Jquery

1. Use the HTML () method to read or set the InnerHTML of the element :

Alert($ (' #btn '). html ());

$ (' #btn '). html (' hello ');

2. Use the text () method to read or set the innerText of the element :

Ditto

3, use the attr () method to read or set the attributes of the element, for JQuery has no encapsulated properties (all browsers have no difference in the properties) with attr to operate.

Alert('#img1). attr (' src ');

$ (' #btn1 '). attr (' href ', ' http;//www.baidu.com ')

Attr can also add styles

4. Use removeattr ("href") to delete the attribute. The deleted attribute is not visible in the source code, which is the difference from the purge attribute. "View Source" can only see the server downloaded the copy

Dynamically creating Dom nodes

Use $ (HTML string ) to create a Dom node, and return a jQuery object, Then call append and other methods to add the newly created node to the other nodes (elements):

var link = $ ("<a href= ' http://www.baidu.com ' > Baidu </a>");

$ ("Div:first"). Append (link);

$ () creates a jQuery object that can be fully manipulated

var link = $ ("<a href= ' http://www.baidu.com ' > Baidu </a>");

Link.text (" Hundred Poison ");

$ ("Div:first"). Append (link);

The

Parent element child elements Span style= "Font-family:times New Roman;" >)   c a object is used to append a child element to the end of the element. The created element has no append The selector cannot be found before the interface, just as the data does not have insert Before the database is not select > come out.

child element . AppendTo ( parent element ). Move Object A to Object C . $ ("#select1 option:selected"). Remove (). AppendTo ($ ("#select2"));

$ ("#select1 option:selected"). AppendTo ($ ("#select2"));

Copy and Replace nodes

Clone (): clones the matching DOM element , with the return value being the cloned copy . However, the new node being copied does not have any behavior at this time .

Clone (True): Copies the elements and also copies the events in the element

<button> Save </button>

<p> paragraphs </p>

$ ("button"). Click (function () {

Alert (" click button ");

});

cloning nodes, not cloning events

$ ("button"). Clone (). AppendTo ("P");

cloning nodes, cloning events

$ ("button"). Clone (True). AppendTo ("P");

ReplaceWith (): replaces all matching elements with the specified HTML or DOM element

ReplaceAll (): reversed replacewith () method .

Note : if an event has been bound to the element before the replacement, the original binding event will disappear with the original element .

<p> paragraphs </p>

Way One

$ ("P"). ReplaceWith ("<button> login </button>");

Mode two

$ ("<button> login </button>"). ReplaceAll ("P");

attr (): Gets the property and sets the property equivalent to the DOM's: setAttribute getattribute

When a parameter is passed for the method , the property specified for the acquisition of an element

When you pass two parameters for the method , the value of the specified property is set for an element

There are many ways to get and set a function implementation in JQuery . as : attr (), HTML (), text (), Val (), Height (), Width (), CSS () wait .

Removeattr (): deletes the specified attribute of the specified element

jquery Usage Second Wave