jQuery入门与实战
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> -
案例：新浪下拉菜单
<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>Documenttitle> <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(); }) })<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栏切换
<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>Documenttitle> <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> -
案例：突出显示
<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>
-
-
案例：王者荣耀手风琴
<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>
-
-
案例：购物车模块
<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,相机,数码,配件,手表,存储卡,品优购" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/car.css"> <script src="js/jquery.min.js">script> <script src="js/car.js">script> head> <body> <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> <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.60div> <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.60div> <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.80div> <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.80div> <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.80div> <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.80div> <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>1em>件商品div> <div class="price-sum">总价： <em>￥12.60em>div> <div class="btn-area">去结算div> div> div> div> div> div> <div class="footer"> <div class="w"> <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> <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> <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> 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());//我是内容 // $("div").html("123"); //123 // 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); //123// 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>
-
-
创建元素
-
语法规范
$("");
-
-
添加元素
-
内部添加
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
"); // 2. 添加元素 // (1) 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // (2) 外部添加 var 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元素大小
<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>Documenttitle> <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元素位置
<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>Documenttitle> <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( ) 设置或获取元素被卷去的头部和左侧
-
案例：
<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>Documenttitle> <style> body { height: 2000px; } .back { position: fixed; width: 50px; height: 50px; background-color: pink; right: 30px; bottom: 100px; display: none; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 400px auto; } style> <script src="jquery.min.js">script> head> <body> <div class="back">返回顶部div> <div class="container"> div> <script> $(function() { $(document).scrollTop(100); // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 页面滚动事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrollTop(0); //使用animate动画返回顶部 //animation动画函数里面有个scrollTop属性，可以设置位置 $("body, html").stop().animate({ scrollTop: 0 }); // document 是文档，元素做动画 //$(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) script> body> 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,相机,数码,配件,手表,存储卡,品优购" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery.min.js">script> <script src="js/index.js">script> head> <body> <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> <div class="header w"> <div class="logo"> <h1> <a href="index.html" title="品优购">品优购a> h1> div> <div class="search"> <input type="text" class="text" value="请搜索内容..."> <button class="btn">搜索button> div> <div class="hotwrods"> <a href="#" class="style-red">优惠购首发a> <a href="#">亿元优惠a> <a href="#">9.9元团购a> <a href="#">美满99减30a> <a href="#">办公用品a> <a href="#">电脑a> <a href="#">通信a> div> <div class="shopcar"> <i class="car"> i>我的购物车 <i class="arrow"> i> <i class="count">80i> div> div> <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> <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="#">【特惠】长虹智能空调立省1000a>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> <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> <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>|