• 《锋利的Jquery第二版》读书笔记 第二章


    本章节主要Jquery选择器

    jquery选择器与css选择器十分相似,特别需要注意的是

    <script type="text/javascript">
        document.getElementById("tt").style.color="red"/*若没有"tt"元素,浏览器者会报错*/
    </script>
    
    
    
    <script type="text/javascript">
        if(document.getElementById("tt"){
            document.getElementById("tt").style.color="red";
    )
    </script>

    $("#tt")获取的永远是对象,即使没有此元素也不会报错,同理

    if($("#tt")){
    //代码
    }
    
    
    对
    
    if($("#tt").length>0){
    //代码
    }
    
    
    或者转换为DOM对象也是对的
    
    if($("#tt")[0]){
    //代码
    }

    层次选择器

    $("ancestor descendant")  空格表示选取祖先元素里所有的此类后代元素;

    $("parent>child") 大于号表示选取父元素下的子元素(相隔一代);

    $("prev+next")加号表示选取紧接在此元素后面的下一个同辈元素,可使用next()方法代替如

                      $(".one+div");等价于$(".one").next("div");

    <li><span>Name</span><inputtype="text"/><inputtype="text"/></li>
     $("span+input").所有<span>后面的文本框

    $("prev~siblings")~表示选取此元素后面的所有同辈元素,可使用nextAll()方法代替如

                     $("#prev~div");等价于$("#prev").nextAll("div");

    过滤选择器

    1.基本过滤选择器

    :first选取第一个元素,$("div:first");

    :last选取最后一个元素;

    :not(selector)去除所有给定选择器匹配的元素;

    :even选取索引是偶数的所有元素,索引从0开始;

    :odd选取索引是奇数的所有元素,索引从0开始;

    :eq(index)选取索引等于index的元素,index从0开始;(单个元素)

    :gt(index)选取索引大于index的元素,index从0开始;(不包括index本身)

    :lt(index)选取索引小于index的元素,index从0开始;(不包括index本身)

    :header选取所有标题元素,h1、h2等;

    :animated选取当前正在执行动画的所有元素,$("div:animated")选取正在执行动画的<div>元素

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

    2.内容过滤器

    :contains(text)选取含有文本内容为"text"的元素,$("div:contains('我')")

    :empty选取不包含子元素或者文本的空元素,$("div:empty")

    :has(selector)选取含有选择器所匹配的元素的元素,$("div:has(p)"),选取含有<p>元素的<div>元素

    :parent选取含有子元素或者文本的元素$("div:parent")

    3.可见性过滤选择器

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

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

    4.属性过滤选择器

    [attribute]选取拥有此属性的元素,$("div[id]")选取拥有id这个属性的元素

    [attribute=value]选取属性值为value的元素,$("div[title=test]")选取属性title为"test"的<div>元素

    [attribute!=value]选取属性值不等于value的元素,同上相反,没有属性title的<div>也会被选取

    [attribute^=value]选取属性值以value开头的元素,类似第二条

    [attribute$=value]选取属性值以value结束的元素,类似第二条

    [attribute*=value]选取属性的值含有value的元素,类似第二条

    [attribute|=value]选取属性等于给定串或以该字符串为前缀(有"-")的元素,$("div[title|='en']")选取title为en或以en为前缀

    [attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素,$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的元素

    [attribute1][attribute2][attributeN],复合属性选择器,$("div[id][title$='test']")选取拥有id并且title以"test"结束的<div>元素

    5.子元素过滤选择器(注意:此类过滤选择器所选取的均为集合元素)

    :nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

    :first-child选取每个父元素的第一个子元素$("ul li:first-child")

    :last-child选取每个父元素的最后一个子元素

    :only-child如果某个元素是它父元素中唯一的子元素,那么将会被匹配;如果父元素中含有其他元素,则不会被匹配,

                                   $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素

    6.表单对象属性过滤选择器

    :enabled选取所有可用元素$("#form1:enabled")

    :disabled选取所有不可用元素$("#form2:disabled")(设置过disabled="disabled")

    :checked选取所有被选中的元素(单选框,复选框)$("input:checked");选取所有被选中的<input>元素

    :selected选取所有被选中的选项元素(下拉列表)$("select option:selected");选取所有被选中的选项元素

    表单选择器

    :input选取所有的<input>、<textarea>、<select>和<button>元素,$(":input")语法下同

    :text选取所有的单行文本框

    :password选取所有的密码框

    :radio选取所有的单选框

    :checkbox选取所有的多选框

    :submit选取所有的提交按钮

    :image选取所有的图像按钮

    :reset选取所有的重置按钮

    :button选取所有的按钮

    :file选取所有的上传域

    :hidden选取所有的不可见元素

    选择器中的注意事项

    选择器中含有"."、"#"、"("或"]"等特殊字符需要使用转义符,$("#id\#b")  id值为"id#b"

    在jQuery1.3.1版本不需要在属性前添加@符号

    空格使用也尤为重要,如var $t_a=(".test :hidden")选取class为"test"元素里面的隐藏元素,

                                 var $t_a=(".test:hidden")选取隐藏的class为"test"的元素

  • 相关阅读:
    滚动条滚动方向
    阶乘函数-尾递归
    返回顶部
    CommonJS
    vuessr
    随机字符串
    indexedDB
    深层次选择器
    Vue3.0简单替代Vuex
    shell 学习笔记
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3538543.html
Copyright © 2020-2023  润新知