Chila Jquery_ Selector _ Implicit Iteration _ Chained programming < 20 >

First, through the JS implementation of the page loading completed the way the code and jquery differences

1, through the way of jquery can let a number of methods are executed, and through the way of Window.onload can only execute the last one,

Because the last method of registration overwrites the previous method

1, window.onload need to wait for all the elements of the page resources such as IMG pictures some connections and so on have been downloaded before it will trigger;

2. jquery will trigger when the page's label element is downloaded.

The $.map (array, function (Ele,index) {}) function iterates over the array and returns a new one after the traversal.

Two elements in function ()

--"The first one is the original array of each element,

--Index of the "element"

$.each (Array/object, function (Key,val) {}), and an array traversal, but no new array is returned,

For an array of key-value pairs, an ordinary array can also be

Two parameters in function ()

--"The first one is the key (index)

--"The second one is the value

You can also use this in each to indicate the value of the current element, which is Val

A little trick:

var arryint=[]; The length of the array is now 0

arryint[arryint.length]=10; So now the meaning of this sentence is: give Arryint the index of this array is 0 element assignment,

Because the length of the first arryint is 0, so now [arryint.length] in this word is 0.

arryint[arryint.length]=20; Here is the value assigned to the element with index 1 for the arryint array

, because an element has already been inserted into the array, and the length of the Arryint is 1 at the time of this sentence.

So the next element of the array is always assigned the value

3) tirm () function go to space

Method prototype: Var str= ' 12253653dfdfds ';

Str.replace (/^[\s\xa0]+/, "). Replace (/[\s\xa0]+$/,"); Replacing \xa0 with regular expressions also means spaces,

The full width of the space to go away, to remove the words to find the regular expression in the full-width of the symbol of the space added up

Third, jquery objects are converted to DOM objects

--First way var domobj=jqueryobj.get[0];

---"The second way: Var domobj=jqueryobj[0];

Convert the DOM object to

var jqueryobj=$ (domobj);

Dom's method properties can be used only with DOM objects

The jquery method can only be called with a jquery object

The two cannot be mixed and must be converted if they are to be used.

2) a selector in jquery

The ID selector in jquery, which means that the DOM object with ID dv1 on the page is fetched directly, and the return value is a jquery object

--"ID selector"

$ (' #dv1 ');

---> tag Selector

$ (' div ');

$ (' div '). Text (' Hahahah '); This is to get all the div tags on the page, assign values to these tags,

The interior of jquery has helped us cycle through each label, so a word can be done, and that's the implicit iteration

--"class selector"

$ ('. Cla '); Select all elements on the page that have the CLA class style applied

--Multi-Conditional selector: Represents an element with the myID style applied, all P elements on the page,

The foreground color of CSS styles for all elements that have the CLA style applied is set to red

$ (' #myid, P,.cla '). CSS (' Color ', ' red ');

--Hierarchy selector: Be aware of spaces

Represents all P elements under the selected Div, whether they are direct child elements or descendant elements

$ (' div p '). CSS (' Color ', ' red ');

$ (' div > P ') direct child element under Div, not containing descendant elements

$ (' div + P ') select the P element immediately following the div Note: An element immediately following the div, and this element must be a P element,

Otherwise, it won't be selected.

$ (' div + P ') is equivalent to $ (' div '). Next (' P ') get div behind

$ (' div ~ p ') Select all the sibling P elements immediately following the current element

$ (' div ~ p ') is equivalent to $ (' div '). Nextall (' P ')

$ (' div '). Prev (); Get Div's previous brother

$ (' div '). Prevall (); Get all the sibling elements in front of Div

$ (' div '). Siblings () gets all the front and back elements except the current DIV element

3) chain-type programming

$ (' P '). Text (' You are all P '). CSS (' Color ', ' red '). CSS (' border ', ' 1px solid Pink '). Click (function () {

Alert (' Haha, I've become handsome again ');

});

How did he make it?

In fact it's every method call that finally returns this object itself return this

--"Note:

Because Prev (), Nextall () These method return values are not the object that originally called the function, so the chain has been destroyed,

So it's not going to be a chain call anymore.

To continue the chain, add the end () method after the link is broken

--"The general Law of jquery method, if pass parameter white Oh is set a value, if do not pass parameter means get a value

---the value of the set element is set by the Val () method, which is expressed as the value of the element when the parameter is passed

--The HTML () method is equivalent to innertext HTML is the HTML content that sets the element.

Note that HTML returns me as a string instead of the object itself, so breaking the chain in chained programming,

HTML after the chain of some strings do not have a method can not chain-like,

. Text () equivalent to innertext text is the text that the element displays

HTML (), text () These two methods are values when the parameter is not passed, when the implicit iteration

(That is, when a collection of tag elements is returned) the HTML () takes the value of the first element, and text () takes the value of all the elements

、

Iv. Iteration of jquery (package set)

The object obtained through the $ (selector) is actually a collection

var val=$ (' txt '). Val ();

Alert (val); Even if there are no elements on the page with the ID txt, there will be no error.

Because the jquery selector returns a collection, if there are elements placed in the collection,

If there are no elements, the length of this collection is 0, which is: The collection is an empty collection

When you want to set multiple CSS styles, you can call the CSS () method once,

Passing a key value to the object is OK, this way you set the element's inline style, the style displayed in the Style property

<STYLR type= ' text/css ' >

. c1{

BORDER:1PX solid Pink;

color:red;

}

</style>

<div></div>

To set the display style of a div by using a class style

$ (' div '). addclass (' C1 ');

Remove a class style

$ (' div '). Removeclass (' C1 ');

Remove all class styles from an element

$ (' div '). Removeattr (' class ')

Determine if a class style is referenced

$ (' div '). Hasclass (' C1 ');

Five, filter selectors

In all selected elements, select the first P element

$ (' P:first '). CSS ()

Equivalent to

$ (' P '). First (). CSS ()

In all selected elements, select the first P element

$ (' P:last '). CSS ()

Equivalent to

$ (' P '). Last (). CSS ()

In all selected elements, select the element with index 2, if all out of bounds have no effect

$ (' P:eq (2) '). CSS ()

Selects all elements that have an index greater than 2 and does not contain the current element

$ (' P:gt (2) '). CSS ()

Selects all elements with index less than 2 and does not contain the current element

$ (' P:lt (2) '). CSS ()

Select all elements in addition to a (CLS) class style applied

$ (' P:not (. cls) '). CSS ()

Select all H tags on the page, no matter how many H

$ (': Header '). css ();

Select all the even-numbered P elements on the page

$ (' P:even ');

Check all positions on the page in the odd P element

$ (' p:odd ');

Chila Jquery_ Selector _ Implicit Iteration _ Chained programming < 20 >