jQuery
一. jQuery
1. jQuery介绍
1) jQuery是一个轻量级的,兼容多浏览器的JavaScript库.
2) jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“
2. jQuery的优势
1) 一款轻量级的JS框架. jQuery核心js文件才几十kb,不会影响页面加载速度.
2) 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色 jQuery也是一行代码搞定.
3) 链式表达式. jQuery的链式操作可以把多个操作写在一行代码里,更加简洁
4) 事件、样式、动画支持 jQuery还简化了js操作css的代码,并且代码的可读性也比js要强
5) Ajax操作支持. jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信
6) 跨浏览器兼容. jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋
7) 插件扩展开发. jQuery有着丰富的第三方的插件,例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己
需要去改写和封装插件,简单实用.
3. jQuery对象
虽然 jquery对象是包装DOM对象后产生的, 但是 jQuery对象无法使用 DOM对象的任何方法, 同理 DOM对象也没不能使用 jQuery里的方法.
$("#i1").html()的意思是: 获取id值为 i1的元素的html代码. 其中html()是jQuery里的方法. 相当于:document.getElementById('il').innerHTML
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
$(variable) //DOM对象转成jQuery对象
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
二.查找标签
1. 基本选择器
(1) id选择器 :
$("#id")
(2) 类选择器
$(".className")
(3) 标签选择器
$("tagName")
(4) 配合使用
$("div.c1") // 找到有c1 class类的div标签
(5) 所有元素选择器
$("*")
(6) 组合选择器
$("#id, .className, tagName")
2. 层级选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3. 基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
4. 属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子:
// 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
5. 表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子:
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
例子:
// 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
三. 筛选器方法
1. 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2. 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3. 父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4. 儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
5. 查找, 搜索所有与指定表达式匹配的元素, 是找出正在处理的元素的后代元素的好方法.
$("div").find("p")
6. 其它
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
四. 操作标签
1. 样式操作
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
2. 位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
3. 尺寸
height() // 元素本身的高度,不包括padding、border、margin width() / / 元素本身的高度,不包括padding、border、margin innerHeight() // 包括元素自身的高度+padding部分 innerWidth() // 包括元素自身的宽度+padding部分 outerHeight() // 元素自身高度 + padding + border outerWidth() // 元素自身宽度 + padding + border outerHeight(true) // 元素自身高度 + padding + border + margin outerWidth(true) // 元素自身宽度 + padding + border + margin
4. 文本操作
// html代码 html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 // 文本值text,不识别标签 text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 // 值val 常用于button val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
5. 属性操作
// 用于ID或自定义属性 attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性 // 用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性
prop和attr的区别：
attr全称attribute(属性) ; prop全称property(属性), prop不支持获取标签的自定义属性.
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <input type="checkbox" id="i1" value="1"> </body> </html> <script> $("#i1").attr("checked") // checked $("#i1").prop("checked") // true </script>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <input type="checkbox" checked id="i1" value="1"> </body> </html> <script> $("#i1").attr("checked") // checked $("#i1").prop("checked") // true </script>
总结：
(1) 对于标签上有的能看到的属性和自定义属性都用attr.
(2) 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop.
6. 文档处理
//添加到指定元素内部的后面 $(A).append(B) // 把B追加到A $(A).appendTo(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() // 参数
五. 事件
1. 常用事件
click(function(){...}) // 鼠标点击触发 hover(function(){...}) // 鼠标滑过触发 blur(function(){...}) // 失去焦点(光标)触发 focus(function(){...}) // 获得焦点(光标)触发 change(function(){...}) // 当<input>、<select>或<textarea>的内容改变 keydown(function(){...}) // 按下键盘按键触发 keyup(function(){...}) // 松开键盘按键触发
2. 事件绑定
// 1 this是实参，表示触发事件的当前元素. <div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(this) { ths.style.backgroundColor="green"; } </script> // 2 .onclick(function(){...}) <div id="d2">点我</div> <script> var divEle2 = $("#d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script> // 3 .on( events,selector,function(){...}) selector可以没有 <div id="d2">点我</div> <script> var divEle2 = $("#d2"); divEle2.on("click", function () { // 事件委托 this.innerText="呵呵"; }) </script>
像click、keydown等DOM中定义的事件，我们都可以使用 ".on()" 方法来绑定事件, 但是 "hover" 这种jQuery中定义的事件就不能用 ".on()" 方法来绑定了. 可以使用事件委托的方式绑定hover事件处理函数：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
3. 移除事件
.off( events [, selector ][,function(){}]) off() 方法移除用 .on()绑定的事件处理程序。 events： 事件 selector: 选择器（可选的） function: 事件处理函数
4. 阻止后续事件执行
.preventDefault()
5. 阻止事件冒泡
事件冒泡 : 如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 .
".stopPropagation()"就是阻止目标元素的事件冒泡到父级元素
6. 页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度.
$(document).ready(function(){ JS代码... }) // 简写 $(function(){ JS代码 })
7. 事件委托
事件委托是通过事件冒泡的原理, 利用父标签去捕获子标签的事件.
// 表格中每一行的编辑和删除按钮都能触发相应的事件。 $("table").on("click", ".delete", function () { // 删除按钮绑定的事件 })
六. 动画效果
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn])
// 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn])
// 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]])
// 自定义（了解即可） animate(p,[s],[e],[fn])
七. 其它
1. each()
语法 : jQuery.each(collection, callback(indexInArray, valueOfElement))
描述：一个通用的迭代函数, 它可以用来无缝迭代对象和数组. 数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引, 从0到length - 1. 其他对象通过其属性名进行迭代.
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 }) // 0 10 // 1 20 // 2 30 // 3 40
语法: .each(function(index, Element))
描述：遍历一个jQuery对象, 为每个匹配元素执行一个函数. .each() 方法用来迭代jQuery对象中的每一个DOM元素. 每次回调函数执行时, 会传递当前循环次数作为参数(从0开始计数). 由于回调函数是在当前DOM元素为上下文的语境中触发的, 所以关键字 this 总是指向这个元素.
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
终止each循环
return false；
2. data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值.
语法 : .data(key, value)
描述：在匹配的元素上存储任意相关数据.
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
语法: .data(key)
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过.data(name,value)设置
$("div").data("k");//返回第一个div标签中保存的"k"的值
语法: .removeData(key)
描述：移除存放在元素上的数据, 不加key参数表示移除所有保存的数据.
