首页 > 程序开发 > web前端 > JavaScript >

jQuery(一、基本选择器)

2017-06-07

jQuery(一、基本选择器)目标:1、了解jQuery有哪些选择器。2、熟悉基本选择器、层级选择器和属性选择器的使用。

jQuery(一、基本选择器)

目标:

1、了解jQuery有哪些选择器

2、熟悉基本选择器、层级选择器和属性选择器的使用

大纲:

一、jQuery选择器简介

1)jQuery是一个以css选择器为核心的JavaScript库

2)jQuery支持css规范1到3的几乎所有选择器

3)它降低了学习的门槛

4)编码时。我们往往需要首先使用选择器选择元素,然后再对其进行操作

二、jQuery选择器的分类

1)基本选择器

2)层级选择器

3)属性选择器

4)过滤选择器

5)表单选择器

1、 基本选择器

1)#id 这就是id选择器,举例:

$(‘#aa’)它将会返回id值为aa的第一个元素的jQuery对象

注意:如果文档中包含多个id值为aa的元素,它也只会返回第一个

2)element这就是元素选择器,举例:

$(‘button’)它将会返回文档中所有button元素的jQuery对象

3).class这就是类选择器,举例:

$(‘.cc’)它将会返回所有的class属性值为cc的元素jQuery对象

4)* 这就是通配选择器,举例:

$(‘*’)它将返回文档中所有的元素

5)selector1, selector1, selectorN 这就是群组选择器,举例:

$(‘#aa,.cc’)它将返回id值为aa的第一元素,并且会返回class属性值为cc的所有元素

2、层级选择器

1) ancestor descendant后代选择器,例如:

$(‘.sports.football’)它将返回class为sports的元素后代中所有的class为football的元素

2)Parent>child子选择器,例如:

$(‘.sports>li’)它将返回class为sports的子元素中所有的li元素

3)prev + next紧接下一个元素选择器,例如:

$(‘.sports+li’)它将返回class为sports的紧接着的下一个li元素

5)prev~siblings 选择以后的所有兄弟元素,例如:

$(‘.sports~li’)它将返回class为sports的兄弟元素中的li元素

3、属性选择器

1)[attribute] 选取包含某个属性的元素,例如:

$(‘[type]’)它将返回包含属性type的所有元素

2)[attribute] 选取属性值为特定值的元素,例如:

$(‘[type=”ccc”]’)它将返回属性type的值为ccc的所有元素

3)[attribute!=value] 选取属性值不为特定值的元素,例如:

$(‘[type !=“aaa”]’)它将返回属性type的值不为aaa的所有元素

4)[attribute^=value] 选取属性值以某个值开头的元素,例如:

$(‘[type^=“ccc”]’)它将返回属性type的值以cc开头的所有元素

5)[attribute$=value] 选取属性值以某个值结尾的元素,例如:

$(‘[type$=“ee”]’)它将返回属性type的值以ee结尾的所有元素

6)[attribute*=value] 选取属性值包含某个值的元素,例如:

$(‘[type*=“o”]’)它将返回属性type的值中包含o的所有元素

7)[attrSel1][attrSel2][attrSelN] 选取同时符合多个条件的元素,例如:

$(‘[class][type^=”c”]’) 它将返回有class属性,并且type属性值以c开头的所有元素

4、过滤选择器

A、基本过滤选择器

1):first 选取第一个元素,例如:

$(‘tr:first’)返回第一个tr元素

2):last选取最后一个元素,例如:

$(‘tr:last’)返回最后一个tr元素

3):not(selector)去除与给定选择器匹配的元素,例如:

$(‘tr:not(“.new”)’)首先选择所有的tr元素,然后取出其中包含class值为new的tr元素

4):even选取索引值为偶数的元素,例如:

$(‘tr:even’)返回索引值为偶数的所有tr元素

5):odd 选取索引值为奇数的元素,例如:

$(‘tr:odd’)返回索引值为奇数的所有tr元素

6):eq(index)选取索引值为特定值的元素,例如:

$(‘tr:eq(0)’)返回索引值为0的tr元素,实际上与$(‘tr:first’)效果一样

7):gt(index)选取索引值大于某个特定值的元素,例如:

$(‘tr:gt(1)’)返回索引值大于1的所有tr元素

8):lt(index)选取索引值小于某个特定值的所有元素, 例如:

$(‘tr:lt(1)’)返回索引值小于1的所有tr元素

9):header选择

~

标签,例如:

$(‘:header’)返回文档中

~

所有元素

10):animated选取执行的动画元素

11):focus选取当前获得焦点的元素

B、内容过滤选择器

1) :contains(text)选取包含某个特定文本的元素,例如:

$(‘td:contains(“日本”)’)返回文本中包含“日本”的td元素

2):empty选取不包含任何子元素或者文本的空元素,例如:$(‘:empty’)返回空元素

3):has(selector)选取包含选择器所匹配的元素的元素。例如:$(‘tr:has(“th”)’)返回包含th元素的tr元素

4):parent选取包含子元素或者文本的元素,例如:

$(‘:parent’)返回非空元素

C、可见性过滤选择器

1):hidden选取隐藏的元素,例如:

$(‘tr:hidden’)返回隐藏的tr元素

2):visible选取显示的元素,例如:

$(‘tr:visible)返回未隐藏的tr元素

D、子元素过滤选择器

1):nth-child选取特定位置的子元素,例如:

$(‘tr:nth-child(1)’)返回第一个子元素

注意:nth-child是jQuery中唯一一个从1开始计数的选择器

2):first-child选取每个父元素中的第一个子元素,例如:

$(‘tabletr:first-child’)返回每个table的第一个tr

3):last-child选取每个父元素的最后一个子元素,例如:

$(‘table tr:last-child’)返回每个table的最后一个tr

4):only-child如果元素是其父元素的唯一子元素,该元素将被返回,例如:

$(‘tr td:only-child’)返回具有唯一子元素的td

5、表单选择器

A、表单元素选择器

1):input 选取input、textarea、select和button元素

2):text选取所有的单行文本框

3):password选取所有的密码框

4):radio选取所有的单选按钮

5);checkbox选取所有的复选框

6):submit选取所有的提交按钮

7):image选取所有的图像域

8):reset选取所有的重置按钮

9):button选取所有的按钮

10):file选取所有的文件域

11):hidden选取所有的隐藏域

B、表单属性选择器

1):enabled选取所有的可用元素

2):disabled选取所有的不可用元素

3):checked选取所有的处于选中状态的单选框和复选框

4):selected选取所有的处于选中状态的option元素

//代码DEMO

<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
//$('table:first').css('color', 'red');
//$('tr:last').css('color', 'red');
//$('table:first tr:last').css('color', 'red');
//$('tr:not(".head")').css('color', 'red');
//$('tr:even').css('color', 'red');
//$('tr:odd').css('color', 'red');
//$('tr:eq(2)').css('color', 'red');
//$('tr:gt(2)').css('color', 'red');
$(':header').css('color', 'red');
});
});
</script>



旅游服务的商品列表


旅游服务的商品列表
商品名 价格 已销售
泰国普吉岛一周游 5000¥ 1000
泰国曼谷一周游 4000¥ 2000
柬埔寨一周游 4000¥ 2350
新加坡一周游 1000¥ 10
马来西亚一周游 2000¥ 100

旅游纪念品的商品列表

旅游纪念品的商品列表
商品名 价格 已销售
中国国旗 2¥ 1000
泰国雕塑 200¥ 500
钓鱼岛勋章 10¥ 50000
马来西亚国徽 5¥ 500
相关文章
最新文章
热点推荐