05-jQuery

最新推荐文章于 2022-07-18 16:55:09 发布

人俗� 话不多

最新推荐文章于 2022-07-18 16:55:09 发布

阅读量448

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/slf13754951386/article/details/123315724

版权

jQuery 介绍

JavaScript 库

简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装 ，把 JS 中的 DOM 操作做了封装 , 我们可以快速的查询和使用里面的功能。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

jQuery的概念

j 就是 JavaScript； Query 查询；意思就是查询js，

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质：就是学习调用这些函数（方法）。

jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

jQuery 的基本使用

jQuery 的下载

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

版本介绍：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

体验jQuery

步骤：

引入jQuery文件。
在文档最末尾插入 script 标签，书写体验代码。
$(‘div’).hide() 可以隐藏盒子。

jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
    $("div").hide();
}) ; 

// 第二种: 繁琐，但是也可以实现
$("document").ready(function(){
   ...  //  此处是页面DOM加载完成的入口
   $("div").hide();
});

总结：

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。

    <script>
      jQuery("div").ready(function () {
        jQuery("div").hide();
      });
    </script>

$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

var MyDiv = document.querySelector("div"); // MyDiv是DOM对象
$("div"); // div 是jquery 对象

MyDiv.style.display = "none"; // 隐藏DOM对象
$("div").hide(); // 隐藏Jquery 对象

jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM 对象转换为 jQuery 对象： $(DOM对象)
- 先获取到DOM对象
- DOM 对象转为 JQuery 对象
```
$('div')
```

jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index] index 是索引号

$('div') .get(index) index 是索引号

// 1.DOM对象转换成jQuery对象，方法只有一种
//   $(myvideo).play(); 直接获取元素标签名得到的就是jQuery对象
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

    <script>
      //   $("video"); // 直接获取的就是jQuery对象
      var myvideo = document.querySelector("video");
      //   $(myvideo).play();
      //   myvideo.play()
      // jQuery 对象转换为 DOM 对象
      //   $("video")[0].play();
      //   $("video").get(0).play();
      var jQueryobject = $(myvideo); // jQuery 对象
      $(jQueryobject)[0].play(); // jQuery 转为 dom 对象并调用方法
    </script>

jQuery 常用API

jQuery 选择器

基础选择器

语法

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>

筛选选择器

结构伪类选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>

另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

重点记住 : parent() , children() , find() , siblings() , eq()

    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
   
      console.log($(".son").parent().css("color","red"));
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
           
            console.log( $(".nav").children("p").css("color","red"));
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            // $(".nav").find("p").css("color", "red");
            $(".nav").find("p").css("color","pink")
            // 3. 兄
        });
    </script>

    <script>
      // 注意一下都是方法 带括号
      $(function () {
        // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
        $("ol .item").siblings("li").css("color", "red");
        $("ol .item").siblings("li").css("color", "red");
        $("ol .item").prevAll().css("color", "green");
        // 2. 第n个元素
        // var index = 2;
        // (1) 我们可以利用选择器的方式选择
        // $("ul li:eq(3)").css("color","pink")
        var index = 3;
        $("ul li").eq(index).css("color", "pink");

        // $("ul li:eq(2)").css("color", "blue");
        // $("ul li:eq("+index+")").css("color", "blue");
        // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
        // $("ul li").eq(2).css("color", "blue");
        $("ul li").eq(2).siblings("li").css("color", "yellow");
        // 3. 判断是否有某个类名
        console.log($("div:first").hasClass("current"));
        console.log($("div:last").hasClass("current"));
      });
    </script>

jQuery 设置样式

$('div').css('属性', '值')    
$("div").css("background", "pink");

jQuery 排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

jQuery 隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').css(“color”,”red”);  // 页面中所有的div全部成红色，不用循环操作

JQuery 链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', ''); 
// 我的兄弟变为红色 , 我本身不变色
$(this).siblings().css("color", "red");
// 我兄弟的父亲变绿色
$(this).siblings().parent().css("color", "green");

案例-新浪下拉单

      $(function () {
        // 鼠标经过li,子元素ul显示
        $(".nav>li").mouseover(function () {
          $(this).children("ul").show();
          // this 不需要加引号
        });
        // 鼠标离开li,子元素ul隐藏
        $(".nav>li").mouseout(function () {
          $(this).children("ul").hide();
        });
      });
    </script>

案例-排他思想

    <script>
      $(function () {
        // 隐式迭代 给所有按钮都绑定了点击事件
        $("button").click(function () {
          // 当前的元素变化背景
          $(this).css("background", "gray");
          // 其余的兄弟去掉背景颜色 隐式迭代
          $(this).siblings("button").css("background", "");
        });
      });
    </script>

案例-淘宝精品服饰

案例分析

① 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
② 需要得到当前小li 的索引号，就可以显示对应索引号的图片
③ jQuery 得到当前元素索引号 $(this).index()
④ 中间对应的图片，可以通过 eq(index) 方法去选择
⑤ 显示元素 show() 隐藏元素 hide()

      $(function () {
        // 1.鼠标经过左侧的li
        $("#left li").mouseover(function () {
          // 2.得到当前li 的索引号
          var index = $(this).index();
          console.log(index);
          // 3.让右侧的盒子相应索引号的图片显示出来
          $("#content div").eq(index).show();
          // 4.让其余的图片(兄弟)影藏起来
          $("#content div").eq(index).siblings("div").hide();
        });
      });
    </script>

jQuery 修改样式

方法1: 操作 css 方法

参数只写属性名，则是返回属性值 ,

var strColor = $(this).css('color'); // 获取

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');	 // 修改

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$("div").css({
          width: 400,
          backgroundColor: "red", // 如果是复合属性必须采取驼峰命名,不是数子需要加引号
        });

注意：css() 多用于样式少时操作，多了则不太方便。

方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

案例-Tab栏切换

案例分析

① 点击上部的li，当前li 添加current类，其余兄弟移除类。
② 点击的同时，得到当前li 的索引号
③ 让下部里面相应索引号的item显示，其余的item隐藏

      // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
        $(".tab_list li").click(function () {
          $(this).addClass("current").siblings().removeClass("current");
          var index = $(this).index();
          $(".tab_con .item").eq(index).show().siblings().hide();
        });
      //  链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
      //  2.点击的同时，得到当前li 的索引号
        var index = $(this).index();
        console.log(index);
       // 3.让下部里面相应索引号的item显示，其余的item隐藏
        $(".tab_con .item").eq(index).show().siblings().hide();

类操作与className区别📝

原生 JS 中 className 会覆盖元素原先里面的类名。

      var one = document.querySelector(".one");
      one.className = "two";

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

      $(".one").addClass("two")
      $(".one").removeClass("two")

jQuery 效果

显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

显示语法规范如下:

show([speed,[easing],[fn]])

显示参数
（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏语法规范如下:

hide([speed,[easing],[fn]])

切换语法规范如下:

toggle([speed,[easing],[fn]])

建议：平时一般不带参数，直接显示隐藏即可。

滑动效果

上滑效果语法规范

slideUp([speed,[easing],[fn]])

下滑效果语法规范

slideDown([speed,[easing],[fn]])

滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

淡入淡出

淡入效果语法规范

fadeIn([speed,[easing],[fn]])
$("div").fadeIn(1000)

淡出效果语法规范

fadeOut([speed,[easing],[fn]])
$("div").fadeOut(1000)

淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])
$("div").fadeToggle(1000)

渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])
$("div").fadeTo(1000,0.5)

效果参数

（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

案例-突出显示

        $(".wrap li").hover(function() {
            $(this).siblings().stop().fadeTo(400, 0.5);
        }, function() {
            // 鼠标离开，其他li 透明度改为 1
            $(this).siblings().stop().fadeTo(400, 1);
        })

事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它

        $(".nav>li").hover(function(){
          $(this).children("ul").slideDown()
        },function(){
            $(this).children("ul").slide()
        })

        // 只写一个鼠标经过就会触发切换
         $(".nav>li").hover(function(){
            $(this).children("ul").slideToggle()
         })

停止排队

stop()

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

         $(".nav>li").hover(function(){            
             $(this).children("ul").stop().slideToggle()
         })

自定义动画 animate

animate(params,[speed],[easing],[fn])

（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

        $("button").click(function () {
          $("div").animate({ // css 属性
              left: 500,
              top: 300,
              opactity: 0.5,
              width: 500,
              // background:"red" 不支持非数值的属性值
            },
            1000, // 1秒内执行完
            function () { // 回调函数改背景颜色
              $("div").css("background", "red");
            }
          );
        });

案例-手风琴

案例分析

① 鼠标经过某个小li 有两步操作：
② 当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
③ 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

链式调用: 操作的是哪个 jq 对象 , 调用方法后返回的就是哪个 jq 对象

        $(".king li").mouseenter(function () {
            $(this).stop().animate({
                width:224
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            $(this).siblings("li").stop().animate({
                width:69
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();

jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

获取属性语法

prop ("属性")
console.log($("a").prop("href"));

设置属性语法

prop ("属性",属性值)
$("a").prop("title", "小米官网");

$("input").change(function () {
          console.log($(this).prop("checked"));
        });

元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

获取属性语法

attr ("属性") // 类似原生 getAttribute()
console.log($("div").attr("index"));

设置属性语法

attr ("属性","属性值") //类似原生 settAttribute()
$("div").attr("index", 5);

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法

data("uname","value") 
$("span").data("uname", "andy");

获取数据语法

data("uname")
$("span").data("uname")

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。这个方法获取data-index h5自定义属性第一个不用写data- 而且返回的是数字型

$("div").data("index") // 2 返回的是数字型

案例-购物车案例模块-全选

案例分析

1.全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
2.因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
3.把全选按钮状态赋值给3小复选框就可以了。

全选框全选

  // 全选按钮 全不选功能模块
  $(".checkall").change(function () {
    // console.log($(this).prop("checked")); //当全选按钮发生改变 拿到当前全选框按钮的选中转态
    $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    // 把当前全选按钮的选中转态赋值给 三个小按钮 , 同时让另外一个全选框发生变化
  });

小复选框

:checked 返回有几个复选框被选中

4.当我们每次点击小的复选框按钮，就来判断：
5.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
6.:checked 选择器 :checked 查找被选中的表单元素。

  $(".j-checkbox").change(function () {
    // console.log($(".j-checkbox:checked").length); // 当前选中复选框的个数
    // console.log(".j-checkbox".length); // 所有小复选框的个数
    if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
      $(".checkall").prop("checked", true); // 全选框全选
    } else {
      $(".checkall").prop("checked", false); // 全选框不选
    }
  });

jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

jQuery内容文本值

普通元素的内容 html()

      // 1. 获取设置元素内容 html()
      console.log($("div").html());
      $("div").html("123");

普通元素的内容 text()

      // 2. 获取设置元素文本内容 text()
      console.log($("div").text());
      $("div").text("123");

表单的值 val () 相当于源生的 value()

      // 3. 获取设置表单值 val()
      console.log($("input").val());
      console.log($(ele).val()); // each 遍历
      $("input").val("123");

注意：html() 可识别标签，text() 不识别标签。

案例：购物车案例模块-增减商品数量

案例分析

1.核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
2.注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（itxt）的值。
3.修改表单的值是val() 方法
4.注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

  $(".increment").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    n++;
    // 赋值给当前兄弟的文本框
    $(this).siblings(".itxt").val(n);
  });
  // 商品数量减
  $(".decrement").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    if (n == 1) {
      return false;
    }
    n--;
    // 赋值给当前兄弟的文本框
    $(this).siblings(".itxt").val(n);
  });

案例: 购物车案例模块-修改商品小计

案例分析

1.核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
2.注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum）
3.修改普通元素的内容是text() 方法
4.注意2：当前商品的价格，要把￥符号去掉再相乘截取字符串 substr(1)
5.parents(‘选择器’) 可以返回指定祖先元素
6.最后计算的结果如果想要保留2位小数通过 toFixed(2) 方法

  // 商品数量加
  $(".increment").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    n++;
    // 赋值给当前兄弟的文本框
    $(this).siblings(".itxt").val(n);
    // 商品价格小计
    // // parents 返回祖先元素
    var p = $(this).parents(".p-num").siblings(".p-price").html(); 
    // var p = $(this).parent().parent().siblings(".p-price").html();
    p = p.substr(1);
    // 小计模块
    $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
    // $(this).parents(".p-num").siblings(".p-sum").html(`¥${total}`);
  });
  // 商品数量减
  $(".decrement").click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    if (n == 1) {
      return false;
    }
    n--;
    // 赋值给当前兄弟的文本框
    $(this).siblings(".itxt").val(n);
        // 商品价格小计
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // var p = $(this).parent().parent().siblings(".p-price").html();
    p = p.substr(1);
    // 小计模块
    $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
  });

change 事件

$("input").change(function(){})  // 输入框的值发生改变 和失去焦点触发

$(".checkall").change(function () {})  // 复选框的选中转态发生改变触发

$(" input:checked ")

toFixed(2) 保留两位小数

parents (",lis") 返回全部的祖先元素

直接修改表单的值

案例分析

1.用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
2.用最新的表单内的值乘以单价即可但是还是当前商品小计

  // 用户修改文本框的值 计算 小计模块
  $(".itxt").change(function () {
    // 先得到文本框里面的值 乘 当前商品的数量
    var n = $(this).val();
    // 单前商品的价格
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    p = p.substr(1);
    // 小计模块
    $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
  });

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

遍历对象 each 方法

回调函数第一个参数一定是索引号可以自己指定索引号号名称
回调函数第二个参数一定是 dom元素对象也是自己命名

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

$("div").each(function (index, domEle){xxx}

        var sum = 0;
        // 1. each() 方法遍历元素
        var arr = ["red", "green", "blue"];
        $("div").each(function (i, domEle) {
          // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
          // 回调函数第二个参数一定是 dom元素对象 也是自己命名
          $(domEle).css("color", arr[i]);
          sum += parseInt($(domEle).text());
        });
        console.log(sum);

遍历输入框的值不能为空

          $.each($("#Form input"), function (i, ele) {
            console.log($(ele).val()); // 遍历每个表单数据
            if ($(ele).val().length <= 0) {
              return alert(`第${i + 1}个输入框的值不能为空`);
            }
          });

遍历数据 $.each 方法

$.each() 方法遍历元素主要用于遍历数组 , 数据，处理数据

        // 遍历对象 数据
        $.each({ name: "andy", age: 19 }, function (i, ele) {
          console.log(i);   // 属性名 k
          console.log(ele); // 属性值 val
        });
        // 遍历数组
        $.each(arr, function (i, ele) {
          console.log(i);
          console.log(ele);
        });
        // 遍历元素
        $.each($("div"), function (i, ele) {
          console.log(i);
          console.log(ele);
        });

案例：购物车案例模块-计算总计和总额

案例分析

1.把所有文本框中的值相加就是总额数量，总计同理。
2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。

注意 : 取到的是字符串需要转数字 , 需要截取字符串 ¥

  // 5.计算总计和总额模块
  function getSum() {
    var count = 0; // 总件数
    var money = 0; // 总价钱
    $(".itxt").each(function (i, ele) {
      count += parseInt($(ele).val()); // 取到的是字符串,要转为整数
    });
    $(".amount-sum em").text(count); // 总数量赋值
    // 小计
    $(".p-sum").each(function (i, ele) {
      money += parseFloat($(ele).text().substr(1)); // 截取字符串转小数
    });
    $(".price-sum").text("¥" + money.toFixed(2)); // 总价赋值 ,要保留两位小数
  }

创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法

创建

$("<li></li>");

添加内部添加外部添加

// 内部添加  成为父子元素
element.append(''内容'')  把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'')  把内容放入匹配元素内部最前面。
// 外部添加  成为兄弟元素 
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面

① 内部添加元素，生成之后，它们是父子关系。
② 外部添加元素，生成之后，他们是兄弟关系。

删除

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容

① remove 删除元素本身。
② empt() 和 html(’’’’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

      $(function () {
        // 1. 创建元素
        var li = $("<li>我是后来创建的li</li>");
        // 2. 添加元素

        // (1) 内部添加
        $("ul").append(li); //内部添加并且放到内容的最后面
        $("ul").prepend(li); // 内部添加并且放到内容的最前面

        // (2) 外部添加
        var div = $("<div>我是后妈生的</div>");
        $(".test").after(div);
        $(".test").before(div);
        // 3. 删除元素
        $("ul").remove(); //可以删除匹配的元素 自杀
        $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
        $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
      });

案例：购物车案例模块-删除商品模块

案例分析

1.核心思路：把商品remove() 删除元素即可
2.有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
3.商品后面的删除按钮：一定是删除当前的商品，所以从 $(this) 出发
4.删除选中的商品：先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
5.清理购物车：则是把所有的商品全部删掉

注意 : 每次删除后都需要重新计算一下商品小计和总价 , 删除后需要重新调用一下函数 getSum();

  // 6.删除模块
  // (1) 商品后面的删除按钮
  $(".p-action").click(function () {
    $(this).parents(".cart-item").remove();
    getSum();
  });

  // (2) 删除选中的商品
  $(".remove-batch").click(function () {
    $(".j-checkbox:checked").parents(".cart-item").remove();
    getSum();
  });

  // (3) 清理购物车
  $(".clear-all").click(function () {
    $(".cart-item").remove();
    getSum();
  });

案例: 购物车案例模块-选中商品添加背景

案例分析

1.核心思路：选中的商品添加背景，不选中移除背景即可
2.全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
3.小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
4.这个背景，可以通过类名修改，添加类和删除类

  // 全选按钮 全不选功能模块
  $(".checkall").change(function () {
    // console.log($(this).prop("checked")); //当全选按钮发生改变 拿到单前全选框按钮的选中转态
    $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    // 把当前全选按钮的选中转态赋值给 三个小按钮 , 同时让另外一个全选框发生变化
    if ($(this).prop("checked")) {
      // 所有商品添加背景
      $(".cart-item").addClass("check-cart-item");
    } else {
      // 所有商品移出背景
      $(".cart-item").removeClass("check-cart-item");
    }
  });
  // 小复选框全选
  $(".j-checkbox").change(function () {
    // console.log($(".j-checkbox:checked").length); // 当前选中复选框的个数
    // console.log(".j-checkbox".length); // 所有小复选框的个数
    if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
      $(".checkall").prop("checked", true); // 全选框全选
    } else {
      $(".checkall").prop("checked", false); // 全选框不选
    }
    if ($(this).prop("checked")) {
      // 当前商品添加背景
      $(this).parents(".cart-item").addClass("check-cart-item");
    } else {
      // 所有商品移出背景
      $(this).parents(".cart-item").removeClass("check-cart-item");
    }
  });

jQuery 尺寸、位置操作

jQuery 尺寸操作

语法	用法
width() / height ()	元素只算 width / height
innerWidth() / innerHieght()	元素宽高包含 padding
outerWidth() / outHeight ()	元素包含 padding , border
outerWidth( true) / outHeight (ture)	元素包含 padding , border , margin

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。

代码演示

        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })

jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
③ 可以设置元素的偏移：offset({ top: 10, left: 30 });

$(".son").offset()
$(".son").offset().top // 获取距离顶部的距离
$(".son").offset({ // 设置
    top:150,
    left:150,
})

2. position() 获取元素偏移

① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定
位父级左侧的距离。
③ 该方法只能获取。

$(".son").position();     // 只能获取不能设置
$(".son").position().top;

3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

代码演示

      $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })

案例 :带有动画的返回顶部

1.核心原理：使用animate动画返回顶部。
2.animate动画函数里面有个scrollTop 属性，可以设置位置
3.但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0); 
                $("body, html").stop().animate({  // 只能元素才可以做动画 ,文档不能做动画
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })

案例 :品优购电梯导航（上）

1.当我们滚动到今日推荐模块，就让电梯导航显示出来
2.点击电梯导航页面可以滚动到相应内容区域
3.核心算法：因为电梯导航模块和内容区模块一一对应的
4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
5.就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
6.然后执行动画即可

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");

                }
            })
        }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

案例：品优购电梯导航（下）

1.当我们点击电梯导航某个小li，当前小li 添加current类，兄弟移除类名
2.当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。
3.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
4.需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
5.判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
6.就利用这个索引号找到相应的电梯导航小li添加类。

jQuery 事件

jQuery 事件注册

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

element.事件(function(){})

$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

jQuery 事件处理

事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
selector: 元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。

            $("div").on({
                mouseenter: function() {
                    $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "blue");
                }
            });

// 绑定相同事件
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({
 mouseover: function(){}, 
mouseout: function(){},
click: function(){}
});

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
 $(this).toggleClass(“current”);
 });

on() 方法优势2：⭐️⭐️⭐️

on可以实现事件委托（委派）, 把原来加给子元素身上的事件绑定在父元素身上 , 就是把事件委派给父元素

// 事件委托给了ul,点击ul后 a触发事件冒泡(a有了点击事件),a的父亲li删除掉

            // 事件委托 , 点击ul, li触发了点击事件,弹出了窗口
             $("ul").on("click", "li", function() { 
                // $(this) 指向的是事件触发者
                alert(11);
            });

on() 方法优势3：

on可以给未来动态创建的元素绑定事件

            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

案例-发布微博留言板案例

1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。
2.点击的删除按钮，可以删除当前的微博留言。(事件委托)

        // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
        $(".btn").on("click", function () {
          // 判断输入框里内容是否为空
          if (!$(".txt").val()) {
            return false;
          }
          // 创建li
          var li = $("<li></li>");
          li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
          // 添加li
          $("ul").prepend(li);
          // 滑动显示li
          li.slideDown();
          // 清空文本域中的内容
          $(".txt").val("");
        });
        // 2.点击的删除按钮，可以删除当前的微博留言li
        // on可以给动态创建的元素绑定事件
        // 事件委托给了ul,点击ul后 a触发事件冒泡(a有了点击事件),a的父亲li删除掉
        $("ul").on("click", "a", function () {
          // 事件委托，回调函数中的  $(this) ---触发事件的元素对象---导火索元素
          // 执行完动画，再删除元素
          $(this)
            .parent()
            .slideUp(function () {
              // 动画函数中，回调函数中的 $(this)---执行动画的元素对象
              $(this).remove();
            });
        });

事件处理 off() 解绑事件

语法

$("p").off() // 解绑p所有事件处理程序
$("p").off("click") // 解绑p元素事件后面的点击事件
$("ul").off("click","li") // 解绑事件委托

one() 只会触发一次

 $("p").one("click",function(){
                alert(11)
            })

事件解绑

        // 1. 事件解绑 off
        $("div").off(); // 这个是解除了div身上的所有事件
        $("div").off("click"); // 这个是解除了div身上的点击事件
        $("ul").off("click", "li");
        // 2. one() 但是它只能触发事件一次
        $("p").one("click", function () {
          alert(11);
        });

事件处理 trigger() 自动触发事件

第一种

$("div").click(); // 会触发元素的默认行为
$("input").focus();

第二种

$("input").trigger("focus") // 会触发元素的默认行为

第三种

$("input").triggerHandler("focus")

triggerHandler 不会触发元素的默认行为 , 光标闪烁

jQuery 事件对象

            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })

jQuery 插件

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

1）引入相关文件。（jQuery 文件和插件文件）

2）复制相关html、css、js (调用插件)。

基于jquery 开发的插件需要先引入 jquery

瀑布流插件

http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html

插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）

图片懒加载插件

http://www.jq22.com/jquery-info11629

图片的懒加载【延迟加载】就是：当页面滑动到可视区域（有图片的位置），图片才进行加载，用以提升页面打开的速度及用户体验。

懒加载只需引入 js ,将图片替换为操作即可，此插件不涉及css。

全屏滚动插件

http://www.dowebok.com/demo/2014/77/

项目需要使用哪种风格引入对应的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
  	$(function() {
  		$('#dowebok').fullpage({
    		sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
    		navigation: true
  		});
	});
</script>

深拷贝和浅拷贝

深拷贝：完全复制一份新的数据。

浅拷贝 : 是把地址复制一份()

todolist 案例

转对象转数组

人俗� 话不多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-jQuery

jQuery 介绍JavaScript 库简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，把 JS 中的 DOM 操作做了封装 , 我们可以快速的查询和使用里面的功能。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQue..
复制链接

扫一扫