1. jQuery
1.1. jQuery介绍
1.1.1. 什么是jQuery
jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。jQuery的核心理念是Write less，Do more。使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。
jQuery发布于2006年，一经提出就吸引很多人参与到丰富这个类库的开发之中。jQuery写法的简单性、易用性大大提升了人们对它的使用。并且完备的文档说明也是其易用的一个体现。
使用jQuery时可以做到HTML页面代码和控制的分离，彻底的将控制代码放入一个单独的文件。jQuery的版本已经从1.x到了2.x，但是从2.x开始将不再支持IE6,7,8。文件的下载可以去jquery.com下载。
图 - 1
1.2. jQuery的编程步骤
1.2.1. 浏览器如何解析HTML文档
浏览器解析一个HTML文档的过程如图– 2 所示：
图- 2
浏览器读取HTML页面时，会按照节点的层级在内存中生成DOM树，如图中所示，HTML节点对应最顶层的根节点，BODY和HEAD是根节点下的节点。DIV是BODY里面的内容，所以会在BODY下面创建节点，当HTML的DOM树构建完成后，才是对这些节点的渲染，最后是用户看到的页面的展示。
就是因为这个DOM节点树的存在，所以在进行某个节点定位时就可以用层级等方式进行定位，而所有JS的操作都是先定位节点，然后操作节点。
1.2.2. 利用选择器定位节点
jQuery操作的第一步一定是要先找到这个对象，也就是定位节点。这要借助于其强大的选择器，编写代码的简洁如图-3：
图– 3
为了定位一个id属性为d1的div节点，使用的选择器写法如$(“div”)或$(“#d1”),这都是定位的一种写法，这个$符号就是jQuery中最基本的符号，搭配上不同的选择器最后就会成为包装后的jQuery对象。
1.2.3. 调用方法操作节点
jQuery解决问题的第二步就是调用类库中提供的方法，比如，为了修改div中文本的字体大小，在成功定位以后通过css方法就可以实现，如图-4
图– 4
典型的jQuery编程方式就是分这两步，定位后调用。定位可以创建jQuery对象，调用方法会对jQuery对象施加动作。
1.3. jQuery对象与DOM对象之间的转换
1.3.1. 什么是jQuery对象
jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。
之所以要进行对象的包装就是将浏览器的不用给隐藏了，不再需要考虑浏览器不同创建对象的方式不同这个问题。另一方面，由于大部分方法的返回值依然是jQuery对象，所以就可以直接在返回值后面再连续调用jQuery的其他方法，于是就会出现“jQuery对象.方法（）.方法（）.方法（）…”这样的连缀调用方法的样式。所以jQuery对象是能够应用jQuery类库方法的基础。
1.3.2. DOM对象 -> jQuery对象
DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。
function f( ){
varobj = document.getElementById(‘d1’);
//DOM -> jQuery对象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
}
1.3.3. jQuery对象 -> DOM对象
jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)
function f( ){
var $obj = $(‘#d1’);
//jQuery对象 -> DOM
varobj = $obj.get(0);
obj.innerHTML = ‘hello jQuery’;
}
2. jQuery选择器
2.1. jQuery选择器
2.1.1. 什么是jQuery选择器
jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。
2.1.2. 选择器的种类
jQuery的选择器提供了很多种形式，按照定位的不同特点，将其分类如下：
- 基本选择器
- 层级选择器
- 过滤选择器
- 表单选择器
每一种选择器都有其定位的方法，更多信息详见官方下载的jQuery文档。
2.2. 基本选择器
2.2.1. #id
#id也可以叫做id选择器，即利用id属性的唯一性进行定位，这是最快的定位方式，尽量使用Id选择器。
使用jQuery进行定位时注意语法的特点，是“$”符号接小括号，在小括号内以字符串的形式编写选择器的表达式。这样定位到的就是包装后的jQuery对象。
具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('#d1').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello prototype</div>
<p class="s1">hello dojo</p>
<a href="javascript:;" onclick="f1();">ClickMe</a>
</body>
</html>
2.2.2. .class
根据节点的class属性进行定位，class属性等于选择器表达式的则被返回.
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f2(){
$('.s1').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello prototype</div>
<p class="s1">hello dojo</p>
<a href="javascript:;" onclick="f2();">ClickMe</a>
</body>
</html>
2.2.3. element
依据HTML标记进行区分，满足条件的标记都会被返回。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f3(){
$('div').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello prototype</div>
<p class="s1">hello dojo</p>
<a href="javascript:;" onclick="f3();">ClickMe</a>
</body>
</html>
2.2.4. selector1，selector2，select3 … N
合成选择器，即所有选择器的合集作为定位的全部元素。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f4(){
$('#d1,p').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello prototype</div>
<p class="s1">hello dojo</p>
<a href="javascript:;" onclick="f4();">ClickMe</a>
</body>
</html>
2.2.5. *
所有页面元素都会返回，这种写法很少用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f5(){
$('*').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello prototype</div>
<p class="s1">hello dojo</p>
<a href="javascript:;" onclick="f5();">ClickMe</a>
</body>
</html>
2.3. 层次选择器
2.3.1. select1 空格 select2
根据select1找到节点后，再去查找子节点中符合select2选择器的节点，这种写法很重要，很常用。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('#d1 div').css('font-size','80px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello java</div>
<div id="d3">
<div id="d4" style="font-size:40px;">hello c</div>
</div>
<div id="d5">hello red</div>
<p>hello perl</p>
</div>
<a href="javascript:;" onclick="f1();">ClickMe</a>
</body>
</html>
2.3.2. select1 > select2
只查找直接子节点，不查找间接子节点。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f2(){
$('#d1>div').css('font-size','80px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello java</div>
<div id="d3">
<div id="d4" style="font-size:40px;">hello c</div>
</div>
<div id="d5">hello red</div>
<p>hello perl</p>
</div>
<a href="javascript:;" onclick="f2();">ClickMe</a>
</body>
</html>
2.3.3. select1 + select2
+号表示下一个兄弟节点，代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f3(){
$('#d3+p').css('font-size','80px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello java</div>
<div id="d3">
<div id="d4" style="font-size:40px;">hello c</div>
</div>
<div id="d5">hello red</div>
<p>hello perl</p>
</div>
<a href="javascript:;" onclick="f3();">ClickMe</a>
</body>
</html>
2.3.4. select1 ~ select2
“~”代表下面的所有兄弟节点。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f4(){
$('#d2~div').css('font-size','80px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello java</div>
<div id="d3">
<div id="d4" style="font-size:40px;">hello c</div>
</div>
<div id="d5">hello red</div>
<p>hello perl</p>
</div>
<a href="javascript:;" onclick="f4();">ClickMe</a>
</body>
</html>
2.4. 过滤选择器
2.4.1. 基本过滤选择器
图– 5
基本过滤选择器包括如图-5所示，以下标作为过滤的基准，也就是所在的位置作为过滤的条件。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('table tr:first').css('background-color','#cccccc');
$('tbodytr:eq(3)').css('background-color','yellow');
}
function f2(){
$('tbodytr:even')
.css('background-color','#fff8dc');
$('tbodytr:odd').css(
'background-color','yellow');
}
function f3(){
$('tbodytr:eq(1) td:eq(1)')
.css('background-color','yellow')
.css('font-size','80px');
}
function f4(){
$('tbodytr:not(#tr1)')
.css('background-color','yellow')
}
</script>
</head>
<body style="font-size:30px;">
<table width="60%" border="1"
cellpadding="0" cellspacing="0">
<thead>
<tr><td>name</td><td>age</td></tr>
</thead>
<tbody>
<tr><td>sally</td><td>22</td></tr>
<tr id="tr1"><td>eric</td><td>13</td></tr>
<tr><td>kitty</td><td>22</td></tr>
<tr><td>kimi</td><td>23</td></tr>
</tbody>
</table>
<a href="javascript:;" onclick="f4();">ClickMe</a>
</body>
</html>
2.4.2. 内容过滤选择器
内容过滤选择器包含如下方式，可以依据元素的内容进行过滤。代码如下所示:
图– 6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('div:contains(回家)').css('font-size', '60px');
}
function f2(){
$('div:empty').html('还不知道');
}
function f3(){
$('div:parent').css('font-size', '60px');
}
function f4(){
$('div:has(p)').css('font-size', '60px');
}
</script>
</head>
<body style="font-size:30px;">
<div>什么时候回家</div>
<div></div>
<div>
<p>买不着票了</p>
</div>
<a href="javascript:;"
onclick="f4();">ClickMe</a>
</body>
</html>
2.4.3. 可见性过滤选择器
根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible属性的判断。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
//$('div:hidden').css('display','block');
$('div:hidden').show('slow');
}
function f2(){
$('div:visible').hide(800);
}
</script>
</head>
<body style="font-size:30px;">
<div>hello jQuery</div>
<div style="display:none;">hello java</div>
<a href="javascript:;" onclick="f2();">ClickMe</a>
</body>
</html>
2.4.4. 属性过滤选择器
属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。代码案例如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('div[id]').css('font-size','80px');
}
function f2(){
$('div[id=d2]').css('font-size','80px');
}
function f3(){
$('div[id!=d2]').css('font-size','80px');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div id="d2">hello dojo</div>
<div>hello java</div>
<a href="javascript:;" onclick="f3();">ClickMe</a>
</body>
</html>
2.4.5. 子元素过滤选择器
子元素过滤选择器会根据子元素的位置的数值来进行筛选。格式为：nth-child（index/even/odd）。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('ulli:eq(1)').css('font-size','60px');
}
function f2(){
$('ulli:nth-child(even)').css('font-size','60px');
}
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item111</li>
<li>item222</li>
<li>item333</li>
</ul>
<a href="javascript:;" onclick="f2();">ClickMe</a>
</body>
</html>
2.4.6. 表单对象属性过滤选择器
根据表单元素一些特有的属性进行筛选，如enabled、disabled、checked、selected属性。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('#form1 input:disabled').css('border','1px dotted red');
}
function f2(){
$('#form1 input:enabled').attr('disabled',true);
}
function f3(){
//var length = $('#form2 input:checked').length;
//alert(length);
alert($('#form2 input:checked').val());
}
function f4(){
alert($('#form3 select option:selected').val());
}
</script>
</head>
<body style="font-size:30px;">
<form id="form1">
username:<input name="username"/><br/>
name:<input name="name"
disabled="disabled"/><br/>
</form>
<form id="form2">
兴趣:钓鱼<input type="checkbox"
name="interest" value="fishing"
checked="checked">
做饭:<input type="checkbox"
name="interest" value="cooking">
台球:<input type="checkbox"
name="interest" value="snooker">
</form>
<form id="form3">
<select style="width:120px;">
<option value="math">数学</option>
<option value="english"
selected="selected">英语</option>
<option value="computer">计算机</option>
</select>
</form>
<a href="javascript:;"
onclick="f4();">ClickMe</a>
</body>
</html>
2.5. 表单选择器
2.5.1. 表单选择器的种类
表单选择器是根据表单元素特有的元素名进行定位的一种方式，所以这些选择器包括:
图– 7
使用的规则和以上各选择器一致。$(“：input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。
3. jQuery操作DOM
3.1. jQuery操作DOM-查询
3.1.1. html（）
读取或修改节点的HTML内容的操作方式。与DOM对象的innerHTML的作用一致。
3.1.2. text（）
读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可。
3.1.3. val（）
读取或修改节点的value属性值，也就是针对表单元素中有value属性的那些元素的操作。
3.1.4. attr（）
读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何属性。
以上对于查询的各种方式，综合代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
/*
html() innerHTML
text() innerText
*/
function f1(){
//alert($('#d1').html());
alert($('#d1').text());
}
function f2(){
$('#d1').html('<p>hello dojo</p>');
}
/*
val() value
*/
function f3(){
//alert($(':text').val());
$(':text').val('kitty');
}
function f4(){
//alert($('#d1').attr('id'));
$('#d1').attr('style','color:red;font-style:italic;');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1"><span>hello jQuery</span></div>
username:<input name="username"/><br/>
<a href="javascript:;" onclick="f4();">ClickMe</a>
</body>
</html>
3.2. jQuery操作DOM-创建、插入、删除
3.2.1. 创建DOM节点的语法
使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$（html）。
大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入
简写形式如$(‘body’).append(‘<div>…</div>’)
3.2.2. 插入DOM节点的方法
append方法会将DOM节点作为最后一个孩子节点添加进来
prepend方法将DOM节点作为第一个孩子节点添加进来
after方法将DOM节点作为下一个兄弟节点添加进来
before方法将DOM节点作为上一个兄弟节点添加进来
3.2.3. 删除DOM节点的方法
remove（）可以移除DOM，remove（selector）可以按选择器定位后删除，empty（）清空节点。
对于DOM节点的创建，插入，删除的方法的代码案例如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
var $obj =
$('<div>听不懂说什么，但感觉很厉害的样子</div>');
$('body').append($obj);
//$('body').prepend($obj);
}
function f2(){
$('body').append('<div>听不懂说什么，但感觉很厉害的样子</div>');
}
function f3(){
//$('ul').after('<p>hello jQuery</p>');
$('ul').before('<p>hello jQuery</p>');
}
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;"
onclick="f2();">不明觉厉是什么意思?</a>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="ClickMe"
onclick="f3();"/>
</body>
</html>
3.3. jQuery操作DOM-复制节点
3.3.1. 复制DOM节点的方法
clone（）方法和clone（true）都会实现复制，添加参数true的时候会将节点的行为也复制到新的对象之上。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('ulli:eq(2)').click(function(){
$(this).css('font-size','60px');
});
$('#a1').click(function(){
var $obj = $('ulli:eq(2)').clone(true);
$('ul').append($obj);
});
});
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<a href="javascript:;" id="a1">ClickMe</a>
</body>
</html>
3.4. jQuery操作DOM-属性操作
3.4.1. 属性操作的方法
读取属性使用attr（）方法，设置属性使用attr（‘’，‘’）方法。删除属性使用removeAttribute（‘’）方法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
color:red;
}
.s2{
font-size:80px;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').click(function(){
$('#d1').attr('style','color:red;font-size:90px;');
$('#d1').attr('class','s1');
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<a href="javascript:;" id="a1">ClickMe</a>
</body>
</html>
3.5. jQuery操作DOM-样式操作
3.5.1. 样式操作的方法
修改对象样式的方法如下:
图– 8
案例代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
color:red;
}
.s2{
font-size:80px;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').click(function(){
$('#d1').addClass('s1');
$('#d1').removeClass('s1');
$('#d1').toggleClass('s2');
$('#d1').css('font-style','italic');
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<a href="javascript:;" id="a1">ClickMe</a>
</body>
</html>
3.6. jQuery操作DOM-遍历节点
3.6.1. 遍历节点的方法
遍历节点的方法如下图所示:
图– 9
遍历节点的案例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').click(function(){
//var $obj = $('#d1').children('div');
//alert($obj.length);
//$obj.css('font-size','60px');
//$('#d3').next().css('font-size','60px');
//$('#d4').next('p').css('font-size','60px');
//$('#d3').prev().css('font-size','60px');
//$('#d3').siblings().css('font-size','60px');
//$('#d3').siblings('div').css('font-size','60px');
//$('#d1').find('p').css('font-size','60px');
alert($('#d3').parent().attr('id'));
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello 1</div>
<div id="d3">hello 2</div>
<div id="d4">hello 3</div>
<p>hello 4</p>
</div>
<a href="javascript:;" id="a1">ClickMe</a>
</body>
</html>