jquery选择器学习

原创 2019-01-28 15:05:43 341
摘要:本章节讲到了jquery的六类选择器:基本选择器 层级选择器 顺序选择器 内容选择器 属性选择器与表单选择器。个人理解:其它几种选择器是在基本选择器后加修饰进行的操作,主要用到了 :号以及[] 括号,大量用到了各种运算符来限定条件 (这里最糊涂的就是这个空格符了,还根本没莫清规律!)。每一类选择器都讲了多种方法基本选择器讲到了:$('#id名')根据元素ID进行选择$('.

本章节讲到了jquery的六类选择器:基本选择器 层级选择器 顺序选择器 内容选择器 属性选择器与表单选择器。


个人理解:其它几种选择器是在基本选择器后加修饰进行的操作,主要用到了 :号以及[] 括号,大量用到了各种运算符来限定条件 (这里最糊涂的就是这个空格符了,还根本没莫清规律!)。



每一类选择器都讲了多种方法


基本选择器讲到了:


$('#id名')根据元素ID进行选择

$('.class')根据元素class进行选择

$('document')根据元素本身标签进行选择

$('*')通配全选择


层级选择器讲了:


$('ul > li') 根据父子关系进行选择

$('div ul il') 根据document文挡流的顺序选择后代元素

$('ul + span') 选择两个平级相邻的元素

$('div ~ li') 选择div元素document文挡流后面所有的li元素


顺序选择器讲了:


$(':first')选择某个元素的第一个

$(':last')选择某个元素的最后一个

$(':gt(x)')选择顺序大于X值的元素

$(':lt(x)')选择顺序小于X值的元素

$(':eq(x)')选择顺序等于X值的元素

$(':add')根据元素顺序的奇数选定

$(':even')根据元素顺序的偶数选定


内容选择器讲到了:(个人理解:内容选择器主要是对内容的筛选进行的,类似搜索或正则匹配)


$(':contains(内容)') 选择元素内容与contains(内容)对应的元素

$(':has(p)') 选择元素中含有HAS(P)的元素(个人理解:contains是匹配选择元素是内容,has是匹配选择的是标签)

$('X:empyty') 选择为空的X元素,不含有内容或标签

$('x:parment') 选择不为空的X元素,不管是里有内容或是标签都算数


属性选择器讲了:(个人理解:属性选择器大量用到了逻辑运算来进行元素属性的匹配选择)


$('[name]') 选择元素设置了name属性的所有元素

$('[name=username]') 选择元素设置name=username属性的元素

$('[name != username ]') 选择元素设置name不等于username属性的所有元素

$('[type ^= x]') 选择元素设置type属性 值以X开头的所有元素

$('[type $= xx]')选择元素设置type属性 值以Xx结尾的所有元素

$('[type *= xx]')选择元素设置type属性 值包含有XX的所有元素

$('type[1] name[1] id[1]') 复合选择器,选择设置有多个属性和值相等的所有元素


表单选择器讲了:


$(':enabled') 选择表单中激活(或是可用)的元素

$(':disabled') 选择表单中设置不可用属性的元素

$(':selected') 选择表单中设置了选中属性的元素,主要是针对下拉框

$(':checked') 选择表单中设置了选中属性的元素,主要是针对多选框(另外老师还说selected也算是checked的一种)



批改老师:韦小宝批改时间:2019-01-28 15:33:55
老师总结:总结的很不错 选择器还是很好掌握的 课后多练习很快就可以掌握了

发布手记

热门词条