jQuery学习第三课(选择器第二讲)-CSDN博客

1.基本过滤选择器

2.内容过滤选择器

3.可见性选择器

4.属性选择器

5.子元素过滤选择器

6.表单选择器

基本过滤选择器

a. :fitst 选取第一个元素

b. :last选取最后一个元素

c. :not() 选取除指定之外的元素

d. :even 偶数选择器

e. :odd 奇数选择器

f. :eq()选取指定索引的元素

g. :gt()选取大于指定索引的元素

h. :lt()选取小于指定索引的元素

i. :header选取h1,h2,h3,h4,h5,h6标签

j. :animated选取正在执行动画的元素

k. :lang()语言代码选择器，1.9版本新增加，基本用不到

l. :root根元素选择器，1.9版本新增，没什么用

m. :target选择由文档URI格式化识别码表示的目标元素，1.9新增,基本用不到

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo1</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
#go{width: 100px;height: 100px;background: teal;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<p><span>我是</span>第<em>11111</em>个标签</p>
<p>我是第22222个标签</p>
<p class="a">我是第33333个标签</p>
<p>我是第44444个标签</p>
<p>我是第55555个标签</p>

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<div id="go"></div>
<script>
// $('p :first').css('background','red');
//$('p:last').css('background','red');

// $('p:not(\'.a\')').css('background','red');

// $('p:even').css('background','red');
// $('p:odd').css('background','red');

// $('p:eq(3)').css('background','red');

// $('p:gt(2)').css('background','red');
// $('p:lt(2)').css('background','red');
//$(':header').css('background','red');

$('#go').animate({'left':'1000'},10000);

$(':animated').css('background','red');
</script>
</body>
</html>

内容过滤选择器

a:contains()选取含有文本内容的元素

b:has()选择指定元素的元素

c:empty选择不包含子元素或者文本空元素

d:parent选取含有子元素或者文本的元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
p{height: 30px;line-height: 30px;}
</style>
</head>
<body>
<p>javascript是一种由Netscape的<strong>LiveScript</strong>发展而来的原型化继</p>
<p>遗留的速度问题，为客户提供更流畅的浏览效果</p>
<p><a href="###"></a></p>
<p></p>

<script>
// $('p:contains("LiveScript")').css('background','red');
//$('p:contains("LiveScript")').show().siblings().hide();

//$('p:has("strong")').css('background','red');

//$('p:empty').css('background','red');
$('p:parent').css('background','red');
</script>

</body>
</html>

可见性选择器

a. :hidden选取所有不可见元素

b. :visible选取所有可见元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
p{height: 30px;line-height: 30px;}
.hide{display: none;/*opacity: 0;visibility: hidden;*/}
</style>
</head>
<body>
<p>javascript是一种由Netscape的<strong>LiveScript</strong>发展而来的原型化继</p>
<p>遗留的速度问题，为客户提供更流畅的浏览效果</p>

<div class="hide">我是不可见的DIV</div>
<div>我是可见的div</div>

<script>
//alert($('div:hidden').html());
alert($('div:visible').html());
//:hidden选择器的条件
//1.首先肉眼要在网页上看不到的元素
//2.这个元素不占有网页上的位置
</script>

</body>
</html>

属性选择器

a. [attr]选择拥有此属性的选择器

$('p[title]').css('background','red');

b. [attr=value]指定属性值的选择器

$('p[title=js]').css('background','red');

c. [attr1][attr2][attr3]复合属性选择器

$('p[title][myattr=my]').css('background','red');

d. 其它属性选择器（可到jQuery API手册上过一遍）

子元素过滤选择器

a. :first-child 选择父元素第一个子元素

$('div p:first-child').css('background','red');

b. :last-child选择父元素最后一个子元素

c.:only-child选择元素中只包含一个子元素的元素

$('div p:only-child').css('background','red');

d.:nth-child(表达式) 选取父元素中的第X个元素，X由表达式决定

$('div p:nth-child(2)').css('background','red');

$('div p:nth-child(even)').css('background','red');

e.:first-of-type选取所有相同元素的第一个兄弟元素 1.9新增

f.:last-of-tyoe选取所有相同元素的最后一个兄弟元素 1.9新增

g.:nth-last-child(表达式)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第个，1.9+

h.:only-of-type:nth-of-type(表达式):nth-last-of-type(表达式)

表单元素选择器

a :input

b :text

c :password

d :radio

e :checkbox

f :submit

g :image

h :reset

i :button

j :file

k :hidden

l :textarea

m:select

表单属性选择器

a :enabled 选择所有可用元素

b :disabled选择所有不可用元素

c :checked选择可有选中元素

d :selected选取所有被选中的选项元素

e :focus选择当前获取焦点的元素 1.6添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo7</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text" name="" id="" value="我是不能修改的文本框" disabled="disabled" />
<input type="text" name="" id="" value="我是可以修改的文本框" />

<input type="checkbox" name="" id="" checked="checked" value="aaa" />
<input type="checkbox" name="" id="" value="bbb" />
<input type="checkbox" name="" id="" value="ccc" />

<select name="" id="">
<option value="第一个选项">第一个选项</option>
<option value="第二个选项" selected="selected">第二个选项</option>
<option value="第三个选项">第三个选项</option>
</select>
<script>
//alert($('input:disabled').val());
//alert($('input:enabled').val());
//
//alert($('input[disabled=disabled]').val());

//alert($(':checked').val());
//alert($('input[checked=checked]').val());

/*alert($('select option:selected').val())

alert($(':selected').val())
alert($('select option[selected=selected]').val())*/
</script>
</body>
</html>

下集预告
1、和选择DOM有关的方法，比如：next(),parent(),parents(),children(),eq().....etc
2、当选择器中有特殊符号的时候，我们怎么如何处理
3、实例
a.先用原生的javascript写一个tab标签页
b.我们用jquery写一个tab标签页，并利用强大的jquery选择器，使tab标签页实现的代码尽量地少，尽量保持在1~2行代码量之间解决问题