前端三剑客-07jQuery
介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
优势
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery对象
查找标签
基本选择器
- id选择器
-
开头对应id $("#id")
-
- 标签选择器
- 直接标签 $("input")
- class选择器
- .开头对应类 $(".error")
- 配合使用
- $("div.c1")
所有元素选择器
- $("*")
组合选择器
- $("#id, .className, tagName")
层级选择器
- $("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(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
- [attribute]
- [attribute=value]// 属性等于
- [attribute!=value]// 属性不等于
表单筛选器
- :text
- :password
- :file
- :radio
- :checkbox
- :submit
- :reset
- :button
表单对象属性
- :enabled
- :disabled
- :checked
- :selected
筛选器方法
下一个元素：
- $("#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").filter(".c1") // 从结果集中过滤出有c1样式类的
- .first() // 获取匹配的第一个元素
- .last() // 获取匹配的最后一个元素
- .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
- .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
- .eq() // 索引值等于指定值的元素
操作标签
样式类
- addClass(); // 添加指定的CSS类名。
- removeClass(); // 移除指定的CSS类名。
- hasClass(); // 判断样式存不存在
- toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
CSS
- css("color","red")
位置操作
-
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
-
position() // 获取匹配元素相对父元素的偏移
-
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
-
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
尺寸
-
height()
-
width()
-
innerHeight()
-
innerWidth()
-
outerHeight()
-
outerWidth()
文本操作
HTML代码
- html() // 取得第一个匹配元素的html内容
- html(val) // 设置所有匹配元素的html内容
文本值
- text() // 取得所有匹配元素的内容
- text(val) // 设置所有匹配元素的内容
值
- val() // 取得第一个匹配元素的当前值
- val(val) // 设置所有匹配元素的值
- val([val1, val2]) // 设置多选的checkbox、多选select的值
设置值
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
- $("[name='hobby']").val(['basketball', 'football']);
- $("#s1").val(["1", "2"])
属性操作
addr用于ID等或自定义属性
- attr(attrName) // 返回第一个匹配元素的属性值
- attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
- attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
- removeAttr() // 从每一个匹配的元素中删除一个属性
prop用于checkbox和radio
- prop() // 获取属性
- removeProp() // 移除属性
总结:
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如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).after(B) // 把B放到A的后面
- $(A).insertAfter(B) // 把A放到B的后面
移除和清空元素
- remove() // 从DOM中删除所有匹配的元素。
- empty() // 删除匹配的元素集合中所有的子节点。
替换
- replaceWith()
- replaceAll()
克隆
- clone() // 无参数,单纯复制样式
- clone(true) // true参数, 全复制(包括绑定事件等)
事件
常用事件
- click(function(){...})
- hover(function(){...})
- blur(function(){...})
- focus(function(){...})
- change(function(){...})
- keyup(function(){...})
事件绑定
- .on( events [, selector ],function(){})
列如: $("body").on("click","button",function(){}) 这边意思为button的点击事件 委托给了body去执行
移除事件
- .off( events [, selector ][,function(){}])
阻止后续事件执行
- return false; // 常见阻止表单提交等
- e.preventDefault();
阻止事件冒泡
- e.stopPropagation();
- return false
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写:
$(function(){
// 你在这里写你的代码
})
与window.onload的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("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])
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
一个通用的迭代函数，它可以用来无缝迭代对象和数组。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
010
120
230
340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
插件
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
