JQuery 基础笔记

于 2019-08-28 22:01:58 发布
阅读量1.6w 收藏 999
点赞数 165
分类专栏： # 前端进阶 文章标签： jQuery jQuery基础 jQuery笔记 jQuery面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43645678/article/details/93380482
版权

JQuery 基础笔记

1. jQuery 概述

1.1 jQuery 是什么？

在这里插入图片描述

  • jQuery 由美国人 John Resig 于2006年创建
  • jQuery 是目前最流行的 JavaScript 程序库之一，它是对 JavaScript 对象和函数的封装
  • 它的设计思想是write less,do more，能对 HTML 文档遍历和操作，事件处理，动画以及 Ajax 变得更加简单
1.2 jQuery 简单应用
  • 原生 JS 设置背景
window.onload = function (ev) {
   // 1.利用原生的JS查找DOM元素
   var div1 = document.getElementsByTagName("div")[0];
   var div2 = document.getElementsByClassName("box1")[0];
   var div3 = document.getElementById("box2");

   // 2.利用原生的JS修改背景颜色
   div1.style.backgroundColor = "red";
   div2.style.backgroundColor = "blue";
   div3.style.backgroundColor = "yellow";
}
  • 使用 jQuery 设置背景
$(document).ready(function(){
// 查询，操作 CSS 一步到位
	$("div").eq(0).css('background','red');
	$(".one").eq(0).css('background','blue');
	$("#two").css('background','yellow');
});
1.3 jQuery 功能应用
  • 强大的选择器
    • 方便快速查找 DOM 元素
    • jQuery 允许开发者使用 CSS1-CSS3 几乎所有的选择器,以及 jQuery 独创的选择器
  • 样式操作
    • 链式调用
  • 事件处理
    • DOM 操作（C增U改D删）
    • 隐式遍历(迭代)
    • 读写合一
  • 扩展新的jQuery插件
  • 与Ajax技术完美结合
  • 浏览器兼容（建议学习1.x版本）
版本兼容性
1.x兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4
2.x不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4
3.x不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本
1.4 jQuery 技术优势
  • 体积小，压缩后只有100KB左右
  • 强大的选择器
  • 出色的DOM封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性
  • 使用隐式迭代简化编程
  • 丰富的插件支持
1.5 jQuery 下载安装
1.6 jQuery 使用方法
  • jQuery 库分开发版和发布版
名称大小说明
jQuery-1.版本号.js(开发版)约268KB完整无压缩版本，主要用于测试，学习和开发
jQuery-1.版本号.min.js(发布版)约91KB经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目
  • 在页面中引入jQuery
<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
1.7 jQuery 基本语法结构
  • 工厂函数 $()
    • 将 DOM 对象转化为 jQuery 对象
  • 选择器 selector
    • 获取需要操作的 DOM 元素
  • 方法 action()
    • jQuery 中提供的方法
$(selector).action()
$("#current").addClass("current")
1.8 jQuery 语法特性
  • $ 等同于 jQuery
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery(function(){...})
  • jQuery 链式调用
    • jQuery 可以通过 . 不断调用 jQuery 对象的方法，而原生 JavaScript 则不一定
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// 报错,必须分开写
div[0].style.backgroundColor = "red".width = 200+"px";
// div[0].style.width = 200+"px";

// 2.jQuery
$(document).ready(function () {
	// 不报错,后面还可以接着继续写
    $("div").eq(1).css('background', 'yellow').css('width', '200px');
});
  • jQuery 隐式遍历(迭代)
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// div.style.backgroundColor = "red";// 无效
for(var i = 0; i<div.length; i++){
    div[i].style.backgroundColor = "red";
}

// 2.jQuery
$(document).ready(function () {
    // 隐式遍历(迭代)找到的所有div
    $("div").css('background', 'yellow');
});
  • 读写合一
$(document).ready(function () {
    // 读取数据
    var $tx = $("div").eq(0).text();
    alert($tx);
    // 写入数据
    $("div").eq(0).text("新的数据");
});

2. jQuery 入口函数

2.1 jQuery 与JavaScript 加载模式对比
  • 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
  • jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
1. js 原生入口函数

window.onload = function (ev) {
   // 1.通过原生的JS入口函数可以拿到DOM元素
   var images = document.getElementsByTagName("images")[0];
   
   // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
   var width = window.getComputedStyle(images).width;         
}
=============================================================
2. jQuery 入口函数

$(document).ready(function () {
   // 1.通过jQuery入口函数可以拿到DOM元素
   var $images = $("images");

   // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
   var $width = $images.width();

});
  • 原生JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
  • jQuery中编写多个入口函数,后面的不会覆盖前面的
1. 原生 js

window.onload = function (ev) {
	alert("hello lnj1");// 不会显示
}
window.onload = function (ev) {
	alert("hello lnj2");// 会显示
}
===================================
2. jQuery

$(document).ready(function () {
	alert("hello lnj1");// 会显示
});
$(document).ready(function () {
	alert("hello lnj2");// 会显示
});
  • jQuery 不会覆盖的本质
    • jQuery 框架本质是一个闭包
    • 每次执行都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰
  • 为何能访问$符号
    • 因为$符号 jQuery 框架对外暴露的一个全局变量
  • 为何 window.jQuery = window.$ = jQuery;
    • jQuery框架不仅提供了jQuery访问还提供$访问,提升开发者的编码效率
  • JavaScript中如何定义一个全局变量?
    • 所有全局变量是 window 对象的属性
    • jQuery 框架源码实现
window.jQuery = window.$ = jQuery;

  • 使用 jQuery 框架只有两种方式

    • 通过 $
    • 通过 jQuery

  • 总结

window.onload$(document).ready()
执行时机必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数只能执行一次,如果第二次,那么第一次的执行会被覆盖可以执行多次,第N次都不会被上一次覆盖
2.2 jQuery 其他写法
// 1.第一种写法
$(document).ready(function () {
    alert("hello lnj");
});

// 2.第二种写法
jQuery(document).ready(function () {
    alert("hello lnj");
});

// 3.第三种写法(推荐)
$(function () {
    alert("hello lnj");
});

// 4.第四种写法
jQuery(function () {
    alert("hello lnj");
});
2.3 解决$符号冲突问题
2.3.1 释放 $ 使用权
  • 当便捷访问符号发生冲突时,可以释放$使用权
  • 注意点
    • 释放操作必须在其它jQuery代码之前编写
    • 释放之后就不能再使用$,改为使用jQuery
jQuery.noConflict();
2.3.2 自定义访问符号
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
    alert("hello lnj");
});
2.4 jQuery 核心函数
  <script>
        $();//jQuery原理();就代表调用jQuery的核心函数

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

3. DOM 对象和 jQuery 对象

3.1 DOM 对象和 jQuery 对象区别
  • DOM对象
    • 直接使用 JavaScript 获取的节点对象
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
  • jQuery对象
    • 使用 jQuery 包装 DOM 对象后产生的对象，能够使用 jQuery 中的方法
$("#title").html();
等同于
document.getElementById("title").innerHTML;
  • DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用
3.2 DOM 对象和 jQuery 对象转化
  • 使用$()函数进行转化：$(DOM对象)
  • jQuery 对象命名一般约定以$开头
var txtName = document.getElementById("txtName"); //DOM对象
var $txtName = $(txtName);   //jQuery对象
3.3 DOM 对象和 jQuery 对象的获取
  • jQuery 对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName = $("#txtName");      // jQuery对象
var txtName = $txtName[0];         // DOM对象
  • 通过get(index)方法得到相应的DOM对象
var $txtName = $("#txtName");        // jQuery对象
var txtName = $txtName.get(0);       // DOM对象
3.4 DOM 对象和 jQuery 对象的练习
<style>
    #d1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }
</style>
<script src="../jquery-3.5.1.js"></script>
<script>
    $(function(){
      // $('#d1') #的使用不能遗漏
      // 结论：jQuery 和 DOM 对象各有自己的属性和方法，不能混用
      var div = document.getElementById('d1')
      div.innerHTML = 'hello'
      // div.style.backgroundColor = '#ff0'
      var $div = $(div)  // 把 DOM 对象转换成 jQuery 对象
      $div.css('background','#00f')
      // div.css('background','#0f0')  // DOM 对象不具有 jQuery 方法
      $div.innerHTML = 'jQuery'  // jQuery 对象不具有 DOM 的属性方法
      var newDiv = $div[0]       // 把 jQuery 对象转换成 DOM 对象方法一
      // var newDiv = $div.get(0)   // 把 jQuery 对象转换成 DOM 对象方法二
      console.log($div)
      console.log(newDiv)
    })
</script>
<body>
  <div id="d1"></div>
</body>
3.5 jQuery 对象的本质
  • jQuery 对象的本质是一个伪数组
var $div = $("div");
	console.log($div);
	
var arr = [1, 3, 5];
	console.log(arr);
  • 什么是伪数组
    • 有 0 到 length-1 属性
    • 并且有 length 属性
var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

4. jQuery 选择器

4.1 基础选择器
  • 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称语法构成描述示例
标签选择器element根据给定的标签名匹配元素$(“h2”)选取所有h2元素
类选择器.class根据给定的class匹配元素$(".title")选取所有class为title的元素
ID 选择器#id根据给定的id匹配元素$("#title")选取id为title的元素
并集选择器selector1,selector2,…,selectorN将每一个选择器匹配的元素合并后一起返回$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$(“h2.title”)选取所有拥有class为title的h2元素
全局选择器*匹配所有元素$("*" )选取所有元素
4.2 层次选择器
  • 层次选择器通过DOM 元素之间的层次关系来获取元素
名称语法构成描述实例
后代选择器ancestor descendant选取 ancestor 元素里的所有 descendant (后代)元素$("#menu span" )选取 #menu 下的 span 元素
子选择器parent > child选取 parent 元素下的child(子)元素$(" #menu>span" )选取 #menu 的子元素 span
相邻元素选择器prev + next选取紧邻 prev 元素之后的 next 元素$(" h2+dl " )选取紧邻 h2 元素之后的同辈元素 dl
同辈元素选择器prev~sibings选取 prev 元素之后的所有 siblings 元素$(" h2~dl " )选取 h2 元素之后所有的同辈元素 dl
4.2.1 层次选择器练习
  • 导航菜单案例

在这里插入图片描述

<style>
  ul{list-style: none;}
  li{
    float: left;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #ccc;
  }
</style>
<script src="../jquery-3.5.1.js" charset="utf-8"></script>
<script type="text/javascript">
  // 原生JS
  // window.onload = function(){
  //   var lis = document.getElementsByTagName('li')
  //   for(var i = 1; i < lis.length; i++){
  //     lis[i].style.borderLeft = '2px solid #f00'
  //   }
  // }

  // jQuery
  $(function(){
    $('li+li').css('border-left','2px solid #f00')
  })

</script>
<body>
  <ul>
    <li>男装</li>
    <li>女装</li>
    <li>童装</li>
    <li>老年款式</li>
    <li>婴儿专用</li>
  </ul>
</body>
4.3 属性选择器
  • 属性选择器通过HTML元素的属性来选择元素
名称语法构成描述示例
属性选择器[attribute]选取包含给定属性的元素$(" [href]" )选取含有href属性的元素
属性选择器[attribute=value]选取等于给定属性是某个特定值的元素$(" [href =’#’]" )选取含有href属性的元素
属性选择器[attribute != value]选取不等于给定属性是某个特定值的元素$(" [href !=’#’]" )选取含有href属性的元素
属性选择器[attribute ^= value]选取给定属性是以某些特定值开始的元素$(" [href ^=‘en’]" )选取含有href属性的元素
属性选择器[attribute $=value]选取给定属性是以某些特定值结尾的元素$(" [href $=’.jpg’]" )选取含有href属性的元素
属性选择器[attribute *=value]选取给定属性是以包含某些值的元素$(" [href *=‘txt’]" )选取含有href属性的元素
4.4 过滤选择器
  • 过滤选择器通过特定的过滤规则来筛选元素
  • 语法特点
    • 使用":"
    • 如使用$(“li:first”)来选取第一个li元素
  • 主要分类
    • 基本过滤选择器
    • 可见性过滤选择器
    • 内容过滤选择器
    • 子元素过滤选择器
4.4.1 基本过滤选择器
  • 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
  • 基本过滤选择器可以根据索引的值选取元素
名称语法构成描述示例
基本过滤选择器:first选取第一个元素$(" li:first" )选取所有 li 元素中的第一个 li 元素
基本过滤选择器:last选取最后一个元素$(" li:last" )选取所有 li 元素中的最后一个 li 元素
基本过滤选择器:even选取索引是偶数的所有元素（index从0开始）$(" li:even" )选取索引是偶数的所有 li 元素
基本过滤选择器:odd选取索引是奇数的所有元素（index从0开始）$(" li:odd" )选取索引是奇数的所有 li 元素
基本过滤选择器:eq(index)选取索引等于index的元素（index从0开始）$(“li:eq(1)” )选取索引等于1的 li 元素
基本过滤选择器:gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的 li 元素（注：大于1，不包括1）
基本过滤选择器:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的 li 元素（注：小于1，不包括1）
4.4.2 可见性过滤选择器
  • 可见性过滤选择器可以通过元素显示状态来选取元素
名称语法构成描述示例
可见性过滤选择器:visible选取所有可见的元素$(":visible" )选取所有可见的元素
可见性过滤选择器:hidden选取所有隐藏的元素$(":hidden" ) 选取所有隐藏的元素
4.4.3 内容过滤性选择器
选择器描述返回
:empty选取不包含子元素或文本为空的元素集合元素
:parent选取含有子元素或文本的元素集合元素
:contains(text)选取含有文本内容为text的元素集合元素
:has(selector)选取含有选择器所匹配的元素的元素集合元素
  • :empty
    • 找到既没有文本内容也没有子元素的指定元素
<script>
    $(function () {
       // 找到所有div中不包含文本内容或子元素的元素
        var $res = $("div:empty");
        console.log($res.length); // 找到1个元素
        $res.each(function (idx,ele) {
            console.log(idx, ele); // one
        });
    });
</script>
<body>
	<div class="one"></div>
	<div class="two">zs</div><!--包含内容不会被找到-->
	<div class="three"><!--包含子元素不会被找到-->
	    <span>lnj</span>
	</div>
	<span class="five"></span><!--不是指定元素不会被找到-->
</body>
  • :parent
    • 找到有文本内容或有子元素的指定元素
<script>
    $(function () {
       // 找到所有div中包含文本内容或子元素的元素
        var $res = $("div:parent");
        console.log($res.length);
        $res.each(function (idx, ele) {
            console.log(idx, ele);
        });
    });
</script>
<body>
	<div class="one"></div>
	<div class="two">zs</div><!--有文本内容会被找到-->
	<div class="three"><!--有子元素会被找到-->
	    <span>lnj</span>
	</div>
	<span class="five"></span>
</body>
  • :contains(text)
    • 找到包含指定文本内容的指定元素
<script>
    $(function () {
        // 找到所有div中包含文本内容为lnj的元素
        var $res = $("div:contains('lnj')");
        console.log($res.length);// 找到2个元素
        $res.each(function (idx, ele) {
            console.log(idx, ele);// one,three,four
        })
    });
</script>
<body>
	<div class="one">lnj</div>
	<div class="two">zs</div>
	<div class="three">lnj</div>
	<div class="four"><!--子元素中包含该文本也会被找到-->
	    <span>lnj</span>
	</div>
	<span class="five"></span>
</body>
  • :has(selector)
    • 找到包含指定子元素的指定元素
    • 与:parent 区别
      • :parent 只要有子元素就会被找到
      • :has(selector) 不仅要有子元素,而且子元素还必须满足条件
<script>
    $(function () {
        // 找到所有div中包含后代元素为span的元素
        var $res = $("div:has('span')");
        console.log($res.length);
        $res.each(function (idx, ele) {
            console.log(idx, ele);
        });
    });
</script>
<body>
	<div class="one"> <!--后代中包含span元素会被找到-->
	    <span>jjj</span>
	</div>
	<div class="two"><!--后代中不包含span元素不会被找到-->
	    <p>zs</p>
	</div>
	<div class="three"><!--后代中包含span元素会被找到-->
	    <p>
	        <span>lnj</span>
	    </p>
	</div>
</body>

5. jQuery Class 操作

5.1 Class 类操作
5.1.1 addClass
  • 元素添加一个或多个类
  • 如果要添加多个, 多个类名之间用空格隔开即可
addClass(class)或addClass(class1 class2 … classN)
5.1.2 removeClass
  • 删除元素的一个或多个类
  • 如果想删除多个, 多个类名之间用空格隔开即可
removeClass(“style2 ”)或removeClass("style1 style2 ")
5.1.3 toggleClass
  • 切换元素
  • 添加或删除一个类(存在就删除不存在就添加)
  • toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class)
5.2 jQuery 文本操作
5.2.1 html
  • 添加或获取元素中的HTML
  • 类似于JS中的innerHTML
  • 解析内部HTML标签
$("div.left").html(); // 获取元素中的html代码
或
$("div.left").html("<div class='content'>…</div>"); // 设置元素中的html代码
5.2.2 text
  • 添加或获取元素中的文本
  • text方法能做的html方法都能做,所以一般使用html方法即可
$("div.left").text(); // 获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>"); // 设置元素中的文本内容
5.2.3 html() 和 text() 的区别
语法参数功能
html()无参数用于获取第一个匹配元素的HTML内容或文本内容
html(content)content参数为元素的HTML内容用于设置所有匹配元素的HTML内容或文本内容
text()无参数用于获取所有匹配元素的文本内容
text(content)content参数为元素的文本内容用于设置所有匹配元素的文本内容
5.2.4 val
  • 添加或获取元素value属性的值
$(this).val(); // 获取元素的value属性值
或
$(this).val(""); // 设置元素的value属性值
5.3 jQuery CSS 样式
5.3.1 css 方法
  • 使用css()为指定的元素设置样式值，修改的是行内样式
css(name,value) 

$(this).css("border","5px solid #f5f5f5");
5.3.2 width 方法
  • 设置或获取元素宽度(相当于获取width属性值)
$(function () {
    $("button").eq(0).click(function () {
        // 1.获取元素宽度(不包括padding和border)
		// alert($('.son').width());
    });
    $("button").eq(1).click(function () {
        // 2.设置元素宽度(不包括padding和border)
		// $(".son").width("50px");
    });
});
5.3.3 height 方法
  • 设置或获取元素高度(相当于获取height属性值)
$(function () {
    $("button").eq(0).click(function () {
        // 1.获取元素宽度(不包括padding和border)
		// alert($('.son').width());
    });
    $("button").eq(1).click(function () {
        // 2.设置元素宽度(不包括padding和border)
		// $(".son").width("50px");
    });
});
5.4. jQuery 元素位置
5.4.1 offset 方法
  • 获取或设置元素相对窗口的偏移位
$(function () {
    $("button").eq(0).click(function () {
        // 1.获取距离窗口的偏移位(从border开始)
        alert($('.son').offset().left); // 100
    });
    $("button").eq(1).click(function () {
        // 2.设置距离窗口的偏移位
        $('.son').offset({left:10, top:10});
    });
});
5.4.2 position 方法
  • 获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
$(function () {
    $("button").eq(0).click(function () {
        // 1.获取匹配元素相对父元素的偏移
        alert($('.son').position().left);// 50
    });
    $("button").eq(1).click(function () {
        // 2.无效,不能设置相对定位元素的偏移位
        $('.son').position({left:10, top:10})
    });
});
5.5 jQuery scroll 方法
5.5.1 scrollTop 方法
  • 设置或获取匹配元素相对滚动条顶部的偏移
$(function () {
    $("button").eq(0).click(function () {
        // 7.获取匹配元素相对滚动条顶部的偏移
		// alert($('.scroll').scrollTop());
		// alert($('html').scrollTop());
        // 兼容所有浏览器写法
        alert($('html').scrollTop()+$('body').scrollTop());
    });
    $("button").eq(1).click(function () {
        // 8.设置匹配元素相对滚动条顶部的偏移
		// $('.scroll').scrollTop(100);
		// $('html').scrollTop(100);
        // 兼容所有浏览器写法
        $('html,body').scrollTop(100);
    });
});
5.5.2 scrollLeft 方法
  • scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置
  • 滚动条的水平位置指的是从其左侧滚动过的像素数
  • 当滚动条位于最左侧时，位置是 0
$(function () {
    $("button").eq(0).click(function () {
        // 7.获取匹配元素相对滚动条水平的偏移
		// alert($('.scroll').scrollLeft());
		// alert($('html').scrollLeft());
        // 兼容所有浏览器写法
        alert($('html').scrollLeft()+$('body').scrollLeft());
    });
    $("button").eq(1).click(function () {
        // 8.设置匹配元素相对滚动条水平的偏移
		// $('.scroll').scrollLeft(100);
		// $('html').scrollLeft(100);
        // 兼容所有浏览器写法
        $('html,body').scrollLeft(100);
    });
});

6. jQuery 属性操作

6.1 属性与属性节点
6.1.1 什么是属性?
  • 对象身上保存的变量就是属性
  • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
6.1.2 如何操作属性?
  • 添加或修改属性(没有就会添加,有就会修改)
    • 对象.属性名称 = 值
    • 对象["属性名称"] = 值
  • 获取属性
    • 对象.属性名称
    • 对象["属性名称"]
6.1.3 什么是属性节点?
  • 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
  • 在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
  • 在attributes属性中保存的所有内容都是属性节点
<span class="box" nj="123"></span> // 这里的class和nj就是属性节点
6.1.4 如何操作属性节点?
  • 获取属性节点
    • DOM元素.getAttribute("属性名称");
  • 设置属性节点
    • DOM元素.setAttribute("属性名称", "值");
6.1.5 属性和属性节点有什么区别?
  • 任何对象都有属性, 但是只有DOM对象才有属性节点
6.2 属性节点方法
6.2.1 attr 方法
  • 作用
    • 获取或设置属性节点的值
  • 参数
    • 如果传递一个参数, 代表获取属性节点的值
    • 如果传递两个参数, 代表设置属性节点的值
  • 注意点
    • 如果是获取
      • 无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
    • 如果是设置
      • 找到多少个元素就会设置多少个元素
      • 如果设置的属性节点不存在, 那么系统会自动新增
$(function () {
    // 1.获取指定属性节点值
    var $res = $(".span1").attr("nj");
    console.log($res);
    // 2.设置属性节点
    $(".span1").attr("nj", "666");
    $(".span2").attr("id", "box1 box2");

    // 3.注意点:
    // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
    $res = $("span").attr("class");
    console.log($res);
     $("span").attr("class", "lnj");
});
6.2.2 removeAttr 方法

  • 作用

    • 删除属性节点

  • 注意点

    • 删除所有找到元素指定的属性节点
$(function () {
    // 1.设置属性节点时,会给所有找到元素设置属性节点
    $("span").attr("test", "jonathan");
    // 2.删除属性节点时,会删除所有找到元素的属性节点
    $("span").removeAttr("test");
});
6.2.3 prop 方法
  • 作用
    • 设置或获取元素的属性值
  • 注意点
    • prop方法不仅能够操作属性, 还能操作属性节点
    • 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点
    • 如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
$(function () {
    // 1.设置属性
    // 1.1.设置属性时,会设置所有找到元素的属性
    $("span").prop("demo", "lnj");
    // 2.获取属性
    // 2.1.获取属性时,只会获取找到第一个元素的属性
    console.log($("span").prop("demo"));
});
6.2.4 removeProp 方法
$(function () {
    // 删除所有找到元素的demo属性
    $("span").removeProp("demo");
});
6.2.5 attr 方法和 prop 方法区别
  • 所有DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
  • 在操作属性节点时,具有 true 和 false 两个属性的属性节点(如 checked, selected 或者 disabled)使用prop()，其他的使用 attr()
  • 如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
$(function () {
    // 1.可以通过prop获取属性节点
    console.log($("input").prop("class"));
    // 2.可以通过prop设置属性节点
    $("input").prop("class", "tag");

    // 3.如果没有默认值,那么attr获取返回undefined
	//console.log($("input[type=checkbox]").attr("checked"));
    // 4.如果没有默认值,那么prop获取返回false
    console.log($("input[type=checkbox]").prop("checked"));
    // 5.通过attr设置选中
	//$("input[type=checkbox]").attr("checked", true);
    
    // 6.通过prop设置选中
    $("input[type=checkbox]").prop("checked", true)
});

7. jQuery DOM 操作

7.1 常见的 DOM 操作
  • jQuery对JavaScript中的DOM操作进行了封装，使用更简便
  • jQuery中的DOM操作可分为：
    • 内容及Value属性值操作
    • 节点操作
    • 节点属性操作
    • 节点遍历
7.2 DOM 节点操作
  • jQuery中节点操作主要分为：
    • 查找节点（利用选择器完成）
    • 创建节点
    • 插入节点
    • 删除节点
    • 替换节点
    • 复制节点
7.2.1 创建 DOM 节点
  • 工厂函数$()用于获取或创建节点
    • $(selector)：通过选择器获取节点
    • $(element)：把DOM节点转化成jQuery节点
    • $(html)：使用HTML字符串创建jQuery节点
// 创建含文本与属性<li>元素节点
var $newNode2=$("<li title=‘标题为千与千寻’>千与千寻</li>");
7.2.2 插入 DOM 节点
  • 元素内部插入子节点
语法功能
append(content)$(A).append(B)表示将B追加到A内部的最后，如：$("ul").append($newNode1);
appendTo(content)$(B).appendTo(A)表示把B追加到A内部的最后，如：$newNode1.appendTo("ul");
prepend(content)$(A). prepend (B)表示将B前置插入到A内部中，如：$("ul"). prepend ($newNode1);
prependTo(content)$(B). prependTo (A)表示将B前置插入到A内部中，如：$newNode1. prependTo ("ul");
  • 元素外部插入同辈节点
语法功能
after(content)$(A).after (B)表示将B插入到A外部之后，如：$("ul").after($newNode1);
insertAfter(content)$(B). insertAfter(A)表示将B插入到A外部之后，如：$newNode1.insertAfter("ul");
before(content)$(A). before (B)表示将B插入至A外部之前，如：$("ul").before($newNode1);
insertBefore(content)$(B). insertBefore (A)表示将A插入到B外部之前，如：$newNode1.insertBefore("ul");
7.2.3 删除 DOM 节点
  • empty()
    • 删除指定元素的内容和子元素, 指定元素自身不会被删除
$("div").empty();
  • remove()
    • 删除指定元素
// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");
  • detach()
    • 删除指定元素
// 删除所有div
$("div").detach();
// 删除div中id是box1的那个div
$("div").detach("#box1");
  • remove 和 detach 区别
    • remove 删除元素后,元素上的事件会被移出
    • detach 删除元素后,元素上的事件会被保留
$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应
    // var $div = $("div").remove();
    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach();
    // console.log($div);
    // 将删除的返回值重新添加到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被点击了");
});
7.2.4 替换节点
  • replaceWith
    • 将所有匹配的元素替换成指定的 HTML 或 DOM 元素
    • replaceWith 参数可以是一个DOM元素、也可以是一个代码片段
  • replaceAll
    • 用匹配的元素替换掉所有 selector 匹配到的元素
// 编写jQuery相关代码
$("button").click(function () {
    // 创建一个新的节点
    var $item = $("<h6>我是标题6</h6>");
    // 利用新的节点替换旧的节点
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});
7.2.5 复制节点
  • clone
    • 复制一个节点
    • 参数 true 表示复制事件处理
    • 浅复制
      • 不会复制节点的事件
    • 深复制
      • 会复制节点的事件
$(function () {
    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {
        // 1.浅复制一个元素
        var $li = $("li:first").clone(false);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li无法响应事件
    });
    $("button").eq(1).click(function () {
        // 1.深复制一个元素
        var $li = $("li:first").clone(true);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li可以响应事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});
7.2.6 包裹节点
  • wrap
    • 将指定节点用其他标记包裹起来
    • 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义
  • wrapAll
    • 将所有匹配的元素用一个元素来包裹
    • 而wrap方法是将所有的元素进行单独包裹
  • wrapInner
    • 将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来
//测试使用 jQuery wrap, wrapAll, wrapInner
$(function(){
	//包装 li 本身
	$("#box1 li").wrap("<font color='red'></font>");

	//包装所有的 li
	$("#box2 li").wrapAll("<font color='red'></font>");

	//包装 li 里边的文字. 
	$("#box3 li").wrapInner("<font color='red'></font>");
})
7.2.7 遍历节点
方法作用
children只考虑子元素，不考虑后代元素
next同辈紧邻后面一个元素
nextAll同辈紧邻后面所有兄弟元素
prev同辈紧邻前一个兄弟元素
prevAll同辈紧邻前所有兄弟元素
siblings同辈所有兄弟元素
find(‘xx’)返回被选元素的后代元素，括号内必填写，如果查找所有后代使用 “*”，起查找作用
filter(‘xx’)指定选择器的xx元素，括号内必填写，符合条件的同级元素，非后代元素，起过滤作用
has(‘xx’)符合条件的后代元素，不包含自身，括号内必填写，起过滤作用
parent()获取元素的父级元素
parents()获取所有祖先元素，参数为筛选条件
parentsUntil()截止到xx位置的祖先节点
  • closest('xx')
    • 用来取得最近的匹配元素，包括自身
    • 首先检查自身是否符合
      • 如果符合返回元素本身
      • 如果不匹配，向上查找父元素，逐级向上直到匹配到选择器的元素
      • 如果什么没找到，返回一个空的jQuery对象
    • 必须填写筛选条件，且只能找到一个元素
7.3 jQuery DOM 操作练习
7.3.1 商品列表
  • 增删全选
    在这里插入图片描述
<style>
    a {
        text-decoration: none;
        color: #14a9ff;
    }

    img {
        cursor: pointer;
    }

    input[type=text] {
        width: 80px;
    }

    .mainPage {
        padding-top: 20px;
        margin: 0 auto;
        width: 480px;
    }

    table {
        border-collapse: collapse;
        width: 480px;
    }

    table td {
        text-align: center;
        border: 1px solid #333;
        font-size: 14px;
    }

    .count {
        /* display: inline-block; */
        /* border: 1px solid #333; */
        width: 70px;
        height: 20px;
        text-align: center;
    }
</style>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $(function () {
        //全选或全不选
        $("#all").click(function () {
            if (this.checked) {
                $(".select").prop("checked", true);
            } else {
                $(".select").prop("checked", false);
            }
        });

        $("table").delegate(".add", "click", function () {
            var n = $(this).siblings(".count").val();
            n++;
            $(this).siblings(".count").val(n);
        }).delegate(".sub", "click", function () {
            var n = $(this).siblings(".count").val();
            n--;
            $(this).siblings(".count").val(n);
            if (n < 0) {
                $(this).siblings(".count").val(0);
            }
        }).delegate(".del","click",function(){
            $(this).parent().parent().empty();

        })

        // $(".del").click(function(){
        //     $(this).parent().parent().empty();
        // })

        $(".addA").click(function () {
            // var tr = $(".s2");
            // var newtr = tr.clone();
            // tr.after(newtr);
            var str = `<tr class="s s3">
            <td><input type="checkbox" id="" class="select"></td>
            <td><img src="img/computer.jpg" alt="" class="img">笔记本电脑</td>
            <td class="price">￥6999元</td>
            <td class="number">
                <img src="img/subtraction.gif" alt="" class="sub">
                <input type="text" class="count" value="0">
                <img src="img/add.gif" alt="" class="add">
            </td>
            <td>
                <a href="#" class="del">删除</a>
            </td>
        </tr>`;
            $("table").append(str);
        });

        $(".delAll").click(function () {
            $(".s").empty();
        });

    });
</script>
<body>
    <div class="mainPage">
        <table>
            <tr>
                <td><input type="checkbox" name="" id="all">全选</td>
                <td>商品信息</td>
                <td>宜美惠价</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr class="s s1">
                <td><input type="checkbox" id="" class="select"></td>
                <td><img src="img/sang.gif" alt="" class="img">天堂直杆彩虹伞</td>
                <td class="price">￥32.9元</td>
                <td class="number">
                    <img src="img/subtraction.gif" alt="" class="sub">
                    <input type="text" class="count" value="0">
                    <img src="img/add.gif" alt="" class="add">
                </td>
                <td>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
            <tr class="s s2">
                <td><input type="checkbox" id="" class="select"></td>
                <td><img src="img/iphone.gif" alt="">苹果手机iphone5</td>
                <td class="price">￥3999元</td>
                <td class="number">
                    <img src="img/subtraction.gif" alt="" class="sub">
                    <input type="text" class="count" value="0">
                    <img src="img/add.gif" alt="" class="add">
                </td>
                <td>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
        </table>
        <a href="#" class="addA">增加</a>
        <a href="#" class="delAll">删除</a>
    </div>
</body>
7.3.2 滑动门

在这里插入图片描述

<style media="screen">
  *{margin: 0;padding: 0;}
  .box{
    height: 477px;
    margin: 10px auto;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    position: relative;
  }
  img{
    position: absolute;
    left: 0;
    top: 0;
    border-left: 1px solid #ccc;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    // 1. 确定暴露出来的图片宽度
    var exposeWidth = 160

    // 2. 计算并设置 box 的宽度
    var boxWidth = $('img').width() + exposeWidth * 3
    $('.box').css('width', boxWidth)
    var len = $('img').length
    for (var i = 1; i < len; i++) {
      $('img').eq(i).css('left', ($('img').width() + exposeWidth * (i - 1)) + 'px')
    }

    // 3. 确定移动的距离
    var move = $('img').width() - exposeWidth

    // 添加所有图片的 mouseover 事件，向左移动 $('img').width() - exposeWidth
    // index = 0 初始化状态
    // index = 1,初始状态, 修改第2张(1)
    // index = 0 初始状态, 修改第2张(1),第3张(2)
    // index = 0 初始状态, 修改第2张(1),第3张(2),第4张(3)

    $('img').each(function(index) {
      $(this).mouseover(function() {
        // 初始化
        for (var i = 1; i < len; i++) {
          $('img').eq(i).css('left',($('img').width() + exposeWidth * (i - 1)) + 'px')
        }
        if (index != 0)
          for (var j = 1; j <= index; j++) {
            $('img').eq(j).css('left', (parseInt($('img').eq(j).css('left')) - move) + 'px')
          }

      })
    })
  })
</script>
<body>
  <div class="box">
    <img src="img/door1.png" alt="">
    <img src="img/door2.png" alt="">
    <img src="img/door3.png" alt="">
    <img src="img/door4.png" alt="">
  </div>
</body>

8. 事件机制

  • jQuery事件是对JavaScript事件的封装
    • Window事件
    • 鼠标事件
    • 键盘事件
    • 表单事件
8.1 事件注册
  • 事件注册语法
    • $(对象).type(fn)
    • type是事件名
    • fn是事件处理函数
$(对象).事件名(fn)

$('input').click(function(){
	alert('123')
})
8.2 事件绑定
  • 使用bind()方法和on()方法
  • 优点
    • 编码效率略低
  • 缺点
    • 所有js事件都可以添加
  • 注意点
    • 可以添加多个相同或者不同类型的事件,不会覆盖
$(对象).on(type,[event],fn)

type 	-- 事件类型
event 	-- 事件参数
fn 		-- 处理函数

// 2.通过on绑定事件
$("button").on("click", function () {
    alert("hello click1");
});
  • 同时为多个事件绑定方法
$("input[name=event_1]").on({
	mouseover: function () { // 为 mouseover 绑定方法
		$("ul").css("display", "none");
	},
	mouseout: function () { // 为 mouseout 绑定方法
		$("ul").css("display", "block");
	}
});
8.3 事件解绑
  • 移除事件使用unbind()方法和off()方法
  • off方法如果不带参数时，表示移除所绑定的全部事件
  • off方法如果传递一个参数, 会移除所有指定类型的事件
  • off方法如果传递两个参数, 会移除所有指定类型的指定事件
$(对象).off([type],[fn])

$("button").off(); 				 // 移除button中全部事件
$("button").off("click"); 		 // 移除button中click事件
$("button").off("click", test1); // 移除button中click事件中test1事件
8.4 事件坐标

  • 当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象就能获取时间的坐标

  • 获取事件坐标有三种方式

    • event.offsetX, event.offsetY 相对于事件元素左上角
    • event.pageX, event.pageY 相对于页面的左上角
    • event.clientX, event.clientY 相对于视口的左上角

  • event.page 和 event.client 区别

    • 网页是可以滚动的,而视口是固定的
    • 所以想获取距离可视区域坐标通过event.client
    • 想获取距离网页左上角的坐标通过event.page
$(function () {
    // 获取事件的坐标
    $(".son").click(function (event) {
        // 获取相对于事件元素左上角坐标
        console.log(event.offsetX, event.offsetY);
        // 获取相对于视口左上角坐标
        console.log(event.clientX, event.clientY);
        // 获取相对于页面左上角坐标
        console.log(event.pageX, event.pageY);
    });
});
8.5 事件冒泡

  • 什么是事件冒泡

    • 事件冒泡是从目标元素逐级向上传播到根节点的过程

  • 阻止事件冒泡

    • 如果希望在触发一个元素的事件处理程序时，不影响其父元素, 此时便可以使用停止事件冒泡
$(function () {
    $(".son").click(function (event) {
        console.log(".son");
        // 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发
        event.stopPropagation();
    });
    $(".father").click(function () {
        console.log(".father");
    });
});
8.6 默认行为

  • 什么是默认行为

    • 网页中的元素有自己的默认行为
    • 例如
      • 单击超链接后会跳转
      • 点击提交表单按钮会提交

  • 阻止默认行为

    • 可以使用event.preventDefault();方法阻止事件默认行为
$(function () {
    $("a").click(function (event) {
        var str = $("a").attr("href");
        // 如果超链接是百度就不跳转
        if(str.indexOf("baidu") > 0){
            // 阻止默认行为
            event.preventDefault();
        }
    });
});
8.7 自动触发事件

  • 什么是自动触发事件

    • 通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发

  • 自动触发方式

    • $("selector").trigger("eventName");
      • 触发事件的同时会触发事件冒泡
      • 触发事件的同时会触发事件默认行为
    • $("selector").triggerHandler("eventName");
      • 触发事件的同时不会触发事件冒泡
      • 触发事件的同时不会触发事件默认行为
$(function () {
    /*
    $(".son").click(function () {
        alert("son");
    });
    $(".father").click(function () {
        alert("father");
    });

    // trigger 会触发事件冒泡
	// $(".father").trigger("click");
	// $(".son").trigger("click");

    // triggerHandler 不会触发事件冒泡
	// $(".father").triggerHandler("click");
	// $(".son").triggerHandler("click");
    */

    $("input[type='submit']").click(function () {
        alert("点击了A标签");
    });
    // trigger 会触发系统默认事件
	// $("input[type='submit']").trigger("click");
    // triggerHandler 不会触发系统默认事件
    $("input[type='submit']").triggerHandler("click");

});
8.8 自定义事件

  • 什么是自定义事件

    • 自定义事件就是自己起一个不存在的事件名称来注册事件,
    • 然后通过这个名称还能触发对应的方法执行, 这就是自定义事件

  • 自定义事件的条件

    • 事件必须是通过on绑定的
    • 事件必须通过trigger来触发
    • 因为trigger方法可以自动触发对应名称的事件,所以只要事件的名称和传递给trigger的名称一致就能执行对应的事件方法
$(function () {
    $(".father").on("njClick", function () {
        alert("njClick");
    });
    $(".father").trigger("njClick");
});
8.9 事件命名空间

  • 什么是事件命名空间

    • 事件命名空间主要用于区分相同类型的事件,区分不同前提条件下到底应该触发哪个事件
    • 格式: eventName.命名空间

  • 添加事件命名空间的条件

    • 事件是通过on来绑定的
    • 通过trigger触发事件

  • 事件命名空间注意点（面试题）

    • 利用trigger触发子元素带命名空间的事件时，会触发父元素带相同命名空间的事件，父元素没有命名空间的事件不会被触发
    • 利用trigger触发子元素不带命名空间的事件时，所有父元素（带相同命名空间，不带命名空间）事件都会被触发，所有子元素（带相同命名空间，不带命名空间）事件也都会被触发
$(function () {
    // 给父元素添加不带命名空间事件
    $(".father").on("click", function () {
        alert("father");
    });
    // 给父元素添加带命名空间事件
    $(".father").on("click.66", function () {
        alert("66 - father");
    });

    $(".son").on("click.nj", function () {
        alert("nj - 向左走");
    });
    $(".son").on("click.66", function () {
        alert("66 - 向右走");
    });
    // 会同时触发NJ和66编写的click事件
    // 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素
	// $(".son").trigger("click");
    // 只会触发NJ编写的click事件
    // 事件不会冒泡到不带命名空间上级元素
	// $(".son").trigger("click.nj");
    // 只会触发66编写的click事件
    // 事件只会冒泡到带相同命名空间的上级元素
    $(".son").trigger("click.66");
});
8.10 事件委托
8.10.1 什么是事件委托
  • 事件委托就是请其他人帮忙做我们想做的事
  • 做完之后最终的结果还是会反馈到我们这里
8.10.2 事件委托的好处
  • 减少监听数量
    • 添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
    • 因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
    • 每个监听的函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差
  • 新增元素自动有事件响应处理
    • 默认情况下新增的元素无法响应新增前添加的事件
8.10.3 jQuery 中添加事件委托
  • 添加前
    • $("li").click隐式迭代给界面上所有li都添加了click事件(监听数量众多)
    • 通过$("ul").append新添加的li无法影响click事件
<script>
    $(function () {
        // 1.监听li点击事件
        $("li").click(function () {
            // 弹出当前点击行内容
            alert($(this).html());
        });

        // 2.监听新增按钮点击
        var count = 0;
        $("button").eq(0).click(function () {
            count++;
            // 新增一行内容
            $("ul").append("<li>我是新增内容"+count+"</li>")
        });
    });
</script>
<body>
	<ul>
	    <li>我是第1行</li>
	    <li>我是第2行</li>
	    <li>我是第3行</li>
	</ul>
	<button>新增一行</button>
	<button>移除事件委托</button>
</body>
  • 添加后
    • 格式:$(parentSelector).delegate(childrenSelector, eventName, callback)
    • $("ul").delegate隐式迭代所有ul添加事件(相比开始迭代li,必然ul的个数会少很多)
    • 当事件被触发时,系统会自动动态查找当前是哪个li触发了事件,所以新增的li也能响应到事件
$(function () {
    // 1.委托ul监听li的点击事件
    $("ul").delegate("li","click",function () {
        // 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li
        // 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件.
// console.log(this);
        // 弹出当前点击行内容
        alert($(this).html());
    });

    // 2.监听新增按钮点击
    var count = 0;
    $("button").eq(0).click(function () {
        count++;
        // 新增一行内容
        $("ul").append("<li>我是新增内容"+count+"</li>")
    });
});
8.10.4 事件的委托注册
  • delegate()方法用于委托事件的注册
$(对象).delegate(子元素名,事件名,处理函数）
  • 委托事件的特点
    • 利用事件冒泡机制实现委托
    • 提高事件处理的性能
    • 解决动态添加DOM元素的事件绑定
$(function(){
   // 简单低级方式
   $('li').on('mouseover',function(){
   	 $(this).css('color','#f00')
   })

   // 代理高级方式
   $('ul').delegate('li','mouseover',function(){
     $(this).css('color','#f00')
   })
}
8.11 移入移出事件
8.11.1 mouseenter/mouseleave
  • 移动到子元素不会触发事件
$(function () {
    // 移动到子元素不会触发事件
     // 2.1移入事件
     $('.father').mouseenter(function () {
       console.log('mouseenter');
     });
     // 2.2移除事件
     $('.father').mouseleave(function () {
       console.log('mouseleave');
     });
});
8.11.2 mouseover/mouseout
  • 移动到子元素会触发事件
$(function () {
     // 2.1移入事件
     $('.father').mouseover(function () {
       console.log('mouseover') ;
     });
     // 2.2移除事件
     $('.father').mouseout(function () {
       console.log('mouseout') ;
     });
});
8.11.3 hover
  • 内容监听移入和移出
  • 内部实现就是调用mouseenter和mouseleave
$(function () {
    /*
   // 传入两个回调函数,一个监听移入,一个监听移出
    $(".father").hover(function () {
        console.log("mouseenter");
    }, function () {
        console.log("mouseleave");
    });
    */
    // 如果只传入一个方式,那么这个方式既监听移入也监听移出
    $(".father").hover(function () {
        console.log("移入移除");
    });
});

9. jQuery 动画

9.1 常见动画类型
  • jQuery 提供了很多动画效果
    • 控制元素显示与隐藏
    • 控制元素淡入淡出
    • 改变元素高度
9.2 显示与隐藏动画
9.2.1 show
  • 显示动画
    • 设置显示速度可以实现动画效果
    • 显示速度可以取如下值：毫秒（如1000）、slow、normal、fast
    • 默认的动画时长是400毫秒
    • slow本质是600毫秒
    • normal本质是400毫秒
    • fast本质是200毫秒
  • 原理
    • 当前操作的元素是块级，调用display:block;
    • 当前操作的元素是行内，调用display:inline;
// 编写jQuery相关代码
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});
9.2.2 hide
  • 隐藏动画
    • 参数也可以设置隐藏的动画效果
$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});
9.2.3 toggle
  • 切换动画
    • 显示变隐藏，隐藏变显示
$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切换动画执行完毕");
    });
});
9.3 展开与收起动画
9.3.1 slideDown
  • 展开动画
  • 使元素逐步延伸显示
$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});
9.3.2 slideUp
  • 收起动画
  • 使元素逐步缩短直至隐藏
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});
9.3.3 slideToggle
  • 切换动画
    • 展开变收起,收起变展开
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});
9.4 淡入淡出动画
9.4.1 fadeIn
  • 淡入动画
  • 改变元素的透明度实现淡入效果
$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});

// 以较慢的速度淡入
$("input[name=fadein_btn]").click(function(){
    $("img").fadeIn("slow");
});
9.4.2 fadeOut
  • 淡出动画
  • 改变元素的透明度实现淡出效果
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});
9.4.3 fadeToggle
  • 切换动画
    • 显示变淡出，不显示变淡入
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});
9.4.4 fadeTo
  • 淡入到指定透明度动画
  • 可以通过第二个参数,淡入到指定的透明度(取值范围0~1)
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});
9.5 通用动画函数
9.5.1 animate
  • animate()针对各类样式变化提供渐变的动画功能
$(selector).animate(styles,speed,easing,callback)

styles 	 变化的样式
speed  	 动画的速度
easing 	 动画的方式
callback 动画后的执行回调函数

/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定义动画执行完毕");
});
  • 每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画
$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
});
  • 同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画
$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定义动画执行完毕");
});
9.6 多动画的组合
  • 同时执行的动画
$(selector).animate({样式1,样式2...},speed)
  • 先后执行的动画
//先执行的动画
$(selector).animate(styles,speed,easing,function(){
   //后执行的动画
   $(selector).animate(styles,speed,easing) 	
})
9.7 动画队列
  • 多个动画方法链式编程
  • 等到前面的动画执行完毕再依次执行后续动画
$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});
  • 如果后面紧跟一个非动画方法则会被立即执行
// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
  • 如果想颜色在动画执行完毕之后设置
    • 使用回调
    • 使用动画队列
$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});
  • 注意
    • 动画队列方法queue()后面不能继续直接添加queue()
    • 如果想继续添加必须在上一个queue()方法中next()方法
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 关键点
}).queue(function () {
    $(".one").css("width", "500px")
});
9.8 动画相关方法
9.8.1 delay
  • 设置动画延迟时长
$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);
9.8.2 stop
  • 停止指定元素上正在执行的动画
// 立即停止当前动画, 继续执行后续的动画
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);

// 立即停止当前和后续所有的动画
$("div").stop(true);
$("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画
$("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
9.9 动画的结束
  • 动画停止stop(stopAll，gotoEnd)
    • 参数stopAll表示是否停止后续其他动画执行
    • 参数gotoEnd表示是否允许完成当前动画，是在第一个参数生效时使用
9.10 动画练习
9.10.1 切换显示列表
<script src="js/jquery-3.5.1.js"></script>
<script>
    // 切换显示后三项列表数据
    $(function(){
        $('input').click(function(){
            $('li:gt(4):not(:last)').toggle(3000)
        })
    })
</script>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li><input type="button" value="搜索或扩展"></li>
    </ul>
</body>
9.10.2

在这里插入图片描述

<style>
    *{margin: 0;padding: 0;}
    #left {
        width: 50px;
        height: 200px;
        background-color: #008;
        position: absolute;
        left: 0;
        top: 500px;
    }
    #right {
        width: 200px;
        height: 0;
        background-color: #ff0;
        position: absolute;
        bottom:0;
        right: -200px;
    }
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        $('#left').mouseover(function(){
            $(this).animate({'width':300},2000,function(){
              $('#right').animate({'height':400},1000)
            })
        }).mouseout(function(){
          $('#right').animate({'height':0},1000,function(){
            $('#left').animate({'width':50},2000)
          })
        })
    })
</script>
<body>
    <div id="left">
      <div id="right"></div>
    </div>
</body>

10. jQuery 静态方法

10.1 什么是静态方法
  • 静态方法对应的是对象方法
  • 对象方法用实例对象调用,而静态方法用类名调用
 // 1.定义一个类
 function AClass() {
 }
 // 2.给这个类添加一个静态方法
 // 直接添加给类的就是静态方法
 AClass.staticMethod = function () {
     alert("staticMethod");
 }
 // 静态方法通过类名调用
 AClass.staticMethod();

 // 3.给这个类添加一个实例方法
 AClass.prototype.instanceMethod = function () {
     alert("instanceMethod");
 }
 // 实例方法通过类的实例调用
 // 创建一个实例(创建一个对象)
 var a = new AClass();
 // 通过实例调用实例方法
 a.instanceMethod();
10.2 jQuery.holdReady()
  • 暂停或者恢复 jQuery.ready() 事件
  • 传入 true 或 false
<script>
	// 使用$直接调用,是静态方法
	$.holdReady(true);
	$(function () {
	   $("#first").click(function () {
	       alert("我是你想要的弹窗");
	   });
	});
</script>
<body>
	<button id="first">点击测试弹出</button>
	<button id="second">解除延迟</button>
	<script>
	    $("#second").click(function(){
	        $.holdReady(false);
	    });
	</script>
</body>
10.3 each 方法
  • js 原生 forEach 方法
    • 原生的forEach方法只能遍历数组, 不能遍历伪数组
/*
  第一个参数: 遍历到的元素
  第二个参数: 当前遍历到的索引
*/
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
       
arr.forEach(function (value, index) {
	console.log(index, value);
});

obj.forEach(function (value, index) {
	console.log(index, value);// 报错
});
  • jQuery 的 each 静态方法
    • 遍历对象或数组(伪数组)
    • 优点统一遍历对象和数组的方式
    • 回调参数的顺序更符合我们的思维模式
// 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
*/
$.each(arr, function (index, value) {
	console.log(index, value);
});
$.each(obj, function (index, value) {
	console.log(index, value);
});
10.4 map 方法
  • js 原生 map 方法
    • 不能遍历的伪数组
  • jQuery 的 map 方法
    • 遍历对象或数组
    • 将回调函数的返回值组成一个新的数组返回
$(function () {
     // 4.1遍历数组
     var arr = [1, 3, 5, 7, 9];
     // 4.1.1通过原生方法遍历数组
     // 第一个回调函数参数是遍历到的元素
     // 第二个回调函数参数是当前遍历的索引
     // 第三个回调函数参数是当前被遍历的数组
     // 返回值: 将回调函数返回值收集起来组成一个新的数组
     var res = arr.map(function (ele, idx, arr) {
         console.log(idx, ele, arr);
         return ele + idx;
     });
     console.log(res);
     
     // 4.1.2通过jQuery静态方法遍历数组
     // 第一个回调函数参数是遍历到的元素
     // 第二个回调函数参数是当前遍历的索引
     // 返回值: 将回调函数返回值收集起来组成一个新的数组
     var $res2 = $.map(arr, function (ele,idx) {
         console.log(idx, ele);
         return ele + idx;
     });
     console.log($res2);

     // 4.2遍历对象
     var obj = {name: "lnj", age:"33", gender:"male"};
     /*
     obj.map(function (ele, idx, obj) {
         // 报错,原生JS没有map方法
         console.log(idx, ele, obj);
     });
     */
     var $res = $.map(obj, function (value, key) {
         console.log(key, value);
         return key + value;
     });
     console.log($res);
 });
10.5 filter 方法
  • 作用
    • 返回符合一定条件的元素
    • 该方法让您规定一个条件
      • 不符合条件的元素将从选择中移除
      • 符合条件的元素将被返回
    • 该方法通常用于缩小在被选元素组合中搜索元素的范围
返回带有类名 "intro" 的所有 <p> 元素

$("p").filter(".intro")
10.6 find 方法
  • 作用
    • 返回被选元素的后代元素
    • 后代是子、孙、曾孙，依此类推
返回 <ul> 后代中所有的 <span> 元素

$(document).ready(function(){
	$("ul").find("span").css({"color":"red","border":"2px solid red"});
});
10.7 each 与 map 区别
  • each 静态方法默认的返回值就是遍历谁就返回谁
  • map 静态方法默认的返回值是一个空数组
  • each静态方法不支持在回调函数中对遍历的数组进行处理
  • map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
10.8 type 方法
  • 作用
    • 该参数是否一个正则表达式
    • 如果对象是undefined或null，则返回相应的"undefined"或"null"
    • 如果对象有一个内部属性[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，就返回相应的 [[Class]] 名字
$.type( undefined ) === "undefined"

$.type() === "undefined"

$.type( window.notDefined ) === "undefined"

$.type( null ) === "null"

$.type( true ) === "boolean"

$.type( 3 ) === "number"

$.type( "test" ) === "string"

$.type( function(){} ) === "function"

$.type( [] ) === "array"

$.type( new Date() ) === "date"

$.type( new Error() ) === "error" // jQuery 1.9 新增支持

$.type( /test/ ) === "regexp"
10.9 trim 方法
  • 作用
    • 去除字符串两端的空格
  • 参数
    • 需要去除空格的字符串
  • 返回值
    • 去除空格之后的字符串
$(function () {
    var str = "   lnj   ";
    console.log("---"+str+"---");
    var $res = $.trim(str);
    console.log("---"+$res+"---");
});
10.10 isWindow 方法
  • 作用
    • 判断传入的对象是否是window对象
    • 返回值 true / false
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
// 对象
var obj = {"name":"lnj", age:"33"};
// 函数
var fn = function(){};
// window对象
var w = window;

var res = $.isWindow(w);
console.log(res);
10.11 isArray 方法
  • 作用
    • 判断传入的对象是否是真数组
    • 返回值 true / false
$(function () {
    // 对象
    var obj = {name:"lnj",age: "33", gender:"male"};
    // 真数组
    var arr = [1, 3, 5, 7, 9];
    var $res = $.isArray(obj);
    console.log($res);// false
    var $res2 = $.isArray(arr);
    console.log($res2);// true
});
10.12 inArray 方法
  • 作用
    • 返回数组中指定元素的索引值
    • 如果没有找到，则返回-1
$(function () { 
    var arr = [ 4, "Pete", 8, "John" ];
    var $spans = $( "span" );
    $spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
    $spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
    $spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
    $spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
})
10.13 isFunction 方法
  • 作用
    • 判断传入的对象是否是一个函数
    • 返回值: true / false
  • 注意点
    • jQuery框架本质上是一个函数
    • (function( window, undefined ) {})( window );
$(function () {
	var obj = {name:"lnj",age: "33", gender:"male"};
	var arr = [1, 3, 5, 7, 9];
	var fn = function () {}
	var $res = $.isFunction(obj);
	console.log($res);// false
	$res = $.isFunction(arr);
	console.log($res);
	$res = $.isFunction(fn);
	console.log($res);
	// 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
	$res = $.isFunction($);
	console.log($res);
});
10.14 parseJSON 方法
  • 作用
    • $.parseJSON()函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象
    • 传入格式有误的 JSON 字符串可能导致抛出异常
    • JSON标准不允许"控制字符"如制表符或换行符
解析一个 JSON 字符串

$(function () { 
    var obj = jQuery.parseJSON('{"name":"John"}');
    alert( obj.name === "John" );
})
10.15 makeArray 方法
  • 作用
    • $.makeArray()函数用于将一个类似数组的对象转换为真正的数组对象
  • 注意
    • 类数组对象具有许多数组的属性(例如length属性，[]数组访问运算符等)
    • 但是缺少从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)
将一个HTML元素集合转换成对应的数组

$(function () { 
    var elems = document.getElementsByTagName("div"); // 返回一个节点列表
    var arr = jQuery.makeArray(elems);
    arr.reverse(); //对列表的元素使用一个数组方法
    $(arr).appendTo(document.body);
})
10.16 extend 方法
  • 作用
    • jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象
  • 注意
    • 如果只为$.extend()指定了一个参数，则意味着参数target被省略，此时，target就是jQuery对象本身
    • 通过这种方式，可以为全局对象 jQuery 添加新的函数
    • 如果多个对象具有相同的属性，则后者会覆盖前者的属性值
<div id="log"></div>
<script>
$(function () { 
    var object1 = {
        apple: 0,
        banana: {weight: 52, price: 100},
        cherry: 97
    };
    var object2 = {
        banana: {price: 200},
        durian: 100
    };
    /* object2 合并到 object1 中 */
    $.extend(object1, object2);
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
        var arr = [];
        $.each(obj, function(key, val) {
            var next = key + ": ";
            next += $.isPlainObject(val) ? printObj(val) : val;
            arr.push( next );
        });
        return "{ " +  arr.join(", ") + " }";
    };
    $("#log").append( printObj(object1) );
})
</script>
10.17 fn.extend 方法
  • 作用
    • $.fn.extend()函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)
  • 提示
    • jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法
    • 这些方法可以在jQuery实例对象上调用

11. jQuery 的 Ajax

11.1 Ajax 的定义
  • Ajax: 异步刷新技术

在这里插入图片描述

11.2 异步刷新的作用
  • 无刷新: 不刷新整个页面，只刷新局部
  • 无刷新的好处
    • 只更新部分页面，有效利用带宽
    • 提供连续的用户体验
    • 提供类似C/S的交互效果，操作更方便
11.3 Ajax 和 传统 web 区别
传统webAjax技术
提交表单方式发送请求异步引擎对象发送请求
响应内容是一个完整页面响应内容只是需要的数据
需等待服务器响应完成并重新加载整个页面后，用户才能进行操作可以动态更新页面中的部分内容，用户不需要等待请求的响应
11.4 Ajax 异步请求原理

在这里插入图片描述

11.5 jQuery 的 Ajax 请求
  • 传统方式实现Ajax的不足
    • 方法、属性、常用值较多不好记忆
    • 步骤繁琐
    • 浏览器兼容问题
  • jQuery常用Ajax方法(“$”不需要选择器，这是工具方法)
    • $.ajax()
    • $.get()
    • $.post()
    • $.getJSON()
    • load()
11.6 Ajax 请求方法的语法
  • 使用$.ajax()实现异步交互
$.ajax({
	url: url,					// 要提交的 URL 路径
	type: "get",				// 发送请求的方式
	data: data,					// 要发送到服务器的数据
	dataType: "json"			// 指定传输的数据格式
	success: function(result){	// 请求成功后要执行的代码
	},
	error: function(){			// 请求失败后要执行的代码
	}
});
11.7 get 请求方法的语法
  • 使用$.get()实现异步交互
$.get(url,data,function(result){
	// 省略将服务器返回的数据显示到页面的代码
});

// 以上代码等价于

$.ajax({
	url:url,
	data:data,
	type:"get",
	success: function(result) {
		//省略代码
	}
});
11.8 load 请求方法的语法
  • 使用load()实现异步交互
  • 加载外部的页面文件到当前页面中
$("#nameDiv").load(url,data);

// 以上代码等价于

$.get(url,data,function(result){
	$("#nameDiv").html(result);
}
11.9 getJSON 请求方法的语法
  • 使用$.getJSON()实现异步交互
  • 仅限于JSON数据格式
$.getJSON(url,data, success(result) {
	//省略将服务器返回的数据显示到页面的代码
});

12. jQuery 异步请求 Ajax

12.1 跨域问题
  • 跨域的限制

在这里插入图片描述

  • 跨域的规定
URL原因是否允许通信
http://www.a.com/dir/b.html同一域名下允许
http://www.a.com/dir2/c.html同一域名，不同文件夹允许
http://www.a.com:81/dir/d.html同一域名,不同端口不允许
https://www.a.com/dir/e.html同一域名，不同协议不允许
http://71.23.92.77/dir/f.htmll域名和域名对应 ip不允许
http://script.a.com/g.html主域相同，子域不同不允许
http://a.com/h.html同一域名，不同二级域名(同上)不允许(cookie 这种情况下也不允许访问)
http://www.cc.com/a.html主机名不同不允许
12.2 跨域问题的解决
  • 常用解决方法
    • 服务器设置
      • 允许跨域请求
    • 代理设置
    • jsonp
      • 通过script可以跨域的特点
      • 配置dataType参数
      • 配置jsonp参数
12.3 Ajax 练习
12.3.1 模糊搜索功能
  • 使用淘宝商品推荐的接口，实现模糊搜索功能
  • 淘宝商品推荐接口
    • http://suggest.taobao.com/sug?code=utf-8&q=关键字&callback=cb

在这里插入图片描述

<script>
	$(function(){
		$('#btnSearch').click(function(){
			var searchContent = $('#search').val() // 获取文本框内容
			$.ajax({
				url: 'http://suggest.taobao.com/sug', // 后缀为接口数据
	            type: 'get',
	            data: {code:'utf-8',q:searchContent}, // code是文字编码，q是查询关键字，传递参数
	            dataType: 'jsonp',    // 设置返回的数据格式为jsonp
	            jsonpCallback: 'cb',  // cb jsonp 返回函数
	            success: function(result){
	              console.log(result);
	            },
	            error: function(err){
	              console.log('请求失败，错误信息:',err);
	            }
			})
		})
	})
</script>
<body>
	<form action="">
      <input type="text" name="" value="" id="search">
      <input type="button" name="" value="搜索" id="btnSearch">
    </form>
</body>

在这里插入图片描述
在这里插入图片描述

13. 总结

  • jQuery 库能简化原生js编写，做个笔记
qq_43645678
关注
  • 165
    点赞
  • 踩
  • 999
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
专栏目录
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值