jq判断是否隐藏第几个链接符合条件
点击联系发帖人
时间：2014-10-09 18:56
锋利的jquery自我练习代码 - 推酷
锋利的jquery自我练习代码
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script src=&jquery-1.7.js& type=&text/javascript&&
&script type=&text/javascript&&
//使用DOM方式判断
$(document).ready(function () {//等待do元素加载完毕
/* var $cr = $(&#cr&);
//jquery对象
var cr = $cr[0]; //dom对象，或者$cr.get(0)
$cr.click(function () {
if (cr.checked)
//DOM方式判断
alert(&感谢您的支持！使用DOM方式判断&);
//使用JQuery方式判断
$(document).ready(function () {
var $cr = $(&#cr&);
$cr.click(function () {
if ($cr.is(&:checked&)) {
alert(&感谢您的支持，使用JQuery方式判断&)
27 &/head&
29 &input type=&checkbox& id=&cr& /&
30 &label for=&cr&&我已经阅读了上面的制度&/label&
31 &/body&
32 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
6 &script src=&jquery-1.7.js& type=&text/javascript&&&/script&
7 &script type=&text/javascript&&
$(function () {
//这是$(document).ready(function(){})的缩写
$(&#address&).focus(function(){
//地址框获得鼠标焦点
var txt_value=$(this).val();
//得到当前文本框的值
if(txt_value==this.defaultValue){
//defaultvalue获取或设置文本框的初始值
$(this).val(&&);
//如果符合条件则清空文本框内容
$(&#address&).blur(function(){
//地址框失去鼠标焦点
var txt_value=$(this).val();
//得到当前文本框内容
if(txt_value==&&){
$(this).val(this.defaultValue);
//如果符合条件，则设置内容(defualutvalue是文本框的初始值)
$(&#password&).focus(function(){
var txt_value=$(this).val();
if(txt_value==this.defaultValue){
$(this).val(&&);
$(&#password&).blur(function(){
var txt_value=$(this).val();
if(txt_value==&&){
$(this).val(this.defaultValue);
34 &/script&
36 &div style=&
width:350 margin: 30 border:2px solid # &&
37 &span&请输入邮箱地址：&/span&&input type=&text& id=&address& value=&请输入邮箱地址& /&&br /&&br /&
38 &span&请输入邮箱密码：&/span&&input type=&text& id=&password& value=&请输入邮箱密码& /&&br /&&br /&
39 &input type=&button& value=&登录& /&
41 &/body&
42 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 40
background: #
font: 80% Arial, Helvetica, sans-
color: #555;
line-height: 180%;
margin: 0;
padding: 0;
list-style:
margin-right: 10
border: 1px solid #AAAAAA;
/* tooltip */
border: 1px solid #
background: #333;
padding: 2
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& &
$(function () {
var x = 10; var y = 20;
$(&a.tooltip&).mouseover(function (e) {
this.myTitle = this.
this.title = &&;
var imgTitle = this.myTitle ? &&/br&& + this.myTitle : &&;
var tooltip = &&div id='tooltip'&&img src='& + this.href + &'alt='产品预览图'/&& + imgTitle + &&/div&&
$(&body&).append(tooltip);
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
.show(&fast&);
.mouseout(function () {
this.title = this.myT
$(&#tooltip&).remove();
.mousemove(function (e) {
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
74 &/head&
有效果：&/h3&
&li&&a href=&images/apple_1_bigger.jpg& class=&tooltip& title=&苹果 iPod&&
&img src=&images/apple_1.jpg& alt=&苹果 iPod& /&&/a&&/li&
&li&&a href=&images/apple_2_bigger.jpg& class=&tooltip& title=&苹果 iPod nano&&
&img src=&images/apple_2.jpg& alt=&苹果 iPod nano& /&&/a&&/li&
&li&&a href=&images/apple_3_bigger.jpg& class=&tooltip& title=&苹果 iPhone&&
&img src=&images/apple_3.jpg& alt=&苹果 iPhone& /&&/a&&/li&
&li&&a href=&images/apple_4_bigger.jpg& class=&tooltip& title=&苹果 Mac&&
&img src=&images/apple_4.jpg& alt=&苹果 Mac& /&&/a&&/li&
无效果：&/h3&
&li&&a href=&images/apple_1_bigger.jpg& title=&苹果 iPod&&
&img src=&images/apple_1.jpg& alt=&苹果 iPod& /&&/a&&/li&
&li&&a href=&images/apple_2_bigger.jpg& title=&苹果 iPod nano&&
&img src=&images/apple_2.jpg& alt=&苹果 iPod nano& /&&/a&&/li&
&li&&a href=&images/apple_3_bigger.jpg& title=&苹果 iPhone&&
&img src=&images/apple_3.jpg& alt=&苹果 iPhone& /&&/a&&/li&
&li&&a href=&images/apple_4_bigger.jpg& title=&苹果 Mac&&
&img src=&images/apple_4.jpg& alt=&苹果 Mac& /&&/a&&/li& &/ul&
100 &/body&
101 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
padding:40
background:#
font:80% Arial, Helvetica, sans-
color:#555;
line-height:180%;
padding:.5em 0;
19 /* tooltip */
20 #tooltip{
border:1px solid #333;
background:#f7f5d1;
color:#333;
28 &/style&
29 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
30 &script type=&text/javascript&&
$(function () {
var x = 10; var y = 20;
$(&a.tooltip&)
.mouseover(function (e) {
this.myTitle = this.
this.title = &&;
var tooltip = &&div id='tooltip'&& + this.myTitle + &&/div&&; //创建div元素
$(&body&).append(tooltip); //添加到body下面
$(&tooltip&).css({
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
.show(&fast&);
.mouseout(function () {
this.title = this.myT
$(&#tooltip&).remove();
$(&a.tooltip&).mousemove(function (e) {
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
57 &/script&
58 &/head&
60 &p&&a href=&#&
class=&tooltip& title=&这是我的超链接提示1&&提示1&/a&&/p&
61 &p&&a href=&#&
class=&tooltip& title=&这是我的超链接提示2&&提示1&/a&&/p&
62 &p&&a href=&#& title=&这是自带提示&1&自带提示1&/a&&/p&
63 &p&&a href=&#& title=&这是自带提示2&&自带提示2&/a&&/p&
64 &/body&
65 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&.head&).bind(&click&, function () { //$(&#panel h5.head&)一样
var $content = $(this).next();
//就是获得$(&.content&)
if ($content.is(&:visible&)) {
$content.hide();
$content.show();
19 &/head&
21 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:100 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display:&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
29 &/body&
30 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#panel h5.head&).bind(&mouseover&,function(){
var $content=$(this).next(&&);
$content.show();
$(&#panel h5.head&).bind(&mouseout&, function () {
//var $content=$(this).next();
// $content.hide();
$(this).next().hide();
19 &/head&
21 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:10 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display: width:200 margin:0&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。&br /&
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
29 &/body&
30 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&.head&).mouseover(function () {
$(&.content&).show()
//分号的作用，在这里添加一个分号的话，下面的代码没有作用，页面没反应，需要在下面的方法中加上$(&.head&)。不加分号则不需要
.mouseout(function(){
$(&.content&).hide();
16 &/head&
18 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:10 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display: width:200 margin:0&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。&br /&
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
26 &/body&
27 &/html&
tigger方法
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &style type=&text/css&&
5 *{margin:0;padding:0;}
6 body { font-size: 13 line-height: 130%; padding: 60 }
7 p {width:200background:#888;color:height:16}
8 &/style&
9 &script src=&jquery-1.7.js& type=&text/javascript&&&/script&
10 &script type=&text/javascript&&
$(function () {
$(&#btn&).bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数1&/p&&);
.bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数2&/p&&);
.bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数3&/p&&);
$(&#btn&).trigger(&click&);//模拟操作，这里是模拟进行了click操作
$(&#btn&).bind(&myClick&, function () {
$(&#test&).append(&&p&我的自定义事件&/p&&);
$(&#btn&).trigger(&myClick&);
27 &/script&
&title&&/title&
29 &/head&
31 &button id=&btn&&点击我&/button&
32 &div id=&test&&&/div&
33 &/body&
34 &/html&
tigger传递参数
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#btn&).bind(&myClick&, function (event, message1, message2) {
$(&#test&).append(&&p&& + message1 + message2 + &&/p&&);
//trigger调用自定义事件
$('#btn').click(function(){
$(this).trigger(&myClick&,[&我的自定义&,&事件&])
.trigger(&myClick&, [&我的自定义&, &事件&]);
18 &/head&
20 &button id=&btn&&点击我&/button&
21 &div id=&test&&&/div&
22 &/body&
23 &/html&
绑定事件的多个类型
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
background: #888;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&div&).bind(&mouseover mouseout&, function () {
$(this).toggleClass(&over&);//实现当有over类时删除，没有时添加
20 &/head&
&div style=&width: 100 height: 50&&
滑入.&/div&
24 &/body&
25 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&style type=&text/css&&
margin: 0;
padding: 0;
padding: 60
width: 100
height: 100
border: 1px solid #0050D0;
background: #96E555;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#panel&).css(&opacity&, &0.5&);
$(&div&).bind(&click&, function () {
$(this).animate({ left: &400px&, height: &200px&, opacity: &1& }, 3000)
.animate({ top: &200px&, width: &200px& }, 3000)
.fadeOut(&slow&)
&title&&/title&
36 &/head&
&div id=&panel&&
40 &/body&
41 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link type=&text/css& href=&style.css& rel=&Stylesheet& /&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
var page = 1; var i = 4;
//每版放四个图片
//向后按钮
$(&span.next&).bind(&click&, function () {
var $parent = $(this).parents(&div.v_show&);//等价于 $(&div.v_show&)////根据当前点击元素获取到父元素
var $v_show = $parent.find(&div.v_content_list&); //寻找到“视频内容展示区域”
var $v_content = $parent.find(&div.v_content&); //寻找到视频内容展示区外围的div元素
var v_width = $v_content.width();
//展示区的宽度
var len = $v_show.find(&li&).
//返回&li&的个数
var page_count = Math.ceil(len/i);
//获得最大的整数(表示一共是多少版)
if (!$v_show.is(&:animated&)) {
//判断视频内容展示区域是否处于动画
//如果处于动画状态，则不再添加动画，如果不处于动画状态则添加一个动画状态
//这样就解决了连续单击按钮，动画乱跳的bug，即保证一次单击只进行一个动画，动画完毕后才可以执行下一个动画
if (page == page_count) {
//已经到最后一个版面了，如果再往后，就必须跳转到第一个版面
$v_show.animate({ left: &0& }, &slow&); //通过改变left值，跳转到第一个版面
$v_show.animate({ left: &-=& + v_width }, &slow&);
//通过改变left值，达到每次换一个版面
$parent.find(&span&).eq((page - 1)).addClass(¤t&).siblings().removeClass(¤t&);
//往前按钮
$(&span.prev&).bind(&click&,function(){
var $parent=$(this).parents(&div.v_show&);
//根据当前点击元素获取到父元素
var $v_show=$parent.find(&div.v_content_list&);
//寻找到视频内容展示区域
var $v_content=$parent.find(&div.v_content&);
//寻找到视频内容展示区域 外围的div元素
var v_width=$v_content.width();
var len=$v_show.find(&li&).
var page_count=Math.ceil(len/i);
if(!$v_show.is(&:animated&)){
if(page==1){
$v_show.animate({left:'-='+v_width*(page_count-1)},&slow&);
$v_show.animate({left:'+='+v_width},&slow&);
$parent.find(&span&).eq((page-1)).addClass(&currnet&).siblings().removeClass(¤t&);
53 &/head&
55 &div class=&v_show&&
&div class=&v_caption&&
&h2 class=&cartoon& title=&卡通动漫&&卡通动漫&/h2&
&div class=&highlight_tip&&
&span class=¤t&&1&/span&&span&2&/span&&span&3&/span&&span&4&/span&
&div class=&change_btn&&
&span class=&prev& &上一页&/span&
&span class=&next&&下一页&/span&
&em&&a href=&#&&更多&&&/a&&/em&
&div class=&v_content&&
class=&v_content_list&&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
91 &/body&
92 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
padding: 60
width: 100
height: 100
border: 1px solid #0050D0;
background: #96E555;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(&#panel&).hover(function () {
$(this).stop(true)
.animate({ height: &150px& }, 200)
.animate({ width: &300& }, 300);
}, function () {
$(this).stop(true)
.animate({ height: &22& }, 200)
.animate({width:&60px&},300);
37 &/head&
&div id=&panel&&&/div&
40 &/body&
41 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
font-size: 13
line-height: 130%;
padding: 60
width: 220
border: 1px solid #0050D0;
background: #96E555;
width: 200
margin: 10
background: #666666;
width: 200
background: #888;
height: 16
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
//为span元素绑定click事件
$(&span&).bind(&click&, function (event) {
var txt = $(&#msg&).html() + &&p&内层span元素被点击&/p&&;
$(&#msg&).html(txt);
event.stopPropagation();// 停止冒泡事件
return false; //为event.stopPropagation()和event.preventDefault()的缩写
// 为div元素绑定click事件
$('#content').bind(&click&, function (event) {
var txt = $('#msg').html() + &&p&外层div元素被点击.&p/&&;
$('#msg').html(txt);
event.stopPropagation();
// 为body元素绑定click事件
$(&body&).bind(&click&, function () {
var txt = $('#msg').html() + &&p&body元素被点击.&p/&&;
$('#msg').html(txt);
64 &/head&
&div id=&content&&
外层div元素 &span&内层span元素&/span& 外层div元素
&div id=&msg&&
71 &/body&
72 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link type=&text/css& rel=&Stylesheet& href=&5style.css& /&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& &
$(function () {
//如果是必须填写的，则加红星标识
$(&form :input.required&).each(function () {
var $required = $(&&strong class='high'&*&/strong&&); //创建元素
$(this).parent().append($required); //追加到文档中(div中)
//文本框失去焦点后
$(&form :input&).blur(function () {
var $parent = $(this).parent();
$parent.find(&.formtips&).remove(); //从它的父元素中寻找满足条件的值并删除之前的提醒，避免重复
//验证用户名
if ($(this).is(&#username&)) { //判断该控件是否是用户名控件(通过id值判断)
if (this.value == && || this.value.length & 6) {
var errorMsg = &请输入至少六位用户名：&;
$parent.append(&&span class='formtips onError'&& + errorMsg + &&/span&&);
var okMsg = &输入正确&;
$parent.append(&&span class='formtips onSuccess'&& + okMsg + &&/span&&);
//验证邮件
if ($(this).is(&#email&)) {
if (this.value == && || this.value !==&&&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) {
var errorMsg = &请输入正确的E-Mail地址&;
$parent.append(&&span class='formtips onError'&& + errorMsg + &&/span&&);
var okMsg = '输入正确.';
$parent.append('&span class=&formtips onSuccess&&' + okMsg + '&/span&');
}).keyup(function () {
$(this).triggerHandler(&blur&);
}).focus(function () {
$(this).triggerHandler(&blur&);
//提交，最终验证
$(&#send&).click(function () {
$(&form :input.requried&).trigger(&blur&);
var numError = $(&form.onError&).
if (numError)
{ return false; }
alert(&注册成功，密码已经发送到你的邮箱，请查收&);
$(&#res&).click(function () {
$(&.formtips&).remove();
57 &/head&
59 &form method=&post& action=&&&
&div class=&int&&
&label for=&username&&用户名：&/label&
&input type=&text& id=&username& class=&required& /&
&div class=&int&&
&label for=&email&&邮箱：&/label&
&input type=&text& id=&email& class=&required& /&
&div class=&int&&
&label for=&personinfo&&个人资料:&/label&
&input type=&text& id=&personinfo& /&
&div class=&sub&&
&input type=&submit& value=&提交& id=&send& /&
&input type=&reset& id=&res& /&
76 &/form&
77 &/body&
78 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;}
{ background:#FFF38F;}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&tbody&tr:odd&).addClass(&odd&);
$(&tbody&tr:even&).addClass(&even&);
$(&tbody&tr&).click(function () {
//判断当前是否选中
var hasSelected = $(this).hasClass(&selected&);
//如果选中，则移除selected类，否则就加上selected类
$(this)[hasSelected ? &removeClass& : &addClass&](&selected&)
//查找内部的checkbox，设置对应的属性
.find(&:checkbox&).attr(&checked&, !hasSelected);
//如果复选框默认情况下是选择的，则高色
$(&tbody&tr:has(:checked)&).addClass(&selected&);
30 &/head&
32 &table&
33 &thead&
&tr&&th&&/th&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
35 &/thead&
36 &tbody&
37 &tr&&td&&input type=&checkbox& name=&choice& value=&&/&&/td&
&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& checked='checked' /&&/td&
&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
49 &/tbody&
51 &/table&
52 &/body&
53 &/html&
表格折叠展开
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;width:100}
{ background:#FFF38F;cursor:}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&tr.parent&).click(function () {
//获得class=parent的行，所谓的父行
$(this).toggleClass(&selected&)
//添加删除高亮
.sibings(&.child_& + this.id).toggle(); //隐藏/显示所谓的子行;toggle切换元素的可见状态
/* var $hidde = $(this).next().attr(&class&);
$(&tr&).filter(&.&+$hidde).toggle();*/
//这个方法同样可以隐藏子行。
}); //siblings()不带参数时获得匹配元素的同胞元素。不包含该匹配元素，只返回同胞元素
24 &/head&
26 &table&
27 &thead&
&tr&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
30 &tbody&
&tr class=&parent& id=&row_01&&&td colspan=&3&&前台设计组&/td&&/tr&
&tr class=&child_row_01&&&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr class=&child_row_01&&&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr class=&parent& id=&row_02&&&td colspan=&3&&前台开发组&/td&&/tr&
&tr class=&child_row_02&&&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr class=&child_row_02&&&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr class=&parent& id=&row_03&&&td colspan=&3&&后台开发组&/td&&/tr&
&tr class=&child_row_03&&&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr class=&child_row_03&&&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
43 &/table&
44 &/body&
45 &/html&
全选复选框
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#CheckedAll&).click(function () {
//所有checkbox跟着全选的checkbox走
$('[name=items]:checkbox').attr(&checked&,this.checked);
$(&[name=items]:checkbox&).click(function () {
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率
var $tmp = $(&[name=items]:checkbox&);
//用filter方法筛选出选中的复选框，并直接给checkedAll赋值
$(&#CheckedAll&).attr(&checked&, $tmp.length == $tmp.filter(&:checkd&).length);
$(&#send&).click(function () {
var str = &您选中的是：\r\n&;
$(&[name=items]:checkbox:checked&).each(function () {
str += $(this).val() + &\r\n&;
alert(str);
28 &/head&
30 &form method=&post& action=&#&&
你爱好的运动是？&input type=&checkbox& id=&CheckedAll& /&全选/全不选&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/&&br /&
&input type=&button& id=&send& value=&提 交&/&
37 &/form&
38 &/body&
39 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &!--引入prototype--&
5 &script type=&text/javascript& src=&&&&/script&
6 &!--引入JQuery--&
7 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&title&&/title&
11 &p id=&pp&&text------prototype&/p&
12 &p&text---JQuery&/p&
13 &!--JQuery库在其他库之后导入--&
14 &script type=&text/javascript&&
jQuery.noConflict(); //将变量$的控制权交给prototype.js
//var $j = jQuery.noC//自定义一个快捷方式
jQuery(function () {
jQuery(&p&).click(function () {
alert(jQuery(this).text());
$(&pp&).style.display = 'none';//使用prototype
23 &/script&
24 &/body&
25 &/html&
判断对象是否存在
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&
9 &script type=&text/javascript&&
//1--根据获取到的元素的长度判断，元素是否存在
$(document).ready(function () {
if ($(&#tt&).length & 0) {
//do something
//2--转化成DOM元素对象判断，元素是否存在
if ($(&#tt&)[0]) {
//do something
//3--不能用这样的方法判断一个元素是否存在
if ($(&tt&)) {
//do something
24 &/script&
25 &/body&
26 &/html&
属性选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& src=&assist.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function () {
//选取含有属性title的div元素
$(&#btn1&).click(function () {
$(&div[title]&).css(&background&, &#bbffaa&);
//选取属性为title值等于test的div元素
$(&#btn2&).click(function () {
$(&div[title=test]&).css(&background&, &#bbffaa&);
//选取 属性title值不等于 test 的div元素.
$('#btn3').click(function () {
$('div[title!=test]').css(&background&, &#bbffaa&);
//选取 属性title值 以 te 开始 的div元素.
$('#btn4').click(function () {
$('div[title^=te]').css(&background&, &#bbffaa&);
//选取 属性title值 以 est 结束 的div元素.
$('#btn5').click(function () {
$(&div[title$=est]&).css(&background&, &#bbffaa&);
//选取 属性title值 含有 es
的div元素.
$('#btn6').click(function () {
$(&div[title*=es]&).css(&background&, &#bbffaa&);
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$('#btn7').click(function () {
$(&div[id][title*=es]&).css(&background&, &#bbffaa&);
&title&属性选择器&/title&
&style type=&text/css&&
div, span, p
width: 140
height: 140
background: #
border: #000 1
font-size: 17
font-family: V
height: 55
background-color: #
font-size: 12
63 &/head&
&button id=&reset&&
手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked& /&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&
属性选择器.&/h3&
&!-- 控制按钮 --&
&input type=&button& value=&选取含有 属性title 的div元素.& id=&btn1& /&
&input type=&button& value=&选取 属性title值等于“test”的div元素.& id=&btn2& /&
&input type=&button& value=&选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).& id=&btn3& /&
&input type=&button& value=&选取 属性title值 以“te”开始 的div元素.& id=&btn4& /&
&input type=&button& value=&选取 属性title值 以“est”结束 的div元素.& id=&btn5& /&
&input type=&button& value=&选取 属性title值 含有“es”的div元素.& id=&btn6& /&
&input type=&button& value=&组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素.&
id=&btn7& /&
&!--测试的元素--&
&div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&
class为mini&/div&
&div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
&div class=&mini& title=&other&&
class为mini，title为other&/div&
&div class=&mini& title=&test&&
class为mini，title为test&/div&
&div class=&one&&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
&div class=&one&&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini& title=&tesst&&
class为mini，title为tesst&/div&
&div style=&display:& class=&none&&
style的display为“none”的div&/div&
&div class=&hide&&
class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
&span id=&mover&&正在执行的动画span元素&/span&
123 &/body&
124 &/html&
第二章案例
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{margin:0;padding:0}
body{font-size:13text-align:}
a{ color:#04D; text-decoration:}
a:hover{color:#F50;text-decoration:}
.SubCategoryBox{width:600 margin:0 text-align: margin-top:40}
.SubCategoryBox ul{list-style:}
.SubCategoryBox ul li{ display: float: width:200 line-height:20}
.showmore{clear: text-align:padding-top:10}
.showmore a{ display: width:120 margin:0 line-height:24 border:1px solid #AAA;}
.showmore a span{ padding-left:15 background:url() no-repeat 0 0;}
.promoted a{color:#F50;}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)');
获得索引值大于5的品牌集合对象(除最后一条)
$category.hide();
隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore & a');
获取“显示全部品牌”按钮
$toggleBtn.click(function () {
if ($category.is(&:visible&)) {
$category.hide();
隐藏$category
$('.showmore a span')
.css(&background&, &url(img/down.gif) no-repeat 0 0&)
.text(&显示全部品牌&);
//改变背景图片和文本
$('ul li').removeClass(&promoted&);
// 去掉高亮样式
$category.show();
显示$category
$('.showmore a span')
.css(&background&, &url(img/up.gif) no-repeat 0 0&)
.text(&精简显示品牌&);
//改变背景图片和文本
$('ul li').filter(&:contains('佳能'),:contains('尼康'),:contains('奥林巴斯')&)
.addClass(&promoted&);
//添加高亮样式
return false;
//超链接不跳转
43 &/head&
45 &div class=&SubCategoryBox&&
&ul&&li &&a href=&#&&佳能&/a&&i&(30440) &/i&&/li&
&li &&a href=&#&&索尼&/a&&i&(27220) &/i&&/li&
&li &&a href=&#&&三星&/a&&i&(20808) &/i&&/li&
&li &&a href=&#&&尼康&/a&&i&(17821) &/i&&/li&
&li &&a href=&#&&松下&/a&&i&(12289) &/i&&/li&
&li &&a href=&#&&卡西欧&/a&&i&(8242) &/i&&/li&
&li &&a href=&#&&富士&/a&&i&(14894) &/i&&/li&
&li &&a href=&#&&柯达&/a&&i&(9520) &/i&&/li&
&li &&a href=&#&&宾得&/a&&i&(2195) &/i&&/li&
&li &&a href=&#&&理光&/a&&i&(4114) &/i&&/li&
&li &&a href=&#&&奥林巴斯&/a&&i&(12205) &/i&&/li&
&li &&a href=&#&&明基&/a&&i&(1466) &/i&&/li&
&li &&a href=&#&&爱国者&/a&&i&(3091) &/i&&/li&
&li &&a href=&#&&其它品牌相机&/a&&i&(7275) &/i&&/li&
&div class=&showmore&&
&a href=&#&&&span&显示全部品牌&/span&&/a&
65 &/body&
66 &/html&
基本顾虑选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function () {
//选择第一个div元素
$(&#btn1&).click(function () {
$(&div:first&).css(&background&, &#bfa&);
//选择最后一个div元素
$(&#btn2&).click(function () {
$(&div:last&).css(&background&, &#bfa&);
//选择class不为one的所有div元素
$(&#btn3&).click(function () {
$(&div:not(.one)&).css(&background&, &#bfa&);
//选择索引值为偶数的div元素
$(&#btn4&).click(function () {
$(&div:even&).css(&background&, &#bfa&);
//选择索引值为奇数的div元素
$(&#btn5&).click(function () {
$(&div:odd&).css(&background&, &#bfa&);
//选择索引值等于3的div元素
$(&#btn6&).click(function () {
$(&div:eq(3)&).css(&background&, &#bfa&);
//选择索引值大于3的div元素
$(&btn7&).click(function () {
$(&div:gt(3)&).css(&background&,&#bfa&);
//选择索引值小于3的div元素
$(&btn8&).click(function () {
$(&div:lt(3)&).css(&background&, &#bfa&);
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
$(':header').css(&background&,&#bfa&);
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
$(':animated').css(&background&,&#bfa&);
49 &/script&
&title&基本过滤选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
75 &/head&
77 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&基本过滤选择器.&/h3&
80 &!-- 控制按钮 --&
&input type=&button& value=&选择第一个div元素.& id=&btn1&/&
&input type=&button& value=&选择最后一个div元素.& id=&btn2&/&
&input type=&button& value=&选择class不为one的 所有div元素.& id=&btn3&/&
&input type=&button& value=&选择索引值为偶数 的div元素.& id=&btn4&/&
&input type=&button& value=&选择索引值为奇数 的div元素.& id=&btn5&/&
&input type=&button& value=&选择索引值等于3的元素.& id=&btn6&/&
&input type=&button& value=&选择索引值大于3的元素.& id=&btn7&/&
&input type=&button& value=&选择索引值小于3的元素.& id=&btn8&/&
&input type=&button& value=&选择所有的标题元素.& id=&btn9&/&
&input type=&button& value=&选择当前正在执行动画的所有元素.& id=&btn10&/&
&br /&&br /&
&!--测试的元素--&
93 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
97 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
99 &div class=&mini& title=&other&&class为mini，title为other&/div&
100 &div class=&mini& title=&test&&class为mini，title为test&/div&
101 &/div&
102 &div class=&one&&
103 &div class=&mini&&class为mini&/div&
104 &div class=&mini&&class为mini&/div&
105 &div class=&mini&&class为mini&/div&
106 &div class=&mini&&&/div&
107 &/div&
108 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
113 &/div&
114 &div style=&display:& class=&none&&style的display为“none”的div&/div&
115 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
118 &/div&
119 &span id=&mover&&正在执行的动画span元素&/span&
120 &/body&
121 &/html&
可见性过滤选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript&&
$(document).ready(function () {
$(&#reset&).click(function () {
window.location.reload();
//给id位mover的元素添加动画
function animateIt() {
$(&#mover&).slideToggle(&slow&, animateIt);
animateIt();
//选取所有不可见的元素包括&input type=&hidden&/&
$(&#btn_hidden&).click(function () {
alert(&不可见的元素有：& + $(&body:hidden&.length + &个\n& + &其中不可见的div元素有：& + $(&div:hidden&).length + &个\n&)
+ &其中文本隐藏域有：& + $(&input:hidden&).length + &个&);
//show方法是用于通过jQuery隐藏的元素，或者在css中声明为display：none的元素
//但不使用与visibility:hidden的元素
$(&div:hidden&).show(300).css(&background&, &#bbffaa&);
//选取所有可见的元素
$(&#btn_visible&).click(function () {
$(&div:visible&).css(&background&,&#FF6500&);
28 &/script&
&title&可见性过滤选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
54 &/head&
56 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&可见性过滤选择器.&/h3&
59 &!-- 控制按钮 --&
&input type=&button& value=&选取所有可见的div元素.& id=&btn_visible&/&
&input type=&button& value=&选取所有不可见的元素.包括&input type='hidden'/&和&div style='display:'&.& id=&btn_hidden&/&
&br /&&br /&
&!--测试的元素--&
65 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
69 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
71 &div class=&mini& title=&other&&class为mini，title为other&/div&
72 &div class=&mini& title=&test&&class为mini，title为test&/div&
74 &div class=&one&&
75 &div class=&mini&&class为mini&/div&
76 &div class=&mini&&class为mini&/div&
77 &div class=&mini&&class为mini&/div&
78 &div class=&mini&&&/div&
80 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
86 &div style=&display:& class=&none&&style的display为“none”的div&/div&
87 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
91 &span id=&mover&&正在执行的动画span元素&/span&
92 &/body&
93 &/html&
筛选(搜索)
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
div{font:normal 12px/17px A}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;width:100}
{ background:#FFF38F;}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#filterName&).keyup(function () {
$(&table tbody tr&)
.filter(&:contains('& + $(this).val() + &')&)//!
25 &/head&
30 &input id=&filterName& /&
33 &table&
&tr&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
&tr&&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr&&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr&&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr&&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&王六&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&李字&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&李四&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
48 &/table&
49 &/body&
50 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link href=&5-网页换肤css/default.css& rel=&stylesheet& type=&text/css& /&
&link href=&5-网页换肤css/skin_0.css& rel=&stylesheet& type=&text/css&
id=&cssfile&/&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& src=&jquery.cookie.js&&&/script&
&script type=&text/javascript&&
$(function () {
var $li = $(&#skin li&);
$li.click(function () {
switchSkin(this.id);
var cookie_skin = $.cookie(&MyCssSkin&);
if (cookie_skin) {
switchSkin(cookie_skin);
function switchSkin(skinName) {
$(&#& + skinName).addClass(&selected&)
.siblings().removeClass(&selected&);
$(&#cssfile&).attr(&href&, &5-网页换肤css/& + skinName + &.css&);
$.cooke(&MyCssSkin&, skinname, {path:'/',expires:10});
27 &/head&
29 &ul id=&skin&&
&li id=&skin_0& title=&灰色& class=&selected&&灰色&/li&
&li id=&skin_1& title=&紫色&&紫色&/li&
&li id=&skin_2& title=&红色&&红色&/li&
&li id=&skin_3& title=&天蓝色&&天蓝色&/li&
&li id=&skin_4& title=&橙色&&橙色&/li&
&li id=&skin_5& title=&淡绿色&&淡绿色&/li&
38 &div id=&div_side_0&&
&div id=&news&&
&h1 class=&title&&时事新闻&/h1&
&div id=&div_side_1&&
&div id=&game&&
&h1 class=&title&&娱乐新闻&/h1&
49 &/body&
50 &/html&
网页选项卡
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans- color:#666;}
.tab { width:240margin:50}
.tab_menu { clear:}
.tab_menu li { float: text-align: cursor: list-style: padding:1px 6 margin-right:4 background:#F1F1F1; border:1px solid #898989; border-bottom:}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear: border:1px solid #898989; height:100}
.hide{display:none}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
var $div_li = $(&div.tab_menu ul li&);
$div_li.click(function () {
$(this).addClass(&selected&)
.siblings().removeClass(&selected&);
var index = $div_li.index(this); // 获取当前点击的&li&元素 在 全部li元素中的索引。
$(&div.tab_box&div&)
//选取子节点。不选取子节点的话，会引起错误，如果里面还有div
.eq(index).show()
//显示 &li&元素对应的&div&元素
.siblings().hide();
//隐藏其它几个同辈的&div&元素
}).hover(function(){
$(this).addClass(&hover&);
},function(){
$(this).removeClass(&hover&);
34 &/head&
36 &div class=&tab&&
&div class=&tab_menu&&
&li class=&selected&&时事&/li&
&li&体育&/li&
&li&娱乐&/li&
&div class=&tab_box&&
&div&时事&/div&
&div class=&hide&&体育&/div&
&div class=&hide&&娱乐&/div&
50 &/body&
51 &/html&
层次选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function () {
//选择body内的所有div元素
$(&#btn1&).click(function () {
$(&body div&).css(&background&, &#bbffaa&);
//在body内的选择元素名是div的子元素
$(&#btn2&).click(function () {
$(&body&div&).css(&background&, &#bbffaa&);
//选择所有class为one的下一个子元素
$(&#btn3&).click(function () {
$(&.one+div&).css(&background&, &#bbffaa&);
//选择id为two的元素后面的所有div兄弟元素
$(&#btn4&).click(function () {
$(&#two~div&).css(&background&,&#bbffaa&);
25 &/script&
&title&层次选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
51 &/head&
53 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&层次选择器.&/h3&
56 &!-- 控制按钮 --&
&input type=&button& value=&选择 body内的所有div元素.& id=&btn1&/&
&input type=&button& value=&在body内,选择子元素是div的.& id=&btn2&/&
&input type=&button& value=&选择 所有class为one 的下一个div元素.& id=&btn3&/&
&input type=&button& value=&选择 id为two的元素后面的所有div兄弟元素.& id=&btn4&/&
&br /&&br /&
63 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
67 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
69 &div class=&mini& title=&other&&class为mini，title为other&/div&
70 &div class=&mini& title=&test&&class为mini，title为test&/div&
72 &div class=&one&&
73 &div class=&mini&&class为mini&/div&
74 &div class=&mini&&class为mini&/div&
75 &div class=&mini&&class为mini&/div&
76 &div class=&mini&&&/div&
78 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
84 &div style=&display:& class=&none&&style的display为“none”的div&/div&
85 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
89 &span id=&mover&&正在执行的动画span元素&/span&
90 &/body&
91 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{margin:0;padding:0;}
div.centent
float: text-align: margin:10
display: margin:2px 2padding:4px 10
background:#898989;
font-size:12
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
//移动到右边
$(&#add&).click(function () {
//获取选中的选项，删除并追加给对方
$(&#select1 option:selected&).appendTo(&#select2&);//appentTo方法，追加给另一个元素，同时将原先的内容删除
//移到左边
$(&#remove&).click(function () {
$(&#select2 option:selected&).appendTo(&#select1&);
//全部移到右边
$(&#add_all&).click(function () {
$(&#select1 option&).appendTo(&#select2&);
//全部移到左边
$(&#remove_all&).click(function () {
//获取全部的选项，删除并追加给对方
$(&#select2 option&).appendTo(&#select1&);
//双击选项
$(&#select1&).dblclick(function () {
//获取全部的选项，删除并追加给对方
$(&option:selected&, this).appendTo(&#select2&);
//追加给对方
//双击选项删除
$(&#select2&).dblclick(function () {
$(&option:selected&, this).appendTo(&#select1&);
52 &/head&
54 &div class=¢ent&&
&select multiple=&multiple& id=&select1& style=&width:100height:160&&
&option value=&1&&选项1&/option&
&option value=&2&&选项2&/option&
&option value=&3&&选项3&/option&
&option value=&4&&选项4&/option&
&option value=&5&&选项5&/option&
&option value=&6&&选项6&/option&
&option value=&7&&选项7&/option&
&span id=&add&&选中添加到右边&&&/span&
&span id=&add_all&&全部添加到右边&&&/span&
69 &div class=¢ent&&
&select multiple=&multiple& id=&select2& style=&width:100 height:160&&
&option value=&8&&选项8&/option&
&span id=&remove&&&&选中删除到左边&/span&
&span id=&remove_all&&&&全部删除到左边&/span&
78 &/body&
79 &/html&
基本选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$(&#one&).css(&background&,&#bfa&);
//选择 class 为 mini 的所有元素
$(&#btn2&).click(function(){
$(&.mini&).css(&background&,&#bfa&);
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css(&background&,&#bfa&);
//选择 所有的元素
$('#btn4').click(function(){
$('*').css(&background&,&#bfa&);
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css(&background&, &#bfa&);
29 &/script&
&title&&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
55 &/head&
57 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&基本选择器.&/h3&
60 &!-- 控制按钮 --&
&input type=&button& value=&选择 id为 one 的元素.& id=&btn1&/&
&input type=&button& value=&选择 class 为 mini 的所有元素.& id=&btn2&/&
&input type=&button& value=&选择 元素名是 div 的所有元素.& id=&btn3&/&
&input type=&button& value=&选择 所有的元素.& id=&btn4&/&
&input type=&button& value=&选择 所有的span元素和id为two的元素.& id=&btn5&/&
&br /&&br /&
68 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
72 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
74 &div class=&mini& title=&other&&class为mini，title为other&/div&
75 &div class=&mini& title=&test&&class为mini，title为test&/div&
77 &div class=&one&&
78 &div class=&mini&&class为mini&/div&
79 &div class=&mini&&class为mini&/div&
80 &div class=&mini&&class为mini&/div&
81 &div class=&mini&&&/div&
83 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
89 &div style=&display:& class=&none&&style的display为“none”的div&/div&
90 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
94 &span id=&mover&&正在执行的动画span元素&/span&
95 &/body&
96 &/html&
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见}
锋利的jquery自我练习代码
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script src=&jquery-1.7.js& type=&text/javascript&&
&script type=&text/javascript&&
//使用DOM方式判断
$(document).ready(function () {//等待do元素加载完毕
/* var $cr = $(&#cr&);
//jquery对象
var cr = $cr[0]; //dom对象，或者$cr.get(0)
$cr.click(function () {
if (cr.checked)
//DOM方式判断
alert(&感谢您的支持！使用DOM方式判断&);
//使用JQuery方式判断
$(document).ready(function () {
var $cr = $(&#cr&);
$cr.click(function () {
if ($cr.is(&:checked&)) {
alert(&感谢您的支持，使用JQuery方式判断&)
27 &/head&
29 &input type=&checkbox& id=&cr& /&
30 &label for=&cr&&我已经阅读了上面的制度&/label&
31 &/body&
32 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
6 &script src=&jquery-1.7.js& type=&text/javascript&&&/script&
7 &script type=&text/javascript&&
$(function () {
//这是$(document).ready(function(){})的缩写
$(&#address&).focus(function(){
//地址框获得鼠标焦点
var txt_value=$(this).val();
//得到当前文本框的值
if(txt_value==this.defaultValue){
//defaultvalue获取或设置文本框的初始值
$(this).val(&&);
//如果符合条件则清空文本框内容
$(&#address&).blur(function(){
//地址框失去鼠标焦点
var txt_value=$(this).val();
//得到当前文本框内容
if(txt_value==&&){
$(this).val(this.defaultValue);
//如果符合条件，则设置内容(defualutvalue是文本框的初始值)
$(&#password&).focus(function(){
var txt_value=$(this).val();
if(txt_value==this.defaultValue){
$(this).val(&&);
$(&#password&).blur(function(){
var txt_value=$(this).val();
if(txt_value==&&){
$(this).val(this.defaultValue);
34 &/script&
36 &div style=&
width:350 margin: 30 border:2px solid # &&
37 &span&请输入邮箱地址：&/span&&input type=&text& id=&address& value=&请输入邮箱地址& /&&br /&&br /&
38 &span&请输入邮箱密码：&/span&&input type=&text& id=&password& value=&请输入邮箱密码& /&&br /&&br /&
39 &input type=&button& value=&登录& /&
41 &/body&
42 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 40
background: #
font: 80% Arial, Helvetica, sans-
color: #555;
line-height: 180%;
margin: 0;
padding: 0;
list-style:
margin-right: 10
border: 1px solid #AAAAAA;
/* tooltip */
border: 1px solid #
background: #333;
padding: 2
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& &
$(function () {
var x = 10; var y = 20;
$(&a.tooltip&).mouseover(function (e) {
this.myTitle = this.
this.title = &&;
var imgTitle = this.myTitle ? &&/br&& + this.myTitle : &&;
var tooltip = &&div id='tooltip'&&img src='& + this.href + &'alt='产品预览图'/&& + imgTitle + &&/div&&
$(&body&).append(tooltip);
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
.show(&fast&);
.mouseout(function () {
this.title = this.myT
$(&#tooltip&).remove();
.mousemove(function (e) {
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
74 &/head&
有效果：&/h3&
&li&&a href=&images/apple_1_bigger.jpg& class=&tooltip& title=&苹果 iPod&&
&img src=&images/apple_1.jpg& alt=&苹果 iPod& /&&/a&&/li&
&li&&a href=&images/apple_2_bigger.jpg& class=&tooltip& title=&苹果 iPod nano&&
&img src=&images/apple_2.jpg& alt=&苹果 iPod nano& /&&/a&&/li&
&li&&a href=&images/apple_3_bigger.jpg& class=&tooltip& title=&苹果 iPhone&&
&img src=&images/apple_3.jpg& alt=&苹果 iPhone& /&&/a&&/li&
&li&&a href=&images/apple_4_bigger.jpg& class=&tooltip& title=&苹果 Mac&&
&img src=&images/apple_4.jpg& alt=&苹果 Mac& /&&/a&&/li&
无效果：&/h3&
&li&&a href=&images/apple_1_bigger.jpg& title=&苹果 iPod&&
&img src=&images/apple_1.jpg& alt=&苹果 iPod& /&&/a&&/li&
&li&&a href=&images/apple_2_bigger.jpg& title=&苹果 iPod nano&&
&img src=&images/apple_2.jpg& alt=&苹果 iPod nano& /&&/a&&/li&
&li&&a href=&images/apple_3_bigger.jpg& title=&苹果 iPhone&&
&img src=&images/apple_3.jpg& alt=&苹果 iPhone& /&&/a&&/li&
&li&&a href=&images/apple_4_bigger.jpg& title=&苹果 Mac&&
&img src=&images/apple_4.jpg& alt=&苹果 Mac& /&&/a&&/li& &/ul&
100 &/body&
101 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
padding:40
background:#
font:80% Arial, Helvetica, sans-
color:#555;
line-height:180%;
padding:.5em 0;
19 /* tooltip */
20 #tooltip{
border:1px solid #333;
background:#f7f5d1;
color:#333;
28 &/style&
29 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
30 &script type=&text/javascript&&
$(function () {
var x = 10; var y = 20;
$(&a.tooltip&)
.mouseover(function (e) {
this.myTitle = this.
this.title = &&;
var tooltip = &&div id='tooltip'&& + this.myTitle + &&/div&&; //创建div元素
$(&body&).append(tooltip); //添加到body下面
$(&tooltip&).css({
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
.show(&fast&);
.mouseout(function () {
this.title = this.myT
$(&#tooltip&).remove();
$(&a.tooltip&).mousemove(function (e) {
$(&#tooltip&)
&top&: (e.pageY + y) + &px&,
&left&: (e.pageX + x) + &px&
57 &/script&
58 &/head&
60 &p&&a href=&#&
class=&tooltip& title=&这是我的超链接提示1&&提示1&/a&&/p&
61 &p&&a href=&#&
class=&tooltip& title=&这是我的超链接提示2&&提示1&/a&&/p&
62 &p&&a href=&#& title=&这是自带提示&1&自带提示1&/a&&/p&
63 &p&&a href=&#& title=&这是自带提示2&&自带提示2&/a&&/p&
64 &/body&
65 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&.head&).bind(&click&, function () { //$(&#panel h5.head&)一样
var $content = $(this).next();
//就是获得$(&.content&)
if ($content.is(&:visible&)) {
$content.hide();
$content.show();
19 &/head&
21 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:100 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display:&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
29 &/body&
30 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#panel h5.head&).bind(&mouseover&,function(){
var $content=$(this).next(&&);
$content.show();
$(&#panel h5.head&).bind(&mouseout&, function () {
//var $content=$(this).next();
// $content.hide();
$(this).next().hide();
19 &/head&
21 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:10 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display: width:200 margin:0&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。&br /&
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
29 &/body&
30 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&.head&).mouseover(function () {
$(&.content&).show()
//分号的作用，在这里添加一个分号的话，下面的代码没有作用，页面没反应，需要在下面的方法中加上$(&.head&)。不加分号则不需要
.mouseout(function(){
$(&.content&).hide();
16 &/head&
18 &div id=&panel&&
&h5 class=&head&style=& background-color:#AAAAAA; cursor: border:1 margin:10 width:200&&什么是jQuery?&/h5&
&div class=&content& style=&display: width:200 margin:0&&
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。&br /&
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
26 &/body&
27 &/html&
tigger方法
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &style type=&text/css&&
5 *{margin:0;padding:0;}
6 body { font-size: 13 line-height: 130%; padding: 60 }
7 p {width:200background:#888;color:height:16}
8 &/style&
9 &script src=&jquery-1.7.js& type=&text/javascript&&&/script&
10 &script type=&text/javascript&&
$(function () {
$(&#btn&).bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数1&/p&&);
.bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数2&/p&&);
.bind(&click&, function () {
$(&#test&).append(&&p&我的绑定函数3&/p&&);
$(&#btn&).trigger(&click&);//模拟操作，这里是模拟进行了click操作
$(&#btn&).bind(&myClick&, function () {
$(&#test&).append(&&p&我的自定义事件&/p&&);
$(&#btn&).trigger(&myClick&);
27 &/script&
&title&&/title&
29 &/head&
31 &button id=&btn&&点击我&/button&
32 &div id=&test&&&/div&
33 &/body&
34 &/html&
tigger传递参数
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#btn&).bind(&myClick&, function (event, message1, message2) {
$(&#test&).append(&&p&& + message1 + message2 + &&/p&&);
//trigger调用自定义事件
$('#btn').click(function(){
$(this).trigger(&myClick&,[&我的自定义&,&事件&])
.trigger(&myClick&, [&我的自定义&, &事件&]);
18 &/head&
20 &button id=&btn&&点击我&/button&
21 &div id=&test&&&/div&
22 &/body&
23 &/html&
绑定事件的多个类型
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
background: #888;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&div&).bind(&mouseover mouseout&, function () {
$(this).toggleClass(&over&);//实现当有over类时删除，没有时添加
20 &/head&
&div style=&width: 100 height: 50&&
滑入.&/div&
24 &/body&
25 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&style type=&text/css&&
margin: 0;
padding: 0;
padding: 60
width: 100
height: 100
border: 1px solid #0050D0;
background: #96E555;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#panel&).css(&opacity&, &0.5&);
$(&div&).bind(&click&, function () {
$(this).animate({ left: &400px&, height: &200px&, opacity: &1& }, 3000)
.animate({ top: &200px&, width: &200px& }, 3000)
.fadeOut(&slow&)
&title&&/title&
36 &/head&
&div id=&panel&&
40 &/body&
41 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link type=&text/css& href=&style.css& rel=&Stylesheet& /&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
var page = 1; var i = 4;
//每版放四个图片
//向后按钮
$(&span.next&).bind(&click&, function () {
var $parent = $(this).parents(&div.v_show&);//等价于 $(&div.v_show&)////根据当前点击元素获取到父元素
var $v_show = $parent.find(&div.v_content_list&); //寻找到“视频内容展示区域”
var $v_content = $parent.find(&div.v_content&); //寻找到视频内容展示区外围的div元素
var v_width = $v_content.width();
//展示区的宽度
var len = $v_show.find(&li&).
//返回&li&的个数
var page_count = Math.ceil(len/i);
//获得最大的整数(表示一共是多少版)
if (!$v_show.is(&:animated&)) {
//判断视频内容展示区域是否处于动画
//如果处于动画状态，则不再添加动画，如果不处于动画状态则添加一个动画状态
//这样就解决了连续单击按钮，动画乱跳的bug，即保证一次单击只进行一个动画，动画完毕后才可以执行下一个动画
if (page == page_count) {
//已经到最后一个版面了，如果再往后，就必须跳转到第一个版面
$v_show.animate({ left: &0& }, &slow&); //通过改变left值，跳转到第一个版面
$v_show.animate({ left: &-=& + v_width }, &slow&);
//通过改变left值，达到每次换一个版面
$parent.find(&span&).eq((page - 1)).addClass(¤t&).siblings().removeClass(¤t&);
//往前按钮
$(&span.prev&).bind(&click&,function(){
var $parent=$(this).parents(&div.v_show&);
//根据当前点击元素获取到父元素
var $v_show=$parent.find(&div.v_content_list&);
//寻找到视频内容展示区域
var $v_content=$parent.find(&div.v_content&);
//寻找到视频内容展示区域 外围的div元素
var v_width=$v_content.width();
var len=$v_show.find(&li&).
var page_count=Math.ceil(len/i);
if(!$v_show.is(&:animated&)){
if(page==1){
$v_show.animate({left:'-='+v_width*(page_count-1)},&slow&);
$v_show.animate({left:'+='+v_width},&slow&);
$parent.find(&span&).eq((page-1)).addClass(&currnet&).siblings().removeClass(¤t&);
53 &/head&
55 &div class=&v_show&&
&div class=&v_caption&&
&h2 class=&cartoon& title=&卡通动漫&&卡通动漫&/h2&
&div class=&highlight_tip&&
&span class=¤t&&1&/span&&span&2&/span&&span&3&/span&&span&4&/span&
&div class=&change_btn&&
&span class=&prev& &上一页&/span&
&span class=&next&&下一页&/span&
&em&&a href=&#&&更多&&&/a&&/em&
&div class=&v_content&&
class=&v_content_list&&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/01.jpg& alt=&海贼王& /&&/a&&h4&&a href=&#&&海贼王&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/02.jpg& alt=&哆啦A梦& /&&/a&&h4&&a href=&#&&哆啦A梦&/a&&/h4&&span&播放:&em&33,326&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/03.jpg& alt=&火影忍者& /&&/a&&h4&&a href=&#&&火影忍者&/a&&/h4&&span&播放:&em&28,276&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
&li&&a href=&#&&&img src=&img/04.jpg& alt=&龙珠& /&&/a&&h4&&a href=&#&&龙珠&/a&&/h4&&span&播放 &em&57,865&/em&&/span&&/li&
91 &/body&
92 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
padding: 60
width: 100
height: 100
border: 1px solid #0050D0;
background: #96E555;
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(&#panel&).hover(function () {
$(this).stop(true)
.animate({ height: &150px& }, 200)
.animate({ width: &300& }, 300);
}, function () {
$(this).stop(true)
.animate({ height: &22& }, 200)
.animate({width:&60px&},300);
37 &/head&
&div id=&panel&&&/div&
40 &/body&
41 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
font-size: 13
line-height: 130%;
padding: 60
width: 220
border: 1px solid #0050D0;
background: #96E555;
width: 200
margin: 10
background: #666666;
width: 200
background: #888;
height: 16
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
//为span元素绑定click事件
$(&span&).bind(&click&, function (event) {
var txt = $(&#msg&).html() + &&p&内层span元素被点击&/p&&;
$(&#msg&).html(txt);
event.stopPropagation();// 停止冒泡事件
return false; //为event.stopPropagation()和event.preventDefault()的缩写
// 为div元素绑定click事件
$('#content').bind(&click&, function (event) {
var txt = $('#msg').html() + &&p&外层div元素被点击.&p/&&;
$('#msg').html(txt);
event.stopPropagation();
// 为body元素绑定click事件
$(&body&).bind(&click&, function () {
var txt = $('#msg').html() + &&p&body元素被点击.&p/&&;
$('#msg').html(txt);
64 &/head&
&div id=&content&&
外层div元素 &span&内层span元素&/span& 外层div元素
&div id=&msg&&
71 &/body&
72 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link type=&text/css& rel=&Stylesheet& href=&5style.css& /&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& &
$(function () {
//如果是必须填写的，则加红星标识
$(&form :input.required&).each(function () {
var $required = $(&&strong class='high'&*&/strong&&); //创建元素
$(this).parent().append($required); //追加到文档中(div中)
//文本框失去焦点后
$(&form :input&).blur(function () {
var $parent = $(this).parent();
$parent.find(&.formtips&).remove(); //从它的父元素中寻找满足条件的值并删除之前的提醒，避免重复
//验证用户名
if ($(this).is(&#username&)) { //判断该控件是否是用户名控件(通过id值判断)
if (this.value == && || this.value.length & 6) {
var errorMsg = &请输入至少六位用户名：&;
$parent.append(&&span class='formtips onError'&& + errorMsg + &&/span&&);
var okMsg = &输入正确&;
$parent.append(&&span class='formtips onSuccess'&& + okMsg + &&/span&&);
//验证邮件
if ($(this).is(&#email&)) {
if (this.value == && || this.value !==&&&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) {
var errorMsg = &请输入正确的E-Mail地址&;
$parent.append(&&span class='formtips onError'&& + errorMsg + &&/span&&);
var okMsg = '输入正确.';
$parent.append('&span class=&formtips onSuccess&&' + okMsg + '&/span&');
}).keyup(function () {
$(this).triggerHandler(&blur&);
}).focus(function () {
$(this).triggerHandler(&blur&);
//提交，最终验证
$(&#send&).click(function () {
$(&form :input.requried&).trigger(&blur&);
var numError = $(&form.onError&).
if (numError)
{ return false; }
alert(&注册成功，密码已经发送到你的邮箱，请查收&);
$(&#res&).click(function () {
$(&.formtips&).remove();
57 &/head&
59 &form method=&post& action=&&&
&div class=&int&&
&label for=&username&&用户名：&/label&
&input type=&text& id=&username& class=&required& /&
&div class=&int&&
&label for=&email&&邮箱：&/label&
&input type=&text& id=&email& class=&required& /&
&div class=&int&&
&label for=&personinfo&&个人资料:&/label&
&input type=&text& id=&personinfo& /&
&div class=&sub&&
&input type=&submit& value=&提交& id=&send& /&
&input type=&reset& id=&res& /&
76 &/form&
77 &/body&
78 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;}
{ background:#FFF38F;}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&tbody&tr:odd&).addClass(&odd&);
$(&tbody&tr:even&).addClass(&even&);
$(&tbody&tr&).click(function () {
//判断当前是否选中
var hasSelected = $(this).hasClass(&selected&);
//如果选中，则移除selected类，否则就加上selected类
$(this)[hasSelected ? &removeClass& : &addClass&](&selected&)
//查找内部的checkbox，设置对应的属性
.find(&:checkbox&).attr(&checked&, !hasSelected);
//如果复选框默认情况下是选择的，则高色
$(&tbody&tr:has(:checked)&).addClass(&selected&);
30 &/head&
32 &table&
33 &thead&
&tr&&th&&/th&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
35 &/thead&
36 &tbody&
37 &tr&&td&&input type=&checkbox& name=&choice& value=&&/&&/td&
&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& checked='checked' /&&/td&
&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&&input type=&checkbox& name=&choice& value=&& /&&/td&
&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
49 &/tbody&
51 &/table&
52 &/body&
53 &/html&
表格折叠展开
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;width:100}
{ background:#FFF38F;cursor:}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&tr.parent&).click(function () {
//获得class=parent的行，所谓的父行
$(this).toggleClass(&selected&)
//添加删除高亮
.sibings(&.child_& + this.id).toggle(); //隐藏/显示所谓的子行;toggle切换元素的可见状态
/* var $hidde = $(this).next().attr(&class&);
$(&tr&).filter(&.&+$hidde).toggle();*/
//这个方法同样可以隐藏子行。
}); //siblings()不带参数时获得匹配元素的同胞元素。不包含该匹配元素，只返回同胞元素
24 &/head&
26 &table&
27 &thead&
&tr&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
30 &tbody&
&tr class=&parent& id=&row_01&&&td colspan=&3&&前台设计组&/td&&/tr&
&tr class=&child_row_01&&&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr class=&child_row_01&&&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr class=&parent& id=&row_02&&&td colspan=&3&&前台开发组&/td&&/tr&
&tr class=&child_row_02&&&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr class=&child_row_02&&&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr class=&parent& id=&row_03&&&td colspan=&3&&后台开发组&/td&&/tr&
&tr class=&child_row_03&&&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr class=&child_row_03&&&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
43 &/table&
44 &/body&
45 &/html&
全选复选框
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#CheckedAll&).click(function () {
//所有checkbox跟着全选的checkbox走
$('[name=items]:checkbox').attr(&checked&,this.checked);
$(&[name=items]:checkbox&).click(function () {
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率
var $tmp = $(&[name=items]:checkbox&);
//用filter方法筛选出选中的复选框，并直接给checkedAll赋值
$(&#CheckedAll&).attr(&checked&, $tmp.length == $tmp.filter(&:checkd&).length);
$(&#send&).click(function () {
var str = &您选中的是：\r\n&;
$(&[name=items]:checkbox:checked&).each(function () {
str += $(this).val() + &\r\n&;
alert(str);
28 &/head&
30 &form method=&post& action=&#&&
你爱好的运动是？&input type=&checkbox& id=&CheckedAll& /&全选/全不选&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/&&br /&
&input type=&button& id=&send& value=&提 交&/&
37 &/form&
38 &/body&
39 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &!--引入prototype--&
5 &script type=&text/javascript& src=&&&&/script&
6 &!--引入JQuery--&
7 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&title&&/title&
11 &p id=&pp&&text------prototype&/p&
12 &p&text---JQuery&/p&
13 &!--JQuery库在其他库之后导入--&
14 &script type=&text/javascript&&
jQuery.noConflict(); //将变量$的控制权交给prototype.js
//var $j = jQuery.noC//自定义一个快捷方式
jQuery(function () {
jQuery(&p&).click(function () {
alert(jQuery(this).text());
$(&pp&).style.display = 'none';//使用prototype
23 &/script&
24 &/body&
25 &/html&
判断对象是否存在
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&script type=&text/javascript& src=&jquery-1.7.js&&
9 &script type=&text/javascript&&
//1--根据获取到的元素的长度判断，元素是否存在
$(document).ready(function () {
if ($(&#tt&).length & 0) {
//do something
//2--转化成DOM元素对象判断，元素是否存在
if ($(&#tt&)[0]) {
//do something
//3--不能用这样的方法判断一个元素是否存在
if ($(&tt&)) {
//do something
24 &/script&
25 &/body&
26 &/html&
属性选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& src=&assist.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function () {
//选取含有属性title的div元素
$(&#btn1&).click(function () {
$(&div[title]&).css(&background&, &#bbffaa&);
//选取属性为title值等于test的div元素
$(&#btn2&).click(function () {
$(&div[title=test]&).css(&background&, &#bbffaa&);
//选取 属性title值不等于 test 的div元素.
$('#btn3').click(function () {
$('div[title!=test]').css(&background&, &#bbffaa&);
//选取 属性title值 以 te 开始 的div元素.
$('#btn4').click(function () {
$('div[title^=te]').css(&background&, &#bbffaa&);
//选取 属性title值 以 est 结束 的div元素.
$('#btn5').click(function () {
$(&div[title$=est]&).css(&background&, &#bbffaa&);
//选取 属性title值 含有 es
的div元素.
$('#btn6').click(function () {
$(&div[title*=es]&).css(&background&, &#bbffaa&);
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$('#btn7').click(function () {
$(&div[id][title*=es]&).css(&background&, &#bbffaa&);
&title&属性选择器&/title&
&style type=&text/css&&
div, span, p
width: 140
height: 140
background: #
border: #000 1
font-size: 17
font-family: V
height: 55
background-color: #
font-size: 12
63 &/head&
&button id=&reset&&
手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked& /&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&
属性选择器.&/h3&
&!-- 控制按钮 --&
&input type=&button& value=&选取含有 属性title 的div元素.& id=&btn1& /&
&input type=&button& value=&选取 属性title值等于“test”的div元素.& id=&btn2& /&
&input type=&button& value=&选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).& id=&btn3& /&
&input type=&button& value=&选取 属性title值 以“te”开始 的div元素.& id=&btn4& /&
&input type=&button& value=&选取 属性title值 以“est”结束 的div元素.& id=&btn5& /&
&input type=&button& value=&选取 属性title值 含有“es”的div元素.& id=&btn6& /&
&input type=&button& value=&组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素.&
id=&btn7& /&
&!--测试的元素--&
&div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&
class为mini&/div&
&div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
&div class=&mini& title=&other&&
class为mini，title为other&/div&
&div class=&mini& title=&test&&
class为mini，title为test&/div&
&div class=&one&&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
&div class=&one&&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini&&
class为mini&/div&
&div class=&mini& title=&tesst&&
class为mini，title为tesst&/div&
&div style=&display:& class=&none&&
style的display为“none”的div&/div&
&div class=&hide&&
class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
&span id=&mover&&正在执行的动画span元素&/span&
123 &/body&
124 &/html&
第二章案例
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{margin:0;padding:0}
body{font-size:13text-align:}
a{ color:#04D; text-decoration:}
a:hover{color:#F50;text-decoration:}
.SubCategoryBox{width:600 margin:0 text-align: margin-top:40}
.SubCategoryBox ul{list-style:}
.SubCategoryBox ul li{ display: float: width:200 line-height:20}
.showmore{clear: text-align:padding-top:10}
.showmore a{ display: width:120 margin:0 line-height:24 border:1px solid #AAA;}
.showmore a span{ padding-left:15 background:url() no-repeat 0 0;}
.promoted a{color:#F50;}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)');
获得索引值大于5的品牌集合对象(除最后一条)
$category.hide();
隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore & a');
获取“显示全部品牌”按钮
$toggleBtn.click(function () {
if ($category.is(&:visible&)) {
$category.hide();
隐藏$category
$('.showmore a span')
.css(&background&, &url(img/down.gif) no-repeat 0 0&)
.text(&显示全部品牌&);
//改变背景图片和文本
$('ul li').removeClass(&promoted&);
// 去掉高亮样式
$category.show();
显示$category
$('.showmore a span')
.css(&background&, &url(img/up.gif) no-repeat 0 0&)
.text(&精简显示品牌&);
//改变背景图片和文本
$('ul li').filter(&:contains('佳能'),:contains('尼康'),:contains('奥林巴斯')&)
.addClass(&promoted&);
//添加高亮样式
return false;
//超链接不跳转
43 &/head&
45 &div class=&SubCategoryBox&&
&ul&&li &&a href=&#&&佳能&/a&&i&(30440) &/i&&/li&
&li &&a href=&#&&索尼&/a&&i&(27220) &/i&&/li&
&li &&a href=&#&&三星&/a&&i&(20808) &/i&&/li&
&li &&a href=&#&&尼康&/a&&i&(17821) &/i&&/li&
&li &&a href=&#&&松下&/a&&i&(12289) &/i&&/li&
&li &&a href=&#&&卡西欧&/a&&i&(8242) &/i&&/li&
&li &&a href=&#&&富士&/a&&i&(14894) &/i&&/li&
&li &&a href=&#&&柯达&/a&&i&(9520) &/i&&/li&
&li &&a href=&#&&宾得&/a&&i&(2195) &/i&&/li&
&li &&a href=&#&&理光&/a&&i&(4114) &/i&&/li&
&li &&a href=&#&&奥林巴斯&/a&&i&(12205) &/i&&/li&
&li &&a href=&#&&明基&/a&&i&(1466) &/i&&/li&
&li &&a href=&#&&爱国者&/a&&i&(3091) &/i&&/li&
&li &&a href=&#&&其它品牌相机&/a&&i&(7275) &/i&&/li&
&div class=&showmore&&
&a href=&#&&&span&显示全部品牌&/span&&/a&
65 &/body&
66 &/html&
基本顾虑选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function () {
//选择第一个div元素
$(&#btn1&).click(function () {
$(&div:first&).css(&background&, &#bfa&);
//选择最后一个div元素
$(&#btn2&).click(function () {
$(&div:last&).css(&background&, &#bfa&);
//选择class不为one的所有div元素
$(&#btn3&).click(function () {
$(&div:not(.one)&).css(&background&, &#bfa&);
//选择索引值为偶数的div元素
$(&#btn4&).click(function () {
$(&div:even&).css(&background&, &#bfa&);
//选择索引值为奇数的div元素
$(&#btn5&).click(function () {
$(&div:odd&).css(&background&, &#bfa&);
//选择索引值等于3的div元素
$(&#btn6&).click(function () {
$(&div:eq(3)&).css(&background&, &#bfa&);
//选择索引值大于3的div元素
$(&btn7&).click(function () {
$(&div:gt(3)&).css(&background&,&#bfa&);
//选择索引值小于3的div元素
$(&btn8&).click(function () {
$(&div:lt(3)&).css(&background&, &#bfa&);
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
$(':header').css(&background&,&#bfa&);
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
$(':animated').css(&background&,&#bfa&);
49 &/script&
&title&基本过滤选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
75 &/head&
77 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&基本过滤选择器.&/h3&
80 &!-- 控制按钮 --&
&input type=&button& value=&选择第一个div元素.& id=&btn1&/&
&input type=&button& value=&选择最后一个div元素.& id=&btn2&/&
&input type=&button& value=&选择class不为one的 所有div元素.& id=&btn3&/&
&input type=&button& value=&选择索引值为偶数 的div元素.& id=&btn4&/&
&input type=&button& value=&选择索引值为奇数 的div元素.& id=&btn5&/&
&input type=&button& value=&选择索引值等于3的元素.& id=&btn6&/&
&input type=&button& value=&选择索引值大于3的元素.& id=&btn7&/&
&input type=&button& value=&选择索引值小于3的元素.& id=&btn8&/&
&input type=&button& value=&选择所有的标题元素.& id=&btn9&/&
&input type=&button& value=&选择当前正在执行动画的所有元素.& id=&btn10&/&
&br /&&br /&
&!--测试的元素--&
93 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
97 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
99 &div class=&mini& title=&other&&class为mini，title为other&/div&
100 &div class=&mini& title=&test&&class为mini，title为test&/div&
101 &/div&
102 &div class=&one&&
103 &div class=&mini&&class为mini&/div&
104 &div class=&mini&&class为mini&/div&
105 &div class=&mini&&class为mini&/div&
106 &div class=&mini&&&/div&
107 &/div&
108 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
113 &/div&
114 &div style=&display:& class=&none&&style的display为“none”的div&/div&
115 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
118 &/div&
119 &span id=&mover&&正在执行的动画span元素&/span&
120 &/body&
121 &/html&
可见性过滤选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript&&
$(document).ready(function () {
$(&#reset&).click(function () {
window.location.reload();
//给id位mover的元素添加动画
function animateIt() {
$(&#mover&).slideToggle(&slow&, animateIt);
animateIt();
//选取所有不可见的元素包括&input type=&hidden&/&
$(&#btn_hidden&).click(function () {
alert(&不可见的元素有：& + $(&body:hidden&.length + &个\n& + &其中不可见的div元素有：& + $(&div:hidden&).length + &个\n&)
+ &其中文本隐藏域有：& + $(&input:hidden&).length + &个&);
//show方法是用于通过jQuery隐藏的元素，或者在css中声明为display：none的元素
//但不使用与visibility:hidden的元素
$(&div:hidden&).show(300).css(&background&, &#bbffaa&);
//选取所有可见的元素
$(&#btn_visible&).click(function () {
$(&div:visible&).css(&background&,&#FF6500&);
28 &/script&
&title&可见性过滤选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
54 &/head&
56 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&可见性过滤选择器.&/h3&
59 &!-- 控制按钮 --&
&input type=&button& value=&选取所有可见的div元素.& id=&btn_visible&/&
&input type=&button& value=&选取所有不可见的元素.包括&input type='hidden'/&和&div style='display:'&.& id=&btn_hidden&/&
&br /&&br /&
&!--测试的元素--&
65 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
69 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
71 &div class=&mini& title=&other&&class为mini，title为other&/div&
72 &div class=&mini& title=&test&&class为mini，title为test&/div&
74 &div class=&one&&
75 &div class=&mini&&class为mini&/div&
76 &div class=&mini&&class为mini&/div&
77 &div class=&mini&&class为mini&/div&
78 &div class=&mini&&&/div&
80 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
86 &div style=&display:& class=&none&&style的display为“none”的div&/div&
87 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
91 &span id=&mover&&正在执行的动画span元素&/span&
92 &/body&
93 &/html&
筛选(搜索)
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
{ border:0;border-collapse:}
div{font:normal 12px/17px A}
{ font:normal 12px/17px Apadding:2width:100}
{ font:bold 12px/17px Atext-align:padding:4border-bottom:1px solid #333;width:100}
{ background:#FFF38F;}
/* 偶数行样式*/
{ background:#FFFFEE;}
/* 奇数行样式*/
{ background:#FF6500;color:#}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
$(&#filterName&).keyup(function () {
$(&table tbody tr&)
.filter(&:contains('& + $(this).val() + &')&)//!
25 &/head&
30 &input id=&filterName& /&
33 &table&
&tr&&th&姓名&/th&&th&性别&/th&&th&暂住地&/th&&/tr&
&tr&&td&张山&/td&&td&男&/td&&td&浙江宁波&/td&&/tr&
&tr&&td&李四&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&王五&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
&tr&&td&找六&/td&&td&男&/td&&td&浙江温州&/td&&/tr&
&tr&&td&Rain&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&MAXMAN&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&王六&/td&&td&男&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&李字&/td&&td&女&/td&&td&浙江杭州&/td&&/tr&
&tr&&td&李四&/td&&td&男&/td&&td&湖南长沙&/td&&/tr&
48 &/table&
49 &/body&
50 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&link href=&5-网页换肤css/default.css& rel=&stylesheet& type=&text/css& /&
&link href=&5-网页换肤css/skin_0.css& rel=&stylesheet& type=&text/css&
id=&cssfile&/&
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript& src=&jquery.cookie.js&&&/script&
&script type=&text/javascript&&
$(function () {
var $li = $(&#skin li&);
$li.click(function () {
switchSkin(this.id);
var cookie_skin = $.cookie(&MyCssSkin&);
if (cookie_skin) {
switchSkin(cookie_skin);
function switchSkin(skinName) {
$(&#& + skinName).addClass(&selected&)
.siblings().removeClass(&selected&);
$(&#cssfile&).attr(&href&, &5-网页换肤css/& + skinName + &.css&);
$.cooke(&MyCssSkin&, skinname, {path:'/',expires:10});
27 &/head&
29 &ul id=&skin&&
&li id=&skin_0& title=&灰色& class=&selected&&灰色&/li&
&li id=&skin_1& title=&紫色&&紫色&/li&
&li id=&skin_2& title=&红色&&红色&/li&
&li id=&skin_3& title=&天蓝色&&天蓝色&/li&
&li id=&skin_4& title=&橙色&&橙色&/li&
&li id=&skin_5& title=&淡绿色&&淡绿色&/li&
38 &div id=&div_side_0&&
&div id=&news&&
&h1 class=&title&&时事新闻&/h1&
&div id=&div_side_1&&
&div id=&game&&
&h1 class=&title&&娱乐新闻&/h1&
49 &/body&
50 &/html&
网页选项卡
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans- color:#666;}
.tab { width:240margin:50}
.tab_menu { clear:}
.tab_menu li { float: text-align: cursor: list-style: padding:1px 6 margin-right:4 background:#F1F1F1; border:1px solid #898989; border-bottom:}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear: border:1px solid #898989; height:100}
.hide{display:none}
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
var $div_li = $(&div.tab_menu ul li&);
$div_li.click(function () {
$(this).addClass(&selected&)
.siblings().removeClass(&selected&);
var index = $div_li.index(this); // 获取当前点击的&li&元素 在 全部li元素中的索引。
$(&div.tab_box&div&)
//选取子节点。不选取子节点的话，会引起错误，如果里面还有div
.eq(index).show()
//显示 &li&元素对应的&div&元素
.siblings().hide();
//隐藏其它几个同辈的&div&元素
}).hover(function(){
$(this).addClass(&hover&);
},function(){
$(this).removeClass(&hover&);
34 &/head&
36 &div class=&tab&&
&div class=&tab_menu&&
&li class=&selected&&时事&/li&
&li&体育&/li&
&li&娱乐&/li&
&div class=&tab_box&&
&div&时事&/div&
&div class=&hide&&体育&/div&
&div class=&hide&&娱乐&/div&
50 &/body&
51 &/html&
层次选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function () {
//选择body内的所有div元素
$(&#btn1&).click(function () {
$(&body div&).css(&background&, &#bbffaa&);
//在body内的选择元素名是div的子元素
$(&#btn2&).click(function () {
$(&body&div&).css(&background&, &#bbffaa&);
//选择所有class为one的下一个子元素
$(&#btn3&).click(function () {
$(&.one+div&).css(&background&, &#bbffaa&);
//选择id为two的元素后面的所有div兄弟元素
$(&#btn4&).click(function () {
$(&#two~div&).css(&background&,&#bbffaa&);
25 &/script&
&title&层次选择器&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
51 &/head&
53 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&层次选择器.&/h3&
56 &!-- 控制按钮 --&
&input type=&button& value=&选择 body内的所有div元素.& id=&btn1&/&
&input type=&button& value=&在body内,选择子元素是div的.& id=&btn2&/&
&input type=&button& value=&选择 所有class为one 的下一个div元素.& id=&btn3&/&
&input type=&button& value=&选择 id为two的元素后面的所有div兄弟元素.& id=&btn4&/&
&br /&&br /&
63 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
67 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
69 &div class=&mini& title=&other&&class为mini，title为other&/div&
70 &div class=&mini& title=&test&&class为mini，title为test&/div&
72 &div class=&one&&
73 &div class=&mini&&class为mini&/div&
74 &div class=&mini&&class为mini&/div&
75 &div class=&mini&&class为mini&/div&
76 &div class=&mini&&&/div&
78 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
84 &div style=&display:& class=&none&&style的display为“none”的div&/div&
85 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
89 &span id=&mover&&正在执行的动画span元素&/span&
90 &/body&
91 &/html&
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
*{margin:0;padding:0;}
div.centent
float: text-align: margin:10
display: margin:2px 2padding:4px 10
background:#898989;
font-size:12
&script type=&text/javascript& src=&jquery-1.7.js&&&/script&
&script type=&text/javascript&&
$(function () {
//移动到右边
$(&#add&).click(function () {
//获取选中的选项，删除并追加给对方
$(&#select1 option:selected&).appendTo(&#select2&);//appentTo方法，追加给另一个元素，同时将原先的内容删除
//移到左边
$(&#remove&).click(function () {
$(&#select2 option:selected&).appendTo(&#select1&);
//全部移到右边
$(&#add_all&).click(function () {
$(&#select1 option&).appendTo(&#select2&);
//全部移到左边
$(&#remove_all&).click(function () {
//获取全部的选项，删除并追加给对方
$(&#select2 option&).appendTo(&#select1&);
//双击选项
$(&#select1&).dblclick(function () {
//获取全部的选项，删除并追加给对方
$(&option:selected&, this).appendTo(&#select2&);
//追加给对方
//双击选项删除
$(&#select2&).dblclick(function () {
$(&option:selected&, this).appendTo(&#select1&);
52 &/head&
54 &div class=¢ent&&
&select multiple=&multiple& id=&select1& style=&width:100height:160&&
&option value=&1&&选项1&/option&
&option value=&2&&选项2&/option&
&option value=&3&&选项3&/option&
&option value=&4&&选项4&/option&
&option value=&5&&选项5&/option&
&option value=&6&&选项6&/option&
&option value=&7&&选项7&/option&
&span id=&add&&选中添加到右边&&&/span&
&span id=&add_all&&全部添加到右边&&&/span&
69 &div class=¢ent&&
&select multiple=&multiple& id=&select2& style=&width:100 height:160&&
&option value=&8&&选项8&/option&
&span id=&remove&&&&选中删除到左边&/span&
&span id=&remove_all&&&&全部删除到左边&/span&
78 &/body&
79 &/html&
基本选择器
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 &script type=&text/javascript& src=&jquery-1.7.js&&&/script&
5 &script type=&text/javascript& src=&assist.js&&&/script&
6 &script type=&text/javascript&&
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$(&#one&).css(&background&,&#bfa&);
//选择 class 为 mini 的所有元素
$(&#btn2&).click(function(){
$(&.mini&).css(&background&,&#bfa&);
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css(&background&,&#bfa&);
//选择 所有的元素
$('#btn4').click(function(){
$('*').css(&background&,&#bfa&);
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css(&background&, &#bfa&);
29 &/script&
&title&&/title&
&style type=&text/css&&
div,span,p
height:140
background:#
border:#000 1
font-size:17
font-family:V
background-color:#
font-size:12
55 &/head&
57 &button id=&reset&&手动重置页面元素&/button&
&input type=&checkbox& id=&isreset& checked=&checked&/&&label for=&isreset&&点击下列按钮时先自动重置页面&/label&&br /&&br /&
&h3&基本选择器.&/h3&
60 &!-- 控制按钮 --&
&input type=&button& value=&选择 id为 one 的元素.& id=&btn1&/&
&input type=&button& value=&选择 class 为 mini 的所有元素.& id=&btn2&/&
&input type=&button& value=&选择 元素名是 div 的所有元素.& id=&btn3&/&
&input type=&button& value=&选择 所有的元素.& id=&btn4&/&
&input type=&button& value=&选择 所有的span元素和id为two的元素.& id=&btn5&/&
&br /&&br /&
68 &div class=&one& id=&one&&
id为one，class为one的div
&div class=&mini&&class为mini&/div&
72 &div class=&one& id=&two& title=&text&&
id为two，class为one，title为text的div
74 &div class=&mini& title=&other&&class为mini，title为other&/div&
75 &div class=&mini& title=&test&&class为mini，title为test&/div&
77 &div class=&one&&
78 &div class=&mini&&class为mini&/div&
79 &div class=&mini&&class为mini&/div&
80 &div class=&mini&&class为mini&/div&
81 &div class=&mini&&&/div&
83 &div class=&one&&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini&&class为mini&/div&
&div class=&mini& title=&tesst&&class为mini，title为tesst&/div&
89 &div style=&display:& class=&none&&style的display为“none”的div&/div&
90 &div class=&hide&&class为“hide”的div&/div&
包含input的type为“hidden”的div&input type=&hidden& size=&8& /&
94 &span id=&mover&&正在执行的动画span元素&/span&
95 &/body&
96 &/html&
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见}
我要回帖
更多关于 jq判断元素是否存在 的文章
更多推荐
- ·车载液体香薰放车里会爆炸吗暴晒天安全吗
- ·真的有托法替布治类风湿效果好吗吗？不是托吧
- ·四季沐歌即热式热水器的ETS技术主要是什么？
- ·我刚来温州龙湾区招聘信息，大家知道在温州龙湾区招聘信息哪里找工作靠谱一些吗？最好是免费的
- ·请问IMS项目实施计划方案的怎么实施的？
- ·220v爬电距离直流电拉弧距离
- ·为什么说亚洲北京城市大学学是骗人的
- ·高精度激光打标机电腐蚀打标机能否打出红色字
- ·纳米注塑什麼意思多段成型有什麼优点
- ·本人在读研究生，马上毕业了，目前在淘宝网商城女装夏装开了个店主要是买中高端女装，想累计电商经验，为将来做准备但是
- ·粤语中的雷轰粤语丢是什么意思思
- ·vivo y11t刷机包同时按开机键和音量键时出现的英文怎么翻译
- ·力度显卡512和1g的区别力度384的区别
- ·聘美联英语招聘好的律师费用多少
- ·英文难倒大人的小学数学题!!! Equation
- ·为什么我手机报名期货从业资格考试试缴费不行网购行啊
- ·电子门锁系统大门锁卡放上去无反应是何原因
- ·晚上吃多了榨床脚晚上梦见蛇是什么意思思啊
- ·怡秋不动产登记是什么意思思、求解啊
- ·神婆网什么都可以看到吗
- ·jq判断是否隐藏第几个链接符合条件
- ·在教育上工作,想请假理由用什么理由呢
- ·从2011年4月25到今天2015春晚年10月10号有多少天多少月
- ·草边纸在墙上怎么施工求解答网
- ·问题求解系统这道题
- ·sobbeys poi是什么意思?意思
- ·ou ya si me nai sai
- ·世界七世界8星级酒店店是哪个？88888888
- ·余姚维多利亚酒店在什么路,坐火车中途下车站坐车到什么路下车
- ·网上一组奇迹路边生产的图片网上做兼职是真的吗吗
- ·农历九月初九十九捡去世的老人好吗
- ·梦见棺材父亲的棺材被雨水冲了出来
