jQuery学习使用归纳总结

166 阅读1分钟

常将有时思无时,莫把无时当有时。——《增唐贤文》

「李南江」jQuery+Ajax从放弃到知根知底 - JQ基础+案例实战 B站视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* DOM样式结构使用情况 */
      div:nth-child(3) {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      div:nth-child(2) {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      div:nth-child(1) {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
    <!-- <script
      src="https://code.jquery.com/jquery-1.12.4.js"
      integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
      crossorigin="anonymous"
    ></script> -->
    <script src="./jquery-1.12.4.js"></script>
    <!-- 引入新的架构包来进行使用与$符号的冲突 -->
    <!-- <script src="./new$Project.js"></script> -->
    <script>
      // 原生JS的固定写法
      /**
       *
       *原生JS加载函数,是在页面全部加载完毕之后在调取回调函数
       原生js在使用函数时将会出现后边的函数

       覆盖(就是JS的单线程,后边的代码覆盖前边的代码)
       
       前边函数的情况
       */
      // window.onload = function (ev) {};

      // window.onload = function (ev) {};

      // // jQuery固定写法(实现现有jQuery方法)
      // /**
      //  * jQuery是在DOM加载完毕之后直接去调取回调函数
      //  jQuery在使用中后边的函数时不会覆盖前边的代码会一起使用的
      //  */

      // 核心函数

      // $(document).ready(function () {
      //   alert("Hello World");
      // });
      // // 第一种写法
      // $(document).ready(function () {
      //   alert("Hello World2");
      // });
      // // 第二种写法
      // jQuery(document).ready(function () {
      //   alert("Hello World");
      // });
      // // 第三种写法
      // $(function () {
      //   alert("Hello World2");
      // });
      // // 第四种写法(回调函数)
      // jQuery(function () {
      //   alert("Hello World2");
      // });

      // 在使用过程中如果时引入的两种架构包,同时使用同一个变量$符号就将会出现被重复覆盖变量的问题

      // 第一种方式就是在使用的时候直接释放$符号
      // jQuery.noConflict();

      // jQuery(function(){
      //   alert('你可以使用了jQuery');
      // })

      // 第二种方式就是使用现有的方法之后,自定义变量名称
      // var JVal = jQuery.noConflict();

      // JVal(function(){
      //   alert('你可以使用了jQuery');
      // })

      // $();jQery的核心函数

      // 接收一个函数使用
      //       $(function(){
      //         // 接受一个字符串
      //        var $box1=  $(".box1")
      //        var $box2 =  $(".box2")
      //       //  添加字符串代码片段就会包裹成一个jQuery的对象使用
      //        var $box2 =  $("<span>我是这个字符串对象</span>");
      //       //  添加一个DOM节点元素
      //       var jsP = document.getElementById("p")
      //       // 生成一包裹成jQuery的对象
      //       // jQuery是一个伪数组
      //       var $p = $(jsP)
      //       console.log($p)
      //       // forEach 不能遍历伪数组
      //         // 在循环为数组的时候一定要使用jQuery的each方法,使用forEach就会err对象不存在此方法
      // // 默认遍历谁返回值
      //      var res1 =  $.each($p,function(index,value){
      //         // 其中的函数的参数的值和forEach是相反的这个切记使用
      //         console.log(value, index)
      //         return value + index
      //       })
      //       // 参数与原生的map方法相同
      //       // 默认返回[]
      //       //return 种对参数进行使用
      //       var res2 =  $.map($p,function(value,index){
      //         return value + index
      //         // 其中的函数的参数的值和forEach是相反的这个切记使用
      //         console.log(value, index)
      //       })
      //       // 去除字符串两端的空格
      //       let strTrim = '    123   ';
      //       strTrim = $.trim(strTrim);
      //       // 判断变量是否是window(返回值布尔值)
      //       $.isWindow()
      //       $.isArray()
      //       // jQuery本质是一个函数
      //       $.isFunction(jQuery)

      //       })

      // 组织jQuery的执行,在使用的过程中jQuery核心函数执行的机制是当DOM加载完之后进行的,但是有一个些需求就是核心函数加载是在某些特定的函数后边执行的所有出现,holdReady
      // $.holdReady(true);
      // 在使用$(function(){}) holdReady 也是同样的邀求情况
      // $(document).ready(function () {
      //   alert("holdReady");
      // });
      // 内容选择器
      // 选择内容为空的内容元素
      // :empty
      // 有文本内容和子元素的Dom
      // :parent
      // 包含文本内容的元素找出来进行使用的
      // :contains(text)
      // :has(text)

      // attributes 属性中保存的所有内容都是属性节点

      // 原生js操作属性节点
      // window.onload = function(){
      //   // 需要等到DOM加载完成之后再调取使用js代码
      //   // 操作属性节点
      //   var span = document.getElementsByTagName('span')[0];
      //   // 设置属性节点
      //   span.setAttribute('name','wzs')
      //   // 获取属性节点
      //   console.log( span.getAttribute('name'))
      // }

      // 属性和属性节点的区别
      // 对象才能能够有属性,DOM结构才会有属性节点

      $(function () {
        // .attr()
        // 传入两个值将会是修改属性的value(设置属性的时候将会是找到多少个就会,设置多少个)

        // 传入一个参数将会获取属性的value(获取属性的时候将会只获取找到的第一个元素的属性)

        console.log($("span").attr("class", "box"));
        // 当设置的属性不存在的时候就会出现新的属性和value
        console.log($("span").attr("abc", "bcd"));
        // 删除 class 属性  空格之后将会存在的属性都会删除掉
        $("span").removeAttr("class name");
        // prop 特点和attr方法一致
        $("span").eq(0).prop("demo", "it666");
        $("span").eq(1).prop("demo", "76wenshu");

        // removeProp和removeAttr相似
        // 切换img的方法使用
        // prop 注意点
        // 不仅能操作属性也能操作属性节点,
        // 获取属性节点的时候返回的true/false的时候我们使用prop (checked、select、disbled),除了这些之外的我们使用attr()

        // addClass(class | fn)
        // 添加一个类,添加多个类中使用空格隔开
        // removeClass(class | fn)
        // 删除一个类,删除多个类中使用空格隔开
        // toggleClass(class | fn)
        // 切换一个类,有就删除没有就添加使用
      });
    </script>
  </head>
  <body>
    <!-- <div class="box1"></div>
    <div class="box2"></div>
    <div id="p"></div>
    <button>HoldEady</button>
    <span name='76wenshu'>76wenshu</span>
    <script>
      const buttonDom = document.getElementsByTagName("button")[0];
      buttonDom.onclick = function () {
        alert("onclick");
        // 放开jQuery函数的使用
        $.holdReady(false);
      };
    </script> -->
    <!-- <span class="span1" name="76wenshu0"></span>
    <span class="span2" name="76wenshu1"></span> -->
  </body>
</html>