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.onload=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中很少有属性的用法，因为属性写法很难“链式编程”。

View Code

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

View Code

选中的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> </td><td> </td><td> </td><td> </td><td> </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 />

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

基本过滤选择器

•: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实现。对比差异！

View Code

•案例：表格隔行变色

•案例：前三名粗体显示

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

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

•练习：图片版评分控件

•练习：单选超链接

View Code

练习：表格隔行变色：
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

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

表单选择器

•$(":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那样还可以添加到其他元素中。

•案例：选择球队

View Code

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样式。

View Code

练习：网页开关灯的效果
<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的全选、全不选、反选

View Code

练习：权限选择框
<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()方法进行事件绑定：

View Code

<!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效果

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

View Code

练习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='关闭' onclick='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的页面顶部的效果。

View Code

<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>

posted on 2011-03-12 11:17 高兴happy 阅读(2245) 评论(1) 编辑收藏举报