jQuery基础
什么是jQuery？
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。相比于JavaScript更加简洁和方便。
jQuery对象
jQuery对象的定义： 一般约定在变量前加"$"符号（var $variable = jQuery 对象）；
//查找ID为i1的标签
jQuery对象
var $s=$("#i1") //jQuery对象得到的是一个数组
DOM对象
var s = document.getElementById("i1")
$s[0] //jQuery对象通过索引转成DOM对象
$(DOM对象) //DOM对象通过$()转成jQuery对象
查找标签
选择器
$("#id") //ID选择器
$(".class") //类选择器
$("标签") //标签选择器
$("*") //所有元素选择器
$("#id,.class") //组合选择器，用逗号隔开
基本选择器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
层级选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
表单对象属性：
$("input:checked") //所有选中的元素
$("select option:selected") //select中所有选中的option元素
$("input:disabled") //无法输入的input元素
筛选器
过滤
$("p").eq(N) //当前操作中第N个jQuery对象,类似索引
$("p").first() //第一个元素
$("p").last() //最后一个元素
$("p").hasClass("test") //元素是否含有某个特定的类,返回布尔值
$("li").has('ul') //包含特定后代的元素
$("p").not //从匹配元素的集合中删除与指定表达式匹配的元素
查找
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
属性操作
attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
$("input[type='checkbox']").prop("checked", true); //设置是否选中
$("input[type='checkbox']").prop("checked", false);
removeProp() // 移除属性
文本操作
$('p').html(); //返回p元素的html内容(包含文本内容和字标签)
$("p").html("hello"); //设置p元素的html内容
$('p').text(); //返回p元素的文本内容
$("p").text("hello"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("hello"); //设置文本框中的内容
样式操作
$("div").addClass(); // 添加指定的类名。
$("div").removeClass();// 移除指定的类名。
$("div").hasClass(); // 判断样式存不存在
$("div").toggleClass();// 切换类名，如果有就移除，如果没有就添加。
CSS
$("p").css("color"); //访问查看p元素的color属性
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
位置
offset()// 获取匹配元素在当前窗口左上角（document）的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
尺寸
$("p").height(); //获取p元素的高度
$("p").width(); //获取p元素的宽度
$("p:first").innerHeight() //获取第一个匹配元素内部区域高度(包括内容和内填充、不包括边框)
$("p:first").innerWidth() //获取第一个匹配元素内部区域宽度(包括内容和内填充、不包括边框)
$("p:first").outerHeight() //匹配元素外部高度(默认包括补白和边框，不包括外边距)
$("p:first").outerWidth() //匹配元素外部宽度(默认包括补白和边框，不包括外边距)
$("p:first").outerHeight(true) //为true时包括边距
五、文档处理
内部追加
$("a").append("b") 在a标签元素内后面追加内容
$("a").preappend() 在a标签元素内前面追加内容
$("a").appendTo("b") 将a标签追加在b标签元素内后边
$("a").preappendTo("b") 将a标签追加到b标签元素内后边
同级追加
$("a").after("b") 在a标签的同级后追加b
$("a").before("b") 在a标签的同级前追加b
$("a").insertAfter("b") 在b标签的同级的后面追加a
$("a").inserBefore("b") 在b标签的同级的前面追加a
替换
$("a").replaceWith("b") 用b替换指定的a标签
$("a").replaceAll("b") 用a将所有的b标签都替换
删除
$("a").remove() 删除所有匹配的元素,包括本身
$("a").empty() 删除匹配的到的元素的子节点，不包括本身
克隆
$("a").clone() clone方法不加参数true，克隆标签但不克隆标签带的事件
$("a").clone(true) clone方法带参数，克隆标签也克隆标签的事件
事件
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
事件绑定与去除
函数绑定 $("").on(事件类型,选择器(可选),function(函数){...}) 除去绑定 $("").off(事件类型,选择器(可选),function(函数){...})
页面载入
主要为了防止DOM语句未被加载，执行JS函数会报错。当页面（DOM）载入成功后再运行的函数事件
$(document).ready(function(){ //这里写JS代码 })
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件,适用于 给未来的元素(页面生成的时候还没有的标签)
事件捕获：从顶层开始进行事件捕获，直到事件触发到达了事件源元素（自上而下）
事件冒泡：从事件源往上进行事件冒泡，直到到达document （自下而上）
$("父标签").on("事件类型", "选择器参数", function(){...}) #选择器参数无需加$
$(".form-group").on("focus","input",function () { $(this).parent().removeClass("has-error"); #this代表当前点击的那个input标签，只能代表一个 $(this).next().text("")
事件对象
$("p").click(function(event){
alert(event.type); //"click"
});
(event object)属性方法：
event.pageX //事件发生时，鼠标距离网页左上角的水平距离
event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键
event.data //在事件对象上绑定数据，然后传入事件处理函数 jQuery.data("key","value") 通过判断jQuery.data("key"）="value"进行判断
event.target //事件针对的网页元素
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
插件拓展
给具体的jQuery对象添加扩展 $.fn.extend(){要扩展的函数名：function(){ 具体要执行的代码}}
给jQuery添加全局扩展
$.extend(){要扩展的函数名：function(){具体要执行的代码}}
