jQuery

要使用jQuery，先要在页面<head></head>里添加jQuery库文件，如：<script src="../jquery-1.11.2.min.js" ></script>，而且必须写在其他外部JS之前。

而jQuery代码要写在匿名函数 $(document).ready(function(e){ })里面，当页面加载完成之后会自动执行匿名函数。

jQuery与JS对比：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="../jquery-1.11.2.min.js" ></script>

<style type="text/css">
#aa{ width:200px; height:50px; }
</style>
<body>

<div id="aa" style="300px" ><span>hello</span></div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<div class="bb">55</div>
<form name="ee"> <!--表单名-->
<input type="button" id="cc"  bs="dd" value="百度" onclick="tiao()" />

</form>
<font color="#FF0000">aa</font>
</body>
<script type="text/javascript">
//JS:
//根据ID找元素,找到具体的DOM对象
var d = document.getElementById("aa");
var c = document.getElementsByClassName("bb");
var div = document.getElementsByTagName("div");
var e = document.getElementsByName("ee");
var input = document.getElementById("cc");

//操作内容
    //1.非表单元素
    d.innerHTML;  //取标签+文本
    d.innerText;  //取纯文本
    //2.表单元素
    input.value;

//操作属性
d.setAttribute("bs","pp");    //设置属性，添加或修改
d.getAttribute("bs");         //获取属性
d.removeAttribute("bs");      //移除属性
//操作样式
d.style.color="red";
d.style.backgroundColor="blue";
alert(d.style.width);  //只能获取内联样式表的属性

//给一个元素添加事件
function tiao()
{
    window.location.href("http://www.baidu.com");    
}


//JQuery：
$(document).ready(function(e) {
    //根据选择器找元素，找到的是JQuery对象，如果要取DOM对象，取索引0的元素
    var jd = $("#aa");//alert(jd[0]);  //根据ID  
    var jc = $(".bb");               //根据class
    var di = $("div");               //根据标签名
    var ip = $("input[bs=dd]"); //alert(ip[0]);     //根据属性筛选，没有name选择器
    var s =$("input");
    for(var i=0;i<jc.length;i++)
    {
        jc.eq(i);//取数组里面的第几个JQuery对象
    }
    
    //操作内容
    //1.非表单元素
    jd.text();      //获取文本
    jd.text("aa");  //修改文本
    jd.html();      //获取HTML
     jd.html("<font color='#FF0000'>vv</font>");//修改HTML
    //2.表单元素
    s.val();   //获取value值
    
    //操作属性
    jd.attr("bs","pp");  //设置属性，添加或修改
    jd.attr("bs");       //获取属性
    jd.removeAttr("bs"); //移除属性
    
    //操作样式
    jd.css("color","#CCC");
    jd.css("background-color","#F90");
    alert(jd.css("width"));    //可以获取任何样式表属性
    
    //给一个元素加事件
    jd.click(function(){
        
        alert("aa");
        
        })
    
    //给多个元素加事件
    $(".bb").click(function(){
        
        alert($(this).text());
        
        
        })
        
    //给多个元素设置相同属性
    $(".bb").css("height","50px");
    $(".bb").css("background-color","#63F");
    $(".bb").css("color","#FFF");

注意：jQuery在给元素加事件时，与JS不同，jQuery相当于给元素绑定事件，若绑定n个事件，会执行n次。在循环的时候要保证加一次，否则可能会出错。例如：

<input type="button" id="btn" value="点我试试" />

</body>
</html>
<script type="text/javascript">

$(document).ready(function(e) {
    
    $("#btn").click(function(){
        
        alert("第一次弹出");
        
        })
    $("#btn").click(function(){
        
        alert("第二次弹出");
        
        })    
    
    //相当于给button绑定了两个事件，点击后会弹出两次alert对话框
    
    
});

</script>

jQuery练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="../jquery-1.11.2.min.js" ></script>
<body>
<input type="checkbox" id="all" /> 全选<br />
<input type="checkbox" class="t" value="aa" /> aa
<input type="checkbox" class="t" value="bb" /> bb
<input type="checkbox" class="t" value="cc" /> cc
<input type="checkbox" class="t" value="dd" /> dd
<input type="checkbox" class="t" value="ee" /> ee
<input type="button" value="测试" id="btn" />
<input type="text" id="txt" />
<input type="button" value="设置选中" id="sel" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {

　　 //全选    
    $("#all").click(function(){
        
        var ck = $(".t");
        var xz = $(this)[0].checked;
        ck.prop("checked",xz);  //prop（）为复选框专用函数    全选复选框选中时下面选项复选框不显示选中状态，这是jQuery的bug，
         //所以不用添加和移除属性的方法，只有复选框如此，别的像radio、button等不受此影响
        
        /*if(xz)
        {
            ck.attr("checked","checked");    
        }
        else
        {
            ck.removeAttr("checked");    
        }
        
        */
        
        })
        
    //取选中项的值    
    $("#btn").click(function(){
        
        var ck = $(".t");
        for(var i =0;i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))  //ck.eq(i)[0]ptop("checked")
            {
                alert(ck.eq(i).val());    
            }
                
        }        
        
        })
        
    //设置某项选中
    $("#sel").click(function(){
        
        var v = $("#txt").val();
        var ck = $(".t");
        ck.prop("checked",false);  //先清除选中项
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==v)
            {
                ck.eq(i).prop("checked",true);    
            }
        }
        
        })    
        
});
</script>