jquery的基础知识复习(基础选择器，属性选择器，层级选择器)

Posted 2020-10-10 八流程序员

　　

　　1.基础选择器

　　　　　　　　

　　　　　　id选择器： $("#id"), 样式选择器：$(".className"),元素选择器：$("div"),$("*") 选择页面所有的元素
　　　　　　
　　　　　　同时使用两种选择器例如：id和元素 $("#id,div");,这里可以加上更多例如再加上一个样式的$("#id,div，.className");，  
　　　　

     2.属性选择器

    $("div[title]") 选择含有title的div元素;$("div[title]") 选择含有title=test的div元素 $("div[title=test]") ; 选择title属性不等于test的div元素：$("div[title!=test]"),这种选择方式会将没有title属性的div也选择上。
选择以title为te开始的div元素:$("div[title^=te]"),选择title以est结尾的div元素：$("div[title$=est]");选择title属性含有 es的div元素：$("div[title*=es]")
　　
　　多选择器复合使用： 选择隐藏域,含有title的属性的div,id为one,class为one的元素 $("input[type=hidden],div[title,#one,.one]") ，这样取的对象结果为并集。

    3.层级选择器

　　　　　　A.选择body下的所有的div元素

　　　　　　　　$("body div"); 请注意，这样选择的是body下的所有的子孙元素，例如div中还存在其他的div也会被选中。

　　　　　　B.选择body下的子div

　　　　　　　　$("body>div"); 请注意，这样选中的body的直接的子元素，也就是这样选择的是不包含孙元素div，区别就是加上了尖括号去掉了空格而已。

　　　　　　C.选择在laber元素下一个的的input元素，

　　　　　　　　$("laber+input")； 请注意，这样选择时，如果在htlm中存在两个laber元素，并且两个laber元素下面紧接着的都是input元素那么，这是会选中两个input元素。

　　　　　　D.选择和form元素同辈的后面的所有兄弟元素

　　　　　　　　$("form~div")；这样选择的就是与form元素同级别的后面的所有div元素。

　　　　　　E.选择与id为test的元素同级别的所有的div元素

　　　　　　　　$("#test").parent().children("div");  注意：先获取该元素的父元素再获取该元素的所有的子元素中的div元素。