要使用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>