53-jQuery
1、什么是jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
"$"表示对jQuery的引用。
jQuery中文网站：http://jquery.cuishifeng.cn/
2、jQuery对象和DOM对象的相互转换
- jQuery对象[0] ---> DOM对象
- $(DOM对象) ---> jQuery对象
3、基本查找
1. id选择器
$("#ID名")
2. class选择器
$(".类名")
3. 标签选择器
$("标签名")
4. 组合选择器
$("#ID名,.类名,标签名")
5. 层级选择器
$("#ID 标签名") 该方式会找到所有的标签(包含子子孙孙)
$("#ID>标签名") 该方式只找子标签(只找一个子层级)
6. 基本选择器
:first 获取匹配的第一个元素
:last 获取匹配的最后个元素
:eq(index) 匹配一个给定索引值的元素（索引从0开始）
7. 属性选择器
$("[name]") 具有该属性的所有标签
$("[name='druid']") name属性等于druid的标签
4、筛选器
$(this).next() //取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
$(this).nextAll() //查找当前元素之后所有的同辈元素
$(this).nextUntil() // 直到找到XXX才停止
$(this).prev()
$(this).prevAll()
$(this).prevUntil()
$(this).parent()
$(this).parents()
$(this).parentsUntil()
$(this).children()
$(this).siblings() //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
$(this).find() // find("#ID") find(".CLASS") ...
5、文本操作
$(...).text() // 获取文本内容（不包含标签）
$(...).text("<a>1</a>") // 设置文本内容（标签也当作字符串）
$(...).html() // 获取文本内容（包含标签）
$(...).text("<a>1</a>") // 设置文本内容（标签即为标签）
$(...).val() // 获取表单属性值
$(...).val(...) // 设置表单属性值
6、样式操作
addClass
removeClass
toggleClass
7、属性操作
$(..).attr //专门用于自定义属性
<input id="i1" type="button" value="v1" />
$("#i1").attr("type")获取type的属性值 ---> "button"
$("#i1").attr("id")获取id的属性值 ---> "i1"
$("#i1").attr("value")获取value的属性值 ---> "v1"
$("#i1").attr("name", "druid")设置新的属性及值 ---> name="druid"
$("#i1").attr("name", "alex")重新赋值 ---> name="alex"
#(..).removeAttr //删除属性
$("#i1").removeAttr("name")删除name属性
$(..).prop //专门用于checkbox和radio
$(..).prop("checked") //获取值
$(..).prop("checked", true) //选中，设置值
$(..).prop("checked", false) //取消选中，设置值
$(..).index() //获取索引
8、文档处理
$(..).append() //向每个匹配的元素内部追加内容（内部插入）
$(..).prepend() //向每个匹配的元素内部前置内容（内部插入）
$(..).before() //在之前添加（外部插入）
$(..).after() //在之后添加（外部插入）
$(..).remove() //删除
$(..).empty() //只清空内容
$(..).clone() //克隆
9、css处理
$(..).css("样式名称", "值") //获取css值
$(..).css("样式名称", "值") //设置css值
10、位置处理
$(window).scrollTop(); // 获取整个页面的滚轮滑动像素位置（相对于顶部）
$(window).scrollTop(300); // 设置整个页面滚轮像素位置
$("div").scrollTop(500); // 设置div标签的滚轮像素位置
$(..).offset(); // 获取标签在Html页面中的位置
$("#i1").offset(); // 获取id=i1的标签的坐标
$("#i2").offset().top; // 获取id=i2的标签坐标的top值
$("#i2").offset().left; // 获取id=i2的标签坐标的left值
$(..).position(); // 获取匹配元素相对父元素的偏移位置
$(".fDiv").height(); //取得匹配元素当前计算的高度值（只是height值）
$(".fDiv").innerHeight(); //获取第一个匹配元素内部区域高度（包括padding(内边距)、不包括边框）
$(".fDiv").outerHeight(); //获取第一个匹配元素外部高度（默认包括padding(内边距)和边框，不包括外边距(margin)）
$(".fDiv").outerHeight(true); //获取第一个匹配元素外部高度（当值为true时，包括补白、边框和外边距(margin)）
11、绑定事件
$(..).click();
$(..).bind("click", function(){});
$(..).unbind("click", function(){});
$(..).delegate("标签", "click", function(){});
$(..).undelegate("标签", "click", function(){});
$(..).on("click", function(){});
$(..).off("click", function(){});
将事件放在$(function(){})中后，在框架加载完毕后事件就会绑定。
12、阻止事件发生
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a id="i1" href="http://www.baidu.com">DOM能跳转</a> 9 <a id="i2" href="http://www.baidu.com">DOM不能跳转</a> 10 <a id="i3" href="http://www.baidu.com">jQuery能跳转</a> 11 <a id="i4" href="http://www.baidu.com">jQuery不能跳转</a> 12 13 <a onclick="prevent1();" href="http://www.baidu.com">绑定在标签中能跳转</a> 14 <a onclick="return prevent2();" href="http://www.baidu.com">绑定在标签中不能跳转</a> 15 16 <script src="jquery.js"></script> 17 18 <script> 19 var obj1 = document.getElementById("i1"); 20 obj1.onclick = function(){ 21 alert("链接可以跳转"); 22 }; 23 24 var obj2 = document.getElementById("i2"); 25 obj2.onclick = function(){ 26 alert("链接不能跳转"); 27 return false; 28 }; 29 30 $("#i3").click(function(){ 31 alert("链接能跳转"); 32 }); 33 $("#i4").click(function(){ 34 alert("链接不能跳转"); 35 return false; 36 }); 37 38 function prevent1(){ 39 alert("链接不能跳转"); 40 return false; 41 }; 42 43 function prevent2(){ 44 alert("链接不能跳转"); 45 return false; 46 }; 47 48 </script> 49 </body> 50 </html>
