锋利的jquery学习
@(Jquery)
[TOC]
jquery环境配置
从官网上下载jquery.js文件，然后在页面中引入：在<head>标签中引入jQuery库。
<script src="jquery.js" type="test/javascript"></script>
jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象，是jQuery独有的。jQuery对象无法使用DOM对象的任何方法，DOM对象也不能使用jQuery对象的方法。
1、jQuery对象转成DOM对象
jQuery提供两个方法将一个jQuery对象转换成DOM对象。
- Query对象是一个类似数组的对象，可以通过[index]的方法获取。
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
- jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
2、DOM对象转换成jQuery对象
对于DOM对象，只需要用$()把DOM包装起来就可以得到jQuery对象。
var cr = document.getELementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
jQuery冲突
- jQuery库在其他库之前导入，无需调用
jQuery.noConflict()函数 - jQuery库在其他库之后导入
其一：
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
jQuery(function($){ //使用jQuery设定页面加载时执行函数
alert($(this).text()); //在内部继续使用$()方法
})
其二：
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
alert($(this).text()); //在内部继续使用$()方法
});
});
jQuery选择器
jquery选择器的写法和CSS选择器的写法十分相似，只不过效果不同，CSS选择器找到元素后是添加样式，jquery找到元素后添加行为。
优势：
- 写法非常简洁。
$()代替document.getElementById()函数。 - 支持CSS1到CSS3选择器，兼容性高。
- 完善的处理机制。利用传统的
getElementById()如果没有该元素，浏览器就会>报错，而$()可以避免这种情况。$()获取的永远是对象，即使网页上没有此元素。
当jQuery检查某个元素在网页上是否存在时，可以根据获取到的元素的长度来判断，代码如下：
if($("#tt").length > 0){
//do something
}
或者转换成DOM对象来判断，如下：
if($("#tt")[0]){
//do something
}
1.基础选择器
最简单的选择器，通过元素id、class和标签名等来查找DOM元素。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 指定的id | 单个元素 | $("#test") |
| .class | 类名 | 集合元素 | $(".test") |
| element | 元素名 | 集合元素 | $("p") |
| * | 所有元素 | 集合元素 |
$("*")选取所有元素 |
| 多个选择 | 将每一个选择器匹配到的元素合并返回 | 集合元素 | $("div,span,p") |
2.层次选择器
通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 |
$("div span")选取所有div中的span元素 |
| $("parent > child") | 选取parent元素下的child(子)元素 | 集合元素 |
$(div>span)选取<div>元素下元素名是<span>的子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 |
$(.one+div)选取class为one的下一个<div>同辈元素,等价于$("one").next("div")
|
| $("prev~siblings") | 选取prev元素后所有siblings元素 | 集合元素 |
$("#two~div")选取id为two的元素后面的所有div元素,等价于$("two").nextAll("div")
|
$("prev~siblings")选择器只能选择"prev"元素后面的同辈元素<div>，而siblings()方法与前后位置无关，只要是同辈节点都能匹配。
$(".one ~ div").css(); //选取.one之后的所有同辈div元素
$(".one").nextAll("div").css(); //选取.one之后的所有同辈div元素
$(".one").siblings("div").css();//选取.one所有同辈div,无论前后位置
