jQuery学习第三课(选择器第二讲)

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

<script>
  //alert($(':input').length);
  
  //alert($(':text').length);
  //$(':text').css('background','red')
  //$(':password').css('background','red')
  //alert($(':radio').val());
  //alert($(':checkbox').val());
  //alert($('input[type=checkbox]').val());
  alert($('input:hidden').val())
 </script>

表单属性选择器

 

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行代码量之间解决问题

你可能感兴趣的:(jquery)