JQuery基础

1、关于生产版（min版）和开发板

生产版

compressed, production jQuery 压缩后的。用于生产环境的版本

去掉了所有的不影响使用的代码和空格、换行等等

保证jQuery文件的最小

function some(username,password){

console.log(username,password);

}

function a(b,c){console.log(b,c)}
开发板

项目开发过程中使用的版本，代码是可读的
cdn引入
如果不想下载对应jquery的版本，可以使用cdn进行引入。

2、入口函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery入口函数</title>
  <script src="./jq/jquery-3.5.1.min.js"></script>
  <script>
    //方法一：
    $(function () {
      $("p").click(function(){
        $(this).hide();
      });
    })
    //方法二：
    // $(document).ready(function(){
    //   $("p").click(function(){
    //     $(this).hide();
    //   });
    // });
  </script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

3、JQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选择器</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      $(".btn").click(function(){
        $("p").hide();
      });
      $(".btnClass").click(function () {
        $(".divclass").hide();
      });
      $("#btnId").click(function () {
        $("#spanId").hide();
      })
    })
  </script>
</head>
<body>
<h2> jquery 选择器 </h2>
<p>元素选择器</p>
<button class="btn"> 点我测试元素选择器 </button>

<div class="divclass">.class选择器</div>
<button class="btnClass"> 点我测试class选择器 </button>

<span id="spanId">id选择器</span>
<button id="btnId"> 点我测试id选择器 </button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /* * */
/*      $("button").click(function () {
        $("*").hide();
      });*/

      /* this */
/*      $("button").click(function () {
        $(this).hide();
      });*/

      /* 选取 class 为 intro 的 <p> 元素 */
/*      $("button").click(function () {
        $("p.intro").hide();
      });*/

      /* 	选取第一个 <p> 元素 */
/*      $("button").click(function () {
        $("p:first").hide();
      });*/

      /* 选取第一个 <ul> 元素的第一个 <li> 元素 */
/*      $("button").click(function () {
        $("ul li:first").hide();
      });*/

      /* 选取每个 <ul> 元素的第一个 <li> 元素 */
/*      $("button").click(function () {
        $("ul li:first-child").hide();
      });*/

      /* 选取带有 href 属性的元素 */
/*      $("button").click(function () {
        $("[href]").hide();
      });*/

      /* 选取所有 target 属性值等于 "_blank" 的 <a> 元素 */
/*      $("button").click(function () {
        $("a[target='_blank']").hide();
      });*/

      /* 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 */
/*      $("button").click(function () {
        $("a[target!='_blank']").hide();
      });*/

      /* 选取所有 type="button" 的 <input> 元素 和 <button> 元素 */
/*      $("button").click(function () {
        $(":button").hide();
      });*/

      /* 选取偶数位置的 <tr> 元素 */
/*      $("button").click(function () {
        $("tr:even").hide();
      });*/

      /* 选取奇数位置的 <tr> 元素 */
      $("button").click(function () {
        $("tr:odd").hide();
      });
    })
  </script>
</head>
<body>
<h2>这是标题</h2>
<p class="intro">这是一个段落。</p>
<p>这是另外一个段落。</p>
<ul>
  <li>1.li</li>
  <li>2.li</li>
</ul>
<ul>
  <li>1.li - 另外</li>
  <li>2.li - 另外</li>
</ul>

<a href="www.baidu.com" target="_blank">百度-另一個頁面打開</a>
<hr>
<a target="_self">无href-当前页面打开</a>

<hr>

<input type="button" value="type=button">

<table border="1">
  <tr>
    <th>网站名</th>
    <th>网址</th>
  </tr>
  <tr>
    <td>Google</td>
    <td>http://www.google.com</td>
  </tr>
  <tr>
    <td>Baidu</td>
    <td>http://www.baidu.com</td>
  </tr>
  <tr>
    <td>菜鸟教程</td>
    <td>http://www.runoob.com</td>
  </tr>
  <tr>
    <td>淘宝</td>
    <td>http://www.taobao.com</td>
  </tr>
  <tr>
    <td>Facebook</td>
    <td>http://www.facebook.com</td>
  </tr>
</table>

<button>点我</button>


</body>
</html>

4、JQuery事件

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {

      /* click */
/*      $('#btn').click(function () {
        alert("click 点击")
      })*/

      /* dbclick */
/*      $('#btn').dblclick(function () {
        alert("dblclick 双击")
      })*/

      /*mouseenter*/
/*      $('#btn').mouseenter(function () {
        alert("mouseenter 鼠标来了")
      })*/

      /*mouseleave*/
/*      $('#btn').mouseleave(function () {
        alert("mouseleave 鼠标走了")
      })*/

      /*hover*/
      $("#btn").hover(function(){
        $("#btn").css("background-color","yellow");
      },function(){
        $("#btn").css("background-color","pink");
      });
    })
  </script>
</head>
<body>
  <button id="btn">点击</button>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>键盘事件</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /* keypress 键盘按下*/
      let i = 0;
      $("input").keypress(function(){
        $("span").text(i+=1);
      });
      /*keydown  键被按下的过程*/
      $("input").keydown(function(){
        $("input").css("background-color","yellow");
      });
      /*keyup - 键被松开*/
      $("input").keyup(function(){
        $("input").css("background-color","pink");
      });
    })
  </script>
</head>
<body>
请输入信息：<input type="text">
<p>按键的次数<span>0</span></p>
</body>
</html>

表单事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单事件</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      $('form').submit(function () {
        alert("我被提交了")
      });
      $('input').change(function () {
        alert("enter键和点击input框外被触发")
      });
      $("input").focus(function(){
        $("span").css("display","inline").fadeOut(2000);
      });
      $("input").blur(function(){
        $("span.pan").css("display","inline").fadeOut(2000);
      });
    })
  </script>
  <style>
    span
    {
      display:none;
    }
  </style>
</head>
<body>
<form action="">
  First name:
  <input type="text" name="FirstName" value="Mickey"><br>
  Last name:
  <input type="text" name="LastName" value="Mouse"><br>
  <input type="submit" value="提交">
</form>

<input type="text">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>

<input>
<span>请输入你的电话号码?</span>
<span class="pan">我是blur</span>
<p>点击输入框获取焦点。</p>


</body>
</html>

文档/窗口事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文档/窗口事件</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
  $(function () {
    $('img').load(function () {
      alert("图片加载了。。。")
    });
    let x=0;
    $("div").scroll(function(){
      $("span").text(x+=1);
    });
  })
  </script>
</head>
<body>
<img src="//www.runoob.com/wp-content/uploads/2015/11/rock600x400.jpg" alt="图片文字描述" width="304" height="236">
<p><b>注意:</b> 这个事件在不同浏览器效果有所不同，如果图片已缓存该事件则不会触发。</p>


<p>尝试滚动 div 中的滚动条</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！
  <br><br>
  菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>
<p>滚动了 <span>0</span> 次。</p>

</body>
</html>

5、Jquery核心函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery核心函数</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // $(); 就代表调用JQuery的核心函数

    //1.接收一个函数
    $(function () {
      alert("hello panghl")
      //2.接收一个字符串
      //2.1接收一个字符串选择器
      // 返回一个JQuery对象，对象保存了找到DOM元素
      var $box1 = $(".box1")
      var $box2 = $(".box2")
      console.log($box1);
      console.log($box2);
      //2.2接收一个代码片段
      // 返回一个JQuery对象，对象中保存了创建的DOM元素
      var $p = $("<p>我是段落</p>")
      console.log($p);
      $box1.append($p)
      //3.接收一个DOM元素
      //会被包装成一个JQuery对象返回给我们
      var span = document.getElementsByTagName("span")[0];
      // console.log(span);
      var $span = $(span);
      console.log($span);
    })
  </script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>我是span</span>
</body>
</html>

6、静态方法

静态方法和实例方法的理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>静态方法和实例方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    //1.定义一个类
    function AClass() {

    }

    //2.给这个类添加一个静态方法
    //直接添加给类的就是静态方法
    AClass.staticMethod = function () {
      alert("staticMethod");
    }
    //静态方法通过类名调用
    AClass.staticMethod();

    //3.给这个类添加一个实例方法
    AClass.prototype.instanceMethod = function () {
      alert("instanceMethod")
    }
    //实例方法通过类的实例调用
    var aclass = new AClass();
    aclass.instanceMethod();
  </script>
</head>
<body>

</body>
</html>

each方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>静态方法each方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var arr = [1,2,3,4,5]
    var obj = {0:1,1:3,2:4,3:6}
    /**
     * 原生js：
     * 第一个参数： 遍历到的元素
     * 第二个参数：当前遍历的到的索引
     * 注意点：
     * 原生的forEach方法只能遍历数组，不能遍历伪数组
     */
    arr.forEach(function (value, index) {
      console.log(index,value);
    })

    // 错误代码
    // obj.forEach(function (value,index) {
    //   console.log(index,value);
    // })

    //1.利用JQuery的each静态方法遍历数组
    /**
     * 第一个参数：当前遍历到的索引
     * 第二个参数：遍历到的元素
     * 注意点：
     * JQuery的each方法是可以遍历伪数组的
     */
    $.each(arr,function (index,value) {
      console.log(index,value)
    })
    $.each(obj,function (index,value) {
      console.log(index,value)
    })
  </script>
</head>
<body>

</body>
</html>

map方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-静态方法map方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var arr = [1, 2, 3, 4, 5]
    var obj = {0: 1, 1: 3, 2: 4, 3: 6}
    //1.利用原生js的map方法遍历
    /**
     * 第一个参数：当前遍历到的元素
     * 第二个参数：当前遍历到的索引
     * 第三个参数：当前被遍历的数组
     * 注意点：
     * 和原生的forEach一样，不能遍历伪数组
     */
    arr.map(function (value, index, array) {
      console.log(index, value,array)
    })
    // obj.map(function (value, index, array) {
    //   console.log(index, value,array)
    // })

    /**
     * 第一个参数：要遍历的数组
     * 第二个参数：每遍历一个元素之后执行的回调函数
     * 回调函数的参数：
     * 第一个参数：遍历到的元素
     * 第二个参数：遍历到的索引
     * 注意点：
     * 和JQuery中的each静态方法一样，map静态方法也可以遍历伪数组
     */
    // $.map(arr,function (value,index) {
    //   console.log(index,value)
    // })
    var res1 = $.map(arr,function (value,index) {
      console.log(index,value)
      return value + index;
    })

    var res2= $.each(arr,function (index,value) {
      console.log(index,value)
      return value + index;
    })
    /**
     * JQuery中的each静态方法和map静态方法的区别
     * each静态方法默认的返回值就是，遍历谁就返回谁
     * map静态方法默认的返回值是一个空数组
     *
     *
     * each 静态方法不支持在回调函数对遍历的数组进行处理
     * map 静态方法可以在回调函数中通过return对遍历数组进行处理，然后生成一个新的数组返回
     */
    console.log(res1);
    console.log(res2);
  </script>
</head>
<body>

</body>
</html>

JQuery中的其他静态方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-JQuery中的其他静态方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    /**
     * $.trim();
     * 作用： 去除字符串两端的空格
     * 参数：需要去除空格的字符串
     * 返回值：去除空格之后的字符串
     */
    var str = "   panghl   "
    var res = $.trim(str);
    console.log("---"+str+"---");
    console.log("---"+res+"---");

    //真数组
    var arr = [1, 2, 3, 4, 5]
    //伪数组
    var arrlike = {0: 1, 1: 3, 2: 4, 3: 6}
    //对象
    var obj = {name: 'panghl',age: 22}
    //函数
    var fn = function(){};
    // window对象
    var w = window;

    /**
     * $.isWindow();
     * 作用：判断传入的对象是否是window
     * 返回值： true/false
     *
     */
    var resw = $.isWindow(w);
    console.log("window=>",resw);
    /**
     * $.isWindow();
     * 作用：判断传入的对象是否是真数组
     * 返回值： true/false
     *
     */
    var resA = $.isArray(arr)
    console.log("array=>",resA);
    /**
     * $.isFunction();
     * 作用：判断传入的对象是否是真数组
     * 返回值： true/false
     * 注意点：JQuery框架本质上是一个函数
     * (function(window,undefined){
     * })(window);
     */
    var resFn=$.isFunction(jQuery);
    console.log(resFn);

  </script>
</head>
<body>

</body>
</html>

holdReady()方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-静态方法holdReady方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    //    $.holdReady(true); 作用: 暂停ready执行
    $.holdReady(true);
    $(document).ready(function () {
        alert("ready...")
    })
  </script>
</head>
<body>
<button>回复ready事件</button>
<script>
  var btn = document.getElementsByTagName("button")[0];
  btn.onclick = function () {
    $.holdReady(false)
  }
</script>
</body>
</html>

7、JQuery对象

内容选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07-JQuery内容选择器</title>
  <style>
    div{
      width: 50px;
      height: 100px;
      background-color: blue;
      margin-top: 20px;
    }
  </style>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          //编写jQuery相关代码

          // :empty  作用：找到既没有文本内容也没有子元素的指定元素
          var $div = $("div:empty")
          console.log("empty==>",$div);

          // :parent 作用：找到有文本内容或有子元素的指定元素
          var $pdiv = $("div:parent")
          console.log("parent==>",$pdiv);

          // :contains(text) 作用：找到包含指定文本内容的指定元素
          var $cdiv = $("div:contains('123')");
          console.log("contains==>",$cdiv);

          // :has(selector) 作用：找到包含指定子元素的指定元素
          var $hdiv = $("div:has('span')")
          console.log("has==>",$hdiv);
        })
      </script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08-属性和属性节点</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /**
       * 1.什么是属性？
       对象身上保存的变量就是属性
       * 2.如何操作属性？
       对象.属性名称 = 值;
       对象.属性名称;
       对象["属性名称"] = 值;
       对象["属性名称"];

       * 3.什么是属性节点？
       <span name="it666"></span>
       在编写HTML代码时，在HTML标签中添加的属性就是属性节点
       在浏览器中找到span这个DOM元素之后，展开看到的都是属性
       在attributes属性中保持的所有内容都是属性节点

       * 4.如何操作属性节点？
       DOM元素.setAttribute(属性名称,属性值);
       DOM元素.getAttribute(属性名称)

       * 5.属性和属性节点有什么区别?
        任何对象都有属性，但是只有DOM对象才有属性节点
       
       */
      /*function Person() {

      }
      var p = new Person();
      //p.name = 'panghl';
      p["name"] = "zs";
      //console.log(p.name);
      console.log(p["name"]);*/

      var span = document.getElementsByTagName("span")[0];
      span.setAttribute("name","panghl");
      console.log(span.getAttribute("name"))
    })
  </script>
</head>
<body>
<span name="it666"></span>
</body>
</html>

attr 方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09-jQuery的attr方法</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          /**
           * 1.attr(name|pro|key,val|fn)
            作用:获取或者设置属性节点的值
            可以传递一个参数，也可以传递两个参数
            如果传递一个参数，代表获取属性节点的值
            如果传递两个参数，代表设置属性节点的值

           注意点：
           如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
           如果是设置：找到多少个元素就会设置多少个元素
           如果是设置： 如果设置的属性节点不存在，那么系统会自动新增

           * 2.removeAttr(name)
           删除属性节点

           注意点：
           会删除所有找到元素指定的属性节点

           */
          // console.log($("span").attr("class"))
          // $("span").attr("class","box");

          $("span").removeAttr("class");

        })
      </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="panghl"></span>
</body>
</html>

prop方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10-jQuery的prop方法</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          /**
           * 1.prop方法
           特点和attr方法一致
           * 2.removeProp方法
           特点和removeAttr方法一致
           */
/*          $("span").eq(0).prop("demo","it666");
          $("span").eq(1).prop("demo","panghl");

          $("span").prop("demo") //it666

          $("span").removeProp("demo");*/

          /**
           注意点：
           prop方法不仅能够操作属性，他还能操作属性节点

           官方推荐在操作属性节点时，具有true和false两个属性的属性节点，如checked,selected 或者disabled 使用prop() ， 其他的使用 attr()
           */
          // console.log($("span").prop("class"));
          // $("span").prop("class","box");

          console.log($("input").prop("checked")); // true /false
          console.log($("input").attr("checked")); // checked / undefined
        })
      </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="panghl"></span>

<input type="checkbox" checked>
</body>
</html>

jQuery操作CSS类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12-jQuery操作类相关的方法</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .class1 {
      height: 50px;
      width: 50px;
      background-color: red;
    }
    .class2 {
      border: 10px solid #000;
    }
  </style>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          /**
           1.addClass(class|fn)
           作用：添加一个类
           如果要添加多个，多个类名之间用空格隔开即可

           2.removeClass([class|fn])
           作用：删除一个类
           如果想删除多个，多个类名之间用空格隔开

           3.toggleClass(class|fn[,sw])
           作用：没有就添加，有就删除
           */
          var btns = document.getElementsByTagName("button");
          btns[0].onclick = function () {
            $("div").addClass("class1")
          }
          btns[1].onclick = function () {
            $("div").removeClass("class1")
          }
          btns[2].onclick = function () {
            $("div").toggleClass("class2")
          }


        })
      </script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

jQuery操作HTML代码/文本/值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>13-jQuery文本值相关的方法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    button {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
  </style>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          /**
           1.html([val|fn])
           和原生js中的innerHTML一模一样

           2.text([val|fn])
           和原生js中的innerText一模一样

           3.val([val|fn|arr])
           和原生js中的value属性差不多
           */
          var btns = document.getElementsByTagName("button");
          btns[0].onclick = function () {
            $("div").html("<p>我是段落<span>我是span</span></p>")
          }
          btns[1].onclick = function () {
            console.log( $("div").html());
          }
          btns[2].onclick = function () {
            $("div").text("<p>我是段落<span>我是span</span></p>")
          }
          btns[3].onclick = function () {
            console.log($("div").text());
          }
          btns[4].onclick = function () {
            $("input").val("请输入内容")
          }
          btns[5].onclick = function () {
            console.log($("input").val());
          }
        })
      </script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<input type="text">
</body>
</html>

CSS相关

jquery操作css样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>14-jQuery操作CSS样式的方法</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      //1.逐个设置
      $("div").css("width", "100px")
      $("div").css("height", "100px")
      $("div").css("background", "red")

      //2.链式设置
      //注意点：链式操作如果大于三步，建议分开
      $("div").css("width","100px")
        .css("height", "100px")
        .css("background", "red")

      // 3，批量设置 (推荐)
      $("div").css({
        width: "100px",
        height: "100px",
        background: "red"
      })

      //4.获取css样式值
      console.log($("div").css("width"));
    })
  </script>
</head>
<body>
<div></div>
</body>
</html>

jQuery操作位置和尺寸的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>15-jQuery操作位置和尺寸的方法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 200px;
      height: 200px;
      background: red;
      border: 50px solid #000;
      margin-left: 50px;
      position: relative;
    }
    .son{
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
      left: 50px;
      top: 50px;
    }
  </style>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          var btns = document.getElementsByTagName("button");
          //监听获取
          btns[0].onclick= function () {
            //获取元素的宽度
            console.log($(".father").width());

            //offset([coordinates])
            //作用： 获取元素距离窗口的偏移位
            console.log($(".son").offset().left);
            //position()
            //作用: 获取元素距离
            console.log($(".son").position().left)
          }
          //监听设置
          btns[1].onclick= function () {
            //设置元素的宽度
            // $(".father").width("500px")

            // $(".son").offset({
            //   left: 10
            // })

            //注意点：position方法只能获取不能设置 , 可以通过css设置
            $(".son").css({
              left: "10px"
            })
          }
        })
      </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

jQuery的scrollTop方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>16-jQuery的scrollTop方法</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .scroll {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      overflow: auto;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      var btns = document.getElementsByTagName("button");
      //监听获取
      btns[0].onclick = function () {
        //获取滚动的偏移位
        console.log($(".scroll").scrollTop());
        //获取网页的偏移位
        //注意点：为了保证浏览器的兼容，需要按照如下写法
        console.log($("body").scrollTop()+$("html").scrollTop());
      }
      btns[1].onclick = function () {
        //设置滚动的偏移位
        $(".scroll").scrollTop(300);
        //设置网页的滚动的偏移位
        //注意点：为了保证浏览器的兼容,设置网页的滚动的偏移位的时候必须按照如下写法
        $("html,body").scrollTop(300);
      }
    })
  </script>
</head>
<body>
<div class="scroll">
  我是div 我是div
  我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div
  我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div
  我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div
  我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div
  我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div 我是div
  我是div 我是div
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
</body>
</html>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>17-jQuery事件绑定</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /**
       * jQuery中有两种绑定事件方法
       1.eventName(fn);
       编码效率略高 / 部分事件jQuery没有实现，所以不能添加
       2.on(eventName,fn);
       编码效率略低 / 所有js事件都可以添加

       注意点：
       可以添加多个相同或者不同类型的事件，不会覆盖
       */
      //方式一：
      $("button").click(function () {
        alert("nihao ")
      })

      $("button").click(function () {
        alert("nihao 2")
      })

      $("button").mouseleave(function () {
        alert("nihao mouseleave")
      })

      $("button").mouseenter(function () {
        alert("nihao mouseenter")
      })
      //方式二：
      $("button").on("click", function () {
        alert("nihahha ")
      })
    })
  </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery事件移除</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
      <script>
        $(function () {
          $("button").click(function () {
            alert("nihao ")
          })

          //off方法如果不传递参数，会移除所有的事件
          // $("button").off();
          //off方法如果传递一个参数，会移除所有指定类型的事件
          $("button").off("click");
          //off方法如果传递俩个参数，会移除所有指定类型的指定事件
          // $("button").off(事件名称,函数名);
        })
      </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>26-jQuery事件冒泡和默认行为</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      background: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /**
       * 1.什么是事件冒泡
       * 2.如何阻止事件冒泡
       * 3.什么是默认行为？
       * 4.如何阻止默认行为?
       */
      $(".son").click(function (event) {
        alert("son")
        //阻止事件冒泡
        // return false;
        event.stopPropagation();
      })
      $(".father").click(function () {
        alert("father")
      })
    })
  </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<a href="http://www.baidu.com">我是百度</a>
<form action="http://www.taobao.com">
  <input type="text">
  <input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>27-jQuery事件自动触发</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      background: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {

      $(".son").click(function (event) {
        alert("son")
      })
      $(".father").click(function () {
        alert("father")
      })
      // $(".father").trigger("click");
      // $(".father").triggerHandler("click");

      /**
       trigger： 如果利用trigger自动触发事件，会触发事件冒泡
       triggerHandler：如果利用triggerHandler自动触发事件，不会触发事件冒泡
       */
      // $(".son").trigger("click");
      // $(".son").triggerHandler("click");

      $("input[type='submit']").click(function () {
        alert("submit")
      })
      /**
       trigger： 如果利用trigger自动触发事件，会触发默认行为
       triggerHandler： 如果利用triggerHandler自动触发事件，不会触发默认行为
       */
      // $("input[type='submit']").trigger("click")
      $("input[type='submit']").triggerHandler("click")
    })
  </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<a href="http://www.baidu.com">我是百度</a>
<form action="http://www.taobao.com">
  <input type="text">
  <input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>28-jQuery自定义事件</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      background: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
/**
       想要自定义事件，必须满足两个条件
       1.事件必须是通过on绑定的
       2.事件必须通过trigger来触发
       */
      $(".son").on("myClick",function (event) {
          alert("son")
      })
      $(".son").trigger("myClick");
    })
  </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
  <input type="text">
  <input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>29-jQuery事件命名空间</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      background: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      /**
       * 想要事件的命名空间有效，必须满足两个条件
       * 1.事件是通过on来绑定的
       * 2.通过trigger触发事件
       */
      $(".son").on("click.zs", function (event) {
        alert("click1")
      })
      $(".son").on("click.ls", function (event) {
        alert("click2")
      })
      $(".son").trigger("click.zs");
    });
  </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
  <input type="text">
  <input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>29-jQuery事件命名空间</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      background: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      $(".father").on("click.ls", function (event) {
        alert("father click1")
      })
      $(".father").on("click", function (event) {
        alert("father click2")
      })
      $(".son").on("click.ls", function (event) {
        alert("son click1")
      })
      /**
       利用trigger触发子元素带命名空间的事件。那么父元素带相同命名空间的事件也会被触发
       而父元素没有命名空间的事件不会被触发
       利用trigger触发子元素不带命名空间的事件。那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
       */
      // $(".son").trigger("click.ls");
      $(".son").trigger("click");
      // $(".son").triggerHandler("click.ls");
    });
  </script>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
  <input type="text">
  <input type="submit">
</form>
</body>
</html>

动画效果
文档处理

JQuery：从零开始的学习

JQuery基础

1、关于生产版（min版）和开发板

2、入口函数

3、JQuery选择器

4、JQuery事件

5、Jquery核心函数

6、静态方法

静态方法和实例方法的理解

each方法

map方法

JQuery中的其他静态方法

holdReady()方法

7、JQuery对象

内容选择器

属性操作

CSS相关

事件处理

动画效果

文档处理

猜你喜欢