jquery-选择器

Posted 2020-09-28 jinsuo

var $cr=$("#cr");   jquery 对象

var cr=$cr[0]  ;    Dom对象

var cr=$cr.get(0)  DOM对象获取

if(cr.checked){}  DOM方式判断  ；

if($cr.is(":checked")){}   jQuery方式判断

 

 

jquery和其他库的冲突：

jquery库在其他库之后导入：

jQuery.noConflict();  将变量$的控制权移交给其他库  方法一

var $j=jQuery.noConflict();  自定义一个快捷方式  之后使用jQuery 利用自定义快捷方式 $j(‘#box‘)

$(‘#box‘)  $用作其他js库的使用

jquery库在其他库之后前导入：

jquery直接使用  无需调用 jQuery.noConflict () 函数

 

用jquery 检查某个元素在网页上是否存在时 ：if($(‘#box‘)){}  错误；而是 if($(‘#box‘).length>0){} 正确；  或者if($(‘#box‘)[0]){}  转化成DOM对象  正确

 

jquery 选择器：

基本选择器：

#id 选择器

.class  类选择器

element  标签元素选择器

*      通配符选择器

selector1, selector2,selector3  群组选择器

 

层次选择器：

$("div span")  选取div里的所有span（后代）元素

$("div >span")   选取div元素下的元素名是span的子元素

$(".box+div")  选去 class为box 的下一个div同辈元素    等于   $(".box").next("div")

$("#box~div")  选取id为box的元素后面的所有div同辈元素  等于  $("#box").nextAll("div")    注：$("#box").siblings("div")  选取的是所有  同辈节点的div  前后位置无关

 

过滤选择器：

 

基本过滤选择器：

$("div:first ")   选取所有div元素中的第一个div元素

$("div:last")   选取所有div元素中的最后一个div元素

$("input:not(.myclass)")  选取class不是myclass的  input元素

$("input:even")  选取索引是偶数的input元素

$("input:odd")  选取索引是奇数的input元素

$("input:eq(1)")  选取索引等于1的input元素

$("input:gt(1)")  选取索引大于1的input元素

$("input:lt(1)")  选取索引小于1的input元素

$(":header")  选取索网页中所有的  h1  h2 h3....

$("div:animated")  选取正在执行动画的div元素

$(":focus")   选取当前获取焦点的元素

 

内容过滤选择器：

$("div:contains(‘我‘)")   选取含有文本  “我”  的div元素

$("div:empty")   选取不包含子元素（包括文本元素）的div空元素

$("div:has(p)")  选取含有p元素的div元素

$("div:parent")  选取拥有 子元素（包括文本元素）的 div元素

 

可见性过滤选择器：

$(":hidden")   选取所有不可见的元素

$("div:visible")   选取所有可见的div元素 

 

属性过滤选择器：

$("div[id]") 选取拥有属性id的元素 

$("div[title=test]")  选取属性title为 test的div元素

$("div[title!=test]") 选取属性title不等于test的 div元素  注：没有属性title的div元素也会被选取

$("div[title^=test]")   选取属性title以test开始的div元素

$("div[title$=test]")   选取属性title以test结束的div元素

$("div[title*=test]")   选取属性title含有test的div元素

$("div[title|=en]") 选取属性title等于en或者以en为前缀的元素（该字符串后跟一个连字符‘—’）

$("div[title~=‘uk‘]")  选取属性title用空格分隔的值中包含字符uk的元素

$("div[id][title$=‘test‘]") 选取拥有属性ID，并且属性title以test结束的div元素

子元素过滤选择器

:nth-child(index/even/odd/equetion)     index从1 算起 ；     ：eq(index)  只匹配一个元素 index从0算起

例：

:nth-child(even)  索引值是偶数的元素

:nth-child(odd)    索引值是奇数的元素

:nth-child(2)   索引值等于2的元素

:nth-child(3n)  索引值是3的倍数的元素

:nth-child(3n+1)  索引值是  3n+1的元素

表单对象属性过滤选择器：

$("#form1 :enabled")  选取id为form1 的表单内的所有可用元素

$("#form1 :disabled")  选取id为form1 的表单内的所有不可用元素

$("input:checked")   选取所有被选中的input元素

$("select option:selected")   选取所有被选中的选项元素

 

表单选择器：

$(":input")  选取所有input, textarea select button 元素

$(":text")   选取所有的单行文本框

$(":password")  选取所有的密码框

$(":radio")   选取所有的单选框

$("checkbox")    选取所有的复选框

$(":submit")    选取所有的提交按钮

$("image")   选取所有的图像按钮

$(":reset")   选取所有的重置按钮

$(":button")   选取所有的按钮

$(":file")   选取所有的上传域

$(":hidden")   选取所有的不可见元素