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的顶级对象$
- 是 j Q u e r y 的 别 称 , 在 代 码 中 可 以 使 用 j Q u e r y 来 代 替 是jQuery的别称,在代码中可以使用jQuery来代替 是jQuery的别称,在代码中可以使用jQuery来代替,但为了方便,通常都直接使用$。
- 是 j Q u e r y 的 顶 级 对 象 , 相 当 于 原 生 J S 中 的 w i n d o w , 把 元 素 利 用 是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="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="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="images/01.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/02.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/03.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/04.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/05.jpg" alt="" /></a> </li> <li> <a href="#"><img src="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="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/l1.jpg" alt="" class="small"> <img src="images/l.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/c1.jpg" alt="" class="small"> <img src="images/c.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/w1.jpg" alt="" class="small"> <img src="images/w.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/z1.jpg" alt="" class="small"> <img src="images/z.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/h1.jpg" alt="" class="small"> <img src="images/h.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/t1.jpg" alt="" class="small"> <img src="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 + margin console.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. 获取设置距离文档的位置(偏移) offset console.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().top var current = $(".floor .w").eq($(this).index()).offset().top; // 页面动画滚动效果 $("body, html").stop().animate({ scrollTop: current }, function() { flag = true; }); // 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名 $(this).addClass("current").siblings().removeClass(); }) })
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使用 作 为 标 识 符 , 随 着 j Q u e r y 的 流 行 , 其 他 库 也 会 用 作为标识符,随着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. 如果$ 符号冲突 我们就使用 jQuery jQuery.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。 // 默认: false columnWidth: 240, // 1列网格的宽度,单位为像素(px)。 // 默认: 第一个浮动元素外宽度。 itemSelector: '.box:visible', // 附加选择器,用来指定哪些元素包裹的元素会重新排列。 resizeable: true, // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认:true animate: true, // 布局重排动画。 // 默认:false animationOptions: {}, // 一对动画选项,具体参数可以参考jquery .animate()中的options选项 appendedContent: $('.new_content'), // 附加选择器元素,用来尾部追加内容。 // 在集成infinitescroll插件的情况下使用。 saveOptions: true, // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项 // 默认:true function() {} // 可选择的回调函数 // '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分析