• JQuery 选择器反向选择


    JQuery选择器

    Input元素中 对name属性进行筛选

    Example From Here

    $( "input[name!='newsletter']" )

    $("input").not("[name=newsletter]")

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>attributeNotEqual demo</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <div>
      <input type="radio" name="newsletter" value="Hot Fuzz">
      <span>name is newsletter</span>
    </div>
    <div>
      <input type="radio" value="Cold Fusion">
      <span>no name</span>
    </div>
    <div>
      <input type="radio" name="accept" value="Evil Plans">
      <span>name is accept</span>
    </div>
     
    <script>
    $( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
    </script>
     
    </body>
    </html>
    

    image-20211102230352413

    选择属性取反操作

    选取form表单中,div元素id值不为a的子元素中的input

    $( "form div:not(#a) input" )

    $( "form div:not([id='a']) input" )

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>attributeNotEqual demo</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>
    
    <form class="">
        <div id="a" class="form-floating mb-3">
          <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">Email address</label>
        </div>
        <div id="b" class="form-floating mb-3">
          <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
          
    </form>
    
    <script>
    	$( "form div:not(#a) input" ).css("background-color","pink");
    </script>
     
    </body>
    </html>
    

    image-20211102231338241

    更多选择器用法请 看这里

  • 相关阅读:
    web性能优化
    9.1_the end
    8.28_the end
    1.获取元素绝对位置
    8.14_end
    JavaScript 函数用途
    JavaScirpt事件处理
    《JavaScript语言精粹》读书笔记
    《图解http协议》之HTTPs学习笔记
    Laya 1.x 按文件夹TS代码合并
  • 原文地址:https://www.cnblogs.com/whalefall541/p/15501748.html
Copyright © 2020-2023  润新知