jQuery1-选择器、筛选、串联、文档处理、动画_jq选择器串联函数-优快云博客

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/106695596

选择器**************************
$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
$(":empty")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>

      类库（方法的集合） 查询DOM节点，进行DOM操作  write less,do more
      console.log($("div").text()); //取不到值
      
      let oDiv = document.querySelectorAll("div")[0]
      console.log(oDiv.innerText); //报错
      
      原因：先执行的js代码
      解决方式：原生js window.onload  jQuery jQuery(document).ready()
      区别：onload 页面和资源 加载完毕  ready html结构解析完毕

      jQuery(document).ready(function () {
        console.log($("div").text());
      });

      $(function () {
        console.log($("div").text());
      });
      console.log($ === jQuery); true
    </script>
  </head>
  <body>
    <div>abcd</div>
  </body>
</html>

一.i选择器

<body>
    <div>
      div1
      <p>
        <span></span>
      </p>
      <p>
        <span></span>
      </p>
      <span></span>
    </div>
    <div class="test">div2<span></span></div>
    <p class="test">duanluo</p>
    <div id="box">box</div>
    <script>
      $(function () {
        //从所有的div中选取所有的后代span
        console.log($("div span").length);       // 4
        //
        console.log($("div > span").length);     // 2
        console.log($("div+*").length);          // 3
        console.log($("div+*"));                 // jQuery.fn.init(3) 0: div.test ,1: p.test ,2: script  ....
        $("div+p").css("color", "red");          // 第22行代码文字变红
        console.log($("div~div").length);        // 2  div后面有两个div兄弟

        console.log($("div"), $("div").length);  // {div, div.test, div#box ....}  和   3
        console.log($(".test"));                 // {div.test, p.test}
        console.log($("#box"));                  // {div#box} 
        console.log($("*").length, $("*"));      // 20 和 {html, head, meta, meta, meta, title, script, body, div, p, span, p, span, span, div.test, span, p.test, div#box, script, script}
        console.log($("p,div"));                 // {div, p, p, div.test, p.test, div#box, ...}
      });
    </script>
  </body>

一.ii选择器

<body>
    <h1>标题</h1>
    <p>段落1</p>
    <input type="radio" />
    <textarea></textarea>
    <div>
      <p class="atest">段落2</p>
    </div>
    <div class="test">div</div>
    <div></div>


    <script src="jquery.js"></script>
    <script>
      $(function () {
        console.log($("div:nth-child(2n)"));        //  0: div.test
        console.log($("div:nth-of-type(1)"));       //  0: div
        console.log($(":input"));                   //  0: input    1: textarea
        console.log($(":radio"));                   //  0: input

         console.log($("[class]"));                 //  0: p.atest  1: div.test
        console.log($("[class^=a]"));               //  0: p.atest

        console.log($("div:first")); //取到所有div中第一个   0: div
        console.log($("div:first-child")); //取到div，并且是作为第一个子元素存在
        console.log($("div:not(.test)"));           //    0: div    1: div
        console.log($("div:even")); //取到索引为偶数的一个jquery对象集合
        $("p:eq(1)").text("duanluo1");
        console.log($(":header"));                  //  0: h1
        console.log($("p:contains('1')"));          //  0: p    1: p.atest
        console.log($("div:empty"));
        console.log($("div:has(p)"));
        console.log($("div:parent"));               //  0: div   1: div.test
      });
    </script>
  </body>

二.i筛选

<body>
    <div>
      div1
      <p>11</p>
    </div>
    <div class="test">div2</div>
    <div>div3</div>
    
    <script src="jquery.js"></script>
    <script>
      $(function () {
        //过滤  从现有集合中找到满足条件的jquery对象
        //查找 以现有集合为基础，找其他的jquery对象
        //eq(index) 通过index选择具体的jQuery对象
        /* $("div").eq(2).css("color", "red");
        $("div").first().css("color", "red"); */
        //hasClass()返回一个布尔值
        //console.log($("div").hasClass("test"));
        //找到有test这个类名的div
        //console.log($("div").filter(".test"));

        //console.log($("p").parent().is("div"));

        $("div").map(function () {
          console.log(this);
          console.log($(this).html());
        });

        console.log($("div").has("p"));

        console.log($("div").not(".test"));

        console.log($("div").not($(".test")[0]));

        //jQuery对象的方法和原生DOM对象不能混用
        var oDiv = document.querySelectorAll(".test")[0]; //DOM对象
        console.log(oDiv);
        var $oDiv = $(".test");
        console.log($oDiv);
        //text() html()

        $oDiv.text("aaa");
        //oDiv.text("bbb"); error 用混了
        oDiv.innerText = "bbb";
        //将jquery对象转成DOM对象的方式
        //$oDiv[0].innerText = "ccc";
        $oDiv.get(0).innerText = "ddd";
        //将DOM对象转成jquery对象的方式
        $(oDiv).text("eee");
      });
    </script>
  </body>

二.ii筛选

<body>
    <div>
      <p>
        duanluo
        <span>span</span>
      </p>
      <span>span</span>
    </div>
    <p>段落1</p>
    <p>段落2</p>
    <span>span</span>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        console.log($("div").children().length); //子元素
        console.log($("div").find("span").length); //后代
        console.log($("div").next());
        console.log($("div").nextAll());
        console.log($("div").nextUntil("span"));
        console.log($("div").parent());
        console.log($("div").parents());

        $("li").click(function () {
          $(this)
            .css("background", "red")
            .siblings()
            .css("background", "green");
        });
      });
    </script>
  </body>

三.串联

<body>
    <div>div</div>
    <p>duanluo</p>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        //add 先取到了div这个集合[div] 然后在div集合基础上加上p [div,p]
        // $("div").css("color", "red").add("p").css("background", "yellow");
        //addBack() 当前集合加上了之前的集合
        // $("div").next().html("aaa").addBack().css("background", "yellow");
        //end()  
        $("div").next().end().css("color", "red");   // div 变红
      });
    </script>
  </body>

四.文档处理

<body>
    <div>
      <p>duanluo</p>
      <span>span</span>
    </div>
    <span>span</span>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        $("div").append("<span>"); //新创建一个span，放到div内部的尾部
        $("div").append($("span"));//获取已有span，放到div内部的尾部

        $("<span>").appendTo("div");
        $("<span>").appendTo($("div"));
        $("div").after("<span>");
        $("<span>").insertBefore("div");
        $("span").wrap("<p>");  给span外面套一个p
        $("p").unwrap();
        $("span").wrapAll("<p>");
        $("span").wrapInner("<strong>");
        $("div").click(function () {
          console.log("aa");
        });

        var $div = $("div").remove();
        var $div = $("div").detach();
        $("body").append($div);
      });
    </script>
  </body>

五.动画

<style>
      div {
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
  </head>
  <body>
    <input type="button" value="test" />

    <div></div>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        $("input").click(function () {
          $("div").hide(2000);
          $("div").slideUp();
          $("div").slideToggle();
          $("div").fadeToggle();
          $("div").animate({ width: "300px", height: "300px" }, 5000);
          $("div").animate({ width: "300px" }).animate({ height: "300px" });
          $("div").animate({ width: "300px" });
          $("div").animate({ height: "300px" });
        });
      });
    </script>
  </body>