jquery简述

JQuery简介

•普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。

•Jquery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。

•JQuery能做什么。

•JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。链式编程（$("#div1").draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用））、屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、开源、免费。

•VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用, 下载地址见备注。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。

•vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会这个第三方js的自动提示的功能

 ===============================================================================================

简单的JQuery

•$(document).ready(function() {

•            alert("加载完毕！");

•        });//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。

•当页面Dom元素加载完毕时执行代码，可以简写为：

•        $(function() {

•            alert("加载完毕！");

•        });

•和onload类似，但是onload只能注册一次(window.οnlοad=function...)（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。

•JQuery的ready和Dom 的onload的区别：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。

 ==============================================================================================

JQuery提供的函数

•$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组

例子，得到一个元素值是原数组值二倍的新数组

var arr = [3, 5, 9];

var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。

$.map不能处理Dictionary风格的数组。       

•$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值

var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };

$.each(arr, function(key, value) { alert(key+"="+value); });

如果是普通风格的数组，则key的值是序号。

•还可以省略function的参数，这时候用this可以得到遍历的当前元素：

var arr = [3, 6, 9];

$.each(arr, function() { alert(this); });//能读懂。

普通数组推荐用无参，用dict风格的就用key、value。

jQuery对象、Dom对象

•jQuery对象就是通过jQuery包装Dom对象后产生的对象：alert($('#div1').html())。Dom对象要想通过jQuery进行操作，先要转换为JQuery对象。

•$('#div1').html()等价于：document.getElementById("div1").innerHTML;

•$('#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。

•Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用

•（*）将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：var domobj = jqobj[0]或者var domobj=jqobj.get(0)

•jQuery修改样式：$("#div1").css("background", "red");获得样式$("#div1").css("background")；修改value：$("#un").val("abc")，获得value：$("#un").val()，类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。

function  test() {
var  div1  =  document.getElementById( " div1 " );
var  jqDiv1  =  $(div1);
alert(jqDiv1.html());
var  domdiv  =  jqDiv1[ 0 ];
alert(domdiv.innerHTML);
}
< input type = " button "  onclick = " test() "  value = " click " / >

 ============================================================================================

JQuery选择器

•JQuery选择器用于查找满足条件的元素，比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象，相当于getElementById：

–$("#div1").html("<font color=red>hello</font>")

•$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：

–        $(function() {

–            $("#btnClick").click(function() {

–                $("p").html("我们都是P");

–            });

–        });

•CSS选择器，同时选择拥有样式的多个元素：

–    <style type="text/css">

–        .test{ background-color:Red}

–    </style>

–    <script type="text/javascript">

–        $(function() {

–        $(".test").click(function() {

–                alert($(this).text());

–            });

–        });

–    </script>  

–    <p class="test">test1</p>

–    <p class="test">test2</p>

–    <p class="test">test3</p>

•多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素

•注意选择器表达式中的空格不能多不能少。易错！

•层次选择器：

–（1）$("div li")获取div下的所有li元素（后代，子、子的子……）

–（2）$("div > li")获取div下的直接li子元素

–（3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）

–（4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）

 

JQuery的迭代

•如何判断对象是否存在，jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

•if ($("#btn1").length <= 0) {

•                alert("id为btn1的元素不存在！");

•            }

  ======================================================================================

节点遍历

•next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

•prev、prevAll之前的元素。

•siblings()方法用于获取所有同辈元素，$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。

•案例：选中的p变色 $(this).css();$(this).siblings().css()

•案例：评分控件。prevAll,this,nextAll

选中的p变色：
$( " p " ).click( function () {
$( this ).css( " background " ,  " red " );
$( this ).siblings().css( " background " , " white " );
});
< p > 测试 < / p>
< p > 测试 < / p>
< p > 测试 < / p> 

评分控件
< script type = " text/javascript " >
$( function () {
$( " #table1 td " ).css( " cursor " ,  " pointer " );
$( " #table1 td " ).click( function () {
$( " #table1 td " ).css( " background " ,  " red " );
$( this ).nextAll( " td " ).css( " background " ,  " white " );
});
});
< / script>

< table id = " table1 "  border = " 1 " >
< tr >< td >& nbsp; < / td><td>&nbsp;< / td >< td >& nbsp; < / td><td>&nbsp;< / td >< td >& nbsp; < / td>< / tr >
< / table>

 ==============================================================================================

链式编程

•高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。“.”的时候是针对的上一步的返回值的节点集合的操作。

•    <style type="text/css">

•        .menuitem{background-color:Yellow; }

•        .highlight { background-color: Red;}

•    </style>

• $(function() {

•            $(".menuitem").click(function() {

•                $(this).addClass("highlight").siblings().removeClass("highlight");

•            });

•        });

•    <p class="menuitem">111111</p><br />

•    <p class="menuitem">111111</p><br />

•    <p class="menuitem">111111</p><br />

 ============================================================================================

基本过滤选择器

•:first 选取第一个元素。$("div:first")选取第一个<div>

•:last 选取最后一个元素。$("div:last")选取最后一个<div>

•:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

•:even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>

•:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

•$(":header")选取所有的h1……h6元素（*）

•$("div:animated")选取正在执行动画的<div>元素。 （*）

案例

•第一行是表头，所以显示大字体（fontSize=30），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的奇数行是黄色背景。

•用Dom实现；用JQuery实现。对比差异！

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title >< / title>

< script src = " js/jquery-1.4.2.js "  type = " text/javascript " >< / script>
< script type = " text/javascript " >
$( function () {
$( " #table1 tr:first " ).css( " fontSize " ,  " 40 " );
$( " #table1 tr:last " ).css( " color " ,  " red " );
$( " #table1 tr:gt(0):lt(3) " ).css( " fontSize " ,  " 28 " );  // lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)
$( " #table1 tr:gt(0):even " ).css( " background " ,  " red " );  // 表头不参与“正文表格的奇数行是黄色背景”，所以gt(0)去掉表头。
});
< / script>
< / head>
< body >
< table id = " table1 " >
< tr >< td > 姓名 < / td><td>成绩< / td >< / tr>
< tr >< td > tom < / td><td>100< / td >< / tr>
< tr >< td > jim < / td><td>99< / td >< / tr>
< tr >< td > john < / td><td>98< / td >< / tr>
< tr >< td > jason < / td><td>97< / td >< / tr>
< tr >< td > aaa < / td><td>97< / td >< / tr>
< tr >< td > 平均分 < / td><td>98< / td >< / tr>
< / table>
< / body>
< / html>

•案例：表格隔行变色

•案例：前三名粗体显示

•不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");

•案例：修改点击行的所有td的背景色

•练习：图片版评分控件

•练习：单选超链接

练习：表格隔行变色：
function  changeColor() {
$( " #table1 tr:odd " ).css( " background " , " yellow " );
}
< table id = " table1 " >
< tr >< td > tom < / td><td>30< / td >< / tr>
< tr >< td > jim < / td><td>20< / td >< / tr>
< tr >< td > lily < / td><td>22< / td >< / tr>
< tr >< td > lucy < / td><td>23< / td >< / tr>
< tr >< td > mike < / td><td>25< / td >< / tr>
< / table>

练习：前三名粗体显示
$( function () {
$( " #ulNames li:lt(3) " ).css( " font-weight " , " bold " );
});
< ul id = " ulNames " >
< li > 赵百万 < / li>
< li > 钱多多 < / li>
< li > 孙二娘 < / li>
< li > 李奎 < / li>
< li > 周迅 < / li>
< / ul>

修改点击行的所有td的背景色
$( function () {
$( " table tr " ).click( function () {
$( " td " , $( this )).css( " background " ,  " red " );
});
});
< table border = " 1 " >
< tr >< td > aa < / td><td>aa< / td >< td > aa < / td>< / tr >
< tr >< td > aa < / td><td>aa< / td >< td > aa < / td>< / tr >
< tr >< td > aa < / td><td>aa< / td >< td > aa < / td>< / tr >
< / table>

练习：评分控件
$( function () {
$( " #tableRating td " ).mouseover( function () {
var  curtd  =  $( this );
var  tr  =  curtd.parent();
var  tdindex  =  tr.children().index(curtd);
$( " td:lt( " +  (tdindex  + 1 )  + " ) " , tr).html( " <img src=starFill.jpg/> " );
curtd.nextAll().html( " <img src=starEmpty.jpg/> " );
});
$( " #tableRating td " ).html( " <img src=starEmpty.jpg/> " ).css( " cursor " ,  " pointer " );
}); 
< table border = " 1 "  id = " tableRating " >
< tr >
< td >< / td>
< td >< / td>
< td >< / td>
< td >< / td>
< td >< / td>
< / tr>
< / table>

 =============================================================================================

过滤器

•属性过滤选择器：

–$("div[id]")选取有id属性的<div>

–$("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

–$("div[title!=test]")选取title属性不为“test”的<div>

–还可以选择开头、结束、包含等，条件还可以复合。（*）

•表单对象选择器（过滤器）：

–$("#form1:enabled")选取id为form1的表单内所有启用的元素

–$("#form1:disabled")选取id为form1的表单内所有禁用的元素

–$("input:checked")选取所有选中的元素（Radio、CheckBox）

–$("select:selected")选取所有选中的选项元素（下拉列表）

 ==================================================================================================

元素的each

•jQuery元素的也可以调用each方法，只是对$.each的简化调用。

显示选中的复选框信息

      $(function() {

          $("input[name=names]").click(function() {

              var names = $("input[name=names]:checked");

              var arr = new Array();

              names.each(function(key, value) { arr[key] = $(value).val(); });

              $("#msgNames").text("共选中"+names.length+"条："+arr.join(","));

          });

      });

    <input type="checkbox" name="names" value="tom" />tom

    <input type="checkbox" name="names" value="jim" />jim

    <input type="checkbox" name="names" value="lily" />lily

    <p id="msgNames"></p>

 ==========================================================================================

表单选择器

•$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

•$(":text")选取所有单行文本框，等价于$("input[type=text]")

•$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

 ==========================================================================================

JQuery的Dom操作

•1、使用html()方法读取或者设置元素的innerHTML：

•alert($("a:first").html());

•$("a:first").html("hello");

•2、使用text()方法读取或者设置元素的innerText：

•alert($("a:first").text());

•$("a:first").text("hello");

•3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

•        alert($("a:first").attr("href"));

•        $("a:first").attr("href", "http://www.rupeng.com");       

•4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。

 ====================================================================================================

动态创建Dom节点

•使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中：

•        var link = $("<a href='http://www.baidu.com'>百度</a>");

•        $("div:first").append(link);

•$()创建的就是一个jQuery对象，可以完全进行操作

–var link = $("<a href='http://www.baidu.com'>百度</a>");

–link.text("百毒");

–$("div:first").append(link);。

•append方法用来在元素的末尾追加元素。//$("#select1 option:selected").remove().appendTo($("#select2")) ;

$("#select1 option:selected").appendTo($("#select2")) ;

•prepend，在元素的开始添加元素。

•after，在元素之后添加元素（添加兄弟）

•before：在元素之前添加元素（添加兄弟）

 =================================================================================================

删除节点

•（1）remove()删除选择的节点

–案例：清空ul中的项，代码见备注。$("ul li.testitem").remove(); 删除ul下li中有testitem样式的元素。

•remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下

•                var lis = $("#ulSite li").remove();

•                $("#ulSite2").append(lis);   

•权限选择：var items = $("#select1 option:selected").remove(); $("#select2").append(items); 更狠的：$("#select1 option:selected").appendTo($("#select2"))

•（2）empty()是将节点清空，不像remove那样还可以添加到其他元素中。

•案例：选择球队

1 、remove()删除选中的节点
$( function () {
$( " #btnRemove " ).click( function () {
$( " #ulSite li " ).remove();
});
});
< ul id = " ulSite " >
< li > 百度 < / li>
< li > 搜狐 < / li>
< li > 新浪 < / li>
< / ul>
< input id = " btnRemove "  type = " button "  value = " 删除 " / >
2 、选择球队
练习，选择球队：
$( function () {
$( " #tableToSelect tr " ).css( " cursor " ,  " pointer " )
.mouseover( function () {
$( this ).css( " background " ,  " red " );
$( this ).siblings().css( " background " ,  " white " );
})
.click( function () {
$( this ).remove();
$( " #tableSelected " ).append($( this ));
});
});
待选择球队：
< table id = " tableToSelect " >
< tr >< td > 火箭 < / td><td>100分< / td >< / tr>
< tr >< td > 奇才 < / td><td>99分< / td >< / tr>
< tr >< td > 小牛 < / td><td>98分< / td >< / tr>
< / table>
< hr  / >
选中的球队：
< table id = " tableSelected " >< / table>

 =================================================================================================

补充

•写代码的好习惯，{、(写完开始就写结束，省得忘了。，在JQuery中这样写就不容易写错了。

•如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。JQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。

•晕了一天重新站在JavaScript、Dom角度重新审视JQuery这个小弟。

 =========================================================================================

节点操作

•替换节点：

•$("br").replaceWith("<hr/>");

•将<br/>替换为<hr/>

 

•包裹节点

•wrap()方法用来将所有元素逐个用指定标签包裹：

•$("b").wrap("<font color='red'></font>") 将所有粗体字红色显示

 =================================================================================================

样式操作

•获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")

•案例：网页开关灯的效果

•练习：给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示，做切换黑白效果的按钮。

•点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为class样式。

•练习：聚焦控件的高亮显示。颜色定义为class样式。 $("body *")，选择器*表示所有类型的控件。

•练习：搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”，那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）。颜色定义为class样式。

练习：网页开关灯的效果
< style type = " text/css " >
.dark
{
background - color:Black;
}
< / style>
< script type = " text/javascript " >
$( function () {
$( " #btn " ).click( function () {
$( " body " ).toggleClass( " dark " );
});
});
< / script> 
案例：聚焦控件的高亮显示：
$( " :text " ).focus( function () { $( this ).addClass( " focus " ); }).blur( function () { $( this ).removeClass( " focus " ); }); 

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title >< / title>

< script src = " ../js/jquery-1.4.2.js "  type = " text/javascript " >< / script>
< script type = " text/javascript " >
$( function () {
$( " #kw " ).val( " 请输入关键词 " ).addClass( " waiting " )
.blur( function () {
if  ($( this ).val()  == "" ) {
$( " #kw " ).val( " 请输入关键词 " ).addClass( " waiting " );
}
})
.focus( function () {
if  ($( " #kw " ).val()  == " 请输入关键词 " ) {
$( " #kw " ).val( "" ).removeClass( " waiting " );
}
});
});
< / script>
< style type = " text/css " >
.waiting{color:Gray;}
< / style>
< / head>
< body >
< input type = " text "  id = " kw " / >
< / body>
< / html>

==================================================================================================== 

RadioButton操作

•取得RadioButton的选中值

–$("input[name=gender]:checked").val()

–        <input id="Radio2" checked="checked" name="gender" type="radio" value="男" />男<input

–            id="Radio1" checked="checked" name="gender" type="radio" value="女" />女<input id="Radio3"

–                checked="checked" name="gender" type="radio" value="未知" />未知</p>

•设置RadioButton的选中值：

–$("input[name=gender]").val(["女"]);

–或者

–$(":radio[name=gender]").val(["女"]);

–注意val中参数的[]不能省略

•对RadioButton的选择技巧对于CheckBox和Select列表框也适用

•除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设定checked属性来单独设置控件的选中状态

•$("#btn1").attr("checked",true)

•练习：权限选择框

•练习：CheckBox的全选、全不选、反选

练习：权限选择框
< div style = " float: left; width: 100px " >
< select id = " selectSrc "  multiple = " multiple "  size = " 8 " >
< option > 添加 < / option>
< option > 修改 < / option>
< option > 删除 < / option>
< option > 查看 < / option>
< option > 导出 < / option>
< / select>
< / div>
< div style = " float: left; width: 50px " >
< input id = " btnGo "  type = " button "  value = " > " / >
< br  / >
< input id = " btnBack "  type = " button "  value = " < " / >
< br  / >
< input id = " btnAllGo "  type = " button "  value = " >> " / >
< br  / >
< input id = " btnAllBack "  type = " button "  value = " << " / >
< / div>
< div style = " float: left; width: 100px " >
< select id = " selectDest "  multiple = " multiple "  size = " 8 " >
< / select>
< / div>

script代码放到元素下面省得写$();
< script type = " text/javascript " >
function  MoveAll(src, dest) {
src.children( " option " ).each( function (key, value) { dest.append(value); });
}
function  MoveSelect(src, dest) {
src.children( " option " ).each( function (key, value) {  if  (value.selected) dest.append(value); });
}
$( " #btnGo " ).click( function () {
MoveSelect($( " #selectSrc " ), $( " #selectDest " ));
});
$( " #btnAllBack " ).click( function () {
MoveSelect($( " #selectDest " ), $( " #selectSrc " ));
});
$( " #btnAllGo " ).click( function () {
MoveAll($( " #selectSrc " ), $( " #selectDest " ));
});
$( " #btnAllBack " ).click( function () {
MoveAll($( " #selectDest " ), $( " #selectSrc " ));
});
< / script>

2 、练习：CheckBox的全选、反选
$( " #selAll " ).click( function () {
$( " #playlist :checkbox " ).attr( " checked " ,  true );  // "#playlist :checkbox" 中间的空格不能省略
});
$( " #unselAll " ).click( function () {
$( " #playlist :checkbox " ).attr( " checked " ,  false );
});
$( " #reverse " ).click( function () {
// alert($("#playlist :checkbox").attr("checked"));
// $("#playlist :checkbox").attr("checked", !$("#playlist :checkbox").attr("checked"));//不可以，要理解迭代的工作过程。
$( " #playlist :checkbox " ).each( function () {
$( this ).attr( " checked " ,  ! $( this ).attr( " checked " ))
});
});

===================================================================================================

 事件

•JQuery中的事件绑定：$("#btn").bind("click",function(){})，每次都这么调用太麻烦，所以jQuery可以用$("#btn").click(function(){})来进行简化

•合成事件hover，hover(enterfn,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。

•事件冒泡：JQuery中也像JavaScript一样是事件冒泡

•如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e. stopPropagation();

•$("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e

•阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和window.event.returnValue=false效果一样。

• $("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });

•属性：pageX、pageY、target获得触发事件的元素(冒泡的起始，和this不一样)、which如果是鼠标事件获得按键（1左键，2中键，3右键）。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。keyCode、charCode属性发生事件时的keyCode（键盘码，小键盘的1和主键盘的keyCode不一样）、charCode（ASC码）。

•移除事件绑定：bind()方法即可移除元素上所有绑定的事件，如果unbind("click")则只移除click事件的绑定。bind:+=；unbind:-=

•一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定：

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title >< / title>

< script src = " ../js/jquery-1.4.2.js "  type = " text/javascript " >< / script>
< script type = " text/javascript " >
$( function () {
$( " #p1 " ).click( function (e) { alert( " 下面是p的 " ); alert($( this ).html()); alert($(e.target).html()); });
$( " #tr1 " ).click( function (e) { alert( " 下面是tr的 " ); alert($( this ).html()); alert($(e.target).html()); });
});
< / script>
< / head>
< body >
< table id = " t1 " >
< tr id = " tr1 " >< td id = " td1 " >< p id = " p1 " > nihao < / p>< / td >< / tr>
< / table>
< / body>
< / html>


事件对象的方法：preventDefault()、stopPropagation()
属性：pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键（1左键，2中键，3右键）。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。keyCode、charCode属性发生时间时的keyCode、charCode。
< script type = " text/javascript " >
$( " a " ).click( function (e) {
var  target  =  $(e.target);
alert(target.attr( " href " ));
e.preventDefault();
});
< / script>
$( " :button " ).mouseup( function (e) {
if  (e.ctrlKey  &&  e.which  == 3 ) {
alert( " 这个秘密都被你发现了！奖励一百万！ " );
}
});

移除事件绑定：bind()方法即可移除元素上所有绑定的事件，如果bind( " click " )则只移除click事件的绑定。
一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定：
$( " :button[value=one] " ).one( " click " ,  function () { alert( " 只有这一次！ " ); });

================================================================================================

鼠标

•获得发生事件时鼠标的位置

•$(document).mousemove(function(e) {

•            document.title = e.pageX + "," + e.pageY;

•        });

•在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

•练习：跟着鼠标走的图片

•练习：Tooltips效果

•练习：美女图片详细解析层。

练习2：跟着鼠标走的文字（小天使）
< script type = " text/javascript " >
$(document).mousemove( function (e) {
$( " #tips1 " ).css( " top " ,e.pageY + 20 ).css( " left " ,e.pageX);
});
< / script>
< div id = " tips1 "  style = " position:fixed " > 跟着你 < / div>

$(document)表示整个浏览器页面窗口，$(body)仅表示可用范围。

练习3：Tooltips效果
< a href = ""  id = " cslink " > C# < / a>
$( " #cslink " ).mouseover( function (e) {
var  tooltip  =  $( " <div>C微软公司推出的基于<font color='red'>.Net平台</font>的语言。<div> " );
tooltip.css( " position " ,  " fixed " );
tooltip.css( " background-color " , " yellow " );
tooltip.css( " top " , e.pageY  + 20 ).css( " left " , e.pageX);
$( " body " ).append(tooltip);
$( " #cslink " ).mouseout( function () {
tooltip.remove();
});
});
通过闭包，不用给tooltip声明id才能remove。

练习4：带图片的Tooltips
< style type = " text/css " >
.tooltip
{
position:fixed;
background - color:Yellow;
} 
< / style>

< script type = " text/javascript " >
$( " #cslink " ).mouseover( function (e) {
var  tooltip  =  $( " <div class='tooltip'>C微软公司推出的基于<font color='red'>.Net平台</font>的语言。<br/><img src='images/csharp1.jpg'/><br/><input type='button' value='关闭' οnclick='closeTooltip()'/> <div> " );
tooltip.css( " top " , e.pageY  + 20 ).css( " left " , e.pageX);
closeTooltip(); // 关闭旧的
$( " body " ).append(tooltip);
});

function  closeTooltip() {
$( " .tooltip " ).remove();
}
< / script>

=================================================================================================

动画

•show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换

•    $(":button[value=show]").click(function() { $("div").show(); });

•    $(":button[value=hide]").click(function() { $("div").hide(); });

•如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。

•案例：QQTab效果

•练习：优酷视频右边视频列表、视频详细信息效果

•练习：大旗try.daqi.com的页面顶部的效果。

< div > 哈哈哈哈哈哈哈哈哈哈哈 < br  / >哈哈哈哈哈哈哈哈哈哈哈<br  / > 哈哈哈哈哈哈哈哈哈哈哈 < br  / >< / div >
< input type = " button "  value = " show " / >
< input type = " button "  value = " hide " / >
< script type = " text/javascript " >
$( " :button[value=show] " ).click( function () { $( " div " ).show( " slow " ); });
$( " :button[value=hide] " ).click( function () { $( " div " ).hide( " slow " ); });
< / script>

案例：QQTab效果
< style type = " text/css " >
ul
{
list - style - type: none;
}
.tabBtn
{
background - color: Yellow;
cursor: pointer;
}
.tabDiv
{
border - style: solid;
border: 1px;
}
< / style>


课上练习：TabContro效果
< style type = " text/css " >
#tabCtrl ul
{
list - style - type: none;
}
#tabCtrl ul li
{
float : left;
margin:  0  10px;
cursor: pointer;
}
.activeTab
{
background - color: Red;
}
< / style>
< div id = " tabCtrl " >
< ul >
< li class = " activeTab " > 常规 < / li>
< li > 高级 < / li>
< li > 设置 < / li>
< / ul>
< br  / >
< div id = " tabPage " >
< div >
这里是常规设置 < / div>
< div style = " display: none " >
这里是高级设置 < / div>
< div style = " display: none " >
这里是设置设置 < / div>
< / div>
< / div>

< script type = " text/javascript " >
$( " #tabCtrl li " ).click( function () {
$( this ).addClass( " activeTab " );
$( this ).siblings().removeClass( " activeTab " );
var  index  =  $( " #tabCtrl li " ).index($( this ));
var  div  =  $( " #tabPage div " ).eq(index);
div.show();
div.siblings().hide();
});
< / script>