jQuery

Posted 2020-12-09 liuqingqing-bloom

正课:

1. 什么是jQuery:

2. 如何使用jQuery:

3. 查找:

 

1. 什么是jQuery:

 jQuery是 第三方开发的  —— 先下载才能使用

          执行DOM操作的 —— 学jQuery依然在学DOM

          极简化的 —— 对DOM API的终极简化

          函数库 —— jQuery中一切用函数来实现

 为什么: 2个原因:

  1. jQuery是DOM操作的终极简化:

    简化了: 增删改查

            事件绑定

            动画

            ajax

  2. 解决了大部分浏览器兼容性问题:

     凡是jQuery让用的都没有兼容性问题:

 何时: 几乎所有项目或框架的底层DOM操作，都是由jQuery实现的

 

2. 如何使用jQuery:

 下载: jquery.com

 版本: 1.x 兼容IE8

      2.x 不再兼容IE8

      3.x 不再兼容IE8，增加了新特性

       1. 运行在严格模式下

       2. 用for of代替了.each()方法

       3. 支持Promise

  如何使用:

   1.先引入jQuery到页面中，再编写自定义js:

     <script src="js/jquery-1.11.3.js">

   2. 只要想使用jQuery简化版API，都要先创建jQuery对象并封装DOM元素对象

      2种:

      1. 用选择器先查找再创建:

        var $btn1=$("#btn1");

      2. 如果已经获得DOM元素，可直接封装:

        var $btn1=$(this);

      什么是jQuery对象: 封装DOM元素对象，并提供操作DOM的简化版API 的类数组对象.

      对jQuery对象整体调用API，等效于对内部封装的DOM元素都调用API

 

        jQuery API 三大特性:

        1. 自带遍历效果: 对整个jQuery对象调用一次API，等效于自动对内部所有DOM元素都调用API

        2. 一个函数两用: 即可获取值，又可修改值

     如果调用时，没有给新值，则默认获取

     如果调用时，给了新值，则改为修改

        3. ?

 

3. 查询:

 1. 按选择器查找:  var $elem=$("选择器")

 回顾选择器:

  基本选择器: 5个 同CSS

   #id  element  .class   *   selector1,selector2,...

 

 

正课:

1. 查找

2. 修改

3. 按节点间关系查找

4. 添加/删除/替换/克隆

 

1. 查找:

 回顾:

  层级选择器: 同CSS

   父 后代   父>子    兄+弟    兄~弟

  子元素过滤选择器: 同CSS

   按元素在其父元素中的相对位置选择元素

   下标i从1开始

   :first-child   :last-child     :nth-child(n)

   偶数行: tr:nth-child(2n) //even

  基本过滤选择器: jQuery新增的

   打破父元素的界限，按绝对位置选择元素

   下标i从0开始

   :first/last   :even/odd    :eq/gt/lt(i)

  属性过滤选择器: 同CSS

   [属性名]   [属性名=值]  [属性名^=开头]

   [属性名$=结尾]    [属性名*=内容]   [属性名!=值]

  可见性过滤: jQuery新增

   :hidden 匹配隐藏的元素

     display:none

     visibility: hidden

     opacity:0

     <input type="hidden">

   :visible 匹配显示的元素

  内容过滤: jQuery新增

   :contains(文本) 匹配元素的内容中包含指定“文本”的元素

   :has(选择器) 匹配包含满足选择器要求的子元素的父元素

   :parent 选择内容非空的元素

   :empty 选择内容为空的元素

  状态过滤: 同CSS

   :enabled  :disabled  :selected    :checked

  表单元素过滤: jQuery新增:

   :input 匹配所有表单元素: input select textarea button

   :[type] 匹配type为指定类型的input元素:

    :text <input type="text">

    :password <input type="password">

    :...

 

2. 修改:

 内容: 3种:

  1. 原始html片段: .innerHTML

    $elem.html(["html片段"])  一个函数两用

  2. 纯文本内容: .textContent

    $elem.text(["文本内容"])  一个函数两用

  3. 表单元素的值: .value

    $elem.val(["值"]) 一个函数两用

 属性:

  核心DOM API: $elem.attr("属性名"[,"属性值"]) 一个函数两用

  HTML DOM API: $elem.prop("属性名"[,"属性值"]) 一个函数两用

  1. HTML标准属性:

    2种:

    1. 核心DOM: getAttribute()   setAttribute()

    2. HTML DOM: .属性名        .属性名=值

  2. 状态属性

    1. HTML DOM: .状态属性

  3. 自定义扩展属性:

    1. 核心DOM: getAttribute()   setAttribute()

 问题: 一次只能修改一个属性，如果同时修改多个属性时，代码会很繁琐:

 解决: 同时修改多个属性:

   $elem.attr/prop({

     属性:值,

      ... : ...

   })

 样式:

 

jQuery API 三大特性:

1. 自带遍历效果

2. 一个函数两用

3. 多数函数都返回正在操作的jQuery对象本身

 

正课：

1. 修改

2. 按节点间关系查找

3. 添加/删除/替换/克隆

4. 事件绑定

5. 动画API

 

1. 修改:

 样式:

  $elem.css("css属性"[,值]) //单个数值的属性值不用加单位

      修改样式: elem.style.css属性=值

      获取样式: getComputedStyle()

  .css() 一次只能修改一个css属性。

   如果同时修改多个css属性:

     .css({

       css属性名:值,

         ... : ...

     })

     css属性名必须去横线变驼峰

  问题: 如果同时修改多个css属性，用.css()代码繁琐

  解决: 用操作class来批量修改样式

   <button class="btn btn-danger active"

   $elem.addClass("class1 class2 ...")

   $elem.removeClass("class1")

   $elem.hasClass("class1")

        .is(".class1")

   比如: if($btn.hasClass("down"))//如果有down

              $btn.removeClass("down");//就移除down

               else//否则

              $btn.addClass("down");//就添加down

   只有在有和没有一个class之间来回切换时，采用.toggleClass("class")

 

2. 按节点间关系查找:

 2大类:

 1. 父子:

  .parent()     .parentNode

  .children(["选择器"]) 可获得直接子元素中符合要求的元素

    比如: $main.children("div") 选择id为main下的直接子元素中的div。如果有ul,p，则不选择。

    .find("选择器") 可在所有后代中查找符合条件的元素

    比如: $ul.find("li.active") 查找ul下所有后代li中class为active的li

  .children(":first-child")     .firstElementChild

  .children(":last-child")     .lastElementChild

 2. 兄弟:

  .prev()       .previousElementSibling

    .prevAll(["选择器"])   选择当前元素之前所有兄弟元素

  .next()        .nextElementSiblinlg

    .nextAll(["选择器"])   选择当前元素之后所有兄弟元素

 

  .siblings(["选择器"])    选择除自己之外所有兄弟

  

 

 比如: //将当前li添加class active

      $a.parent().addClass("active")

      //return $当前li

      //将当前li之外的其余li去掉class active

      .siblings().removeClass("active")

 

3. 添加/删除/替换/克隆

 添加: 2步:

  1. 用html片段创建新元素:

   var $a=$(`<a href="http://tmooc.cn">go to tmooc</a>`);

  2. 将新元素添加到DOM树上

   1.追加:

     $父元素.append($a)   末尾追加

      $a.appendTo(父元素).对a做其它操作  末尾追加

     $父元素.prepend($a)  在开头插入

      $a.prependTo(父元素) .对a做其它操作  在开头插入

   2. 中间插入:

         $child.before($a)  将a插入到child之前

       $a.insertBefore(child)  将a插入到child之前

     $child.after($a)   将a插入到child之后

       $a.insertAfter(child)   将a插入到child之后

   3. 替换:

     $child.replaceWith($a)  用a代替child

     $a.replaceAll(child) .对a做其它操作     用a代替child

 

 删除: $elem.remove();

 克隆: var $elem2=$elem.clone();

 

4. 事件绑定:

 绑定事件处理函数:

   .on("事件名",处理函数); //代替addEventListener()

   对于常用的21种事件，可进一步简写为:

   .事件名(处理函数)

   利用冒泡:

    $父元素.on("事件名","选择器",处理函数)

     2个难题:

     1. this 又可以用了 => e.target

     2. if($xx.is("条件选择器")) 不用再写

        仅把选择器提前到第二个参数上。

     强调: "选择器"必须现对于$父元素内编写

 

 解绑: .off("事件名",处理函数);

 

 页面加载后自动执行:

  问题: 直接放在js文件中，不属于任何事件的代码，只要页面引入就立刻执行。如果在head中引入，极可能找不到页面元素，导致错误。

  解决: 所有代码都要放在“页面加载完成”事件中。等待事件发生时，才执行。

 2个“加载完成事件”

  1. 仅DOM内容加载完成：DOMContentLoaded 提前

    仅等待HTML和JS加载完就提前触发

    何时: 和css，图片无关的代码，都要放在DOMContentLoaded中

    如何: $(document).ready(function(){

            //会在document(DOM)准备好之后自动触发

         })

         $().ready(function(){})

                         $(function(){})

  2. 整个网页加载完成: Load 延迟

    需要等整个网页(HTML,JS,CSS,图片)都完成才触发

    何时: 依赖css和图片的代码，只能放在load中

    如何: $(window).load(function(){

                //.addEventListener("load",...)

                       //所有页面内容都加载完才能触发

         })

 

 鼠标事件:

   .mouseover()   .mouseout()

   问题: 即使进出子元素，也会频繁触发父元素上的处理函数

   解决: .mouseenter()  .mouseleave()

   如果同时不绑定mouseenter和mouseleave

     其实，只需要绑定一个hover:

      $elem.hover(//等效于同时绑定了mouseenter和leave

         function(){ ... }, //给mouseenter

         function(){ ... } //给mouseleave

      )

     更简化: 如果两个处理函数可用toggleXXX简写为一个

       其实只要给一个处理函数即可。

       $elem.hover(function(){  xxxx.toggleXXX()  })

 

 模拟触发: 没有点击按钮，也想执行按钮的处理函数

  如何: $("按钮").trigger("事件名")

      比如: $("#btnSearch").trigger("click")

                         触发

       可以更简化: $("按钮").事件名()

 

正课:

1. 动画API

2. 类数组对象操作

3. 自定义组件

4. ajax

5. 跨域

 

1. 动画API：

 1. 简单动画: 写死的三种动画效果

  1. 显示隐藏: $elem.show()   $elem.hide()  $.elem.toggle()

     默认没有动画效果，瞬间显示隐藏

     原理: .show()和.hide()默认使用display:block/none实现显示隐藏，所以不支持过渡

     如何添加动画效果: 添加"动画持续时间"参数，毫秒数

      原理: 用js定时器反复修改宽、高、透明度属性模拟过渡效果

  2. 上滑下滑: slideUp()   slideDown()      slideToggle()

  3. 淡入淡出: fadeIn()   fadeOut()       fadeToggle()

  缺点: 1. 用js程序写死的动画效果，不可维护。

       2. 用js程序模拟的动画效果，效率不如css的transition

  总结: 简单动画API很少使用

 2. 万能动画: 对任意css属性的变化应用动画效果

  $elem.animate({

    css属性: 目标值

    //强调: 1. 只能设置单个数值的属性

    //     2. 不支持颜色过渡和CSS3变换的过渡

    //     3. 也是用js定时器模拟的过渡效果

  },持续时间)

 

  排队和并发:

   1. 排队: 多个css属性先后依次变化

    如何: 先后调用多个动画API，多个动画API是排队执行的

     原理: 每个元素其实都有一个动画队列

        调用动画API不是立刻执行动画的意思，而仅是将动画加入队列中等待执行。

   2. 并发: 多个css属性同时变化

    如何: 在一个animate中同时定义多个css属性

 

  停止动画: $elem.stop()

    问题: 默认仅停止当前正在播放的第一个动画，队列中后续动画依然执行

    解决: .stop(true) 停止动画，并清空队列！

 

  动画结束后自动执行:

   如何: 为动画API添加第三个参数: 回调函数

     回调函数就会在动画接收后自动执行！

 

  :animated  专门匹配正在播放动画的元素

 

2. 类数组对象操作:

 1. 遍历类数组对象:

  $elems.each(function(i, elem){

    //elem->当前正在遍历的DOM元素对象

    $(elem)

  })

 2. 查找一个元素在jQuery对象中的位置:

  var i=$elems.index(要查找DOM/jq对象)

 

3. 自定义组件:

 1. 添加自定义函数:

  定义自定义函数:

       //fn=prototype

  jQuery.fn.自定义函数=function(){

    this->将来调用当前函数的.前的jQuery对象$elems，所以不用$(this)

  }

  调用自定义函数:

  $elems.自定义函数()

 2. 封装自定义插件:

  插件/组件: 网页中拥有独立的HTML，CSS和js的页面区域

  为什么: 重用！

  何时: 今后在页面中只要反复使用的独立页面区域都要封装为插件。

  官方插件: jQuery UI

   1. 按照插件要求编写html内容，不用添加class

   2. 引出插件的css文件

   3. 先引入jQuery.js，再引入jQuery ui.js

   4. 添加自定义脚本，找到插件的父元素，调用插件API

  问题: vs bootstrap

   1. 兼容多种设备:

     jQuery UI仅用于PC端网站
     bootstrap同时支持PC端和移动端网页

   2. 可维护性:

     jQuery UI采用侵入方式自动添加class，导致可维护性差

     bootstrap强迫手动添加class，但可维护性好。

 

  用jQuery Ui方式封装自定义插件:

   前提: 已经用传统的HTML,css和js实现了插件的效果

   封装插件的过程，其实是一个提取的过程

   1. 提取插件的css到独立的css文件中:

   2. 定义独立的js文件:

        向jQuery的原型对象fn中添加插件函数

         *侵入: 对插件中的元素自动添加所需的class

      绑定事件处理函数: 提取原页面中的事件绑定代码到插件函数中

 

  使用jQueryUI风格的插件:

    1. 引入插件.css

    2. 按插件要求编写HTML(不加class)

    3. 引入jquery.js和插件.js
    4. 查找插件父元素调用插件API

 

4. ajax:

 $.ajax({

  url:"服务端接口地址url",

  type:"get/post",

  data:"uname=dingding&upwd=123456"

      {uname:"dingding", upwd:"123456"}

  dataType:"json"

  //jQuery1.x和2.x

  success:function(服务器返回结果){ //当请求成功时自动执行

        ... ...

  }

 })

 //jQuery3.x才支持

 .then(function(服务器返回结果){

 

 })

 

5. *****跨域:

 什么是: 一个域名向的网页，向另一个域名下的服务器发送请求

  包括:

   1. 域名不同:

     http://www.a.com/index.html -> http://www.b.com/service

   2. 二级域名不同:

     http://mail.tedu.cn/index.html -> http://hr.tedu.cn/server

   3. 端口不同:

    http://localhost:5500/index.html->http://localhost:3000/index

   4. 协议不同:

    http://localhost/index.html -> https://localhost/index

                :80                       :443

   5. 相同机器上: 域名->IP

    http://localhost/index.html->http://127.0.0.1/index

 问题: ajax不允许发送跨域请求:

   错误: No "Access-Control-Allow-Origin" headers

 解决:

  方式一:服务区端设置允许跨域:

     //也称CORS:方式： Cross Origin Resource Share

     res.writeHead(200,{

      "Access-Control-Allow-Origin":"*"

     })

     res.send(服务端返回结果)

         res.write(JSON.stringify(服务端返回结果))

     res.end();