1, ：eq()和nth-child()
看下面代码：
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#selected-plays > li:eq(1)").addClass("a");
//等价于 $("#selected-plays > li:nth-child(2)").addClass("a");
//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。
//而css选择器:nth-child（）是从 1 开始的， 所以要选择第二个元素， 得使用 :nth-child(2) ，而不是:nth-child(1)。
})
</SCRIPT>
2，:odd 和 :even
:odd : 奇数行
:even : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq() 选择器一样， 下标都是从 0开始的，
也就是 表格的第一行 编号是 0 （偶数）；
第二行 编号是 1 （奇数）；以此类推。。。
3, $("tr:odd").addClass()
可以写成 $("tr").filter(":odd").addClass()
4，$('td:contains("cssrain")') //取得 包含 字符串 cssrain 的所有td
5，jquery 转 dom ：
$("td").get(0).tagName 或 $("td")[0].tagName
6，load():
jquery中的load（）有2层意思，
第一层 意思 可以等价于 dom中 window.onload
第二层 意思 可以load（url ）。
7：ready简写：
1;
$(document).ready(function(){
//do something
})
2;
$().ready(function(){
//do something
})
3;
$(function(){
//do something
})
8，事件冒泡：
正常的来说：点击B 会触发a的click。
如果我们不想触发A，可以用stopPropagation() 阻止冒泡.
具体例子：
<div id="a">aaaaaaa
<div id="b">bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$('#b').click(function(e){
alert("B")
e.stopPropagation();//阻止冒泡， 从来不输出 “A" 。 可以去掉 ，试试对比效果。
})
})
</SCRIPT>
9, hide()show()会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide();//display : none ，记住display 为 inline
$('#b').hide();//display : none ，记住display 为 block
},function(){
$('#a').show(); //display : inline
$('#b').show(); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />
10, hide() show()加时间参数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide(500);//display : none
$('#b').hide(500);//display : none
},function(){
$('#a').show(500); //display : inline
$('#b').show(500); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />
11，效果：
show(), hide()会同时修改多个样式属性 : 高度，宽度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo() : 不透明度
slideDown() , slideUp() :高度
如果都不能满意，只能用animate（）了
animate()提供了更为强大的，复杂的效果。
12，animate() :
之前 .show('slow'); // slow代表的是0.6秒内同时改变高度，宽度和透明度 。 如果用时间表示是 600 ；=== .show(600);
那么我们再来看看 animate()
animate({heigth : 'slow' ,width : 'slow' } , 'slow' )
这里之所以可以 height : 'slow' 其实就跟 .show('slow') 类似，当然他前面规定了height 。。
13,做动画之前 先确定位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉，动画就没了。
/*
在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative
总之要设置其中的一种，因为所有的块级元素默认是static。
其实是跟css有关。
*/
$('#test').click(function(){
$('#a').animate({ left : '300' } , 'slow' )
})
})
</SCRIPT>
<DIV id="a" >a</div>
<input type="button" id="test" value="test" />
14，width()和css('width')
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
var t1 = $('#a').width();
var t2 = $('#a').css('width');
alert( t1 ); //200 ， 不带单位
alert( t2 ); //200px ， 带单位
alert( parseInt(t2) ) //200 ， 不带单位
})
})
</SCRIPT>
<DIV id="a" style="width:200px">a</div>
<input type="button" id="test" value="test" />
15：animate()做动画效果时，动画执行的顺序。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.animate({ top : "300px" } , "slow" );
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是按照顺序来执行的。先改变left，然后再改变top
对比:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" , top : "300px"} , "slow" )
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是一起执行的，也就是 left和top 一起改变。
区别知道了吧。
16,同理，我们再看一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1);
//排队效果会一个个执行。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
//当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。
对比：css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1)
.css("backgroundColor","#000");
//虽然css写在最后，但点击一开始就会执行。
//排队效果并不适合 .css()
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
解决：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1 ,function(){
$(this).css("backgroundColor","#000");
})
//我们可以把他写在 最后一个效果的 回调函数里。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
总结：
当在animate 中以多个属性的方式应用时， 效果是同时发生的。
当以 连续方式 应用时， 是按顺序来的。
非效果方法，比如.css()方式不是按照顺序来的，解决方法是 放在回调函数里。
17, 做一个实例 ： 段落
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
// $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接
$('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接
$('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。
})
</SCRIPT>
</head>
<body>
<h1 id="excerpt">Demo</h1>
<div class="chapter">
<p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p>
<p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p>
<p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p>
</body>
</html>
改进：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
// $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加 超链接
$('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个 ）每个段落后面添加 超链接
$('<a name="top"></a>').prependTo('body');//在body后的开始位置 添加 超链接。
$('div.chapter p').each(function(index){
$(this).attr("id","node_"+(index+1) );
//瞄点：在 标签a 上可以用name
//在标签p上 我用name不可以，只能用id
})
var k ="";
$('div.chapter p').each(function(index){
k += "<a href='#node_"+(index+1)+"'>段落"+(index+1)+"</a> ";
})
$(k).insertBefore('.chapter');//在body后的开始位置 添加 超链接。
//用prependTo（）的时候， 发现k的内容 被倒置了。我晕。。。
//所以 改用 insertBefore（）、
})
</SCRIPT>
</head>
<body>
<h1 id="excerpt">Demo</h1>
<div class="chapter">
<p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p>
<p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p>
<p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p>
<p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p>
</body>
</html>
18，包装元素 : wrap():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jqurey.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("p").wrap("<div class='chapter'></div>");
})
</SCRIPT>
</head>
<body>
<p>段落1段落1段落1段落1</p>
<p>段落2段落2段落2段落2</p>
</body>
</html>
<!--
结果为：
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
</div>
<div class="chapter">
<p>
段落2段落2段落2段落2
</p>
</div>
而不是：
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
<p>
段落2段落2段落2段落2
</p>
</div>
-->
19, 关于clone：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DOM Manipulation</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("p").bind("click",function(){
alert("cssrain test:");
})
$("p").clone(true).appendTo("body");
$("p").clone(false).appendTo("body");
//我们发现 clone(true) 会连带绑定的事件一起复制，
//false只复制元素，而绑定的事件已经被它扔掉。
$("p").clone().appendTo("body");//默认是 false
/*
这点 jquery的clone（）跟dom里的clone有点区别了。
如果想实现dom 里的clone（）
可以这么做;
$("p").clone(true).empty().appendTo("body");
*/
})
</SCRIPT>
</head>
<body>
<p>段落1段落1段落1段落1</p>
</body>
</html>
20, DOM操作总结：
创建节点：
直接 $("<p>cssrain</p>")
复制节点:
.clone()
插入节点：
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
删除节点：
.remove()
清空节点:
.empty()
包装节点：
.wrap()
设置属性
.attr()
删除属性
.removeAttr()
分享到：
相关推荐
在《JQuery教程全集》的第一章中，作者首先阐述了为何选择 JQuery 这个 JavaScript 库。随着 Web 开发技术的发展，JavaScript 的使用变得越来越普遍。然而，在没有库或框架的支持下，编写复杂的 DOM 操作和 AJAX ...
**jQuery教程 15天学会jQuery(完整版)** jQuery是一款高效、易用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本教程的目标是在15天内帮助初学者全面掌握jQuery的核心概念和...
**jQuery教程** jQuery是一款强大的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页动态交互变得更加简单和快捷。本教程将深入浅出地介绍jQuery的基本概念、核心功能以及实际应用，帮助初学者快速掌握...
《jQuery教程CHM格式》是一本专为开发者设计的手册，它以压缩包的形式提供，包含了一系列关于jQuery库的详细教学内容。jQuery是一款强大的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画...
**jQuery教程及文档手册** jQuery，作为一款广泛应用于Web开发的JavaScript库，为开发者提供了简洁易用的API，使得操作DOM、处理事件、实现动画效果以及进行Ajax交互变得更加简便。本教程将深入介绍jQuery的核心...
### jQuery 教程知识点详解 #### 一、jQuery 概述 - **定义**：jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画以及 AJAX 交互等任务。 - **特点**：jQuery 的核心特性...
《从零开始学习jQuery教程_c#.net版》是一份针对初学者设计的全面教程，旨在帮助没有基础的读者快速掌握jQuery这一强大的JavaScript库。jQuery简化了JavaScript中的DOM操作、事件处理、动画效果以及Ajax交互，使得...
jQuery教程在ASP.NET环境中的应用 jQuery是一款轻量级、高性能的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在ASP.NET开发中，jQuery的引入使得网页动态交互变得更加便捷...
本教程适合jQuery初学者，旨在提供全面的指导，帮助你快速掌握...通过学习这个jQuery教程，初学者可以掌握基本的jQuery语法和常用功能，进一步提升网页开发效率。不断实践和深入理解，将使你在jQuery的世界里游刃有余。
### jQuery教程知识点详解 #### 一、什么是jQuery jQuery是一种JavaScript脚本库，它与.NET类库的概念相似：提供了一系列工具方法或对象方法的封装，旨在简化开发者的使用过程。值得注意的是，虽然“库”与“框架...
总的来说，jQuery教程涵盖了如何利用这个库来简化网页开发，提高效率。通过学习jQuery，开发者可以更加高效地进行网页布局调整、元素操作、事件绑定，以及创建复杂的动画效果，从而提升用户体验。无论你是初学者还是...
《jQuery教程》旨在引导读者深入理解并掌握jQuery这一强大的JavaScript库。jQuery简化了网页的交互性和动态效果的实现，尤其适合那些对JavaScript有一定基础但不熟悉复杂DOM操作的开发者。 在第一章“开始jQuery”...
**jQuery教程及API文档** jQuery是一款广泛应用于网页开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。通过学习jQuery，开发者可以更高效地编写JavaScript代码，实现丰富的交互...
jQuery是一个由John Resig在2006年创建的JavaScript库，它是一种快速而简洁的代码库，用以简化HTML文档遍历、事件处理、动画和...无涯教程提供的jQuery教程离线版，无疑是帮助开发者系统学习和掌握jQuery的宝贵资源。