返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
jquery教程当前位置:首页 > HTML教程 > jquery教程 > 正文

jQuery基础教程学习笔记(一)选择器

发布时间:2017-05-22 11:22:14   来源:   点击:
jQuery选择器之id选择器

$( "#id" )

jQuery选择器之类选择器

$( ".class" )

jQuery选择器之元素选择器

$( "element" ) 例:$("p")

jQuery选择器之全选择器(*选择器)

$( "*" ) 选中全部元素

jQuery选择器之层级选择器

$( "parent > child" )子选择器 如$("div > p")表示选择div下的第一层所有的p元素。

$("prev + next")相邻兄弟选择器 如$("div + p")表示选择div同层的左右相邻的p节点

$("ancestor descendant")后代选择器 如$("div p")表示选择div下的p节点(不管中间隔多少层)

$("prev ~ siblings")一般兄弟选择器 如$("div ~ p")表示选择div同层的p节点

jQuery基本选择器

$(":first") 匹配第一个元素 例:$(".div:first").css("color", "#CD00CD");

$(":last") 匹配最后一个元素 例:$(".div:last").css("color", "#CD00CD");

$(":not(selecter)") 过滤选择器 不包含 例:$("input:not(:checked) + p").css("background-color", "#CD00CD")

$(":eq(index)") 匹配索引值为index的元素 例:$(".arron:qt(2)").css("border", "3px groove blue")

$(":gt(index)")匹配大于index的选择器 例:$(".arron:gt(3)")..css("border", "3px groove blue")

$(":even") 选择偶数 从0开始 例:$(".div:even").css("border", "3px groove red");

$(":odd") 选择奇数

$(":lt(index)")选择小于index的元素

$(":header") 选择所有标题元素 H1、H2、H3等

$(":lang(language)")选择指定语言

$(":root") 选择全部根元素

$(":animated") 选择所有正在执行的动画

jQuery内容选择器

$(":contains(text)") 选择所有指定文本的元素

$(":parent") 选择所有含有子元素或者文本元素

$(":empty") 选择所有没有子元素的元素(包含文本节点)

$(":has(selector)")选择元素中至少包含指定选择器的元素

注意:

1、:contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素

2、如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。

3、:parent与:empty是相反的,两者所涉及的子元素,包括文本节点

例:$(".div:contains(':contains')").css("color", "#CD00CD"); /*查找所有class='div'中DOM元素中包含"contains"的元素节点*/

$(".div:has('span')").css("color", "blue"); /*查找所有class='div'中DOM元素中包含"span"的元素节点*/

$("a:parent").css("border", "3px groove blue"); /*选择所有包含子元素或者文本的a元素*/

jQuery选择器之可见性筛选选择器

$(":visible") 选择所有显示的元素 不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility

$(":hidden") 选择所有隐藏的元素

例:$("#div1:visible").css("border", "3px groove blue");

jQuery选择器之属性筛选选择器

$("[attribute|='value']") 选择指定属性值为指定字符串或者以该字符串开头的(以_链接的)

$("[attribute*='value']") 选择指定的具有包含指定子字符串的元素

$("[attribute~='value']") 选择指定属性用空格分割的属性中包含一个给定元素

$("[attribute='value']") 选择指定属性的元素

$("[attribute!='value']") 选择不存在指定属性 或者指定属性不等于给定的值的元素

$("[attribute^='value']") 选择指定属性是以给定的字符串开头的元素

$("[attribute$='value']") 选择指定属性是以给定的字符串结尾的元素

$("[attribute]") 选择所有具有指定属性的元素

$("[attributeFilter1][attributeFilterN]") 选择匹配所有指定属性的元素

例:$("div[name=p1]").css("border", "3px groove red");

$("div[p2]").css("border", "3px groove blue"); /*查找所有div中,有属性p2的div元素*/

$(".div[name^=toutiao']").css("border", "3px groove red"); //查找所有div中,属性name的值是用toutiao开头的

jQuery选择器之子元素筛选选择器

$(":first-child") 选择所有父级元素下的第一个子元素

$(":last-child") 选择所有父级元素下的最后一个元素

$(":only-child") 选择指定元素为其父元素的唯一元素的

$(":nth-child(n)") 选择他们所有父元素的第n个子元素 (从1开始)

$(":nth-last-child(n)")选择所有他们父元素的第n个子元素,从最后开始

注意:

1、:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2、:last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素

3、如果子元素只有一个的话,:first-child与:last-child是同一个

4、 :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配

5、jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的

6、nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

例: $(".first-div a:first-child").css("color", "#CD00CD"); //查找class="first-div"下的第一个a元素

$(".last-div a:nth-child(2)").css("color", "#CD00CD"); //查找class="last-div"下的第二个a元素

jQuery选择器之表单元素选择器

$(":input") 选择所有input textaera select button

$(":text") 匹配所有文本框

$(":password") 匹配密码框

$(":radio") 匹配单选按钮

$(":checkbox") 匹配复选框

$(":sumbit") 匹配提交按钮

$(":image") 匹配所有图像域

$(":reset") 匹配所有重置按钮

$(":button") 匹配所有按钮

$(":file") 匹配所有文件域

除了input筛选选择器 其他的都可以$(':password') == $('[type=password]')这种

例:$(":input").css("border", "1px groove red"); //查找所有 input, textarea, select 和 button 元素

$("input:text").css("background", "#A2CD5A"); ////匹配所有input元素中类型为text的input元素

注意:$("input")只选择input标签,$(":input")是伪类选择,不单单是input,还包括textarea和select,button.

$("input:checkbox").attr('checked','true') //匹配所有input元素中的复选按钮,并选中

jQuery选择器之表单对象属性筛选选择器

$(":enabled") 选取可用的表单元素

$(":disabled") 选取不可用表单元素

$(":checked") 选取被选中的input

$(":selected") 选取被选中的option

注意

1、选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器

2、在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素

例: $("input:enabled").css("border", "2px groove red"); //查找所有input所有可用的(未被禁用的元素)input元素

$("input:checked").removeAttr('checked') //查找所有input所有勾选的元素(单选框,复选框)
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814