jQuery入门与实战
2024-05-14 13:38:33
JQuery
JQuery的概述
jQuery是一个快速、简洁的JavaScript库，设计宗旨：“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j:JavaScript；Query查询；意为查询js,把js里面的DOM操作做了封装，可以快速查询使用里面的功能。
jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 是专注于简化 DOM 操作，AJAX 调用和 Event 处理的 JavaScript 库。它被 JavaScript 开发者频繁使用。
jQuery出现的目的是加快前端人员的开发速度，我们可以更方便的调用和使用它，从而提高开发效率。
JavaScript库
仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找就可以了。
JS库：即library,是一个封装号的特定集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show,比如获取元素等。
简单而言：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能。
比如JQ,就是为了快速方便的操作DOM,里面基本都是函数（方法）。
常见JS库
JQuery，Prototype，YUI，Dojo，Ext JS，移动端的zepto
这些库都是对JS的封装，内部都是用JS实现的。
jQuery的优点
- 轻量级，核心文件才几十kb，不会影响页面加载速度
- 跨浏览器兼容，基本兼容了现在主流的浏览器
- 链式编程，隐式迭代，不需要遍历（自动遍历）
- 对事件，样式，动画支持，大大简化了DOM操作
- 支持插件扩展开发，有着丰富的第三方插件，如：树形菜单，日期控件，轮播图等
- 免费，开源
jQuert的下载使用
官网地址：http://jquery.com/
版本：
- 1x：兼容IE678等低版本浏览器，官网不再更新
- 2x：不兼容IE678等低版本浏览器，官网不再更新
- 3x:：不兼容IE678等低版本浏览器，官网主要维护版本
各版本下载：http://code.jquery.com/
JQuery的基本使用
$(function(){......//此处是页面DOM加载完成的入口
});
$(document).ready(function(){.......//此处是页面DOM加载完成的入口
})
<script>// $('div').hide();// 1. 等着页面DOM加载完毕再去执行js 代码// $(document).ready(function() {// $('div').hide();// })// 2. 等着页面DOM加载完毕再去执行js 代码$(function() {$('div').hide();})</script><div></div>
- 等DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。（推荐使用）
- 相当于原生js中的DOMContentLoaded。
- 不同于原生js的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码。
jQuery的顶级对象$
- 是jQuery的别称，在代码中可以使用jQuery来代替是jQuery的别称，在代码中可以使用jQuery来代替是jQuery的别称，在代码中可以使用jQuery来代替，但为了方便，通常都直接使用$。
- 是jQuery的顶级对象，相当于原生JS中的window，把元素利用是jQuery的顶级对象，相当于原生JS中的window，把元素利用是jQuery的顶级对象，相当于原生JS中的window，把元素利用包装成jQuery对象，就可以调用jq的方法。
<div></div><script>// 1. $ 是jQuery的别称（另外的名字）// $(function() {// alert(11)// });jQuery(function() {// alert(11)// $('div').hide();jQuery('div').hide();利用$ div包装成对象,调用方法});// 2. $同时也是jQuery的 顶级对象</script>jQuery对象和DOM对象
原生js获取来的对象就是DOM对象。
用jQuery方法获取的元素就是jQuery对象。
jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。
DOM对象和jQuery对象是之间是可以相互转换的。
因为原生js比JQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM对象转换为jQuery对象：$(DOM对象)
$('div')jQuery对象转换为DOM对象（两种方式）
$('div')[index] index是索引号$('div').get(index) index是索引号
<div></div><span></span><video src="mov.mp4" muted></video><script>// 1. DOM 对象： 用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector('div'); // myDiv 是DOM对象var mySpan = document.querySelector('span'); // mySpan 是DOM对象console.dir(myDiv);// 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装$('div'); // $('div')是一个jQuery 对象$('span'); // $('span')是一个jQuery 对象console.dir($('div'));// 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法// myDiv.style.display = 'none';// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法//1.DOM对象转换为jQuery对象//[1]直接获取视频，得到的是jq对象//$(video);//[2]已经使用原生js 获取过来DOM对象var myvideo = document.querySelector('video');//$('myvideo').play(); jq里面没有play这个方法//2.jQuery对象转换为DOM对象$('video')[0].play()$(;video).get[0].play()</script>
JQuery常用API
jQuery基础选择器
原生js获取元素的方式很多很杂，而且兼容性不一致，因此jQuery做了封装，使获取元素统一标准。
$("选择器") //里面选择器直接写CSS选择器即可，但要加引号名称 用法 描述 ID选择器 $("#id") 获取指定ID的元素 全选择器 $("*") 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器 $(“li.current”) 交集元素 jQuery层级选择器
名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下所有li元素，包括孙子级 <div>我是div</div><div class="nav">我是nav div</div><p>我是p</p><ol><li>我是ol 的</li><li>我是ol 的</li><li>我是ol 的</li><li>我是ol 的</li></ol><ul><li>我是ul 的</li><li>我是ul 的</li><li>我是ul 的</li><li>我是ul 的</li></ul><script>$(function() {console.log($(".nav"));console.log($("ul li"));})</script>jQuery设置样式
$("div").css("属性"，"值")隐式迭代(重要)
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
简单而言：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，进化我们的操作，方便调用。
隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法。
<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>
jQuery筛选选择器
语法 用法 描述 :first $(“li:first”) 获取第一个li元素 :last $(“li:last”) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到li元素中，选择索引号为2的元素，索引号index从0开始 :odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素 :even $(“li.even”) 获取到li元素中，选择索引号为偶数的元素 <ul><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li></ul><ol><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li><li>多个里面筛选几个</li></ol><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 筛选方法（重点）
语法 用法 说明 parent( ) $(“li”).parent(); 查找父级 chidren(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),最近一级（亲儿子） find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(".first").siblings(“li”); 查找兄弟节点，不包括自己本身 nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素 prevtAll([expr]) $(".last").prevAll() 查找当前元素之前所有的同辈元素 hasClass(class) $(“div”).hasClass(“protected”) 检查当前的元素是否含有某个特定的类，如果有，则返回true eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始 筛选父亲元素
<div class="yeye"><div class="father"><div class="son">儿子</div></div></div><div class="nav"><p>我是屁</p><div><p>我是p</p></div></div><script>// 注意一下都是方法 带括号$(function() {// 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸console.log($(".son").parent());// 2. 子// (1) 亲儿子 children() 类似子代选择器 ul>li// $(".nav").children("p").css("color", "red");// (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器$(".nav").find("p").css("color", "red");// 3. 兄});</script>筛选兄弟元素
<ol><li>我是ol 的li</li><li>我是ol 的li</li><li class="item">我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li></ol><ul><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li></ul><div class="current">俺有current</div><div>俺木有current</div><script>// 注意一下都是方法 带括号$(function() {// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟$("ol .item").siblings("li").css("color", "red");// 2. 第n个元素var index = 2;// (1) 我们可以利用选择器的方式选择// $("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(index).css("color", "blue");// 3. 判断是否有某个类名console.log($("div:first").hasClass("current"));console.log($("div:last").hasClass("current"));});</script>案例：新浪下拉菜单
<!DOCTYPE html> <html lang="en"><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>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style><script src="jquery.min.js"></script> </head><body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul><script>$(function() {// 鼠标经过$(".nav>li").mouseover(function() {// $(this) jQuery 当前元素 this不要加引号// show() 显示元素 hide() 隐藏元素$(this).children("ul").show();});// 鼠标离开$(".nav>li").mouseout(function() {$(this).children("ul").hide();})})</script> </body></html>jQuery里面的排他思想
排他思想：当前元素设置样式，其余兄弟元素清除样式。
<button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><script>$(function() {// 1. 隐式迭代 给所有的按钮都绑定了点击事件$("button").click(function() {// 2. 当前的元素变化背景颜色$(this).css("background", "pink");// 3. 其余的兄弟去掉背景颜色 隐式迭代$(this).siblings("button").css("background", "");});})</script>案例：淘宝服饰精品
//index.js //核心原理：鼠标经过左侧盒子某个li,就让内容区盒子相对应图片显示，其余图片隐藏 //需要得到当前li的索引号 //jQuery得到当前元素索引号$（this）.index() //中间对应的图片，通过eq(index)方法去选择/*分析：1.三个数组 存放所有li标签2.通过left索引可以与center一一对应，从而实现图片切换效果*///1.获取左边列表的li标签，注册鼠标悬浮事件$(function() {$('#left>li').mouseover(function() {//2.获取索引//index() 获取当前元素的索引var index = $(this).index();// alert(index);//3.在center套用索引//3.1 让对应的图片显示，让他兄弟元素隐藏 eq索引就能取到当前索引的元素 // $('#center>li:eq(索引)')$('#center>li:eq(' + index + ')').siblings('li').hide();$('#center>li:eq(' + index + ')').show();// $('#center>li:eq(' + 10 + ')')})//1.获取右边列表的li标签，注册鼠标悬浮事件$('#right>li').mouseover(function() {var index = $(this).index() + 9;$('#center>li:eq(' + index + ')').siblings('li').hide();$('#center>li:eq(' + index + ')').show();})})<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 298px;height: 248px;margin: 100px auto 0;border: 1px solid pink;overflow: hidden;}#left, #center, #right {float: left;}#left li, #right li {background: url(images/lili.jpg) repeat-x;}#left li a, #right li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#left li a:hover, #right li a:hover {background-image: url(images/abg.gif);}#center {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src='jquery-1.12.2.js'></script><script src='index.js'></script> </head> <body> <div class="wrapper"><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女裤</a></li><li><a href="#">羽绒服</a></li><li><a href="#">牛仔裤</a></li></ul><ul id="center"><li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li></ul><ul id="right"><li><a href="#">女包</a></li><li><a href="#">男包</a></li><li><a href="#">登山鞋</a></li><li><a href="#">皮带</a></li><li><a href="#">围巾</a></li><li><a href="#">皮衣</a></li><li><a href="#">男毛衣</a></li><li><a href="#">男棉服</a></li><li><a href="#">男靴</a></li></ul> </div> </body> </html>jQuery链式编程
$(function() {$('#left>li').mouseover(function() {//2.获取索引//index() 获取当前元素的索引var index = $(this).index();// alert(index);//3.在center套用索引//3.1 让对应的图片显示，让他兄弟元素隐藏 eq索引就能取到当前索引的元素 // $('#center>li:eq(索引)')$('#center>li:eq(' + index + ')').siblings('li').hide();$('#center>li:eq(' + index + ')').show();// $('#center>li:eq(' + 10 + ')')//$('#center>li:eq('+index+')').show()选中者显示//$('#center>li:eq('+index+')').sblings().hide() 未选中者隐藏$('#center>li:eq('+index+')').show().siblings().hide();}) })链式编程是为了节省代码量，看起来更优雅
$(this).css('color','red').sbling().css('color',' ');<button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><script>$(function() {// 1. 隐式迭代 给所有的按钮都绑定了点击事件$("button").click(function() {// 2. 让当前元素颜色变为红色// $(this).css("color", "red");// 3. 让其余的姐妹元素不变色 //$(this).siblings().css("color", "");// 链式编程$(this).css("color", "red").siblings().css("color", "");});})</script>
jQuery样式操作
操作css方法
jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。
参数只写属性名，则是返回属性值
$(this).css("color"); //属性名一定要加引号参数名是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数学可以不用跟单位和引号
$("div").css(height, "300px"); 属性名一定要加引号参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$("div").css({width: 400,height: 400,backgroundColor: "red"// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号})
设置类样式方法
作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点。
添加类 addClass()
$("div").click(function() {$(this).addClass("current");});删除类 removeClass()
$("div").click(function() {$(this).removeClass("current");});切换类 toggleClass()
$("div").click(function() {$(this).toggleClass("current");});案例：tab栏切换
<!DOCTYPE html> <html lang="en"><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>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style><script src="jquery.min.js"></script> </head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div></div><script>$(function() {// 1.点击上部的li，当前li 添加current类，其余兄弟移除类$(".tab_list li").click(function() {// 链式编程操作//current指上面css内current类样式 $(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();});})</script> </body></html>
类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响
原先的类名。
<div class="one two"></div><script>// var one = document.querySelector(".one");// one.className = "two";// $(".one").addClass("two"); 这个addClass相当于追加类名 不影响以前的类名$(".one").removeClass("two");</script>
JQuery效果
jQuery封装了很多动画效果，最为常见的如下：
显示隐藏效果
语法规范
show([speed,[easing],[fn]])显示参数
- 参数可以省略，无动画直接显示。
- speed:三种预定速度之一的字符串（“show”,“normal"or"fast”）或表示动画时长的毫秒数（如：1000）。
- easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
<button>显示</button><button>隐藏</button><button>切换</button><div></div><script>$(function() {$("button").eq(0).click(function() {$("div").show(1000, function() {alert(1);});})$("button").eq(1).click(function() {$("div").hide(1000, function() {alert(1);});})$("button").eq(2).click(function() {$("div").toggle(1000);//切换})// 一般情况下，我们都不加参数直接显示隐藏就可以了});</script>
滑动效果
语法规范
slideDown([speed],[easing],[fn])参数同上
<button>下拉滑动</button><button>上拉滑动</button><button>切换滑动</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 下滑动 slideDown()$("div").slideDown();})$("button").eq(1).click(function() {// 上滑动 slideUp()$("div").slideUp(500);})$("button").eq(2).click(function() {// 滑动切换 slideToggle()$("div").slideToggle(500);});});</script>
事件切换
语法规范
hover([over],out) //over:鼠标移到元素上要触发的函数（相当于mouseenter） //out:鼠标移出元素上要触发的函数（相当于mouseleave）案例
<ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul><script>$(function() {// 鼠标经过// $(".nav>li").mouseover(function() {// // $(this) jQuery 当前元素 this不要加引号// // show() 显示元素 hide() 隐藏元素// $(this).children("ul").slideDown(200);// });// // 鼠标离开// $(".nav>li").mouseout(function() {// $(this).children("ul").slideUp(200);// });// 1. 事件切换 hover 就是鼠标经过和离开的复合写法$(".nav>li").hover(function() {$(this).children("ul").slideDown(200);}, function() {$(this).children("ul").slideUp(200);});// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数// $(".nav>li").hover(function() {//$(this).children("ul").slideToggle(); // });})</script>
动画队列及其停止排队的方法
动画或效果队列
动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。
停止排队
stop()- stop( )方法用于停止动画或效果。
- 注意：stop( )写到动画或者效果的前面，相当于停止结束上一次的动画。
$(".nav>li").hover(function() {//stop方法必须写到动画的前面//stop方法如果写到动画后面，相当于动画不执行，没有效果 $(this).children("ul").stop().slideToggle();});
淡入淡出效果
渐进方式调整到指定的不透明度
fadeTo([speed],opacity,[easing],[fn])效果参数
- opacity:透明度必须写，取值0 ~ 1之间。
- speed:三种预定速度之一的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数（如：1000）。
- easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
<button>淡入效果</button><button>淡出效果</button><button>淡入淡出切换</button><button>修改透明度</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 淡入 fadeIn()$("div").fadeIn(1000);})$("button").eq(1).click(function() {// 淡出 fadeOut()$("div").fadeOut(1000);})$("button").eq(2).click(function() {// 淡入淡出切换 fadeToggle()$("div").fadeToggle(1000);});$("button").eq(3).click(function() {// 修改透明度 fadeTo() 这个速度和透明度要必须写$("div").fadeTo(1000, 0.5);});});</script>案例：突出显示
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="jquery.min.js"></script><script>$(function() {//鼠标进入的时候,其他的li标签透明度：0.5$(".wrap li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠标离开，其他li 透明度改为 1$(this).siblings().stop().fadeTo(400, 1);})});</script> </head><body><div class="wrap"><ul><li><a href="#"><img src="data:images/01.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/02.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/03.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/04.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/05.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/06.jpg" alt="" /></a></li></ul></div> </body></html>
自定义动画
语法规范
animate(params,[speed],[easing],[fn])参数
- params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果时复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
- speed:三种预定速度之一的字符串（“show”,“normal"or"fast”）或表示动画时长的毫秒数（如：1000）。
- easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
<button>动起来</button><div></div><script>$(function() {$("button").click(function() {$("div").animate({left: 500,top: 300,opacity: .4,width: 500}, 500);})})</script>
案例：王者荣耀手风琴
<!doctype html> <html><head><meta charset="utf-8"><title>手风琴案例</title><style type="text/css">* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style></head><body><script src="js/jquery.min.js"></script><script type="text/javascript">$(function() {// 鼠标经过某个小li 有两步操作：$(".king li").mouseenter(function() {// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224//find可以将子孙后代都查找出来，small是孙子辈，所以不能用children() }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})});</script><div class="king"><ul><li class="current"><a href="#"><img src="data:images/m1.jpg" alt="" class="small"><img src="data:images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/l1.jpg" alt="" class="small"><img src="data:images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/c1.jpg" alt="" class="small"><img src="data:images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/w1.jpg" alt="" class="small"><img src="data:images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/z1.jpg" alt="" class="small"><img src="data:images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/h1.jpg" alt="" class="small"><img src="data:images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/t1.jpg" alt="" class="small"><img src="data:images/t.png" alt="" class="big"></a></li></ul></div></body></html>
JQuery属性操作
设置或获取元素的固有属性值 prop( )
元素固有属性：元素本身自带的属性，比如元素里面的href，比如元素里面的type。
获取属性语法
prop("属性")设置属性语法
prop("属性","属性值")
设置或获取元素自定义属性值 attr( )
用户自己给元素添加的属性，称之为自定义属性。如给div 添加 index = “1”。
获取属性语法
attr("属性") //类似原生getAttribute()只设置属性语法
attr("属性"，"属性值") //类似原生setAttribute()
数据缓存 data( )
data( )方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
附加数据语法
data("name","value") //向被选元素附加数据获取数据语法
data("name") //向被选元素获取数据同时还可以读取H5自定义属性data-index，得到的是数字型
<a href="http://www.itcast.cn" title="都挺好">都挺好</a><input type="checkbox" name="" id="" checked><div index="1" data-index="2">我是div</div><span>123</span><script>$(function() {//1. element.prop("属性名") 获取元素固有的属性值console.log($("a").prop("href"));$("a").prop("title", "我们都挺好");$("input").change(function() {console.log($(this).prop("checked"));});// console.log($("div").prop("index"));// 2. 元素的自定义属性 我们通过 attr()console.log($("div").attr("index"));$("div").attr("index", 4);console.log($("div").attr("data-index"));// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面$("span").data("uname", "andy");console.log($("span").data("uname"));// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型console.log($("div").data("index"));})</script>
案例：购物车模块
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>我的购物车-品优购</title><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><!-- 引入facicon.ico网页图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!-- 引入css 初始化的css 文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式的css 文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入car css --><link rel="stylesheet" href="css/car.css"><!-- 先引入jquery --><script src="js/jquery.min.js"></script><!-- 在引入我们自己的js文件 --><script src="js/car.js"></script> </head><body><!-- 顶部快捷导航start --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a><a href="#" class="style-red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li class="spacer"></li><li><a href="#">我的品优购</a><i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">品优购会员</a></li><li class="spacer"></li><li><a href="#">企业采购</a></li><li class="spacer"></li><li><a href="#">关注品优购</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">客户服务</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">网站导航</a> <i class="icomoon"></i></li></ul></div></div></div><!-- 顶部快捷导航end --><div class="car-header"><div class="w"><div class="car-logo"><img src="img/logo.png" alt=""> <b>购物车</b></div></div></div></div><div class="c-container"><div class="w"><div class="cart-filter-bar"><em>全部商品</em></div><!-- 购物车主要核心区域 --><div class="cart-warp"><!-- 头部全选模块 --><div class="cart-thead"><div class="t-checkbox"><input type="checkbox" name="" id="" class="checkall"> 全选</div><div class="t-goods">商品</div><div class="t-price">单价</div><div class="t-num">数量</div><div class="t-sum">小计</div><div class="t-action">操作</div></div><!-- 商品详细模块 --><div class="cart-item-list"><div class="cart-item check-cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" checked class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p1.jpg" alt=""></div><div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div></div><div class="p-price">￥12.60</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥12.60</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p2.jpg" alt=""></div><div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div></div><div class="p-price">￥24.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥24.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" name="" id="" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p3.jpg" alt=""></div><div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div></div><div class="p-price">￥29.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥29.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div></div><!-- 结算模块 --><div class="cart-floatbar"><div class="select-all"><input type="checkbox" name="" id="" class="checkall">全选</div><div class="operation"><a href="javascript:;" class="remove-batch"> 删除选中的商品</a><a href="javascript:;" class="clear-all">清理购物车</a></div><div class="toolbar-right"><div class="amount-sum">已经选<em>1</em>件商品</div><div class="price-sum">总价： <em>￥12.60</em></div><div class="btn-area">去结算</div></div></div></div></div></div><!-- footer start --><div class="footer"><div class="w"><!-- mod_service --><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li></ul></div><!-- mod_help --><div class="mod_help"><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>帮助中心</dt><dd><img src="upload/erweima.png" alt=""><p>品优购客户端</p></dd></dl></div><!-- mod_copyright --><div class="mod_copyright"><p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- footer end --> </body></html>car.js
$(function() {// 1. 全选 全不选功能模块// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了// 事件可以使用change$(".checkall").change(function() {// console.log($(this).prop("checked"));$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));if ($(this).prop("checked")) {// 让所有的商品添加 check-cart-item 类名$(".cart-item").addClass("check-cart-item");} else {// check-cart-item 移除$(".cart-item").removeClass("check-cart-item");}});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。$(".j-checkbox").change(function() {// if(被选中的小的复选框的个数 === 3) {// 就要选中全选按钮// } else {// 不要选中全选按钮// }// console.log($(".j-checkbox:checked").length);// $(".j-checkbox").length 这个是所有的小复选框的个数if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {$(".checkall").prop("checked", true);} else {$(".checkall").prop("checked", false);}if ($(this).prop("checked")) {// 让当前的商品添加 check-cart-item 类名$(this).parents(".cart-item").addClass("check-cart-item");//parent() 父级元素选择器// parents() 查找所有父级元素 } else {// check-cart-item 移除$(this).parents(".cart-item").removeClass("check-cart-item");}});// 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。$(".increment").click(function() {// 得到当前兄弟文本框（itxt）的值//修改表单使用val()方法//这个变量初始值应该是这个文本框的值，在这个值的基础上++var n = $(this).siblings(".itxt").val();// console.log(n);n++;$(this).siblings(".itxt").val(n);// 3. 计算小计模块 每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计//只能增加本商品的小计，就是档期啊商品的小计模块(p-sum)//修改普通元素的内容是text()方法// 当前商品的价格 p var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);p = p.substr(1);//当前商品的价格，要把￥符号去掉再相乘，截取字符串substr()console.log(p);var price = (p * n).toFixed(2);// 小计模块 // toFixed(2) 可以让我们保留2位小数$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);getSum();});$(".decrement").click(function() {// 得到当前兄弟文本框的值var n = $(this).siblings(".itxt").val();if (n == 1) {return false;}// console.log(n);n--;$(this).siblings(".itxt").val(n);// var p = $(this).parent().parent().siblings(".p-price").html();// parents(".p-num") 返回指定的祖先元素var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);p = p.substr(1);console.log(p);// 小计模块 $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));getSum();});// 4. 用户修改文本框的值 计算 小计模块 $(".itxt").change(function() {// 先得到文本框的里面的值 乘以 当前商品的单价 var n = $(this).val();// 当前商品的单价var p = $(this).parents(".p-num").siblings(".p-price").html();// console.log(p);p = p.substr(1);$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));getSum();});// 5. 计算总计和总额模块//核心思路：把文本框里面的值相加就是总计数量，总额同理 getSum();//点击+，-会改变总计和总额，因此可以封装一个函数求总计和总额，以上2个操作调用这个函数即可function getSum() {var count = 0; // 计算总件数 var money = 0; // 计算总价钱$(".itxt").each(function(i, ele) {//文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可//总计是文本框里面的值相加用val() 总额是普通元素的内容用text()count += parseInt($(ele).val());});$(".amount-sum em").text(count);$(".p-sum").each(function(i, ele) { //普通元素里面的内容要去掉￥且转换为数字型才能相加money += parseFloat($(ele).text().substr(1));});$(".price-sum em").text("￥" + money.toFixed(2));}// 6. 删除商品模块// (1) 商品后面的删除按钮$(".p-action a").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();}) })附录：返回指定祖先元素
<div class="one"><div class="two"><div class="three"><div class="four">我不容易</div></div></div></div><script>console.log($(".four").parent().parent().parent());console.log($(".four").parents());console.log($(".four").parents(".one"));</script>
JQuery文本属性值
主要针对元素的内容还有表单的值操作。
普通元素内容html( ) —— 相当于原生innerHTML
html() //获取元素内容html("内容 ") //设置元素内容普通元素文本内容 —— 相当于原生innerText
text() //获取元素的文本内容text("文本内容") //设置元素的文本内容获取设置表单值 val( ) —— 相当于原生value
val() //获取表单里的文本内容val("内容") //设置表单里的文本内容案例：
<div><span>我是内容</span></div><input type="text" value="请输入内容"><script>// 1. 获取设置元素内容 html()console.log($("div").html());//<span>我是内容</span>// $("div").html("123"); //<span>123</span>// 2. 获取设置元素文本内容 text()console.log($("div").text());$("div").text("123");// 3. 获取设置表单值 val()console.log($("input").val());$("input").val("123");</script>
JQuery元素操作
遍历，创建，添加，删除元素操作
遍历元素
jQuery隐式迭代是对同一元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法规范1：
$("div").each(function(index,domEle){xxx;})- each( )方法遍历匹配的每一个元素，主要用于DOM处理，each每一个
- 里面的回调函数有2个参数：index是每个元素的索引号；demoEle是每个DOM元素对象，不是jquery对象
- 所以想要使用jquery方法，需要给这个dom对象转换为jquery对象 $(domEle)
语法规范2：
$.each(object,function(index,element){xxx;})- $.each( )方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
- 里面的函数有2个参数：index是每个元素的索引号；element遍历内容
案例：
<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);//0 1 2// console.log(i);// 回调函数第二个参数一定是 dom元素对象 也是自己命名// console.log(domEle); //<div>1</div> <div>2</div> <div>3</div>// 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);//0 1 2// console.log(ele); // red green blue// });// $.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>
创建元素
语法规范
$("<li></li>");
添加元素
内部添加
element.append("内容")把内容放入匹配元素内部最后面，类似原生appendChild。
element.prepend("内容")把内容放入匹配元素内部最前面。
外部添加
element.after("内容") //把内容放入目标元素后面element.before("内容") //把内容放入目标元素前面
删除元素
element.remove() //删除匹配的元素（本身）案例：
<ul><li>原先的li</li></ul><div class="test">我是原先的div</div><script>$(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(""); // 可以删除匹配的元素里面的子节点 孩子})</script>
JQuery尺寸，位置操作
jQuery尺寸
语法 用法 width()/height() 取得匹配元素宽度和高度值，只算width/height innerWidth()/innerHeight() 取得匹配元素高度和宽度，包括padding outerWidth()/outerHeight() 取得匹配元素宽度和高度值，包含padding，border outerWidth(true)/outerHeight() 取得匹配元素宽度和高度值，包含padding，border，margin 注意：
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应值
- 参数可以不必写单位
案例：jQuery元素大小
<!DOCTYPE html> <html lang="en"><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>Document</title><style>div {width: 200px;height: 200px;background-color: pink;padding: 10px;border: 15px solid red;margin: 20px;}</style><script src="jquery.min.js"></script> </head><body><div></div><script>$(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 + marginconsole.log($("div").outerWidth(true));})</script> </body></html>
jQuery位置
位置主要有三个：offset()，position()，scrollTop()/scrollLeft()
offset( ) 设置或获取元素偏移
offset( ) 方法设置或返回被选元素相对于文档的偏移坐标，跟父级无关。
该方法有2个属性left，top。
offset().top用于获取距离文档顶部的距离.
offset().left用于获取距离文档左侧的距离.
可以设置元素的偏移：offset({top:10.left:30});
position( ) 获取距离带有定位父级位置（偏移）
- 如果没有带有定位的父级，则以文档为准
- 这个方法只能获取不能设置偏移
案例：jQuery元素位置
<!DOCTYPE html> <html lang="en"><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>Document</title><style>* {margin: 0;padding: 0;}.father {width: 400px;height: 400px;background-color: pink;margin: 100px;overflow: hidden;position: relative;}.son {width: 150px;height: 150px;background-color: purple;position: absolute;left: 10px;top: 10px;}</style><script src="jquery.min.js"></script> </head><body><div class="father"><div class="son"></div></div><script>$(function() {// 1. 获取设置距离文档的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({// top: 200,// left: 200// });// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准// 这个方法只能获取不能设置偏移console.log($(".son").position()); //top:10 left:10// $(".son").position({// top: 200,// left: 200// });})</script> </body></html>
- scrollTop( )/scrollLeft( ) 设置或获取元素被卷去的头部和左侧
案例：
<!DOCTYPE html> <html lang="en"><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>Document</title><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);//使用animate动画返回顶部//animation动画函数里面有个scrollTop属性，可以设置位置$("body, html").stop().animate({scrollTop: 0});// document 是文档，元素做动画//$(document).stop().animate({// scrollTop: 0// }); 不能是文档而是 html和body元素做动画})})</script> </body></html>
案例：电梯导航
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><!-- 引入facicon.ico网页图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!-- 引入css 初始化的css 文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式的css 文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入 首页的css文件 --><link rel="stylesheet" href="css/index.css"><script src="js/jquery.min.js"></script><script src="js/index.js"></script> </head><body><!-- 顶部快捷导航start --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a><a href="#" class="style-red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li class="spacer"></li><li><a href="#">我的品优购</a><i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">品优购会员</a></li><li class="spacer"></li><li><a href="#">企业采购</a></li><li class="spacer"></li><li><a href="#">关注品优购</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">客户服务</a> <i class="icomoon"></i></li><li class="spacer"></li><li><a href="#">网站导航</a> <i class="icomoon"></i></li></ul></div></div></div><!-- 顶部快捷导航end --><!-- header制作 --><div class="header w"><!-- logo --><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div><!-- search --><div class="search"><input type="text" class="text" value="请搜索内容..."><button class="btn">搜索</button></div><!-- hotwrods --><div class="hotwrods"><a href="#" class="style-red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><div class="shopcar"><i class="car"> </i>我的购物车 <i class="arrow"> </i><i class="count">80</i></div></div><!-- header 结束 --><!-- nav start --><div class="nav"><div class="w"><div class="dropdown fl"><div class="dt"> 全部商品分类 </div><div class="dd"><ul><li class="menu_item"><a href="#">家用电器</a> <i> </i> </li><li class="menu_item"><a href="list.html">手机</a> 、<a href="#">数码</a> 、<a href="#">通信</a><i> </i></li><li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li><li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li><li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li><li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li><li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li><li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li><li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li><li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li><li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li><li class="menu_item"><a href="#">医药保健</a> <i> </i> </li><li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li><li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li><li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li></ul></div></div><!-- 右侧导航 --><div class="navitems fl"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul></div></div></div><!-- nav end --><!-- main 模块 --><div class="w"><div class="main"><div class="focus fl"><!-- 左侧按钮 --><a href="javascript:;" class="arrow-l"><</a><!-- 右侧按钮 --><a href="javascript:;" class="arrow-r"> </a><!-- 核心的滚动区域 --><ul><li><a href="#"><img src="upload/focus.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ol class="circle"></ol></div><div class="newsflash fr"><div class="news"><div class="news-hd">品优购快报<a href="#">更多</a></div><div class="news-bd"><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div></div><div class="lifeservice"><ul><li><a href="#"><i class="service_ico service_ico_huafei"></i><p>话费</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a><span class="hot"></span></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li><li><a href="#"><i class="service_ico service_ico_feiji"></i><p>机票</p></a></li></ul></div><div class="bargain"><img src="upload/bargain.jpg" alt=""></div></div></div></div><!-- 推荐服务模块 start --><div class="recommend w"><div class="recom-hd fl"><img src="img/clock.png" alt=""><h3>今日推荐</h3></div><div class="recom-bd fl"><ul><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li><a href="#"><img src="upload/pic.jpg" alt=""></a></li><li class="last"><a href="#"><img src="upload/pic.jpg" alt=""></a></li></ul></div></div><!-- 推荐服务模块 end --><!-- 楼层区 start --><div class="floor"><div class="jiadian w"><div class="box-hd"><h3>家用电器</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="shouji w"><div class="box-hd"><h3>手机通讯</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="diannao w"><div class="box-hd"><h3>电脑办公</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="jiaju w"><div class="box-hd"><h3>精品家具</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div></div><!-- 楼层区 end --><!-- 固定电梯导航 --><div class="fixedtool"><ul><li class="current">家用电器</li><li>手机通讯</li><li>电脑办公</li><li>精品家具</li></ul></div><!-- footer start --><div class="footer"><div class="w"><!-- mod_service --><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li></ul></div><!-- mod_help --><div class="mod_help"><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item"><dt>购物指南</dt><dd> <a href="#">购物流程 </a></dd><dd> <a href="#">会员介绍 </a></dd><dd> <a href="#">生活旅行/团购 </a></dd><dd> <a href="#">常见问题 </a></dd><dd> <a href="#">大家电 </a></dd><dd> <a href="#">联系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>帮助中心</dt><dd><img src="upload/erweima.png" alt=""><p>品优购客户端</p></dd></dl></div><!-- mod_copyright --><div class="mod_copyright"><p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- footer end --> </body></html>index.js
$(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();}})}});// 2. 点击电梯导航页面可以滚动到相应内容区域$(".fixedtool li").click(function() {flag = false;console.log($(this).index());// 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().topvar 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();}) })
JQuery事件
jQuery事件注册
单个事件注册
语法规范
element.事件(function(){})$("div").click(function(){事件处理程序})其他事件与原生基本一致。
如mouseover,mouseout,blur,focus,change等。
jQuery事件处理 on( )绑定事件
on( )方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法规范
element.on(events,[selector],fn)注意：
- events：一个或多个用空格分隔的事件类型，如"click"或"keydown"。
- selector：元素的子元素选择器
- fn：回调函数即绑定在元素身上的侦听函数。
on方法优势：
可以事件委派操作。
事件委派的定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
案例：事件处理
<!DOCTYPE html> <html lang="en"><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>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}.current {background-color: purple;}</style><script src="jquery.min.js"></script> </head><body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function() {// 1. 单个事件注册// $("div").click(function() {// $(this).css("background", "purple");// });// $("div").mouseenter(function() {// $(this).css("background", "skyblue");// });// 2. 事件处理on// (1) on可以绑定1个或者多个事件处理程序// $("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");});// (2) on可以实现事件委托（委派）// $("ul li").click();$("ul").on("click", "li", function() {alert(11);});// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li// (3) on可以给未来动态创建的元素绑定事件// $("ol li").click(function() {// alert(11);// })$("ol").on("click", "li", function() {alert(11);})var li = $("<li>我是后来创建的</li>");$("ol").append(li);})</script> </body></html>发布微博案例
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0}ul {list-style: none}.box {width: 600px;margin: 100px auto;border: 1px solid #000;padding: 20px;}textarea {width: 450px;height: 160px;outline: none;resize: none;}ul {width: 450px;padding-left: 80px;}ul li {line-height: 25px;border-bottom: 1px dashed #cccccc;display: none;}input {float: right;}ul li a {float: right;}</style><script src="jquery.min.js"></script><script>$(function() {// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中$(".btn").on("click", function() {var li = $("<li></li>");li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");$("ul").prepend(li);li.slideDown();$(".txt").val("");})// 2.点击的删除按钮，可以删除当前的微博留言li// $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件// alert(11);// })// on可以给动态创建的元素绑定事件$("ul").on("click", "a", function() {$(this).parent().slideUp(function() {$(this).remove();});})})</script> </head><body><div class="box" id="weibo"><span>微博发布</span><textarea name="" class="txt" cols="30" rows="10"></textarea><button class="btn">发布</button><ul></ul></div> </body></html>事件处理 0ff( ) 解绑事件
off( )方法可以移除通过on( )方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序 $("p").off("click") //解绑p元素上面的点击事件 后面的foo是侦听函数名 $("ul").off("click","li") //解绑事件委托如果有的事件只想触发一次，可以使用one( )来绑定事件。
案例：事件解绑
<!DOCTYPE html> <html lang="en"><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>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style><script src="jquery.min.js"></script><script>$(function() {$("div").on({click: function() {console.log("我点击了");},mouseover: function() {console.log('我鼠标经过了');}});$("ul").on("click", "li", function() {alert(11);});// 1. 事件解绑 off // $("div").off(); // 这个是解除了div身上的所有事件$("div").off("click"); // 这个是解除了div身上的点击事件$("ul").off("click", "li");// 2. one() 但是它只能触发事件一次$("p").one("click", function() {alert(11);})})</script> </head><body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><p>我是屁</p> </body></html>
自动触发事件 trigger( )
有些事件需要自动触发，如轮播图自动播放跟右侧按钮一致。
可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
语法规范
element.click() //第一种简写形式element.trigger("type") //第二种自动触发模式案例：自动触发事件
<!DOCTYPE html> <html lang="en"><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>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style><script src="jquery.min.js"></script><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> </head><body><div></div><input type="text"> </body></html>
jQuery事件对象
事件被触发，就会有事件对象的产生。
语法规范
element.on(events,[selector],function(event){})阻止默认行为：event.preventDefault( )或return faulse
阻止冒泡：event.stopPropagation()
案例：事件对象
<!DOCTYPE html> <html lang="en"><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>Document</title><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></html>
JQuery其他方法
jQuery对象拷贝
把某个对象拷贝（合并）给另一个对象使用，可使用$.extend( )方法
语法规范
$.extend([deep],target,object1,[onjectN])注意：
- deep：如果设为true为深拷贝，默认false为浅拷贝
- target：要拷贝的对象
- object1：待拷贝的第一个对象的对象
- objectN：待拷贝到第N个对象的对象
- 浅拷贝：把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
- 深拷贝：把里面的数据完全复制一份给目标对象 ，如果里面有不冲突的属性,会合并到一起。
案例：对象拷贝
<!DOCTYPE html> <html lang="en"><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>Document</title><script src="jquery.min.js"></script><script>$(function() {// var targetObj = {};// var obj = {// id: 1,// name: "andy"// };// // $.extend(target, obj);// $.extend(targetObj, obj);// console.log(targetObj);// var targetObj = {// id: 0// };// var obj = {// id: 1,// name: "andy"// };// // $.extend(target, obj);// $.extend(targetObj, obj);// console.log(targetObj); // 会覆盖targetObj 里面原来的数据var targetObj = {id: 0,msg: {sex: '男'}};var obj = {id: 1,name: "andy",msg: {age: 18}};// // $.extend(target, obj);// $.extend(targetObj, obj);// console.log(targetObj); // 会覆盖targetObj 里面原来的数据// // 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);})</script> </head><body></body></html>
多库共存
问题：jQuery使用作为标识符，随着jQuery的流行，其他库也会用作为标识符，随着jQuery的流行，其他库也会用作为标识符，随着jQuery的流行，其他库也会用作为标识符，这样一起使用会引起冲突。
需求：一个能让jQuery和其他js库不存在冲突，可以同时存在的方法，这就叫做多库共存。
解决方案：
- 把里面的$符号统一改为jQuery
- jQuery变量规定新的名称：$noConflict() / var xx = $.noConflict();
案例：多库共存
<!DOCTYPE html> <html lang="en"><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>Document</title><script src="jquery.min.js"></script><script>$(function() {function $(ele) {return document.querySelector(ele);}console.log($("div"));// 1. 如果$ 符号冲突 我们就使用 jQueryjQuery.each();// 2. 让jquery 释放对$ 控制权 让用自己决定var suibian = jQuery.noConflict();console.log(suibian("span"));suibian.each();})</script> </head><body><div></div><span></span> </body></html>
jQuery插件
瀑布流布局配置参数
singleMode: false, // 禁用测量每个浮动元素的宽度。 // 如果浮动元素具有相同的宽度，设置为true。 // 默认： falsecolumnWidth: 240, // 1列网格的宽度，单位为像素（px）。 // 默认： 第一个浮动元素外宽度。itemSelector: '.box:visible', // 附加选择器，用来指定哪些元素包裹的元素会重新排列。resizeable: true, // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认：trueanimate: true, // 布局重排动画。 // 默认：falseanimationOptions: {}, // 一对动画选项，具体参数可以参考jquery .animate()中的options选项appendedContent: $('.new_content'), // 附加选择器元素，用来尾部追加内容。 // 在集成infinitescroll插件的情况下使用。saveOptions: true, // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项 // 默认：truefunction() {} // 可选择的回调函数 // 'this'将指向重排的Masonry适用元素案例：瀑布流插件
jQuery插件演示
瀑布流
图片懒加载（图片使用延迟加载可提高网页下载速度，也能帮助减轻服务器负载）
当页面滑动到可视区域，再显示图片。
- 引入EasyLazyload.js
- 将图片src替换为data-lazy-src
- 使用全局方法 lazyloadInit( )
全屏滚动（fullpage.js）
gitHub：https://github.com/alvarotrigo/fullPage.js
中文翻译网站：http://www.dowebok.com/demo/2014/77/
bootstrap JS插件
bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。
综合案例
- 案例：toDoList
- 文本框里面输入内容，按下回车，生成代办事项
- 点击代办事项复选框，把当前数据添加到已完成事项里面
- 点击已完成事项复选框，就可以把当前数据添加到代办事项里面
- 但本页面内容刷新页面不会丢失
- toDoList分析
- 刷新页面不会丢失数据，因此需要用到本地存储localStorage
- 核心思路：按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
- 存储的数据格式：var todolist = [{title：‘xxx’，done:false}]
- toDoList按下回车把新数据添加到本地存储里面
- 切记：页面中的数据，都有从本地存储里面获取，这样子刷新页面不会丢失数据，所以要先把数据保存到本地存储理
- 利用事件对象keyCode判断用户按下回车键
- 声明一个数组，保存数据
- 先读取本地存储原来的数据（声明函数getData( )），放到这个数组里面
- 之后把最新从表单获取过来的数据，追加到数组里面
- 最后把数组存储给本地存储（声明函数saveDate( )）
- toDoList本地存储数据渲染加载到页面
- 因为后面也会渲染加载操作，所以声明一个函数load,方便后面调用
- 先要读取本地储存数据（记得转换为对象格式）
- toDoList删除操作
- 点击里面的a链接，不是删除的li,而是删除本地存储对应的数据
- 核心原理：选获取本地存储，删除对应数据，保存给本地存储，重新渲染li
- 给链接自定义属性记录当前的索引号
- 根据索引号删除相关的数据 ——数组的splice(i，1)方法
- 储存修改后的数据，然后储存给本地储存
- 重新渲染加载数据列表
- 因为a是动态创建的，使用on方法绑定事件
- toDoList正在进行和已完成选项操作
- 当点击了小的复选框，修改了本地存储数据，再重新渲染数据列表
- 点击之后，获取本地存储数据
- 修改对应数据属性done为当前复选框的checked状态
- toDoList正在进行和已完成选项操作
- 当点击小的复选框，修改本地存储数据，再重新渲染数据列表
- 点击之后，获取本地存储数据
- 修改对应数据属性done为当前复选框checked状态
- 之后保存数据到本地存储
- 重新渲染加载数据列表
- load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
- 如果当前数据的done为false,则是待办事项，就是把列表渲染加载到ol里面
- toDoList统计正在进行个数和已经完成个数
- 在load函数里面操作
- 声明2个变量：todoCount待办个数 doneCount已完成个数
- 当遍历本地存储数据的时候，如果数据done为false，则todoCount++，否则doneCount++
- 最后修改相应的元素text()
- toDoList分析
jQuery入门与实战相关推荐
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- CSDN - 盛洪宇（技术胖） - Vue2.x从入门到实战
Vue 全家桶 - Webpack / Vue / Vue-cli / Vue-router / Vuex / Axios / Element UI CSDN - 盛洪宇(技术胖) - Vue2.x从 ...
- Bootstrap从入门到实战---点击提示和悬停提示
Bootstrap从入门到实战-点击提示和悬停提示 <!DOCTYPE html> <html lang="en"> <head><met ...
- 《Angular4从入门到实战》学习笔记（图文）
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- Bootstrap从入门到实战---巨幕和旋转图标
Bootstrap从入门到实战-巨幕和旋转图标 <!DOCTYPE html> <html lang="en"> <head><meta ...
- 视频教程-JavaWeb从入门到实战，超全知识点+仿京东项目-Java
JavaWeb从入门到实战,超全知识点+仿京东项目 12年以上开发经验,担任亚信科技核心架构师,丰富的JavaEE开发和Oracle数据库设计经验,精通Java\JavaScript\HTML5等编程 ...
- Javaweb项目入门到实战-搭建javaweb环境并运行（下）
咱们继续上一篇中剩下的内容idea运行javaweb和上次尚未说完的tomcat下载与运行,let's go !!! 熟悉的配方搭配精美的视频: 动力节点最新JavaWeb视频教程,javaweb零基 ...
- 动力节点-javaweb项目入门到实战教程-下
继续上文的内容,are you ready?let's go !!! 熟悉的配方搭配精美的视频:动力节点最新JavaWeb视频教程,javaweb零基础入门到精通IDEA版-持续更新中_哔哩哔哩_bi ...
最新文章
- java基础1--继承
- Mybatis 算术逻辑运算
- android 四种堆状态
- sparkSql使用hive数据源
- 学习笔记---Javascript闭包
- 【轨迹跟踪】基于matlab无人机轨迹跟踪【含Matlab源码 1152期】
- 人工神经网络方法学习步长_人工神经网络-一种直观的方法第1部分
- python 100 days github_GitHub - Andyhe2019/Python-100-Days: Python - 100天从新手到大师
- python自动处理数据_Python自动化测试-使用Pandas来高效处理测试数据
- 鼎捷t100架构_鼎捷 T100 ERP 系统.pdf
- Java进制转换问题（详解）
- tekton pipelineresource资源
- mysql中如何复制数据表_MySQL中快速复制数据表方法汇总
- 软考_信息系统项目管理师_信息系统项目管理基础
- iOS开发系列--NextPrevious On-Demand Resource Basics
- length()、size()、sizeof()三者的区别
- pdf加页码java_Java 添加页码到PDF文档
- UEBA对抗威胁之“健康就是财富”！
- 全志D1-H 双屏异显第一弹来啦 D1同时支持两个屏幕，一边做UI交互，一边播放视频
- 机顶盒联机调试的方法