前端开发工具之jQuery
jQuery
jQuery是一个轻量级的JavaScript第三方库，能够简单方便的进行JavaScript编程。
jQuery选择器
1，id选择器：
$("#id")
2，标签选择器：
$("标签名")
3，类选择器：
$(".类名")
4，限定选择器：
$("div.c1") // 找到有c1类的div标签
5，全局选择器：
$("*") // 找到所有
6，多项选择器：
$("#id, .类名, 属性名")
7，层级选择器：x和y可以为任意选择器
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
8，属性选择器：
$(input [type]) // 找到有type属性的input标签 $(input [type="text"]) // 找到type属性值为text的input标签 $(input [type="text"]) // 找到type属性值不为text的input标签
9，选择器的筛选：
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
实例：
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
10，from表单常用筛选：
:text // 筛选type是text的标签 :password // 筛选type是password的标签 :file // 筛选type是file的标签 :radio // 筛选type是radio的标签 :checkbox // 筛选type是checkbox的标签 :submit // 筛选type是submit的标签 :reset // 筛选type是reset的标签 :button // 筛选type是button的标签
表单属性筛选：
:enabled // 筛选出可用的input标签 :disabled // 筛选出不可用的input标签 :checked // 筛选出有checkbox选项被选中的input标签 :selected // 筛选出有select选项被选中的option标签
jQuery筛选器
1，筛选某jQuery对象的下面的元素
jQuery对象.next() // 筛选出某jQuery对象下面的第一个元素 jQuery对象.nextAll() // 筛选出某jQuery对象下面的全部元素 jQuery对象.nextUntil("选择器") // 筛选出某jQuery对象下面的元素，直到遇到指定的元素为止
2，筛选某jQuery对象的上面的元素
jQuery对象.prev() // 筛选出某jQuery对象上面的第一个元素 jQuery对象.prevAll() // 筛选出某jQuery对象上面的全部元素 jQuery对象.prevUntil("选择器") // 筛选出某jQuery对象上面的元素，直到遇到指定的元素为止
3，筛选某jQuery对象的父元素
jQuery对象.parent() // 筛选出某jQuery对象的父元素 jQuery对象.parents() // 筛选出某jQuery对象的全部父级元素 jQuery对象.parentsUntil("选择器") // 筛选出某jQuery对象的父级元素，直到遇到指定的元素为止
4，筛选某jQuery对象的子元素
jQuery对象.children() // 筛选出某jQuery对象的子元素
5，筛选某jQuery对象的兄弟元素
jQuery对象.siblings() // 筛选出某jQuery对象的兄弟元素
6，常用于和筛选组合方法
.find() // 从前面的jQuery对象中找出符合条件的元素 .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
jQuery标签操作
1，操作标签样式
jQuery标签对象.addClass("类名") // 给标签添加CSS类名
jQuery标签对象.removeClass("类名") // 删除CSS类名
jQuery标签对象.hasClass("类名") // 判断是否有此CSS类
jQuery标签对象.toggleClass("类名") // 判断是否有此CSS类，有就删除，没有添加
2，获取标签位置
jQuery对象.offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 jQuery对象.position() // 获取匹配元素相对父元素的偏移 jQuery对象.scrollTop() // 获取匹配元素相对滚动条顶部的偏移 jQuery对象.scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
3，获取标签尺寸
jQuery对象.width() // 获取宽度 jQuery对象.height() // 获取高度 jQuery对象.innerWidth() // 获取内容宽度加padding宽度 jQuery对象.innerHeight() // 获取内容高度加padding高度 jQuery对象.outerWidth() // 获取内容宽度加padding宽度再加border宽度 jQuery对象.outerHeight() // 获取内容高度加padding高度再加border高度
4，操作HTML代码
jQuery对象.html() // 获取第一个匹配元素的html内容，要获取每个就遍历对象再获取 jQuery对象.html("新的内容") // 将匹配到的元素设置为新内容
5，操作标签的文本内容
jQuery对象.text() // 获取匹配元素的所有内容 jQuery对象.text("新内容") // 将匹配元素的所有内容设置为新内容
6，操作标签中的value值
jQuery对象.val() // 获取第一个匹配元素的当前值 jQuery对象.val("value值") // 将匹配元素中有指定值的元素选中展示出来 jQuery对象.val(["value值1", "value值2"]) // 设置checkbox、select的值
7，操作标签属性
jQuery对象.attr("属性名") // 获取匹配到的第一个元素的属性值
jQuery对象.attr("属性名"，"属性值") // 为匹配到的元素设置属性
jQuery对象.attr({"属性名1"："属性值1"，"属性名2"："属性值2"}) // 为匹配到的元素设置多个属性
jQuery对象.removeAttr("属性名") // 删除匹配元素中的一个属性
// 对于checkbox和radio使用下面的方法操作属性
.prop("属性名") // 获取属性值
.prop("属性名"，"属性值") // 设定属性
.removeProp("属性名") // 删除属性
jQuery文档处理
1，在指定元素内部的前面添加新的HTML代码
jQuery对象a.prepend(jQuery对象b) // 将对象b添加到对象a的前面 jQuery对象a.prependTo(jQuery对象b) // 将对象a添加到对象b的前面
2，在指定元素内部的后面添加新的HTML代码
jQuery对象a.append(jQuery对象b) // 将对象b添加到对象a的后面 jQuery对象a.appendTo(jQuery对象b) // 将对象a添加到对象b的后面
3，在指定元素外部的前面添加新的HTML代码
jQuery对象a.before(jQuery对象b) // 将对象b添加到对象a的前面 jQuery对象a.insertBefore(jQuery对象b) // 将对象a添加到对象b的前面
4，在指定元素外部的后面添加新的HTML代码
jQuery对象a.after(jQuery对象b) // 将对象b添加到对象a的后面 jQuery对象a.insertAfter(jQuery对象b) // 将对象a添加到对象b的后面
5，删除和清空指定的元素
jQuery对象.remove() // 删除元素本身以及内部的所有元素 jQuery对象.empty() // 清空元素内部的所有元素，不包含本身
6，元素替换
jQuery对象.replaceWith(替换内容) // 将对象替换为新内容 替换内容.replaceAll(jQuery对象) // 用新内容替换对象
7，元素克隆
jQuery对象.clone() // 克隆一个新元素 有参数true，添加true带元素本身的事件也会克隆
jQuery事件
1，常用事件
click // 单击 dblclick // 双击 mouseenter // 鼠标移动到标签上 mouseleave // 鼠标离开标签 keydown // 按键被按下 keyup // 按键被松开 submit // submit按钮按下时 change // 表单的元素的值被改变时 focus // 当鼠标点击选中的元素或tab键定位元素时 blur // 当选中的元素失去焦点时
2，事件绑定
某标签.on(events,selector,function(){}) // events为事件 selector为选择器（特定条件下使用） function为事件要进行的函数
3，事件委托
通过给父标签绑定事件，在加上选择器进行限定，从而利用父标签去捕获子标签的事件。
父级标签.on(events,要触发事件的标签,function(){})
4，事件移除
某绑定过事件的标签.off(events)
5，阻止后续事件执行
return false; // 在事件执行函数结束后如过返回的是false则后续的事件不会执行。
6，页面载入
$(document).ready(function(){ // 在这里写你的JS代码... }) // 这个函数可以极大的提高web应用程序的响应速度，优化页面载入。
