jQuery
jQuery
两种对象转换
jquery对象：$("#id")
DOM对象：document.getElementById("id")
DOM对象转JQuery对象：$(DOM)
jQuery对象转DOM对象：$()[n]
- 基本选择器
-
id选择器：
$("#id") -
标签选择器：
$("tagName") -
class选择器：
$(".className")
配合使用： -
$("div.c1") 找到有c1 class类的div标签
所有元素选择器： -
$("*")
-
组合选择器：
$("#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(元素选择器)
选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
- 属性选择器
- [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").find("p")
等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
补充：
.first() 获取匹配的第一个元素
.last() 获取匹配的最后一个元素
.not() 从匹配元素的集合中删除与指定表达式匹配的元素
.has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() 索引值等于指定值的元素
- 样式操作
操作标签
样式操作
样式类
addClass(); 添加指定的CSS类名。
removeClass(); 移除指定的CSS类名。
hasClass(); 判断样式存不存在
toggleClass(); 切换CSS类名，如果有就移除，如果没有就添加。
示例：css("color","red")
- 位置操作
offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
- 尺寸
height() 元素自身的高
width() 元素自身的宽
innerHeight() 元素内容+padding的高
innerWidth() 元素内容+padding的宽
outerHeight() 元素+padding+边框的高
outerWidth() 元素+padding+边框的宽
- 文本操作
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() 移除属性
对于标签上有的能看到的属性和自定义属性都用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).before(B) 把B放到A的前面
$(A).insertBefore(B)把A放到B的前面移除和清空元素
remove() 从DOM中删除所有匹配的元素。
empty() 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()
- 常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault();
阻止事件冒泡
e.stopPropagation();
$(document).ready(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])
