Day32：jQuery相关

一、jQuery是什么

　　1、 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

　　2、 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

　　3、它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

　　4、 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　5、 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二、什么是jQuery对象

　　jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。

　　　如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html() 
   
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

 

三、jQuery包含的内容

　　1、选择器　　　　

　　　　1）id选择器：

　　　　　　　　$("#id")

　　　　　2）标签选择器：

、　　　　　　　$("tagName")

　　　　　3）class选择器：

　　　　　　　　　$(".className")

　　　　　4）所有选择器：

　　　　　　　　　$("*")

　　　　5）层级选择器：

　　　　　*x和y可以是任意元素

　　　　　　　　$("x y"); // x的所有后代y（子子孙孙）

 

　　　　　　　　$("x > y"); // x的所有儿子y（儿子）

 

　　　　　　　　$("x + y") // 找到所有紧挨在x后面的y

 

　　　　　　　　$("x ~ y") // x之后所有的兄弟y

 

　　　　　6）基本筛选器　　　　　　　　

　　　　　　　　:first  // 第一个

　　　　　　　　:eq(index)  // 索引等于index的那个元素

　　　　　　　　:last  // 最后一个

　　　　　　　　:even  // 匹配所有索引值为偶数的元素，从 0 开始计数

　　　　　　　　:odd  // 匹配所有索引值为奇数的元素，从 0 开始计数

　　　　　　　　:gt(index)  // 匹配所有大于给定索引值的元素

　　　　　　　　:lt(index)  // 匹配所有小于给定索引值的元素

　　　　　　　　:not(选择器)      // 去除所有与给定选择器匹配的元素

　　　　　　　　:has(选择器)      // 匹配含有选择器所匹配的元素的元素

 

　　　　　7）属性选择器　

　　　　　　　　[attribute]

　　　　　　　　[attribute=value]  // 属性等于

　　　　　　　　[attribute!=value] // 属性不等于

　　　　　　　　　　// 示例

　　　　　　　　<input type="text">

　　　　　　　　<input type="password">

　　　　　　　　<input type="checkbox">

　　　　　　　　a、$("input[type='checkbox']");  // 取到类型为checkbox的input标签

　　　　　　　　b、$("input[type!='text']");  // 取到类型不是text的input标签

 

　　　　　8）表单　　　

　　　　　　　　:input

　　　　　　　　:text

　　　　　　　　:password

　　　　　　　　:radio

　　　　　　　　:checkbox

　　　　　　　　:submit

　　　　　　　　:image

　　　　　　　　:reset

　　　　　　　　:button

　　　　　　　　:file

　　　　　9）表单对象属性

　　　　　　　　:enabled

　　　　　　　　:disabled

　　　　　　　　:checked

　　　　　　　　:selected

　　2、筛选器

　　　　1）下一个元素：

　　　　　　　　$("#id").next()

　　　　　　　　$("#id").nextAll()

　　　　　　　　$("#id").nextUntil("#i2")　　#下一个元素直到id=2为止

　　　　　2）上一个元素

　　　　　　　　$("#id").prev()

　　　　　　　　$("#id").prevAll()

　　　　　　　　$("#id").prevUntil("#i2")　　#上一个元素直到id=2为止

　　　　   3）父亲元素　　

　　　　　　　　$("#id").parent()

　　　　　　　　$("#id").parents()

　　　　　　　　$("#id").parentsUntil()

　　　　　4）儿子和兄弟元素　　　　

　　　　　　　　$("#id").children(); // 儿子们

　　　　　　　　$("#id").siblings(); // 兄弟们

　　　　　5）查找元素

　　　　　　　　$("id").find()   // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

　　　　　6）补充

　　　　　　　　.first() // 获取匹配的第一个元素

　　　　　　　　.last() // 获取匹配的最后一个元素

　　　　　　　　.not() // 从匹配元素的集合中删除与指定表达式匹配的元素

　　　　　　　　.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

　　3、样式操作

　　　　1）样式类

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

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

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

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

　　　　　2）CSS　　　

　　　　　　　　css("color", "red")  //DOM操作：tag.style.color="red"

　　　　　3）位置

　　　　　　　　offset()    // 获取匹配元素在当前视口的相对偏移

　　　　　　　　position()   // 获取匹配元素相对父元素的偏移

　　　　　　　　scrollTop()  // 获取匹配元素相对滚动条顶部的偏移

　　　　　　　　scrollLeft() // 获取匹配元素相对滚动条左侧的偏移

　　　　　　　　*offset() 方法是检索一个元素相对于文档的当前位置，而position()是相当于父级元素的位移  

　　　　　4）尺寸

　　　　　　　　height()

　　　　　　　　width()

　　　　　　　　innerHeight()

　　　　　　　　innerWidth()

　　　　　　　　outerHeight()

　　　　　　　　outerWidth()

　　4、文本操作

　　　　1）HTML代码

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

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

　　　　　2）文本值

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

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

　　　　　3）值

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

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

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

<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<hr>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
<hr>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#single").val("Single2");
  $("#multiple").val(["Multiple2", "Multiple3"]);
  $("input").val(["check1", "check2", "radio1"]);
  $("input").val(["radio1"]);
  $("input").val(["radio1", "radio2"]);
</script>

　　5、属性操作

　　　　1）用于自定义属性

　　　　　　　　attr(attrName)                  // 返回第一个匹配元素的属性值

　　　　　　　　attr(attrName, attrValue)     // 为所有匹配元素设置一个属性值　　　　

　　　　　　　　attr({k1: v1, k2:v2})           // 为所有匹配元素设置多个属性值

　　　　　　　　removeAttr()                    // 从每一个匹配的元素中删除一个属性

　　　　2）用于checkbox和radio　　　　　

　　　　　　　　prop()

　　　　　　　　removeProp()

　　　　　　注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。

　　　　　　　　　　为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

　　6、文档处理

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

　　　　　　$(A).append(B)  // 把B追加到A

　　　　　　$(A).appendTo(B)  // 把A追加到B

　　　　2）添加到指定元素内部的前面　　　　

　　　　　　$(A).prepend(B)  // 把B前置到A

　　　　　　$(A).prependTo(B)  // 把A前置到B

　　　　3）添加到指定元素外部的后面

　　　　　　$(A).after(B)  // 把B放到A的后面

　　　　　　$(A).insertAfter(B)  // 把A放到B的后面

　　　　4）添加到指定元素外部的前面

　　　　　　$(A).before(B)  // 把B放到A的前面

　　　　　　$(A).insertBefore(B)  // 把A放到B的前面

　　　　5）移除和清空元素

　　　　　　remove()  // 从DOM中删除所有匹配的元素

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

　　　　6）替换

　　　　　　replaceWith()

　　　　　　replaceAll()

　　　　7）克隆　　　　　　　　　　

　　　　　　clone()  // 参数

　　7、事件

　　　　1）常用事件

　　　　　　click(function(){...})　　#点击触发事件

　　　　　　hover(function(){...})　　#鼠标悬浮触发

　　　　　　blur(function(){...})　　#脱离焦点触发

　　　　　　focus(function(){...})　　#汇聚焦点触发

　　　　　　change(function(){...})　　#当元素的只发生改变时触发

　　　　　　keyup(function(){...})　　#按下按键触发

　　　　2）事件绑定

　　　　　　.on( events [, selector ], function(){} )

　　　　　　　　a、events： 事件

　　　　　　　　b、selector: 选择器（可选的，加上可实现事件委派的功能）

　　　　　　　　c、function: 事件处理函数

　　　　3）移除事件　　　　　　　　　　

　　　　　　.off( events [, selector ] [, function(){} ] )

　　　　　　移除.on（）绑定的事件

　　　　4）阻止后续事件执行

　　　　　　return false

　　8、each循环

　　　1）jQuery.each(collection, callback(indexInArray, valueOfElement))：

　　　　　　一个通用的迭代函数，它可以用来无缝迭代对象和数组。

　　　　     数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

　　　　2）.each(function(index, Element))：

　　　　　　遍历一个jQuery对象，为每个匹配元素执行一个函数。

、　　　　  .each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。

　　　　　　由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

　　　　3）终止each循环：

　　　　　　return false；

　　9、data的用法

　　　1）.data(key, value):

　　　　　　描述：在匹配的元素上存储任意相关数据。

　　　　　　$("div").data("k", 100);  //给所有div标签都保存一个名为k，值为100

　　　　2）.data(key):

　　　　　　描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过.data(name, value)或HTML5 data-*属性设置。　　　　　　

　　　　　　$("div").data("k");  //返回第一个div标签中保存的"k"的值