锋利的jquery学习

jquery环境配置

从官网上下载jquery.js文件，然后在页面中引入：在标签中引入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冲突

1. jQuery库在其他库之前导入，无需调用jQuery.noConflict()函数
2. 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找到元素后添加行为。

优势：

1. 写法非常简洁。$()代替document.getElementById()函数。
2. 支持CSS1到CSS3选择器，兼容性高。
3. 完善的处理机制。利用传统的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")

2.层次选择器

通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素
$("prev~siblings")选择器只能选择"prev"元素后面的同辈元素<div>，而siblings()方法与前后位置无关，只要是同辈节点都能匹配。

 $(".one ~ div").css();          //选取.one之后的所有同辈div元素
 $(".one").nextAll("div").css(); //选取.one之后的所有同辈div元素
 $(".one").siblings("div").css();//选取.one所有同辈div,无论前后位置