jQuery
什么是jquery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
基础语法：
$(*selector*).*action*()
jQuery对象与js对象互相转换
var p1 = $("#p1"); // 得到jq对象
var p2 = document.getElementById("p1"); // 得到js对象
var jsp = p1[0]; // 将jq对象转成js对象
var jqp = $(p2); // 将js对象转成jq对象
jQuery 选择器
| 选择器 | 描述 |
|---|---|
| $("id") | id选择器 |
| $("class") | 类选择器 |
| $("tagName") | 标签选择器 |
| $("div.d1") | 配合选择器（类为d1的div标签） |
| $("*") | 所有元素选择器 |
| $("#id, .className, tagName") | 组合选择器 |
| $("x y") | 后代选择器 |
| $("x > y") | 子类选择器 |
| $("x + y") | 毗邻选择器 |
| $("x ~ y") | 兄弟选择器 |
筛选器
| 筛选器 | 描述 |
|---|---|
| :first | 第一个 |
| :last | 最后一个 |
| :eq(index) | 索引等于index的标签 |
| :even | 匹配索引为偶数的标签，包括0 |
| :odd | 匹配索引为奇数的标签 |
| :gt(index) | 匹配索引大于index的标签 |
| :lt(index) | 匹配索引小于index的标签 |
| :not(元素选择器) | 匹配不满足条件的标签 |
| :has(元素选择器) | 匹配后代中有一个或多个满足添加的标签 |
属性选择器
- [attribute = value]：属性等于
- [attribute != value]：属性不等于
表单筛选器
包括但不限于：
| 筛选器 | 描述 |
|---|---|
| :text | 匹配文本框 |
| :password | 匹配密码框 |
| :radio | 匹配单选框 |
| :checkbox | 匹配多选框 |
| :submit | 匹配提交按钮 |
| :reset | 匹配重置按钮 |
| :button | 匹配普通按钮 |
| :file | 匹配文件选择框 |
筛选方法
父元素
$("#id").parent() // 返回被选元素的直接父元素 $("#id").parents() // 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 $("#id").parentsUntil() // 返回介于两个给定元素之间的所有祖先元素兄弟元素
siblings() // 返回被选元素的所有兄弟元素 next() // 返回被选元素的下一个兄弟元素 nextAll() // 返回被选元素下面跟随的兄弟元素 nextUntil() // 返回介于给定参数之间的所有跟随的兄弟元素 prev() // 返回被选元素的上一个兄弟元素 prevAll() // 返回被选元素下面跟随的兄弟元素 prevUntil() // 返回介于给定参数之间的所有跟随的兄弟元素
后代元素
children() // 方法返回被选元素的所有直接子元素 find() // 返回被选元素的后代元素，一路向下直到最后一个后代
查找指定元素
$("div").find("p") // div下的所有p标签筛选自定元素
$("div").filter(".p1") // 从结果集中过滤出有p1类的标签
操作标签
样式操作
操作类
.addClass() // 添加指定的类名 .removeClass() // 移除指定的类名 .hasClass() // 判断样式是否存在 .toggleClass() // 判断类名是否存在，存在移除，不存在添加
操作css
.css("color", "red") // 添加单个样式 .css({"color": "red", "font-size": 36}) // 添加多个样式
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
尺寸
height() // content的高度 width() // content的宽度 innerHeight() // content+padding的高度 innerWidth() // content+padding的宽度 outerHeight() // content+padding+border的高度 outerWidth() // content+padding+border的宽度
获取值
text
.text() // 设置或获取text值
html
.html() // 设置或获取html值
val
.val() // 设置或获取val值，表单值 .val([val1, val2]) // 设置多选的checkbox、多选select的值
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
// 单选框和多选框请使用
prop() // 获取属性
removeProp() // 移除属性
文档处理
将元素添加到指定元素的内部
内部的后面
A.append(B) // 把B追加到A内部 A为jquery对象 A.appendTo(B) // 把A追加到B内部 A为jquery对象
内部的前面
A.prepend(B) // 把B前置到A A为jquery对象 A.prependTo(B) // 把A前置到B A为jquery对象
将元素添加到指定元素的外部
外部的后面
A.after(B)// 把B放到A的后面 A为jquery对象 A.insertAfter(B)// 把A放到B的后面 A为jquery对象
外部的前面
A.before(B)// 把B放到A的前面 A为jquery对象 A.insertBefore(B)// 把A放到B的前面 A为jquery对象
移除和清空元素
移除
A.remove() // 将A对象移除 A为jquery对象
清空
A.empty() // 将A对象的子元素全部移除，保留当前对象 A为jquery对象
替换
replaceWith
A.replaceWith(B) // 将B替换成A A为jquery对象
replaceAll
$("<h1>Hello World!</h1>").replaceAll(A) // 替换成新的 HTML 元素。 A为jquery对象
克隆：clone
A.clone() // 克隆一个jq对象 不包括事件处理程序 A.clone(true) // 克隆一个jq对象 包括事件处理程序
事件
常见事件
事件 详细信息 click 单击事件 dblclick 双击事件 mouseenter 鼠标移入 mouseleave 鼠标移出 hover 鼠标移入和移出 键盘按住 keydown 键盘按下 keyup 键盘弹起 submit 表单提交时 change 域内容被改变 focus 元素获取焦点 blur 元素失去焦点 load 当页面全部加载完毕 resize 当调整页面大小时 scroll 滚动指定元素时（select） unload 当离开页面时 事件绑定
.on("事件"，事件函数) // 示例： $("p").on("click", function(){ $(this).animate({fontSize: "+=1px"}); });事件移除
.off("事件") // 示例： $("button").on("click",function(){ $("p").off("click"); });阻止后续事件执行
return false; // 一般用于阻止表单提交 e.preventDefault();