jQuery
jQuery is a lightweight JavaScript third-party libraries, it can be simple JavaScript programming.
jQuery selector
1, id selector:
$("#id")
2, the tag selector:
$("标签名")
3, class selector:
$(".类名")
4, defining the selector:
$("div.c1") // 找到有c1类的div标签
5, the global selector:
$("*") // 找到所有
6, a number of selectors:
$("#id, .类名, 属性名")
7, selector level: x and y may be any selector
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
8, attribute selector:
$(input [type]) // 找到有type属性的input标签
$(input [type="text"]) // 找到type属性值为text的input标签
$(input [type="text"]) // 找到type属性值不为text的input标签
9, selector screening:
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
Example:
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
10, from the form commonly used screening:
:text // 筛选type是text的标签
:password // 筛选type是password的标签
:file // 筛选type是file的标签
:radio // 筛选type是radio的标签
:checkbox // 筛选type是checkbox的标签
:submit // 筛选type是submit的标签
:reset // 筛选type是reset的标签
:button // 筛选type是button的标签
Form Properties screening:
:enabled // 筛选出可用的input标签
:disabled // 筛选出不可用的input标签
:checked // 筛选出有checkbox选项被选中的input标签
:selected // 筛选出有select选项被选中的option标签
jQuery filters
1, following the screening of a jQuery object elements
jQuery对象.next() // 筛选出某jQuery对象下面的第一个元素
jQuery对象.nextAll() // 筛选出某jQuery对象下面的全部元素
jQuery对象.nextUntil("选择器") // 筛选出某jQuery对象下面的元素，直到遇到指定的元素为止
2, an upper filter element jQuery object
jQuery对象.prev() // 筛选出某jQuery对象上面的第一个元素
jQuery对象.prevAll() // 筛选出某jQuery对象上面的全部元素
jQuery对象.prevUntil("选择器") // 筛选出某jQuery对象上面的元素，直到遇到指定的元素为止
3, the screening of a jQuery object of the parent element
jQuery对象.parent() // 筛选出某jQuery对象的父元素
jQuery对象.parents() // 筛选出某jQuery对象的全部父级元素
jQuery对象.parentsUntil("选择器") // 筛选出某jQuery对象的父级元素，直到遇到指定的元素为止
4, screening of a sub-element of jQuery object
jQuery对象.children() // 筛选出某jQuery对象的子元素
5, screened a jQuery object of siblings
jQuery对象.siblings() // 筛选出某jQuery对象的兄弟元素
6, used in the compositions and screening methods
.find() // 从前面的jQuery对象中找出符合条件的元素
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
jQuery label operation
1, label style operation
jQuery标签对象.addClass("类名") // 给标签添加CSS类名
jQuery标签对象.removeClass("类名") // 删除CSS类名
jQuery标签对象.hasClass("类名") // 判断是否有此CSS类
jQuery标签对象.toggleClass("类名") // 判断是否有此CSS类，有就删除，没有添加
2, get the label position
jQuery对象.offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
jQuery对象.position() // 获取匹配元素相对父元素的偏移
jQuery对象.scrollTop() // 获取匹配元素相对滚动条顶部的偏移
jQuery对象.scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
3, get label size
jQuery对象.width() // 获取宽度
jQuery对象.height() // 获取高度
jQuery对象.innerWidth() // 获取内容宽度加padding宽度
jQuery对象.innerHeight() // 获取内容高度加padding高度
jQuery对象.outerWidth() // 获取内容宽度加padding宽度再加border宽度
jQuery对象.outerHeight() // 获取内容高度加padding高度再加border高度
4, operation of the HTML code
jQuery对象.html() // 获取第一个匹配元素的html内容，要获取每个就遍历对象再获取
jQuery对象.html("新的内容") // 将匹配到的元素设置为新内容
5, operation of the label text
jQuery对象.text() // 获取匹配元素的所有内容
jQuery对象.text("新内容") // 将匹配元素的所有内容设置为新内容
6, value tag value operation
Query对象.val() // 获取第一个匹配元素的当前值
jQuery对象.val("value值") // 将匹配元素中有指定值的元素选中展示出来
jQuery对象.val(["value值1", "value值2"]) // 设置checkbox、select的值
7, the operation property tag
jQuery对象.attr("属性名") // 获取匹配到的第一个元素的属性值
jQuery对象.attr("属性名"，"属性值") // 为匹配到的元素设置属性
jQuery对象.attr({"属性名1"："属性值1"，"属性名2"："属性值2"}) // 为匹配到的元素设置多个属性
jQuery对象.removeAttr("属性名") // 删除匹配元素中的一个属性
// 对于checkbox和radio使用下面的方法操作属性
.prop("属性名") // 获取属性值
.prop("属性名"，"属性值") // 设定属性
.removeProp("属性名") // 删除属性
jQuery document processing
1, adding new HTML code in front of the inside of the specified element
jQuery对象a.prepend(jQuery对象b) // 将对象b添加到对象a的前面
jQuery对象a.prependTo(jQuery对象b) // 将对象a添加到对象b的前面
2. Add a new HTML code after the inside of the specified element
jQuery对象a.append(jQuery对象b) // 将对象b添加到对象a的后面
jQuery对象a.appendTo(jQuery对象b) // 将对象a添加到对象b的后面
3, to add a new HTML code in front of the outside of the specified element
jQuery对象a.before(jQuery对象b) // 将对象b添加到对象a的前面
jQuery对象a.insertBefore(jQuery对象b) // 将对象a添加到对象b的前面
4, adding new HTML code after the specified external element
jQuery对象a.after(jQuery对象b) // 将对象b添加到对象a的后面
jQuery对象a.insertAfter(jQuery对象b) // 将对象a添加到对象b的后面
5, delete, and empty the specified element
jQuery对象.remove() // 删除元素本身以及内部的所有元素
jQuery对象.empty() // 清空元素内部的所有元素，不包含本身
6, replaced elements
jQuery对象.replaceWith(替换内容) // 将对象替换为新内容
替换内容.replaceAll(jQuery对象) // 用新内容替换对象
7, elements clone
jQuery对象.clone() // 克隆一个新元素 有参数true，添加true带元素本身的事件也会克隆
jQuery Events
1, common events
click // 单击
dblclick // 双击
mouseenter // 鼠标移动到标签上
mouseleave // 鼠标离开标签
keydown // 按键被按下
keyup // 按键被松开
submit // submit按钮按下时
change // 表单的元素的值被改变时
focus // 当鼠标点击选中的元素或tab键定位元素时
blur // 当选中的元素失去焦点时
2, event binding
某标签.on(events,selector,function(){}) // events为事件 selector为选择器（特定条件下使用） function为事件要进行的函数
3, event delegates
, Defined in the selector by adding to the parent label binding events to use to capture the event sub parent tag label.
父级标签.on(events,要触发事件的标签,function(){})
4, the event is removed
某绑定过事件的标签.off(events)
5, to prevent the implementation of subsequent events
return false; // 在事件执行函数结束后如过返回的是false则后续的事件不会执行。
6, page load
$(document).ready(function(){ // 在这里写你的JS代码...
}) // 这个函数可以极大的提高web应用程序的响应速度，优化页面载入。
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.
Wish everyone in the programming this road, farther and farther.