JQuery Learning(3):JQuery selector

最新推荐文章于 2022-11-01 13:35:45 发布

翻译最新推荐文章于 2022-11-01 13:35:45 发布 · 530 阅读

文章标签：

6 篇文章

订阅专栏

本文介绍了jQuery选择器的基础知识，包括元素选择器、属性选择器及CSS选择器等，并提供了丰富的实例帮助理解如何精确地选择所需的HTML元素进行效果应用。

In the previous section,we show some examples about how to select HTML element.

The key point is to learn jQuery selector is how to accurately select the element you want to apply the effect.

The jQuery element selector and attribute selector allow you to via the tag name,the attribute name or the content to select the HTML elements.

The selector allows you to operate for the element group or the single element.

The selector allow you to operate for the DOM elements group or the single DOM node.

The jQuery use the CSS selector to select HTML elements.

$("p") select <p> elements

$("p.intro") select all <p> elements of class="intro"

$("p#demo") select the first <p> element of id ="demo"

The jQuery use the xpath expression to select element with preset attribute.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href attribute and value equal "#".

$("[href!='#']") select all elements with an href attribute and value not equal "#".

$("[href$='.jpg']") select all elements with an href attribute and value is end with ".jpg".

The jQuery css selector is used for change the HTML element's css attribute.

The following example is able to change the <p> elements background to red color.

Example:

$("p").css("background-color","red");

More selector example:

syntax	description
$(this)	current HTML element
$("p")	all <p> elements
$("p.intro")	all <p> elements of class="intro"
$(".intro")	all elements of class="intro"
$("#intro")	the first element of id="intro"
$("ul li:first")	the first <li> element of every <ul>
$("[href$='.jpg']")	all elements with an href attribute and value is end with ".jpg".
$("div#intro .head")	all elements of class="head" in the <div> element of id="intro"