table of Contents
Filters
Basic filters
:first // 第一个
:last // 最后一个
:eq(索引值) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(索引值) // 匹配所有大于给定索引值的元素
:lt(索引值) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
例：$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
:has(元素选择器) // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
例：$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签Attribute Filters
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签Form Filter
// type属性查找
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：$("type:checkbox") // 找到所有的checkbox
type可省略, 写为$(":checkbox")
// 表单对象属性
:enabled
:disabled
:checked
:selected
例：$("input:enabled") // 找到可用的input标签
例：$(":selected") // 找到所有被选中的optionNote: jQuery, the use $(':checked')to find the label, there will be returned with the input option and default values.
If we must find the value contained in the checked input, it can be combined with a condition $("input:checked");or a higher degree of accuracy: such as$(":checkbox:checked");
Filter Method
Previous element
$("#id").prev() // 找到括号内id值的上一个同级元素
$("#id").prevAll() // 找到括号内id值的上面所有同级元素
$("#id").prevUntil("#i2") // 找到括号内id值 到i2为止的上面所有同级元素,不包括i2The next element
$("#id").next() // 找到括号内id值的下一个同级元素
$("#id").nextAll() // 找到括号内id值的下面所有同级元素
$("#id").nextUntil("#i2") // 找到括号内id值 到i2为止的下面所有同级元素,不包括i2The parent element
$("#id").parent() // 查找当前元素的上一个父辈元素
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil('body') // 找到括号内id值 到body为止的所有父辈元素,不包括bodyOffspring and siblings
$("#id").children();// 子代
$("#id").siblings();// 兄弟Seek
// 搜索所有与指定表达式匹配的元素
$("div").find("p") // 查找div内的所有p标签
// 等价于
$("div p")filter
// 筛选出与指定表达式匹配的元素集合
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
// 等价于
$("div.c1")supplement
// 与表单筛选器类似
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
。
.eq() // 索引值等于指定值的元素Handling label
Style operations
addClass(); // 添加指定的CSS类名
removeClass(); // 移除指定的CSS类名
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加
// css操作
css("color","red")
例：$("p").css("color", "red"); //将所有p标签的字体设置为红色Operating position
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
补充：括号内可以加参数，scrollTop() 比较常用，应用场景：当滚动条距离顶部600px，则显示“回到顶部”按钮The size of the operation
// 内部文本宽高
height()
width()
// 内部文本高度+上下padding高度
innerHeight()
// 内部文本宽度+左右padding宽度
innerWidth()
// 内部文本高度+上下padding高度+上下边框高度
outerHeight()
// 内部文本宽度+左右padding宽度+左右边框宽度
outerWidth()Text manipulation
html() // 取得元素的html内容
html(val值) // 设置元素的html内容
text() // 取得元素的文本内容
text(val值) // 设置元素的文本内容
val() // 取得元素的当前值
val(val) // 设置元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值
例：设置多选的值
$("[name='hobby']").val(['basketball', 'football']);
例：获取被选中的checkbox的值
$("input[name='gender']:checked").val()Property operations
// 对于标签上有的能看到的属性和自定义属性都用attr
attr(attrName)// 返回匹配元素的属性值
attr(attrName, attrValue)// 为匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为匹配元素设置多个属性值
removeAttr()// 从匹配的元素中删除一个属性
// 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
prop() // 获取属性
removeProp() // 移除属性
Note: For compatibility reasons, For checkbox and radio operations, to make use of a particular prop()operation.
But 3.x version, removeProp()may not be valid, when you delete an element, try to use prop(), such as
Using prop()the operation of adding attribute checkbox
$('input').first().prop('checked','checked')
Use prop()Deleting attribute checkbox
$('input').first().prop('checked',false)
Document Actions
Add to the specified element inside the latter
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到BSpecified element added to the inside front of the
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到BSpecified element added to the outside behind
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面Specified element added to the outside in front of the
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面Remove and empty elements
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。replace
replaceWith()
replaceAll()clone
clone() // 参数event
Common events
click(function(){...}) // 单击
hover(function(){...}) // 光标悬浮
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // 域内容变化
keyup(function(){...}) // 键盘某个键按下后松开
input(function(){...}) // 实时监听input框Event binding
The first grammatical structure:
$(选择器).事件名(function(){
// 事件代码
})The second syntax structure (use wider)
$(选择器).on('事件名',function(){
// 事件代码
})Remove event
.off( events [, selector ][,function(){}])Prevent the implementation of subsequent events
The first way
return false
例：
$("#b1").click(function (e) {
alert(123);
return false;
});The second way
e.preventDefault()
例：
$("#b1").click(function (e) {
alert(123);
e.preventDefault();
});Stop event bubbling
Bubbling event is click a child node, click the event will trigger upward parent, grandfather node
e.stopPropagation();
例：
$("内层某节点").click(function (e) {
alert(123);
e.stopPropagation();
});Page load
// 方式一
$(document).ready(function(){
// JS代码...
})
//方式二
$(function(){
// JS代码...
})
Event delegates
Event delegates is through the principle of event bubbling, using the parent tag to capture the sub-label of an event
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})