VaR OBJ = $ (selector );
The selector is a string, which is the selector that will be introduced below. The returned result is a collection of elements. In fact, the power of jquery's core $ function is far more than used as a selector. When its parameter is a function, its function is similar to the onload event, when the DOM element of the page is fully loaded, the methods in its parameters will be executed. It is more advantageous than onload. onload can only register one function, but it can be called multiple times, that is, it can register multiple functions and load them completely to the dom for execution, in addition, onload is executed after all the content on the page is loaded. If there are large images and other content, it may cause function execution delay. The $ function can be executed as long as the DOM structure is fully loaded. The following is a simple example:
CopyCode The Code is as follows: <HTML xmlns = "http://www.w3.org/1999/xhtml">
<SCRIPT type = "text/JavaScript">
$ (Function (){
VaR P = $ ('# p1 ');
Alert (P );
});
</SCRIPT>
</Head>
<Body>
<P id = "p1"> I'm a P </P>
</Body>
</Html>
As you can see, the simplest selector is similar to getelementbyid and uses the element ID as the selector. Let's take a look at what P is, and use the JS debugger to see:
P is an array-like object that contains the selected elements. Open the [Methods] node and you can see that many methods are provided by jquery. In this example, there is only one element, so P [0] can be used to obtain the HTML element. P [0] is the same as the object obtained by getelementbyid.
The strength of jquery selector is that it is almost fully compatible with css2 selector, regardless of whether your browser is compatible with css2. If you are not familiar with CSS selector, refer to my previous log: CSS selector. You can apply many methods to the selected elements. These methods are not the focus of this Article. Here we will first introduce the CSS (ATTR, value) method, this method can be used to set the ATTR attribute value in the CSS attribute of the packaging element to value. the example below is to use this method to add a font change to the page elements. We can use this method to differentiate which elements are selected by a certain selector. The content of this example is almost the same as that of the previous one. I will not explain it, but this example also applies to IE6!
Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The effect is as follows:
The strength of jquery is not limited to this. In addition to supporting CSS selector, jquery itself also supports other selector, one of which is location-based selector. For example, select the first row in the list or an even row in the table. The general format of this type of selector is location, for example, A: First, matching the first A, P: Even matching the even number of P on the page. The following describes in detail.
| Selector | Description |
| : First | The first page that appears. Li A: first, the first a that appears under the Li tag |
| : Last | Same as above. |
| : First-child | First child element |
| : Last-child | Last child element |
| : Nth-child (N) | Returns the nth child element (starting from 1) |
| : Nth-child (even | ODD) | Returns the even number | an odd number of child elements. |
| : Even: odd | Number of even and odd elements |
| : Eq (n): GT (n): Lt (N) | Returns the nth element (starting from 0), the nth element after the nth element, and the element before the nth element. |
Let's look at an example and explain it again:
Copy code The Code is as follows: <HTML xmlns = "http://www.w3.org/1999/xhtml">
The first statement is to set the first line to bold and a large character. The second sentence is to set the background of an even number of rows to silver gray. The third sentence is to set the first TD element in tr to red. The fourth sentence is to set the first child element of all tr at the beginning of the second line to italic.
Article 4 demonstrates the combined use of selector. This type of selector is similar to CSS selector and can be used in combination. Pay special attention to the difference between P: First and P: first. The former indicates the first P in the whole page, and the latter indicates the first element contained in P. Based on the above explanation, the final result should be:
The above figure is cut under IE8. I have to say that IE is really pleasing to the eye for font rendering. Chrome FF is not so beautiful.
Let's get down to the truth and continue to introduce jquery's last class selector. This type of selector is similar to the pseudo class of CSS, for example:
| : Button | Select input [type = button] |
| : Checked | Check box or button selected |
| : Contains ('xxx ') | Element containing string xxx |
The usage is simple and not detailed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
