6.jQuery selector

jQuery selector

1. Chapter Objectives
   1. Selectors will use the basic elements of acquisition
   2. We will use the level selector obtain elements
   3. You would use attribute selectors to obtain elements
   4. Selectors will use the filter to obtain elements
      • We will use the basic filter element selector acquisition
      • Visibility use filter element selector acquires

 

1. jQuery selectors similar to CSS selectors, for selecting page elements

Example:

$("h3").css("background","#09F");

1.   Gets and sets the background for all pages <h3> element

2. "h3" is the selector syntax, it must be placed in $ () in

3. $ ( "h3") returns the jQuery object

4. .css () is set to the style object methods jQuery

 

1. jQuery selector classification

jQuery selector powerful, many species are classified as follows

By selecting CSS selector element

The basic selector

Level selector

Attribute selectors

Filter element selected by the selector

Basic filter selector

Visibility filter selector

 

1. The basic selector

The basic selector includes tag selector, class selector, ID selector, and select and set the global selector

1. Tag selector

Tag selector matching elements according to a given tag name

Example:

$(document).ready(function(){

    $("dt").click(function(){

        $("dd").css("display","block");

    });

    $("h1").css("color","blue");

})

 

1. Class selector

Class selector matching elements according to a given class

Example: ---- set price class background color and padding elements

$(".price").css({"background":"#efefef","padding":"5px"});

1. ID selector

ID selector given id matching elements according to

Example:

$("#author").css("color","#083499");

 

1. And set selector

And set the selector to set the consolidated element

Example:

$(".intro,dt,dd").css("color","#ff0000");

 

1. Global Selector

Global Selector can get all the elements

Example: ---- set the font bold display of all the elements

$("*").css("font-weight","bold");

 

1. Level selector

Level selector to get through the hierarchical relationship between elements of the DOM element

1. Selector

Descendant selectors descendant elements used to obtain elements

Example:

$(".textRight p").css("color","red");

 

1. Child selector

The selector used to obtain the sub-element sub-elements

Example:

$(".textRight>p").css("color","red");

 

1. Adjacent selector

Selector for selecting the next adjacent element proximate a target element

Example:

 $("h1+p").css(text-decoration","underline");

 

1. Peer selector

After all siblings peers selector for selecting target elements

Example:

$("h1~p").css("text-decoration","underline");

 

1. Attribute selectors

Attribute selector selects an element by element attribute HTML

 

1. Gets the element according to the attribute name

Attribute selection element may be selected according to a property contains

Attribute tag with a class of

Example:

$("#news a[class]").css("background","#c9cbcb");

 

1. The property value acquisition element 2-1

Attribute selector may select the attribute value of the element in accordance with

class属性值为hot

示例：

$("#news a[class='hot']").css("background","#c9cbcb");

 

1. 根据属性值获取元素2-2

属性选择器可以指定选取不等于属性是某个特定值的元素

class值不等于hot、没有class的也是

示例：

$("#news a[class!='hot']").css("background","#c9cbcb");

 

1. 根据属性值包含特定的值获取元素3-1

属性选择器可以指定属性值以指定值开头的元素

a标签href属性值以www开头

示例：

$("#news a[href^='www']").css("background","#c9cbcb");

 

1. 根据属性值包含特定的值获取元素3-2

属性选择器可以指定属性值以指定值结尾的元素

a标签href属性值以html结尾

示例：

$("#news a[href$='html']").css("background","#c9cbcb");

 

1. 根据属性值包含特定的值获取元素3-3

属性选择器可以指定属性值包含指定值的元素

a标签href属性值包含“k2”的元素

示例：

$("#news a[href*='k2']").css("background","#c9cbcb");

 

1. 过滤选择器
   1. 通过特定的过滤规则来筛选出所需的元素
   2. 主要分类
      • 基本过滤选择器
      • 可见性过滤选择器
      • 表单对象过滤选择器
      • 内容过滤选择器、子元素过滤选择器……

 

1. 基本过滤选择器

 

1. 可见性过滤选择器

通过元素显示状态来选取元素

$("p:hidden").show();

$("p:visible").hide();

 

1. jQuery选择器注意事项2-1
   1. 特殊符号的转义

示例：

<div id="id#a">aa</div>

<div id="id[2]">cc</div>

1. 1. 获取这两个元素的选择器

 

1. jQuery选择器注意事项2-2

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

a.选取class为=等于“test”的元素内部的隐藏元素：

var a = $(".test  :hidden"); //带空格的jQuery选择器----有空格！

b.选取隐藏的class为“test”的元素

var b = $(".test:hidden");  //不带空格的jQuery选择器----无空格！

 

1. 总结