1、jquery是什么：
我们在写JavaScript的时候发现很麻烦，操作一个页面的控件需要先拿到getElementbyId拿到对象，然后再遍历节点等等。
为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。
我们jquery就是当前比较流行的javascript库。
比较流行的JavaScript库有：
jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR
jquery特点：
a.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器。
b.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
c.jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
2、开发JavaScript的环境：
eclipse的插件：我们一般使用myeclipse开发，有一款插件比较好用aptana，可以使用强大的代码提示功能。
直接把插件放到myeclipse的dropin目录重启myeclipse就OK
我们也可以使用myeclipse里面自带的 “myeclipse HTML Editor” 也具有代码提示的功能
装好了插件，新建一个web工程，在WebRoot目录下新建一个js文件夹，里面放jquery就行
3、jquery对象和dom对象相互转化：
先使用个比较完整的html，后面只截取重点部分。
<!DOCTYPE html>
<html>
<head>
<title>domjquery.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<script src="../js/jquery-1.4.2.js"></script> //导入jquery
<script type="text/javascript">
window.onload = function(){
/**
* jquery对象是数组对象
* jquery对象不可能为null,如果得到不值，那么数组的大小为0
*/
var domObj = document.getElementById("username");//dom对象
var jQueryObj = $(domObj); //该对象就是一个jquery对象
var domObj2 = jQueryObj[0];//dom对象
var domObj3 = jQueryObj.get(0);//dom对象
alert(domObj2.getAttribute("name"));
alert(domObj3.getAttribute("name"));
}
</script>
<body>
<input type="text" name="username" id="username">
</body>
</html>
注意：$() 就是一个jquery对象
4、jquery选择器-基本选择器：
我们如果要了解一个选择器的用法，查看帮助是最有用的，因为你不可能把所有的都记下来，也没有必要去记。
这里演示目的只是为了有个印象，知道可以这么做。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1" />
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2" />
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"
id="b3" />
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4" />
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"
id="b5" />
<input type="button"
value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #3399FF"
id="b6" />
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
<span class="spanone"> span </span>
<span class="mini"> span </span>
</body>
<script language="JavaScript">
//给id为b1的按钮添加一个click事件
$("#b1").click(function() {
//根据ID找到元素，改变id为one的元素的背景色
$("#one").css("background", "red");
});
//根据标签选择元素，该操作是一个数组操作
$("#b2").click(function() {
$("div").css("background", "red");
});
//根据class属性找到元素
$("#b3").click(function() {
$(".mini").css("background", "red");
});
//通配所有的元素
$("#b4").click(function() {
$("*").css("background", "red");
});
//将每一个选择器匹配到的元素合并,是个并集
$("#b5").click(function() {
$("span,#two").css("background", "red");
});
//功能和上面一样，是个并集
$("#b6").click(function() {
$("span,#two,#one,.mini").css("background", "red");
});
</script>
5、jquery选择器-属性选择器：
其他的代码就不贴了，都是重复的，没有什么难度。这里只写jquery使用。
[attribute] 匹配包含给定属性的元素
//选择含有属性title 的div元素
$("#b1").click(function(){
$("div[title]").css("background","red");
});
[attribute=value] 匹配给定的属性是某个特定值的元素
//选择属性title值等于test的div元素
$("#b2").click(function(){
$("div[title='test']").css("background","red");
});
[attribute!=value] 匹配所有不含有指定的属性
//属性title值不等于test的div元素(没有属性title的也将被选中)
$("#b3").click(function(){
$("div[title!='test']").css("background","red");
});
[attribute^=value] 匹配给定的属性是以某些值开始的元素
//属性title值 以te开始 的div元素.
$("#b4").click(function(){
$("div[title^='test']").css("background","red");
});
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
//属性title值 以est结束 的div元素
$("#b5").click(function(){
$("div[title$='est']").css("background","red");
});
[attribute*=value] 匹配给定的属性是以包含某些值的元素
//属性title值 含有es的div元素
$("#b6").click(function(){
$("div[title*='est']").css("background","red");
});
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
$("#b7").click(function(){
$("div[id][title*='es']").css("background","red");
});
//综合使用
//选择隐藏域,含有title的属性的div,id为one,class为one的元素
$("#b8").click(function(){
$("input[type='hidden'],div[title],#one,.one").css("background","red");
});
注意：属性里面的值使用单引号 ''
6、jquery选择器-基本过滤选择器：
:first 获取第一个元素 注意如果只会找第一个，找到了就停止
//改变第一个 div 元素的背景色为 #0000FF"
$("#b1").click(function() {
$("div:first").css("background","red");
/**
* $("div")是一个jQuery对象所以能调用first方法
* 调用first方法的返回值还是一个jQuery对象，所以还能调用jquery中的api的任意一个方法
*/
$("div").first().css("background", "red");
});
:last 获取最后个元素
//改变最后一个 div 元素的背景色为 #0000FF"
$("#b2").click(function() {
$("div:last").css("background", "red");
});
:not(selector) 去除所有与给定选择器匹配的元素
// 改变class不为 one 的所有 div 元素的背景色为 #0000FF"
$("#b3").click(function() {
$("div:not(.one)").css("background", "red");
});
//综合使用
//改变class不为one,有title属性，并且title属性的值为aa的div元素的背景色为红色"
$("#b3_1").click(function() {
$("div:not(.one)[title='aa']").css("background", "red");
});
:even 匹配所有索引值为偶数的元素，从 0 开始计数 [表格的行数间隔颜色设置可以这样做]
//改变索引值为偶数的 div 元素的背景色为 #0000FF"
$("#b4").click(function() {
$("div:even").css("background", "red");
});
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
//改变索引值为奇数的 div 元素的背景色为 #0000FF"
$("#b5").click(function() {
$("div:odd").css("background", "red");
});
:gt(index) 匹配所有大于给定索引值的元素
//改变索引值为大于 3 的 div 元素的背景色为 #0000FF"
$("#b6").click(function() {
$("div:gt(3)").css("background", "red");
});
:eq(index) 匹配一个给定索引值的元素
//改变索引值为等于 3 的 div 元素的背景色为 #0000FF"
$("#b7").click(function() {
$("div:eq(3)").css("background", "red");
});
:lt(index) 匹配所有小于给定索引值的元素
//改变索引值为小于 3 的 div 元素的背景色为 #0000FF"
$("#b8").click(function() {
$("div:lt(3)").css("background", "red");
});
:header 匹配如 h1, h2, h3之类的标题元素
//改变所有的标题元素的背景色为 #0000FF"
$("#b9").click(function() {
$(":header").css("background", "red");
});
//综合使用
//改变索引值大于1小于6的div元素的背景色为 #0000FF"
$("#b10").click(function() {
$("div:lt(6):gt(1)").css("background", "red");
});
7、jquery选择器-子元素选择器：
基本的格式 :
子元素选择器的一个特点：在每一个特定的元素下寻找子元素
:nth-child 匹配其父元素下的第N个子或奇偶元素。注意：必须有空格
//每个class为one的div父元素下的第2个子元素
$("#b1").click(function(){
$("div.one :nth-child(2)").css("background","red");
});
:first-child 匹配第一个子元素
//每个class为one的div父元素下的第1个子元素
$("#b2").click(function(){
$("div.one :first-child").css("background","red");
});
:last-child 匹配最后一个子元素
//每个class为one的div父元素下的最后一个子元素
$("#b3").click(function(){
$("div.one :last-child").css("background","red");
});
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配.
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#b4").click(function(){
$("div.one :only-child").css("background","red");
});8、jquery选择器-层次选择器（重要，经常使用）：
层次选择器中间是空格隔开
ancestor descendant 在给定的祖先元素下匹配所有的后代元素
//改变 <body> 内所有 <div> 的背景色为 #0000FF"
$("#b1").click(function(){
$("body div").css("background","red");
});
parent > child 在给定的父元素下匹配所有的子元素
//改变 <body> 内子 <div> 的背景色为 #FF0033
$("#b2").click(function(){
$("body>div").css("background","red");
});
prev + next 匹配所有紧接在 prev 元素后的 next 元素
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
$("#b3").click(function(){
$("#one+div").css("background","red");
});
prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #0000FF
$("#b4").click(function(){
$("#two~div").css("background","red");
});
//综合使用
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
$("#b5").click(function(){
$("#two").siblings("div").css("background","red");
});
//综合使用
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF,id为two的被选中
$("#b6").click(function(){
$("#two").siblings("div").css("background","red");
$("#two").css("background","red");
});9、简单的练习-table奇偶行变色：
我们常见页面上有一些表格奇偶行是不同的颜色显示，便于提升体验。
我们可以用jquery实现下
html的table就不写了，比较的简单。这里主要是看jquery怎么实现的。其实非常的简单
<script type="text/javascript">
//这里的 $(document)=$() 两个写法都行
//这个ready方法就和window onload方法功能一样，等页面加载完成就调用JavaScript脚本
$(document).ready(function() {
//第一个table的奇偶行变色
$("#t1 tr:even").css("background", "red");
$("#t1 tr:odd").css("background", "green");
//$("#t2 tr td:first").css("background","red"); 是不行的，因为第一个td,找到以后停止了。
//会去每一个tr下查找子元素第一个td
$("#t2 tr td:first-child").css("background", "red");
//这里的this就代表tr对象， $(this)就是一个jquery对象
//each方法就是遍历每一个tr
$("#t3 tr").each(function() {
//查找每一个tr对象中的子元素：奇数行或者偶数行的子元素
$(this).children(":even").css("background", "red");
$(this).children(":odd").css("background", "green");
});
});
</script>效果图：
10、jquery选择器-内容选择器：
比较常用的就是 contains
:contains(text) 匹配包含给定文本的元素
//改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
$("#b1").click(function(){
$("div:contains('di')").css("background","red");
});
:empty 匹配所有不包含子元素或者文本的空元素
//改变不包含子元素(或者文本元素) 的 div 空元素的背景色
$("#b2").click(function(){
$("div:empty").css("background","red");
});
:has(selector) 匹配含有选择器所匹配的元素的元素
//改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
$("#b3").click(function(){
$("div:has(.mini)").css("background","red");
});
:parent 匹配含有子元素或者文本的元素
//改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
$("#b4").click(function(){
$("div:parent").css("background","red");
});
//综合使用
//改变不含有文本 di; 的 div 元素的背景色
$("#b5").click(function(){
$("div:not(:contains('di'))").css("background","red");
});
11、jquery选择器-可见选择器：
使用概率很高。
:visible 匹配所有的可见元素
//改变所有可见的div元素的背景色为 #0000FF
$("#b1").click(function(){
$("div:visible").css("background","red");
});
:hidden 匹配所有不可见元素，或者type为hidden的元素
//选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
$("#b2").click(function(){
$(":hidden").show().css("background","red");
});
//综合使用
//选取所有的文本隐藏域, 并打印它们的值
$("#b3").click(function(){
$("input:hidden").each(function(){
var $obj = $(this);
alert($obj.val());
});
});12、jquery选择器-表单选择器（很重要）：
经常用到，表单提交的时候。
:enabled 匹配所有可用元素
//利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
$("#b1").click(function(){
$("input:enabled").val("aaaa");
});
:disabled 匹配所有不可用元素
//利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
$("#b2").click(function(){
$("input:disabled").val("aaaa");
});
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
//利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function(){
$("input[type='checkbox']:checked").each(function(){
alert($(this).val());//打印出来选中的checkbox的值
});
});
:selected 匹配所有选中的option元素
//利用 jQuery 对象的 text() 方法获取下拉框选中的内容
$("#b4").click(function(){
$("#job option:selected").each(function(){
alert($(this).text());//打印出来 id为job下的被选中的option元素的值
});
});13、jquery简单应用-checkbox全选，反选：
jquery实现起来非常的容易
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery演示checkbox</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<script type="application/javascript">
$().ready(function(){//页面加载完成执行这个方法
$("#checkItems").click(function(){//checkbox 框点击事件
if($(this).attr("checked")){//被选中
$(":checkbox[name='items']").attr("checked",true);
}else{
$(":checkbox[name='items']").attr("checked",false);
}
});
//全选按钮事件
$("#checkall").click(function(){
$(":checkbox[name='items']").attr("checked",true);
$("#checkItems").attr("checked",true);
});
//全不选按钮事件
$("#checkallNo").click(function(){
$(":checkbox[name='items']").attr("checked",false);
$("#checkItems").attr("checked",false);
});
//反选按钮事件
$("#check_revsern").click(function(){
$(":checkbox[name='items']").each(function(){
if($(this).attr("checked")){//如果被选中
$(this).attr("checked",false);
}else{//没有被选中
$(this).attr("checked",true);
}
});
});
});
</script>
<body>
兴趣爱好：
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>14、jquery实现页面表格动态添加，删除，更新的例子：
html的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
//引入jquery库
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<title>添加用户</title>
</head>
//引入我们的js代码，html和js分离
<script src="user.js"></script>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<button id="deleteUser">删除</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr id = "firstTR">//这里设置id可以区别奇偶行去掉这行
<th><input type="checkbox" id="allCheckbox"/></th>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
<th>修改</th>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
修改用户:<br><br>
姓名: <input type="text" name="name" id="name_update" />
email: <input type="text" name="email" id="email_update" />
电话: <input type="text" name="tel" id="tel_update" /><br><br>
<input type="hidden" id="id_update"/>
<button id="updateUser">提交</button>
</center>
</body>
</html>
js代码：
$().ready(function(){//页面加载完成调用
var index = 1;//这个index是设置checkbox的id，便于后面区分更新哪条数据
$("#addUser").click(function(){
//1、获取姓名,电话,email的值
var name = $("#name").val();
var email = $("#email").val();
var tel = $("#tel").val();
//2、创建一行的tr
var $checkbox = $("<input/>").attr("type","checkbox");
var $checkboxTD = $("<td/>").append($checkbox);
$checkboxTD.attr("id",index);
index++;
var $nameTD = $("<td/>").text(name);
var $emailTD = $("<td/>").text(email);
var $phoneTD = $("<td/>").text(tel);
var $delA = $("<a/>").text("删除");
$delA.css("cursor","pointer");//鼠标放上，手指显示
var $updateA = $("<a/>").text("修改");
$updateA.css("cursor","pointer");
$delA.click(function(){//完成删除本行的功能
if(window.confirm("您确认要删除吗?")){
$(this).parent().parent().remove();
//奇偶行变色
$("#usertable tr:not([id=firstTR]):even").css("background", "#d8d8d8");
$("#usertable tr:not([id=firstTR]):odd").css("background", "#fedddc");
}
});
var $delTD = $("<td/>").append($delA);
$updateA.click(function(){
var name = $(this).parent().siblings("td:eq(1)").text();
var email = $(this).parent().siblings("td:eq(2)").text();
var tel = $(this).parent().siblings("td:eq(3)").text();
var id = $(this).parent().siblings("td:eq(0)").attr("id");
$("#name_update").val(name);
$("#email_update").val(email);
$("#tel_update").val(tel);
$("#id_update").val(id);
});
var $updateTD = $("<td/>").append($updateA);
var $tr = $("<tr/>").append($checkboxTD).
append($nameTD).append($emailTD).
append($phoneTD)
.append($delTD).append($updateTD);
//3、把创建完成的tr追加到tbody上
$("#usertable tbody").append($tr);
//奇偶行变色
$("#usertable tr:not([id=firstTR]):even").css("background", "#d8d8d8");
$("#usertable tr:not([id=firstTR]):odd").css("background", "#fedddc");
});
//同时删除多行
$("#deleteUser").click(function(){
if(window.confirm("您确认要删除吗?")){
$(":checkbox:not(#allCheckbox):checked").parent().parent().remove();
//奇偶行变色
$("#usertable tr:not([id=firstTR]):even").css("background", "#d8d8d8");
$("#usertable tr:not([id=firstTR]):odd").css("background", "#fedddc");
}
});
//全选功能
$("#allCheckbox").click(function(){
if($(this).attr("checked")){
$(":checkbox:not(#allCheckbox)").attr("checked",true);
}else{
$(":checkbox:not(#allCheckbox)").attr("checked",false);
}
});
//修改完成提交更新
$("#updateUser").click(function(){
//获取到修改的id的值，根据值去匹配table中的行
var idValue = $("#id_update").val();
var name_update = $("#name_update").val();
var email_update = $("#email_update").val();
var tel_update = $("#tel_update").val();
//根据修改的id的值就定位某一行(td)
$("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update);
$("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);
$("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update);
});
});实现的效果图：
OK功能实现，但是代码比较繁琐，结构不好。
总结：到目前为止，jquery的选择器就OK了，很简单，使用起来需要灵活运用。可以实现各种复杂的界面效果。所以基础非常重要！！！
不积小流无以成江海，不积跬步无以至千里。
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
