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(){具体要执行的代码}}