关于jQuery
1、jQuery简介
1.1 JavaScript库：
JavaScript库，是一个封装好的特定的集合（方法和函数）。
1.2 jQuery 的概念：
jQuery 是一个快速、简洁的 JavaScript 库，即倡导写更少的代码，做更多的事情。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery 就是学习调用这些函数（方法），jQuery 出现的目的是加快前端开发速度，可以非常方便的调用和使用它，从而提高开发效率。
1.3 jQuery 的优点
- 轻量级。核心文件才几十kb，不会影响页面加载速度。
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源 - 查找元素的方法多种多样，非常灵活
- 拥有隐式迭代特性，因此不再需要手写for循环了。
- 完全没有兼容性问题。
- 实现动画非常简单，而且功能更加的强大。
- 代码简单、粗暴。
2、jQuery 的基本使用
2.1 jQuery 的下载
官网地址：https://jquery.com/
版本：
- 1.x版本：能够兼容IE678浏览器
- 2.x版本：不兼容IE678浏览器
- 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
- 3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本，主要是为了兼容IE678浏览器。
各个版本的下载：https://code.jquery.com/
2.3 引入jQuery文件
2.4 入口函数
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});
jQuery入口函数与window.onload的对比
JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
2.5 jQuery 的顶级对象 $
1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
<script>
// 1. $ 是jQuery的别称（另外的名字）
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
// 2. $同时也是jQuery的 顶级对象
</script>
2.6 jQuery对象和DOM对象
2.6.1 jQuery对象和DOM对象的区别
*DOM对象
- 用原生JavaScript获取的DOM对象，通过document.getElementById() 反馈的是元素(DOM对象)
- 通过document.getElementsByTagName()获取到的是什么？
伪数组(集合)，集合中的每一个对象是DOM对象
*jQuery对象
-
jQuery对象用$()的方式获取的对象
-
jQuery对象又可以叫做包装集(包装的DOM对象的集合)
jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员
2.6.2 jQuery对象和DOM对象的相互转换
jQuery对象转换成DOM对象：
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
jQuery对象.get(索引值);
jQuery对象[索引值]
DOM对象转换成jQuery对象：
$(DOM对象) //只有这一种方法
3、jQuery选择器
3.1 基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 全选择器 | $('*') |
获取所有元素 |
| ID选择器 | $('#id') |
获取指定ID的元素 |
| 类选择器 | $('.class') |
获取同一类class的元素 |
| 标签选择器 | $('div') |
获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') |
使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $('div.redClass') |
获取class为redClass的div元素 |
3.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $('ul > li'); |
使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $('ul li'); |
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
3.3 jQuery过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| : first | $('li:first') |
获取第一个li元素 |
| : last | $('li:last') |
获取最后一个li元素 |
| :eq（index） | $('li:eq(2)').css('color', 'red'); |
获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $('li:odd').css('color', 'red'); |
获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red'); |
获取到的li元素中，选择索引号为偶数的元素 |
3.4 jQuery筛选选择器(方法)
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') |
相当于$(‘ul-li’)，子类选择器 |
| find(selector) | $('ul').find('li'); |
相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $('#first').siblings('li'); |
查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); |
查找父亲 |
| parents() | $('.box').parents('.main'); |
查找.box的父亲，父亲为.main |
| eq(index) | $('li').eq(2); |
相当于$(‘li:eq(2)’),index从0开始 |
| next() | $('li').next() |
找下一个兄弟 |
| nextAll([expr]) | $(".first").nextAll() |
查找当前元素之后所有的同辈元素 |
| prev() | $('li').prev() |
找上一次兄弟 |
| prevtAll([expr]) | $(".last").prevAll() |
查找当前元素之前所有的同辈元素 |
| hasClass(class) | $('div').hasClass("protected") |
检查当前的元素是否含有某个特定的类，如果有，则返回true |
3.5 jQuery隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做 隐式迭代
简单理解: 匹配到的所有元素进行循环遍历，执行相应的方法，而不用再进行循环，简化操作方便调用
<body>
<div>惊喜不，意外不div>
<div>惊喜不，意外不div>
<div>惊喜不，意外不div>
<div>惊喜不，意外不div>
<ul>
<li>相同的操作li>
<li>相同的操作li>
<li>相同的操作li>
ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
script>
body>
3.6 排他思想&链式编程
<body>
<button>快速button>
<button>快速button>
<button>快速button>
<button>快速button>
<button>快速button>
<button>快速button>
<button>快速button>
<script>
$(function()
$("button").click(function() {
// 当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("color", "red").siblings().css("color", "");
});
})
script>
body>
4 、jQuery样式操作
4.1 修改CSS样式
1、参数只写属性名,则返回属性值
$(this).css("color");
2、参数是属性名,属性值,逗号分隔,是设定一组样式。
属性需要加引号,值是数字可不加单位和引号
$(this).css("color",300);
3、参数可以是对象形式,方便设置多组样式。
属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({
"color":"red",
"width": 400,
"height": 400,
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
backgroundColor: "red"
})
4.2 设置类样式方法
作用等同于classList，可以操作类样式， 不会影响到其他类的存在，只对指定类操作。
里面的参数不要加点
// 1.添加类
$("div").addClass("current");
// 2.移除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
jQuery类操作和className区别
原生 JS 中的 className 会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作，不影响原先的类名
5、JQuery动画
5.1 三组基本动画
- 显示(show)与隐藏(hide)是一组动画：
- 滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
- 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
// 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
// 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
// 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数
slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理
补充：事件切换
语法：hover([over,]out)
over: 鼠标移到元素上要触发的函数(相当于mouseenter)
out: 鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数，则鼠标经过和离开都会触发它
$("div").hover(function(){},function(){});
// 第一个function是鼠标经过的函数
// 第二个function是鼠标离开的函数
// 如果hover只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$("div").hover(function(){
$(this).slideToggle();
})
5.2 停止排队stop()
用于停止动画或者效果， stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
$(".nav>li").hover(function(){
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
})
5.4 渐进方式调整到指定的不透明度
// 修改透明度 这个速度和透明度必须写
fadeTo(speed,opacity,[easing],[fn])
opacity ：透明度必须写，取值 0~1 之间
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
<body>
<button>修改透明度button>
<div>div>
<script>
$(function() {
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
script>
body>
5.5 jQuery自定义动画animate
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动） 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
6 、JQuery属性操作
6.1 自定义属性——attr操作
- 设置单个属性
// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
// 用法举例
$('img').attr('title','哎哟，不错哦');
$('img').attr('alt','哎哟，不错哦');
- 设置多个属性
// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj)
// 用法举例
$('img').attr({
title:'哎哟，不错哦',
alt:'哎哟，不错哦',
style:'opacity:.5'
});
- 获取属性
// 传需要获取的属性名称，返回对应的属性值
$obj.attr(name)
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);
- 移除属性
// 参数：需要移除的属性名，
$obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');
6.2 固有属性——prop操作
- 在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false
7、JQuery内容文本值
val()/text/()html()
$obj.val() //获取或者设置表单元素的value属性的值
$obj.html() //对应innerHTML
$obj.text() //对应innerText/textContent，处理了浏览器的兼容性
8、JQuery元素操作
8.1 创建节点
// $(htmlStr)
// htmlStr：html格式的字符串
$(');
8.2 添加元素
8.2.1 内部添加
- append appendTo 在被选元素的结尾插入内容
- prepend prependTo 在被选元素的开头插入内容
内部添加元素，生成之后，它们是父子关系
// 1.内部添加
element.append("内容")
$("ul").append(li);
// 把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容")
$("ul").prepend(li);
// 把内容放入匹配元素内部最前面
8.2.4 外部添加
- before 在被选元素之后插入内容
- after 在被选元素之前插入内容
外部添加元素，生成之后，它们是兄弟关系
// 2.外部添加
element.after("内容");
$(".test").after(div);
// 把内容放入目标元素后面
element.before("内容");
// 把内容放入目标元素前面
8.3 删除元素
- element.remove() //删除匹配的元素(本身)
$("ul").remove();
- element.empty() //删除匹配元素里面的子结点(孩子)
$("ul").empty();
- element.html("") //删除匹配元素里面的子结点(孩子)
8.4 遍历
8.4.1 遍历元素
$("div").each(function(index,domEle){xxx;})
- each()方法遍历匹配的每一个元素。主要用DOM处理。
- 回调函数的两个参数: index是每个元素的索引号,domEle是每个DOM元素。
- 想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)
8.4.2 遍历任何对象
$.each(Object,function(index,element){xxx;})
- $.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象
- 函数里的两个参数: index 是每个元素的索引号,element遍历内容
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素
//（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
8.5 克隆元素
- 作用：复制匹配的元素
// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();
9 、JQuery尺寸与位置
9.1 尺寸
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值，只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值，包含padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值，包含padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值，包含padding、border、margin |
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应值，参数可以不必写单位
9.2 位置
9.2.1 offset() 设置或获取元素偏移
-
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
-
该方法有两个属性 left、top.
offset().top用于获取距离文档顶部的距离，
offset().left 用于获取距离文档左侧的距离
设置元素的偏移：offset({ top: 10, left: 30 });
$(".son").offset();
$(".son").offset().top;
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
9.2.2 position()获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，不能设置偏移。如果父级都没有定位，则以文档为准。
- 该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离，
position().left 用于获取距离定位父级左侧的距离。
<body>
<div class="father">
<div class="son">div>
div>
<script>
$(function() {
console.log($(".son").position());
// 这个方法只能获取不能设置偏移
// $(".son").position({
// top: 200,
// left: 200
// });
})
script>
body>
9.2.3 scrollTop() / scrollLeft()
scrollTop() / scrollLeft() 方法设置或返回被选元素被卷去的头部 / 左侧。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
// 页面滚动事件
$(window).scroll(function(){
$(document).scrollTop();
})
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
style>
<script src="jquery.min.js">script>
head>
<body>
<div class="back">返回顶部div>
<div class="container">
div>
<script>
$(function() {
$(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元素做动画
})
})
script>
body>
10、JQuery事件
10.1 简单事件注册
$("div").click(function(){事件处理程序})
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。缺点是不能同时注册多个事件。
补充1：bind方式注册事件
// 第一个参数：事件类型
// 第二个参数：事件处理程序
$('p').bind('click mouseenter', function(){
// 事件响应方法
});
缺点：不支持动态事件绑定
补充2：delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function(){
// 为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
10.2 事件处理
10.2.1 绑定事件on()
- 可以绑定多个事件，多个处理事件处理程序
$("div").on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
})
- 如果事件处理程序相同
//鼠标经过，样式变化，我们可以把新样式写在一个新类里，触发效果只需要切换类名
$("div").on("mouseover mouseout",function(){
$(this.toggleClass("current"));
});
- 可以事件委派操作.事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){
alert("hello world!");
});
//事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数
动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
// 传统方法
$("ol li").click(function(){
alert(11);
})
var li = $("我是后来创建的 ")
$("ol").append(li);
// 没有用，动态创建的元素没有办法绑定事件
// on可以给未来动态创建的元素绑定事件
$("ol").on("click","li",function(){
alert(11);
})
var li = $("我是后来创建的 ")
$("ol").append(li);
10.2.2 解绑事件off()
off() 方法可以移除通过on()方法添加的事件处理程序。
$("div").off(); // 这个是接除了div身上的所有事件
$("div").off("click"); //这个是解除了div身上的点击事件
$("ul").off("click","li"); //这个是解绑事件委托
如果有些事件只想执行一次就不再执行，可以使用one() 方法
$("p").one("click",function(){
alert(11);
})
10.2.3 自动触发事件trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。
<script>
$(function() {
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
// $("input").triggerHandler("focus");
});
</script>
10.3 jQuery事件对象
// screenX和screenY 对应屏幕最左上角的值
// clientX和clientY 距离页面左上角的位置（忽视滚动条）
// pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
// event.keyCode 按下的键盘代码
// event.data 存储绑定事件时传递的附加数据
// event.stopPropagation() 阻止事件冒泡行为
// event.preventDefault() 阻止浏览器默认行为
// return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
event.stopPropagation()示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
style>
<script src="jquery.min.js">script>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
script>
head>
<body>
<div>div>
body>
11、JQuery其他方法
11.1 JQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])
deep:如果设为true为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象
objectN:待拷贝的第N个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址),修改目标对象不会影响被拷贝对象
- 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
$(function() {
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj);
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
// console.log(targetObj); // 会覆盖targetObj 里面原来的数据
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);
11.2 JQuery多库共存
- jQuery使用 作 为 标 示 符 ， 但 是 如 果 与 其 他 框 架 中 的 作为标示符，但是如果与其他框架中的 作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.
var Tom = $.noConflict();// 释放$的控制权,并且把$的能力给了Tom
Tom("div").on("click", function() {
console.log("点击了document");
})
11.3 数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
①附加数据语法
语法：data(“name”,“value”) 向被选元素附加数据
$("span").data("uname","andy");
②获取数据语法
语法：date(“name”) 向被选元素获取数据
$("span").data("uname");
// 这个方法获取data-index h5自定义属性，不用写 data- 返回的是数字型(2)
$("div").data("index");
同时，还可以读取H5自定义属性 data-index,得到的是数字型
<body>
<span>123span>
<div index="1" data-index="2">我是divdiv>
<script>
$(function() {
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
script>
body>
11.4 更多
JQueryAPI中文文档
12、JQuery插件
12.1 jQuery插件使用步骤
- 引入相关文件(jQuery文件和插件文件)
- 复制相关 html，css，js(调用插件)
- 调配参数，符合预期
12.2 常用作用
- 瀑布流效果
- 图片懒加载
- 全屏滚动
GitHub地址：https://github.com/alvarotrigo/fullPage.js
中文翻译网站：https://www.dowebok.com/demo/2014/77/
12.2 JQuery插件推荐
jQuery 插件常用的网站:
- jQuery插件库 http://www.jq22.com/ (需要登录)
- jQuery之家 http://www.htmleaf.com/ (不需登录，推荐)
弹出层插件 layer
- layer插件(opens new window)
放大镜插件
- jQuery.zoom(opens new window)
轮播图插件
- http://sorgalla.com/jcarousel/(opens new window)
- https://github.com/OwlCarousel2/OwlCarousel2(opens new window)
图片懒加载插件
- jQuery.lazyload(opens new window)
其他
- artDialog(opens new window)
- 图片放大(opens new window)
- github上搜索