• JQuery 04 选择器2


     示例 8 : 

    属性

    $(selector[attribute]) 满足选择器条件的有某属性的元素
    $(selector[attribute=value]) 满足选择器条件的属性等于value的元素
    $(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
    $(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
    $(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
    $(selector[attribute*=value]) 满足选择器条件的属性包含value的元素


    注: 一般不要使用[class=className] 而应该使用.className
    因为使用$("[class='className']") .toggleClass("anotherClassName")
    会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
    而.className没有这个问题。

    <script src="https://how2j.cn/study/jquery.min.js"></script>
           
    <script>
    $(function(){
       $("#b1").click(function(){
          $("div[id]").toggleClass("border");
       });
       $("#b2").click(function(){
          $("div[id='pink']").toggleClass("border");
       });
       $("#b3").click(function(){
          $("div[id!='pink']").toggleClass("border");
       });
       $("#b4").click(function(){
          $("div[id^='p']").toggleClass("border");
       });
       $("#b5").click(function(){
          $("div[id$='k']").toggleClass("border");
       });
       $("#b6").click(function(){
          $("div[id*='ee']").toggleClass("border");
       });
     
    });
            
    </script>
      <button id="b1">给有id属性的div切换边框</button>
      <button id="b2">给id=pink的div切换边框</button>
      <button id="b3">给有id!=pink属性的div切换边框</button>
      <button id="b4">给有id以p开头的div切换边框</button>
      <button id="b5">给有id以k结尾的div切换边框</button>
      <button id="b6">给有id包含ee的div切换边框</button>
     
    <br>
    <br>
           
    <style>
    .pink{
       background-color:pink;
    }
    .green{
       background-color:green;
    }
    .border{
       border: 1px blue solid;
        
    }
     
    button{
       margin-top:10px;
       display:block;
    }
     
    div{
      margin:10px;
    }
    </style>
            
    <div id="pink">
        id=pink的div
    </div>
          
    <div id="green">
      id=green的div
    </div>
          
    <div >
       没有id的div
    </div>
  • 相关阅读:
    笔记本连接蓝牙音箱声音异常
    fence安装中遇到的问题
    ssm整合关键
    第二章:数字系统
    第一章:计算器系统体系结构
    第二章:变量和基本类型
    第一章:开始
    第十九章:特殊工具与技术
    第十八章: 用于大型程序的工具
    第十七章:标准库特殊设施
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13415080.html
Copyright © 2020-2023  润新知