了解JQuery

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

什么是 jQuery ？

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

• HTML 元素选取

• HTML 元素操作

• CSS 操作

• HTML 事件函数

• JavaScript 特效和动画

• HTML DOM 遍历和修改

• AJAX

• Utilities

jQuery语法

​ 　　jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
​ 　　基础语法： (this).hide() - 隐藏当前元素
​ 　　("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
​ 　　$("#test").hide() - 隐藏所有 id="test" 的元素

引用JQ插件

文档就绪函数

$(document).ready(function(){

// 开始写 jQuery 代码...

});

简洁写法：

$(function(){

// 开始写 jQuery 代码...

});

选择器

一：全选，id，类，标签选择器

// 所有元素
$("*").css('color','red');
// id选择器——一个页面中应当只有一个id值，如果有多个，只能选择集合中的第一个DOM元素，应避免这种情况
$("#id").css("color",'red');
// 类选择器
$('.class').css('color',"red");
// 标签选择器
$("p").css("color","red");

二：层次选择器
分为：子元素，后代元素，相邻元素，兄弟元素

// > 只找他的子元素
$('div > p').css('color','red');
// 找所有包含在里面的，包含子元素，孙元素等（后代选择器）
$('div p').css('color','red');
// div的下一个兄弟如果是p，就选中，只有一个（相邻的兄弟元素）
$('div+p').css('color','red');
// div同级的后面的所有p（一般的兄弟元素）
$('div~p').css('color','red');

三：筛选

// 页面中所有class为demo1 和 demo2的元素
$('.demo1, .demo2').css('color','red');
// 页面中所有的p div span 元素
$("p, span, div").css('color','red');

// 所有p元素中的 偶数行，奇数行
$("p:odd").css('color','red');
$("div:even").css('color','blue');

// 页面中第一个和最后一个p标签
$('p:first').css('color','red');
$('p:last').css("fontSize","30px");

// 找出p元素的父元素的第一个子元素是不是p，如果是，就选中。
$('p:first-child').css('color','red');
$('span:last-child').css('color','red');

// 选中p的父亲的第一个p
$('p:first-of-type').css('color','red');
$('p:last-of-type').css('color','red');

// p的父亲的第二个子元素，如果是p就选中，（第一个和第二个可能都不是p）
$('p:nth-child(2)').css('color','red')
$('p:nth-last-child(2)').css('color','red')

// 父亲的第二个p元素
$('p:nth-of-type(2)').css('color',"red");
$('p:nth-last-of-type(2)').css('color',"red");

// 如果这个p的父亲只有p这一个孩子，就选中它
$('p:only-child').css('color','red');

// 如果这个a的父亲里只有这一个a标签，就选中它
$('a:only-of-type').css('color','red');

// index是3的li,下标是从0开始
$("ul li:eq(3)").css('color','red');
// li的index大于3的
$('ul li:gt(3)').css('color','red');
// li的index小于3的
$('ul li:lt(3)').css('color','red');

// 选中所有的标题元素，h1-h6
$(":header").css('color',"red");
// 选中所有正在执行动画效果的元素
$(":animated");
// 选中所有不匹配的
$(":not(seleltor)")

eq(), lt(), gt() ：分别代表等于，小于，大于

1. 基本选择器
    基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。所谓的网页中id只能使用一次的意思是说，一个网页中的id是不可以重复的，也就是具有唯一性。

1、#id     
用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"

2、Element 
用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div, 
input, a等等.

3、class          
用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)

4、*          
用法: $("*")      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN      
用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class="myClass"

2. 层级选择器
    只有这个方法返回的是JQuery对象才能进行链式操作。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

 1 、ancestor descendant
用法: $("form input") ;   返回值  集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要和"arent > child"区分开。
祖先元素中查找，包含子元素和子元素的子元素。

2、parent > child
用法: $("form > input") ;    返回值  集合元素
说明: 在给定的父元素下匹配所有子元素。注意:要区分好后代元素与子元素
父元素中查找，只包含子元素，不包含子元素的子元素。

3、prev + next
用法: $("label + input") ;   返回值  集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings
用法: $("form ~ input") ;    返回值  集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且JQuery的siblings方法匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意:  ("prev ~ div") 选择器只能选择 "# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

3. 过滤选择器
    找到一堆页面元素，我们可以对这些元素加过滤条件，找到我们想要的这些元素，然后进行过滤。通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头。
    按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。

<1>基础过滤选择器

 1、:first

用法: $("tr:first") ;   返回值  单个元素的组成的集合
说明: 匹配找到的第一个元素

2、:last

用法: $("tr:last")   返回值  集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.

3、:not(selector)

用法: $("input:not(:checked)")   返回值  集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的
type=”checkbox”).

4、:even

用法: $("tr:even")   返回值  集合元素
说明: 匹配所有索引值为偶数的元素，从0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

5、:odd

用法: $("tr:odd") 返回值  集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数

6、:eq(index)

用法: $("tr:eq(0)")    返回值  集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数

7、:gt(index)

用法: $("tr:gt(0)")    返回值  集合元素
说明: 匹配所有大于给定索引值的元素

8、:lt(index)

用法: $("tr:lt(2)")    返回值  集合元素  
说明: 匹配所有小于给定索引值的元素

9、:header(固定写法)

用法: $(":header").css("background", "#EEE")    返回值  集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素

10、:animated(固定写法)   返回值  集合元素
说明: 匹配所有正在执行动画效果的元素

<2>内容过滤选择器
 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

1、:contains(text)
用法: $("div:contains('John')")    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上
了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的。

2、:empty
用法: $("td:empty")   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素。

3、:has(selector)
用法:  $("div:has('.mini')")返回值  集合元素
说明: 匹配含有选择器所匹配的元素的元素。

4、:parent
用法: $("td:parent")   返回值  集合元素
说明: 标签里面有子元素或者内容的就选中.注意:这里是":parent”,可不是".parent”!感觉与上面讲的”:empty”形成反义词。

<3>可见度过滤选择器
 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

1、:hidden
用法: $(”tr:hidden”)  返回值  集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到。
意思是css中display:none和input type="hidden"的都会被匹配到.同样,要在脑海中彻底分清楚冒
号":", 点号"."和逗号","的区别。
2、:visible
用法: $("tr:visible")  返回值  集合元素
说明: 匹配所有的可见元素

<4>属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

1、[attribute]
用法: $("div[id]") ;  返回值  集合元素
说明: 匹配包含给定属性的元素。例子中是选取了所有带”id”属性的div标签。

2、[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);    返回值  集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素。

3、[attribute!=value]$("div[title!='test']").css("background","yellow");
用法: $(”input[name!='newsletter']“).attr("checked", true);   返回值  集合元素

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于:not此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。之前看到的:not 派上了用场。

4、[attribute^=value]
用法: $(”input[name^=‘news’]“)  返回值  集合元素 
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号。

5、[attribute$=value]
用法: $("input[name$='letter']")  返回值  集合元素 
说明: 匹配给定的属性是以某些值结尾的元素。

6、[attribute*=value]
用法: $("input[name*='man']")   返回值  集合元素
说明: 匹配给定的属性是以包含某些值的元素。

7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']")  返回值  集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常
用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素。

<5>子元素过滤选择器

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");
用法: $("ul li:nth-child(2)")   返回值  集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的
eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。

2、:first-child$("div[class=one] :first-child")
用法: $("ul li:first-child")    返回值  集合元素 
说明: 匹配第一个子元素。':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。这里需要特别点的记忆下区别。

3、:last-child
用法: $("ul li:last-child")      返回值  集合元素
说明: 匹配最后一个子元素.':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。

4、: only-child
用法: $("ul li:only-child")   返回值  集合元素 
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。意思就是:只有一个子元素的才会被匹配!

<6>表单对象属性过滤选择器
 此选择器主要对所选择的表单元素进行过滤。

 1、:enabled
用法: $("input:enabled")    返回值  集合元素
说明: 匹配所有可用元素。意思是查找所有input中不带有disabled="disabled"的input。不为
disabled,当然就为enabled。

2、:disabled
用法: $("input:disabled")    返回值  集合元素
说明: 匹配所有不可用元素。与上面的enable是相对应的。

3、:checked
用法: $("input:checked")   返回值  集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。这话说起来有些绕口。

4、:selected
用法: $(”select option:selected”)   返回值  集合元素
说明: 匹配所有选中的option元素.$("select>option:selected")

<7>表单选择器

1、:input

用法: $(":input") ;   返回值  集合元素
说明:匹配所有 input, textarea, select 和 button 元素。

2、:text

用法: $(":text") ;  返回值  集合元素
说明: 匹配所有的单行文本框。

3、:password

用法: $(":password") ; 返回值  集合元素
说明: 匹配所有密码框。

4、:radio

用法: $(":radio") ; 返回值  集合元素
说明: 匹配所有单选按钮。

5、:checkbox

用法: $(":checkbox") ; 返回值  集合元素
说明: 匹配所有复选框。

6、:submit

用法: $(":submit") ;   返回值  集合元素
说明: 匹配所有提交按钮.

7、:image

用法: $(":image")   返回值  集合元素
说明: 匹配所有图像域。

8、:reset

用法: $(":reset") ;  返回值  集合元素
说明: 匹配所有重置按钮。

9、:button

用法: $(":button") ;  返回值  集合元素
说明: 匹配所有按钮.这个包括直接写的元素button。

10、:file

用法: $(":file") ;  返回值  集合元素
说明: 匹配所有文件域。

11、:hidden

用法: $("input:hidden") ; 返回值  集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配。

注意：要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的。

操作

样式类操作

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

<div class="container">
1.$(".container").addClass("item")  <div class="container item ">
2.$(".container").hasClass("item")   #true
将所有p标签的字体设置为红色：
$("p").css("color", "red"); 

<div class="menu">
    <div class="title">菜单一</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
    <div class="title">菜单二</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
    <div class="title">菜单三</div>
    <div class="item-list hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</div>
<script>
    // 找到所有 class 中有title的div标签
    $(".title").on("click", function () {
        // 把其它的选项隐藏掉
        // $(this)
        // 找到当前点击标签的兄弟标签  --> 含有title class的兄弟标签
        $(this).siblings(".title").next().addClass("hide");
        $(this).next().removeClass("hide");
        // 方法二：
         $(".items").addClass("hide");  //批量操作
         $(this).next().removeClass("hide");
        // 当前点击的标签 下一个标签 显示出来--> 从class移除hide
        // this  --> 当前操作的标签  --> DOM对象 --> 不能调用jQuery对象
        // $(this)    --> DOM对象用$()包起来就能转换成jQuery对象,就能调用jQuery的方法
        // $(this).next()  --> 找到了当前点击标签的下一个标签
    })
</script>

位置

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(".c1").offset();
#{left: 200, top:200}
可以自定义：
$(".c1").offset({left: 400, top:100}); 

文本操作

<div class="jer">你好吗</div>
<span class="jer">我很好</span>
<div class="jer">你怎么样</div>

1.HTML代码：

html()// 取得第一个匹配元素的html内容

$(".jer").html() "你好吗"

html(val)// 设置所有匹配元素的html内容

$(".jer").html("zhaoguangfei")

2.文本值：

text()// 取得所有匹配元素的内容

$(".jer").text() 你好吗我很好你怎么样"

text(val)// 设置所有匹配元素的内容3.

val值：用于获取form表单的值

val()// 取得第一个匹配元素的当前值

val(val)// 设置所有匹配元素的值

val([val1, val2])// 设置checkbox、select的值

<p> #单选框 checked=""默认被选中
<label >性别：
    <input type="radio" name="gender" value="1" checked="">男 #默认被选中
    <input type="radio" name="gender" value="2">女
     <input type="radio" name="gender" value="3">不详
</label>
</p>
<p>  #多选框 checked=""默认被选中
<label >爱好：
    <input type="checkbox" name="gender" value="basketball">篮球
    <input type="checkbox" name="gender" value="football">足球
    <input type="checkbox" name="gender" value="voallbe">网球
</label>
</p>
<p> #单选下拉框 selected="" 默认被选中
<label >喜欢看的书籍：
    <select name="book" >
        <option value="book1" selected="" >围城</option>
        <option value="book2">活着</option>
        <option value="book3">大秦帝国</option>
        <option value="book4">平凡的世界</option>
        <option value="book5">穆斯林的葬礼</option>
    </select>

</label>
</p>
<p>  #多选下拉框 selected="" 默认被选中
<label >喜欢看的影视：
    <select name="tv" multiple>
        <option value="1" >唐人街探案</option>
        <option value="2" selected=""  >泰囧</option>
        <option value="3">极限挑战</option>
        <option value="4">伪装者</option>
        <option value="5">琅琊榜</option>
    </select>
</label>
</p>

1.获取值：

1.获取单选框被选中的value值

console.log($('input[type=radio]:checked').val())

2.复选框被选中的value,获取的是第一个被选中的值

console.log($('input[type=checkbox]:checked').val())
获取所有选中的值：

var content=$("input[type='checkbox']:checked")
$.each(content,function(){
    console.log($(this).val());
})
basketball
football

属性操作

用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子：
<input type="checkbox" id="i1" value="1">

$("#i1").prop("checked")  // false

文档处理

添加到指定元素内部的后面

(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面

(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面

(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面

(A).insertBefore(B)// 把A放到B的前面
移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

事件操作

jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。

$('p').click(function(){
　　　　　alert('Hello');
　　});

目前，jQuery主要支持以下事件：

.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() 用户离开页面

动画

淡入淡出

fadeIn():将隐藏的元素淡入

​ fadeIn();

​ fadeIn("fast") : fast,slow

​ fadeIn(3000): 给一个毫秒值

fadeOut():将已显示的元素淡出

​ 同上

fadeToggle:

​ 同上

fadeTo():

语法: $(selector).fadeTo(speed,opacity,callback);

speed：速度，毫秒值

opacity:透明度，1完全不透明(可见)，0表示完全透明(不可见)

callback：动画执行完成后的回调

滑动

slideDown()

slideUp()

slideToggle()

动画

语法:$(selector).animate({params},speed,callback);

params: 可以是css中几乎任何一个样式，样式注意用驼峰命名法

padding-left需要写成paddingLeft

speed:速度

callback:回调

相对值 +=

$("#d1").animate(
                {
                    left:'200px',
                    opacity:'0.5',
                    width:'+=200px',
                    height:'+=200px'
                },3000);