Home > Web Front-end > JS Tutorial > Jquery study notes (2)_jquery

Jquery study notes (2)_jquery

WBOY
Release: 2016-05-16 18:44:47
Original
1128 people have browsed it

Selector
From the very beginning when I saw selectors like Jquery, it reminded me of CSS selectors. They are almost the same. I personally think the selector syntax of CSS is quite classic, so Jquery can learn from CSS. There is not much doubt left.

Let’s review Jquery’s selectors

Among them, h1 is the selector, color:red and background:#d00 are declared. The combination of the two is also called within {} Declaration block; color and background are called attributes; red and #d00 are called values.

The selector categories can be divided into the following categories:

Tag selector: p{CSS rules}

id selector: #ID{CSS rules}

Class selector: .Class{CSS rules}

Group selector: h1,h2,h3,h4,h5,h6{CSS rules}

Descendant selector: div p{CSS rules}

Wildcard selector: *{CSS rules}

Pseudo-class selector: a:link,a:visited{CSS rules}

Another There are also less commonly used multi-type selectors, attribute selectors, partial attribute selectors, adjacent sibling selectors, sub-selectors, etc. For details, please refer to the book "CSS Authoritative Manual" or http://www.w3 .org/TR/CSS2/selector.html.

Correspondingly, it is not difficult to understand $("#ID") in Jquery.
The basic selectors in Jquery include *, class, element, id and this group method selector1, selector2,...

Let’s take a look at the comprehensive example

Button
[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

2. Hierarchical selector

Needless to say, the idea of ​​hierarchical selector comes from CSS; it is actually slightly expanded
$("div span")//Select all< in
;span> element
$("div>span")//Select the element named under the
element
$('prev next')//Select the element immediately following prev The next element after the element
$('prev~siblings')//Select all sibling elements after the prev element
Example: Copy code
The code is as follows:


$(function(){
$("ul li").css("color","#f00");
$("div>span").css("color","#008000");
$("div span").css("color","#d00");
$( "div~span").css("background","#ffc");
});




Text one

Text two
Text three

  • Option one

  • Option two

  • Choose three< ;/li>

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template