脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery(一、基本选择器),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
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选取所有的复选框
7):image选取所有的图像域
8):reset选取所有的重置按钮
9):button选取所有的按钮
10):file选取所有的文件域
11):hidden选取所有的隐藏域
B、表单属性选择器
1):enabled选取所有的可用元素
2):disabled选取所有的不可用元素
3):checked选取所有的处于选中状态的单选框和复选框
4):selected选取所有的处于选中状态的option元素
//代码DEMO
商品名 | 价格 | 已销售 |
---|---|---|
泰国普吉岛一周游 | 5000¥ | 1000 |
泰国曼谷一周游 | 4000¥ | 2000 |
柬埔寨一周游 | 4000¥ | 2350 |
新加坡一周游 | 1000¥ | 10 |
马来西亚一周游 | 2000¥ | 100 |
商品名 | 价格 | 已销售 |
---|---|---|
中国国旗 | 2¥ | 1000 |
泰国雕塑 | 200¥ | 500 |
钓鱼岛勋章 | 10¥ | 50000 |
马来西亚国徽 | 5¥ | 500 |
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery(一、基本选择器)全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery(一、基本选择器)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。