jQuery
一、jQuery介绍
为什么要用jQuery？在用js写代码时，会遇到一些问题：
window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差
浏览器兼容性问题
书写很繁琐，代码量多
代码很乱，各个页面到处都是
动画效果很难实现
什么是jQuery
jQuery是js的一个库，封装了我们开发过程中常用的功能，方便调用，提高开发效率。
初期，主要学习如何使用jQuery操作DOM，其实是学习jQuery封装好的那些API
这些API的共同特点是：几乎都是方法。所以在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同
1 jQuery的使用： 2 3 1、先引入jQuery 4 <script type="text/javascript" src="jquery.min.js"></script> 5 #这里说下windows下如何安装jQuery，下载node-v8.11.3-x64.msi安装包，然后指定目录安装，目录: npm install jquery --save 6 7 2、jQuery入口函数（有2种方式）： 8 方式1： 9 $(document).ready(function(){ 10 //执行代码 11 }) 12 13 方式2： 14 $(function(){ 15 //执行代码 16 }) 17 18 3、js和jQuery之间的转换 19 js转换成jQuery的方式，$(js对象) 20 jQuery转换成js的方式，$('.box')[index]
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background-color: green; 11 } 12 </style> 13 14 </head> 15 <body> 16 <div class="box"> 17 </div> 18 <div class="box"> 19 </div> 20 <!-- 先引包 --> 21 <script type="text/javascript" src="jquery.min.js"></script> 22 <script type="text/javascript"> 23 24 $(function(){ 25 26 console.log($('.box')); 27 28 $('.box').click(function(){ 29 30 $(this).css({ 31 'background-color':'yellow', 32 'width':'300px' 33 }) 34 }) 35 }); 36 37 38 39 </script> 40 41 42 </body> 43 </html>
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对象
var variable = DOM对象
$variable[0] // jQuery对象转成DOM对象
jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象可以使用jQuery方法
$("#i1")[0].innerHTML; // DOM对象使用DOM方法
jQuery入口函数与js入口函数的区别
区别一：书写个数不同；
js的入口函数只能出现一次，出现多次会存在事件覆盖的问题
jQuery的入口函数，可以出现多次，不存在事件覆盖问题
区别二：执行时机不同
js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成
文档加载顺序：从上往下，边解析边执行
jQuery使用$符号原因：书写简洁、容易记住 $ 代表的就是jQuery 如何理解jQuery里面的$符号呢？ $实际上表示的是一个函数名，如下： $(); //调用上面我们自定义的函数$ $(document).ready(function(){}); //调用入口函数 $(function(){}); //调用入口函数 $("#btnShow") //获取id属性为btnShow的元素 $("div") //获取所有的div标签元素
二、jQuery选择器
1、jQuery的基本选择器
2、层级选择器
3、基本过滤选择器
4、筛选选择器
三、jQuery动画效果
显示动画
方式一： $('div').show(); 解释：无参数，表示让指定的元素直接显示出来 方式二： $('div').show(3000); 解释：通过控制元素的宽高、display属性，逐渐显示，2秒后显示完毕 方式三： $("div").show("slow"); 参数可以是： slow 慢：600ms normal 正常：400ms fast 快：200ms 方式四： $('div').show(5000,function(){ alert('动画执行完毕！'); }); 解释：动画执行完后，立即执行回调函数
隐藏动画
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});
开关式显示隐藏动画
$('#box').toggle(3000,function(){}); 显示和隐藏的来回切换采用的是toggle()方法：就是先执行show(),再执行hide()
滑入滑出
1、滑入动画效果（类似生活中的卷帘门） $(selector).slideDown(speed,回调函数); 解释：下拉动画，显示元素 2、滑出动画效果 $(selector).slideUp(speed,回调函数); 解释：上拉动画，隐藏元素 3、滑入滑出切换效果： $(selector).slideToggle(speed,回调函数);
淡入淡出
1、淡入动画效果 $(selector).fadeIn(speed,callback); 作用：让元素以淡淡的进入视线的方式展示出来 2、淡出动画效果 $(selector).fadeOut(1000); 作用：让元素以渐渐消失的方式隐藏起来 3、淡入淡出切换效果 $(selector).fadeToggle('fast',callback); 作用：通过改变透明度，切换匹配元素的显示或隐藏状态
自定义动画
语法：
$(selector).animate({params} , speed , callback);
作用：执行一组CSS属性的自定义动画
第一个参数：要执行动画的CSS属性
第二个参数：执行动画时长
第三个参数：动画执行完成，立即执行的回调函数
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 position: absolute; 9 left: 20px; 10 top: 30px; 11 width: 100px; 12 height: 100px; 13 background-color: green; 14 } 15 </style> 16 <script src="jquery.min.js"></script> 17 <script> 18 19 $(function(){ 20 $('button').click(function(){ 21 22 var json = {'width':500,'height':500,'left':300,'top':300,'border-radius':100}; 23 var json2 = {'width':100,'height':100,'left':100,'top':100,'border-radius':100,'background-color':'red'}; 24 25 //自定义动画 26 $('div').animate(json,1000,function(){ 27 $('div').animate(json2,1000,function(){ 28 alert('动画执行完毕') 29 }) 30 }) 31 }) 32 }); 33 34 35 </script> 36 </head> 37 <body> 38 39 <button>自定义动画</button> 40 <div></div> 41 </body> 42 </html>
停止动画
$(selector).stop(ture,false);
参数如果都不写，模式都是false，实际情况直接写stop()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 .wrap{ 15 width: 330px; 16 height: 30px; 17 margin: 100px auto; 18 padding-left: 10px; 19 background-color: pink; 20 } 21 .wrap li{ 22 background-color: green; 23 } 24 .wrap>ul>li{ 25 float: left; 26 margin-right: 10px; 27 position: relative; 28 } 29 .wrap a{ 30 text-decoration: none; 31 display: block; 32 height: 30px; 33 width: 100px; 34 color: #000; 35 line-height: 30px; 36 text-align: center; 37 } 38 .wrap li ul{ 39 position: absolute; 40 top: 30px; 41 display: none; 42 } 43 </style> 44 </head> 45 <body> 46 47 <div class="wrap"> 48 <ul> 49 <li> 50 <a href="javascript:;">一级菜单</a> 51 <ul> 52 <li><a href="javascript:;">二级菜单2</a></li> 53 <li><a href="javascript:;">二级菜单3</a></li> 54 <li><a href="javascript:;">二级菜单4</a></li> 55 </ul> 56 </li> 57 <li> 58 <a href="javascript:;">一级菜单2</a> 59 <ul> 60 <li><a href="javascript:;">二级菜单2</a></li> 61 <li><a href="javascript:;">二级菜单3</a></li> 62 <li><a href="javascript:;">二级菜单4</a></li> 63 </ul> 64 </li> 65 <li> 66 <a href="javascript:;">一级菜单3</a> 67 <ul> 68 <li><a href="javascript:;">二级菜单2</a></li> 69 <li><a href="javascript:;">二级菜单3</a></li> 70 <li><a href="javascript:;">二级菜单4</a></li> 71 </ul> 72 </li> 73 </ul> 74 </div> 75 76 </body> 77 78 <script type="text/javascript" src="jquery.min.js"></script> 79 <script type="text/javascript"> 80 81 $(function(){ 82 83 $('.wrap>ul>li').mouseover(function(){ 84 $(this).children('ul').stop().slideDown(1000); 85 }) 86 87 $('.wrap>ul>li').mouseleave(function(){ 88 $(this).children('ul').stop().slideUp(1000); 89 }) 90 }); 91 </script> 92 </html>
jQuery基础语法
查找标签
基本选择器
id选择器
$("#id")
标签选择器
$("tagName")
class选择器
$(".className")
所有元素选择器
$("*")
组合选择器
$("#id, .className, tagName")
层级选择器
x和y 可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本选择器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
父子和兄弟元素
$("#id").children; //儿子们
$("#id").siblings; //兄弟们
查找
$("div").find("p")
// 等价于 $("div p")
筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
// 等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
样式类
addClass(); // 添加指定的CSS类名 removeClass; //移除指定的CSS类名 hasClass(); //判断样式存不存在 toggleClass(); //切换CSS类名，如果有就移除，没有就添加
CSS
css("color","red") // DOM操作：tag.style.color = "red"
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移
文本操作
HTML代码
html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容
文本值
text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值
val() //取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1,val2]) // 设置多选的checkbox、多选select的值
属性操作
用于ID等或自定义属性：
attr(attrName) //返回第一个匹配元素的属性值 attr(attrName,attrValue) //为所有匹配元素设置一个属性值 attr({k1:v1, k2:v2"}) //位所有匹配元素设置多个属性值 removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
prop和attr的区别
attr全称 attribute（属性）
prop全称 property（属性）
虽然都是属性，但它们所指的属性并不相同，attr所指的属性是HTML标签的属性，而prop指的是DOM对象属性
举例：
<input type="checkbox" id="i1" value="1">
针对上面的代码
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") //false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false
如果换成如下代码：
<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
说明attr的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false
自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
$("#i1").attr("me") // 自定义属性
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性
总结：
1、对于标签上有的能看到的属性和自定义属性都用attr
2、对于返回布尔值的比如checkbox、radio和option的是否被选中用prop
文档处理
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A $(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
克隆示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
.on ( events [, selector ], functions() {} )
# events： 事件
# selector：选择器（可选）
# function：事件处理函数
移除事件
.off ( events [, selector ] [, function() {} )
# off() 方法移除用 .on() 绑定的事件处理程序
# events：事件
# selector：选择器（可选）
# function：事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault();
浙公网安备 33010602011771号