Learned earlier DOM and BOM know how to interact with the browser, this blog will introduce the knowledge of jQuery, and then we learn jQuery what is the role of it, by the previous study, JS statements are not difficult to find very long to realize a function to write a lot of line statement, the jQuery DOM object is to wrap up the formation of the jQuery object, write code compared with the statement JS, jQuery is even more simple.
A, jQuery selectors and filters
1. Selector
1.id选择器 $("#id")
2.标签选择器 $("标签名")
3.class选择器 $(".class名")
4.所有元素选择器 $("*")
5.子子孙孙选择器 $("x y")
6.儿子选择器 $("x>y")
7.弟弟选择器 $("x~y")(与自己同一层级的元素)
8.毗邻选择器 $(“x + y“)（找到紧挨在x后面的y元素）
9.属性选择器 [属性名]
[属性名=value]// 属性等于
[属性名!=value]// 属性不等于
属性选择器例子
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); 取属性值为checkbox的标签
$("input[type!='text']");// 取属性值为text的标签
2. Filter
1.:first $("div:first") 找出div后代元素的第一个元素
2.:last $("div:last") 找出div后代元素的最后一个元素
3.:eq(index) $("div:eq(inde索引数字)") 找出div后代中指定索引位置的元素
4.:even $("div:even") 找出所有索引值为偶数的元素
5.:odd $("div:odd") 找出所有索引值为奇数的元素
6.:gt(index) $("div:gt(index)") 找出所有大于给定索引值的元素
7.:lt(index) $("div:lt(index)") 找出所有小于给定索引值的元素
8.:not(元素选择器) $(div:not(.c1)) 移除所有满足not条件的标签
9.:has(元素选择器) $("div:has(.c1)") 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
10.:text
11.:password
12.:file
13.:radio
14.:checkbox
15.:submit
16.:reset
17.:button
11-17为表单筛选器 具体用法如下：
$(":checkbox") 找出所有的checkbox元素
Form Filter in the properties form objects (draw focus)
:enabled 找出不可用的标签
:disabled 找出可用的标签
:checked 找到被选中的标签（checkbox，radio）
:selected 找到被选中的标签（option）
3. Screening Methods
用法： $("#id").方法
.next() //下一个元素（同级） .nextAll() //下面的所有元素 .nextUntil("#i2") //下面直到id为i2的所有元素
.prev() //上一个元素（同级） .prevAll() //上面的所有元素 .prevUntil("#i2") //上面直到id为i2的所有元素
.parent()//父亲元素 .parents() //所有的父辈元素 .parentsUntil(“#i2”)//查找父辈的所有元素直到遇见id为i2的元素
$("#id").children() //获取id为i2的儿子们元素
$("#id").siblings() //获取id为i2的兄弟们元素
Find
search all the elements that match the specified expression. This function is to find a good way to descendant elements being processed.
His highest efficiency
用法： $("div").find("a")
4. Operation tag
1. The operation pattern (mainly the operation class)
1.addClass();// 添加指定的CSS类名。
2.removeClass();// 移除指定的CSS类名。
3.hasClass();// 判断样式存不存在
4.toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
2. Operating position
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
3. Dimensions
height()
width()
innerHeight() //内容区加padding
innerWidth()
outerHeight()//内容加padding加border
outerWidth()
4. text manipulation
1.HTML代码
1. .html 取得所有匹配元素的内容
2. .html(val) 设置所有匹配元素的html内容，用于添加标签
1.文本值
1. .text 取得所有匹配元素的内容
2. .text(val) 设置所有匹配元素的值
3.值
1. .val() 永远默认获取第一个的值 value
5. Event
1. Common types of events
click(function(){...}) 点击
hover(function(){...}) 悬浮
blur(function(){...}) 失去焦点
focus(function(){...}) 获取焦点
change(function(){...})
keyup(function(){...})
2. Binding events
时间的绑定方式 .on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
3. Remove event
.off(event[,selector][,function(){}])
off () method to remove with .on () event handler bound