jQuery入门@选择器@过滤器及范例

jQuery入门@选择器@过滤器及实例

首先引入jQuery类库

jQuery转化成dom对象的转化使用get（）方法；

jQuery选择器：

常用的选择器：

1、id （唯一）

$("#ID")替代document.getElementById()函数，即通过ID获取元素。

这个不是注释

//$(“#id”);利用jquery选择器；获取id名称为jquery对象

//获取jquery的value值

用$(“#id”).val() //var()方法获取第一个匹配的jQuery对象的当前值

示例

描述:

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>

<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

2、类别选择器：

$(“.class”);//获取jquery的对象

值获取与id相同

示例

描述:

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

3、标签选择器：

var $inputs = $(“input”);获取标签名称为input的所有的jQuery对象

$inputs.length();长度

$inputs.size();

$(“#uname,.usex”);//只有一个引号；

$inpts[i];//是一个dom对象；

怎莫转化成jQuery对象：

示例

描述:

找到匹配任意一个类的元素。

HTML 代码:

<p class="myClass">p class="myClass"</p>

<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

案例：

改变颜色：$one.css(“background-color”,”#bbffaa”);

层次选择器：

当文档加载完毕触发匿名函数；

$(document).ready(function(){

})

//获取thead的所有后代元素

$(“thead th”);

$(“thead>th”); //获取的是当前下的子元素（不包括孙子元素）

$(“#thead+th”);//获取的是下一个元素

$(“#thead ~ th”);//获取的是当前下后面的同一级别下的所有元素

过滤选择器
以：开头的都是过滤选择器；

$(“tr:first”);获取的是tr下的第一个元素

$(“tr:last”);//获取最后一个

$(“tr:not(#id)”)；排除摸一个id

$(“tr:even”);even偶数，从0开始

$(“tr:odd”);odd奇数，从0开始

$(“tr:eq(3)”);//等于从0开始

$(“tr:gt(3)”);大于从零开始

$(“tr:lt()”);小于；

注意冒号前边加不加空格的区别

内容过滤选择器:

$(“td:contains()”)

可见性过滤器：

$(:hidden);//获取隐藏的元素

$(div:hidden);//获取div中隐藏的元素

示例

描述:

查找隐藏的 tr

HTML 代码:

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:hidden")

示例

描述:

查找所有可见的 tr 元素

HTML 代码:

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:visible")

属性过滤选择器：

$(“[id]”);//过滤属性，id就是属性的名称

[attribute】

概述

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

参数

attributeString

属性名

示例

描述:

查找所有含有 id 属性的 div 元素

HTML 代码:

<div>

<p>Hello!</p>

</div>

jQuery 代码:

$("div[id]")

$(document).ready(function(){

var $demo1 = $("div[title]");

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

var $demo2 = $("div[title=99]");

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

var $demo3 = $("div[title!=99]");

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

var $demo4 = $("div[title^='te']");

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

var $demo5 = $("div[title$='est']");

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

var $demo6 = $("div[title*='22']");

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

var $demo7 = $("div[id][title*='22']");

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

});

</script>

</head>

<body>

<!--

选取下列元素,改变其背景色为 # bbffaa

含有属性title 的div元素.

属性title值等于"test"的div元素.

属性title值不等于"test"的div元素(没有属性title的也将被选中).

属性title值 以"te"开始的div元素.

属性title值 以"est"结束的div元素.

属性title值 含有"es"的div元素.

选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.

-->

</body>

子元素过滤选择器：

$(document).ready(function() {

var $demo1 = $(".one>div:nth-child(2)");

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

var $demo2 = $(".one>div:first-child");

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

var $demo3 = $(".one>div:last-child");

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

var $demo4 = $(".one>div:only-child");

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

});

</script>

</head>

<body>

<!--

选取下列元素,改变其背景色为 # bbffaa

每个class为one的div父元素下的第2个子元素.

每个class为one的div父元素下的第一个子元素

每个class为one的div父元素下的最后一个子元素

如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

-->

</div>

</div>

</body>

jQuery入门@选择器@过滤器及范例

热点推荐