黑马程序员_JQuery学习知识简单总结
2012-11-19 20:53
316 查看
----------------------
Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
JQuery不是独立出来的语言，它只是对JS进行的封装，JQuery本身就是一堆JavaScript函数。
使用JQuery的代码、编写JQuery的扩展插件等仍然用的是JavaScript的技术。
JQuery
普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写夸浏览器的程序非常麻烦，所以出现了很多JavaScript的封装库（Prototype、Dojo、ExtJS
JQuery等），这些库对JavaScript进行了封装，简化了开发。调用JQuery里边的一句函数，JQuery内部这个函数就会帮我们调用JavaScript中的几十句代码。
JQuery的优点：尺寸小、使用简单方便（Write Less，Do More 用最少的代码写最多的程序。
链式编程（一直的点下去）、隐士迭代（对所有的处理都一样的，不论是1个还
1000个））
屏蔽浏览器差异，跨浏览器兼容性好（IE6.0+、火狐2+、Safari3.0+、Opera9.0+、Chrome）
插件丰富、开源、免费
调用方法：
在网页head中加<script src="../jquery-1.*.*.js" type="text/javascript"></script> ..为放jquery文件的相对路径 *是jquery的版本
调用JQuery库， 前边要加$($就是一个函数)，意思就是讲Dom对象转换为JQuery对象
ready：注册事件的函数，和普通dom不一样，不需要再元素上标记on***类似的事件
$(document).ready(function () {
alert('加载完毕');
});
可以简写成 $(function() { alert('加载完毕') });
ready和onload类似，但是onload只能注册一次，后注册的onload事件则会取代先注册的，但是ready则可以多次注册，而且会全部执行
JQuery的ready和Dom的onload的区别：
onload是所有Dom元素创建完毕、图片、CSS等都加载完毕之后才会触发
ready则是Dom元素创建完毕后就触发（可以提高网页的相应速度）
jquery中也可以用$(window).load()来实现onload的事件调用
JQuery提供的函数
$.map(arr,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组
var arr=[3,5,9];
var arr2=$.map(arr,function(item){return item*2;});
alert('arr2');
注意：$.map不能处理（不是很绝对，很麻烦，没必要）Dictionary风格的数组
$.each(arr,fn)对数组array中每个元素调用fn函数进行处理，没有返回值
var arr3={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
$.each(arr3,function(key,value) { alert(key+"="+value); });
注意：如果是普通风格的数组，则key的值是序号,value的值就是数组的值
var arr4 = [12, 23, 32];
$.each(arr4, function (item) { alert(item); });
如果不写参数，函数里边用this，那个就是数组的值，对于Dictionary也是一样
var arr5 = [12, 23, 32];
$.each(arr5, function () { alert(this); });
或者
var arr6 = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
$.each(arr6, function () { alert(this); });
普通的数组可以使用无参，dictionary风格最好用key，value
JQuery对象、Dom对象
JQuery对象就是通过JQuery包装Dom对象后产生的对象，Dom对戏那个要想通过JQuery进行操作，先要转换成JQuery对象
将Dom对象转换为JQuery对象的方法：$(dom对象)
将JQuery对象转换为Dom对象的方法：var Dom对象=JQuery对象[0] 或者 var Dom对象=JQuery对象.get(0)
$(function () { $("#div1").html("<a href='http://www.baidu.com'>百度</a>"); var conn = $(div1)[0]; alert(conn.innerHTML); });
alert($("#div1").html()); html方法里边写参数就是赋值，不写参数就是取值
$(function () { alert($("#div1").html("<a href="http://www.baidu.com">百度</a>")); });
$("#div1").html()就相当于Dom中：document.getElementById("div1").innerHTML;
$("#div1")得到的就是JQuery对象，JQuery对象和Dom对象都只能调用各自的对象的方法，在Dom中的innerHTML在JQuery中就是错的
JQuery方法
修改样式：$("#div1").css("background","red"); 将id为div1的标签背景设置为红色
$(function () { $("#div1").css("background", "red") });
获得样式：$("#div1").css("background");只要不传第二个参数的值就是获得样式
$(function () { alert($("#div1").css("background")); });
修改value： $(#div1).val("abc");
$(function () { $("#txt1").val(new Date()) });
获得value： $("#div1").val(); 只要不传值就是获得\
$(function () { alert($("#txt1").val()); });
类似的获得设置innerText、innerHTML .后边用text()和html()
$(function () { $("#div1").html("abc<font color='Yellow'>innerHTML</font>def") });
$(function () { alert($("#div1").html()) });
$(function () { alert($("#div1").text()) });
JQuery选择器 *
$("body *")取得body下得所有控件
1.JQuery选择器用于查找满足条件的元素
$("#控件id")来根据控件的id获得控件的jquery对象，相当于Dom中getElementById:
$("#"div1).html("<font color='red'>你好</font>")
$("TagName")来获得所有制定标签的jquery对象，相当于Dom中getElementsByTagName：
$(function(){
$("#btnClick").click(function(){
$("p").html("所有都是P的标签");
});
}); //相当于Dom中先获得id为btnClick的标签，然后给在的单击事件里获取所有标签为p的元素（getElementsByTagName）
2.CSS选择器，同时选择拥有样式的多个元素
3.多条件选择器
$("p,div,span.menuitem"), 同时选择p标签、div标签和拥有menuitem样式的span标签元素
4.层次选择器
$("div li") 获取div下得（所有）li元素
$("div > li") 获取div下得直接li子元素
$(".menuitem + div")获取样式名为menuitem之后的（第一个）div元素
$(".menuitem ~ div")获取样式名为menuitem之后的（所有）div元素
注意：选择器表达式中的空格不能多不能少
JQuery的迭代
JQuery选择器返回的是一个对象数组，它是对数组中每个元素迭代调用方法，因此即使通过id选择的元素不存在也不会报错，如果要判断制定的id是否存在，可以再之前写：
if($("#btn1").length<=0){
alert("id为btn1的元素不存在！");
}
节点遍历
next()方法：用于获取节点之后（挨着的）的同辈元素（标签级别相同）
next(指定标签)方法：：用于获取指定节点之后（挨着的）的同辈元素
nextAll()方法：用于获取节点之后的所有同辈元素
nextAll(指定标签)方法：用于获取指定标签节点之后的所有同辈元素
siblings()方法：用于获取所有的同辈元素
siblings(指定标签)方法：用于获取指定标签所有的同辈元素
基本过滤器
: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>
注意：gt、lt联合使用时，lt的序列号是从gt选出元素之后从排的序列号开始的
:hander 选取所有的h1-h6的元素
$(":hander")
:animated 选取正在执行动画的元素
$("div:animated")选取正在执行动画的<div>
属性过滤器
$("div[id]")选取有id属性的<div>
$("div[name=abc]")选取name属性为abc的<div>（JQuery中没有对getELementsByName进行封装）
$("div[title=test]")选取title属性为test的<div>
$("div[title!=test]")选取title属性不为test的<div>
表单对象选择器（过滤器）注意：(:)前后不能有空格
$("#form1:enabled")选取id为form1的表单内所有启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素（Radio、CheckBox）
$("select:selected")选取所有选中的选项的元素（下拉列表）
$(":input")
选取所有的<input>、<textarea>、<select>和<button>元素。
它和$("input")不一样，$("input")只获得<input>标签
$(":text") 选取所有的单行文本框 相当于$("input:[type=text]")
$(":password")选取所有的密码框。
同理还有：
:radio、:checkBox、:submit、:image、:reset、:button、:file、:hidden
JQuery的Dom操作
使用html()方法读取或者设置元素的innerHTML
使用text()方法读取或者设置元素的innerText
使用attr()方法读取或者设置元素的属性（对于JQuery没有封装的属性用attr进行操作）
alert(@("a:first").attr("href")); 获取a标签的第一个超链接地址
$("a:first").attr("href","http://www.baidu.com"); 设置a标签的第一个超链接地址
removeAttr删除属性（注意删除不是清空）
动态创建Dom节点
方法：$(html字符串)，返回一个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()方法用来在元素的末尾追加元素。
prepend()方法在元素的开始添加元素
after() 方法在元素之后添加元素（兄弟）
before()方法在元素之前添加元素（兄弟）
删除节点 remove()
remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
将节点清空 empty()
节点操作
替换节点：
$("br").replaceWith("<hr/>"); 将<br/节点替换为<hr/>
包裹节点：
$("b").wrap("<font color='red'></font>") 将所有的粗体字红色显示
样式操作
获取样式：attr("class") 设置样式：attr("class","myclass") 追加样式：addClass("myclass") 移除样式：removeClass("myclass")
切换样式：toggleClass("myclass") 判断是否存在样式：hasClass("myclass")
给body设置body{filter:Gray;}可以让网页编程黑白显示（哀悼日灰白效果）（仅IE）
RadioButton操作
取得RadioButton的选中值
$("input[name=names]:checked").val()
<input checked="checked" name="names"type="radio" value="男" />男
<input checked="checked" name="names"type="radio" value="女" />女
<input checked="checked" name="names"type="radio" value="未知" />未知
设置RadioButton，CheckBox的选中值
$("input[name=names]").val(["女"]);
或者：
$(":radio[name=names]").val(["女"]); 注意：val中参数的[]不能省略
单独设置值用attr方法将checked属性设置为true
$(":checkbox[value=篮球]").attr("checked",true);
事件
直接写事件调用的click方法其实是用bind方法创建的，如果每次写都很麻烦，所以JQuery内部自动将bind方法简化，可以直接用click方法 unbind("click") 移除事件
合成事件：hover(函数1，函数2) 当鼠标放在元素上时调用函数1，当鼠标离开元素的时候调用函数2。
相当于将mouseenter跟mouseleave合并在一起了（不经常用）
事件冒泡：JQuery中也想JavaScript一样有事件冒泡
$(function () {
$("#p1").click(function () { alert("p被点击了"); });
$("#td1").click(function () { alert("td被点击了"); });
$("#tr1").click(function () { alert("tr被点击了"); });
$("#t1").click(function () { alert("t被点击了"); });
});
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
方法：
终止冒泡：调用stopPropagetion() 只要在匿名函数中传一个参数（一般写e，也可以自己写），然后再函数体重调用e.stopPropagetion()方法就可以阻止该元素以上的冒泡
$("#tr1").click(function (e) { alert("tr被点击了"); e.stopPropagation(); });
如果在上一级跟下一级都有onclick事件，只向触发下一级的事件，就可以在此元素上加e.stopPropagetion()方法将其终止掉
阻止默认：preventDefault()方法 相当于Dom中window.event.returnValue =false; 阻止其行为用法和终止冒泡类似
$(":submit").click(function (e) { if ($("#name").val().length <= 0) { alert('用户名不能为空'); e.preventDefault(); } });
<form action="aaa.aspx">
<input type="submit" value="提交" />
</form>
其他事件
属性：pageX、pageY(触发事件的X,Y坐标，相当于Dom中的clientX、clientY)、target（获得触发事件的元素,相当于Dom中srcElement）
which如果是鼠标事件获得按钮（1左键，2中键，3右键）
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下（bool值）
keyCode、charCode属性发生事件的keyCode(键盘码)、charCode(ASCII码)
动画
show()、hide()方法显示、隐藏元素。 toggle()方法可以在显示、隐藏之间切换
如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定的时间进行动态显示、隐藏（单位为毫秒）
也可以用内置的速度fast(200毫秒)、normal（400毫秒）、slow（600毫秒） JQuery动画函数中需要速度的地方一般也可以使用这三个值
JQuery插件：
JQuery cookie：
cookie就是保存在浏览器上的内容（就是一些数据），用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问的时候就可以取出上次保存（记忆）的内容。
cookie不是JQuery特有的概念，只不过JQueryCookie把它简化的更好用了而已。
Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的如果禁用了Cookie就不能使用了，不过一般不考虑Cookie的情况。
Cookie的几个特征：
Cookie是与域名相关的，所有163.com不能读取baidu.com记录的Cookie，所有读取、设置的时候不用考虑域名Cookie的冲入
一个域名能写入的Cookie总尺寸是有限制的，一般就是几千字节，能写入的Cookie总条数一般也就几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie
Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除，用户也可能会手动清除
JQuery Cookie使用
使用方法：Cookie保存的就是键值对
1.添加jquery.cookie.js文件
2.设置值，$.cookie('名字','值')。cookie中保存的值都是文本
3.读取值，var v=$.cookie('名字')
alert($.cookie("用户名"));
$.cookie("用户名","tom"); 在同域名的另外一个页面中也能读取到
设置值的时候还可以设置第三个参数：$.cookie('名字','值',{expires:7,path:'/',domain:'baidu.com',secure:true})
expires表示要求浏览器保存Cookie几天（这只是对浏览器的建议，可能没到时间浏览器就自动清除了），如果不设定expires，那么在浏览器关闭以后就清除，options参数
哪个设置那个
domain表示这个域名下得含有baidu.com的子页面都可以访问此Cookie
//记录上次用户退出时的用户名、密码
//记录用户上次退出时的背景颜色
JQueryUI插件
度娘ing......
----------------------
Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
详细请查看：http://edu.csdn.net/heima/
Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
JQuery不是独立出来的语言，它只是对JS进行的封装，JQuery本身就是一堆JavaScript函数。
使用JQuery的代码、编写JQuery的扩展插件等仍然用的是JavaScript的技术。
JQuery
普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写夸浏览器的程序非常麻烦，所以出现了很多JavaScript的封装库（Prototype、Dojo、ExtJS
JQuery等），这些库对JavaScript进行了封装，简化了开发。调用JQuery里边的一句函数，JQuery内部这个函数就会帮我们调用JavaScript中的几十句代码。
JQuery的优点：尺寸小、使用简单方便（Write Less，Do More 用最少的代码写最多的程序。
链式编程（一直的点下去）、隐士迭代（对所有的处理都一样的，不论是1个还
1000个））
屏蔽浏览器差异，跨浏览器兼容性好（IE6.0+、火狐2+、Safari3.0+、Opera9.0+、Chrome）
插件丰富、开源、免费
调用方法：
在网页head中加<script src="../jquery-1.*.*.js" type="text/javascript"></script> ..为放jquery文件的相对路径 *是jquery的版本
调用JQuery库， 前边要加$($就是一个函数)，意思就是讲Dom对象转换为JQuery对象
ready：注册事件的函数，和普通dom不一样，不需要再元素上标记on***类似的事件
$(document).ready(function () {
alert('加载完毕');
});
可以简写成 $(function() { alert('加载完毕') });
ready和onload类似，但是onload只能注册一次，后注册的onload事件则会取代先注册的，但是ready则可以多次注册，而且会全部执行
JQuery的ready和Dom的onload的区别：
onload是所有Dom元素创建完毕、图片、CSS等都加载完毕之后才会触发
ready则是Dom元素创建完毕后就触发（可以提高网页的相应速度）
jquery中也可以用$(window).load()来实现onload的事件调用
JQuery提供的函数
$.map(arr,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组
var arr=[3,5,9];
var arr2=$.map(arr,function(item){return item*2;});
alert('arr2');
注意：$.map不能处理（不是很绝对，很麻烦，没必要）Dictionary风格的数组
$.each(arr,fn)对数组array中每个元素调用fn函数进行处理，没有返回值
var arr3={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
$.each(arr3,function(key,value) { alert(key+"="+value); });
注意：如果是普通风格的数组，则key的值是序号,value的值就是数组的值
var arr4 = [12, 23, 32];
$.each(arr4, function (item) { alert(item); });
如果不写参数，函数里边用this，那个就是数组的值，对于Dictionary也是一样
var arr5 = [12, 23, 32];
$.each(arr5, function () { alert(this); });
或者
var arr6 = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
$.each(arr6, function () { alert(this); });
普通的数组可以使用无参，dictionary风格最好用key，value
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var arr = [1, 3, 5];
//对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组
var arr2 = $.map(arr, function (item) { return item * 2; });
alert(arr2);
//$.each(arr,fn)对数组array中每个元素调用fn函数进行处理，没有返回值
var arr3={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
$.each(arr3, function (key, value) { alert(key + "=" + value); });
//如果是普通风格的数组，则key的值是序号,value的值就是数组的值
var arr4 = [12, 23, 32];
$.each(arr4, function (item) { alert(item); });
//this表示取得当前元素的value
//如果不写参数，函数里边用this，那个就是数组的值
var arr5 = [12, 23, 32];
$.each(arr5, function () { alert(this); });
//如果不写参数，函数里边用this，那个就是数组的值,对于Dictionary也是一样
var arr6 = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
$.each(arr6, function () { alert(this); });
</script>JQuery对象、Dom对象
JQuery对象就是通过JQuery包装Dom对象后产生的对象，Dom对戏那个要想通过JQuery进行操作，先要转换成JQuery对象
将Dom对象转换为JQuery对象的方法：$(dom对象)
将JQuery对象转换为Dom对象的方法：var Dom对象=JQuery对象[0] 或者 var Dom对象=JQuery对象.get(0)
$(function () { $("#div1").html("<a href='http://www.baidu.com'>百度</a>"); var conn = $(div1)[0]; alert(conn.innerHTML); });
alert($("#div1").html()); html方法里边写参数就是赋值，不写参数就是取值
$(function () { alert($("#div1").html("<a href="http://www.baidu.com">百度</a>")); });
$("#div1").html()就相当于Dom中：document.getElementById("div1").innerHTML;
$("#div1")得到的就是JQuery对象，JQuery对象和Dom对象都只能调用各自的对象的方法，在Dom中的innerHTML在JQuery中就是错的
JQuery方法
修改样式：$("#div1").css("background","red"); 将id为div1的标签背景设置为红色
$(function () { $("#div1").css("background", "red") });
获得样式：$("#div1").css("background");只要不传第二个参数的值就是获得样式
$(function () { alert($("#div1").css("background")); });
修改value： $(#div1).val("abc");
$(function () { $("#txt1").val(new Date()) });
获得value： $("#div1").val(); 只要不传值就是获得\
$(function () { alert($("#txt1").val()); });
类似的获得设置innerText、innerHTML .后边用text()和html()
$(function () { $("#div1").html("abc<font color='Yellow'>innerHTML</font>def") });
$(function () { alert($("#div1").html()) });
$(function () { alert($("#div1").text()) });
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
// //html方法里边写参数就是赋值，不写参数就是取值
// $(function () { alert($("#div1").text()); });
// $(function () { alert($("#div1").html()); });
// $(function () { $("#div1").html("<a href='http://www.baidu.com'>百度</a>"); var conn = $(div1)[0]; alert(conn.innerHTML); });
//修改样式：$("#div1").css("background","red"); 将id为div1的标签背景设置为红色
$(function () { $("#div1").css("background", "red") });
//获得样式：$("#div1").css("background");只要不传第二个参数的值就是获得样式
$(function () { alert($("#div1").css("background")); });
//修改value： $(#div1).val("abc");
$(function () { $("#txt1").val(new Date()) });
//获得value $("#div1").val(); 只要不传值就是获得
$(function () { alert($("#txt1").val()); });
//类似innerText、innerHTML 修改 获得
$(function () { $("#div1").html("abc<font color='Yellow'>innerHTML</font>def") });
$(function () { alert($("#div1").html()) });
$(function () { alert($("#div1").text()) });
</script>
</head>
<body>
<div id="div1">你现在<font color="Yellow">在哪里呢？</font></div>
<input type="text" id="txt1" />
</body>JQuery选择器 *
$("body *")取得body下得所有控件
1.JQuery选择器用于查找满足条件的元素
$("#控件id")来根据控件的id获得控件的jquery对象，相当于Dom中getElementById:
$("#"div1).html("<font color='red'>你好</font>")
$("TagName")来获得所有制定标签的jquery对象，相当于Dom中getElementsByTagName：
$(function(){
$("#btnClick").click(function(){
$("p").html("所有都是P的标签");
});
}); //相当于Dom中先获得id为btnClick的标签，然后给在的单击事件里获取所有标签为p的元素（getElementsByTagName）
2.CSS选择器，同时选择拥有样式的多个元素
<html>
<head>
<title></title>
<style type="text/css">
.test
{
background-color:Red;
color:Yellow;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".test").click(function () {
alert("此为警告信息");
});
});
</script>
</head>
<body>
<p>test1</p>
<div class="test">div1</div>
<p class="test">test2</p>
<input type="button" class="test" value="样式选择器" />
</body>
</html>3.多条件选择器
$("p,div,span.menuitem"), 同时选择p标签、div标签和拥有menuitem样式的span标签元素
4.层次选择器
$("div li") 获取div下得（所有）li元素
$("div > li") 获取div下得直接li子元素
$(".menuitem + div")获取样式名为menuitem之后的（第一个）div元素
$(".menuitem ~ div")获取样式名为menuitem之后的（所有）div元素
注意：选择器表达式中的空格不能多不能少
JQuery的迭代
JQuery选择器返回的是一个对象数组，它是对数组中每个元素迭代调用方法，因此即使通过id选择的元素不存在也不会报错，如果要判断制定的id是否存在，可以再之前写：
if($("#btn1").length<=0){
alert("id为btn1的元素不存在！");
}
节点遍历
next()方法：用于获取节点之后（挨着的）的同辈元素（标签级别相同）
next(指定标签)方法：：用于获取指定节点之后（挨着的）的同辈元素
nextAll()方法：用于获取节点之后的所有同辈元素
nextAll(指定标签)方法：用于获取指定标签节点之后的所有同辈元素
siblings()方法：用于获取所有的同辈元素
siblings(指定标签)方法：用于获取指定标签所有的同辈元素
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$("div").click(function () { alert($(this).next().text()); });
//$("div").click(function () { alert($(this).next("div").text()); });
//$("div").click(function () { alert($(this).nextAll().text()); });
//$("div").click(function () { alert($(this).nextAll("div").text()); });
//$("div").click(function () { alert($(this).siblings().text()); });
//$("div").click(function () { alert($(this).siblings("div").text()); });
//点击那个，就将之后所有指定标签的背景变成红色
//$("div").click(function () { $(this).nextAll("div").css("background","red") });
//点击那个就将那个背景色变成红色，其他为白色
//$("div").click(function () { $(this).css("color", "red"); $(this).siblings("div").css("color", "black") });
$("div").click(function () { $(this).css("color", "red").siblings("div").css("color", "black") });
//评分控件
//$("tr > td").mouseover(function () { $(this).css("cursor", "pointer"); $(this).text("★"); $(this).nextAll().text("☆") });
//可以不用每个都要$(this)... 直接在第一次之后接着.就行（链式编程，可以一直.下去）
$("#table1 td").text("☆").mouseover(function () { $("#table1 td").css("cursor", "pointer").text("★"); $(this).nextAll().text("☆") });
});
</script>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<p>eee</p><br />
<table id="table1">
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>基本过滤器
: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>
注意：gt、lt联合使用时，lt的序列号是从gt选出元素之后从排的序列号开始的
:hander 选取所有的h1-h6的元素
$(":hander")
:animated 选取正在执行动画的元素
$("div:animated")选取正在执行动画的<div>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#table1 tr:first").css("fontSize", "30px");
$("#table1 tr:last").css("color", "red");
$("#table1 tr:gt(0):lt(3)").css("fontSize", "28px"); //lt(3)是从gt(0)出的新序列号中的序号
$("#table1 tr:gt(0):even").css("background", "yellow"); //表头不参与，所以要从第gt(0)行正文开始算
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red"); //相对选择，指定在此table1下边的tr中的所有td，点击背景变红。相对定位只要在第二个参数中用$(),第二个参数为相对元素
});
});
</script>
</head>
<body>
<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>张三</td><td>90</td></tr>
<tr><td>李四</td><td>90</td></tr>
<tr><td>郝宇</td><td>90</td></tr>
<tr><td>小军</td><td>90</td></tr>
<tr><td>小杰</td><td>90</td></tr>
<tr><td>平均分</td><td>90</td></tr>
</table>
</body>属性过滤器
$("div[id]")选取有id属性的<div>
$("div[name=abc]")选取name属性为abc的<div>（JQuery中没有对getELementsByName进行封装）
$("div[title=test]")选取title属性为test的<div>
$("div[title!=test]")选取title属性不为test的<div>
表单对象选择器（过滤器）注意：(:)前后不能有空格
$("#form1:enabled")选取id为form1的表单内所有启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素（Radio、CheckBox）
$("select:selected")选取所有选中的选项的元素（下拉列表）
$(":input")
选取所有的<input>、<textarea>、<select>和<button>元素。
它和$("input")不一样，$("input")只获得<input>标签
$(":text") 选取所有的单行文本框 相当于$("input:[type=text]")
$(":password")选取所有的密码框。
同理还有：
:radio、:checkBox、:submit、:image、:reset、:button、:file、:hidden
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name=names]").click(function () {
var arr = new Array();
$("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val() });
$("#message").text("共选中" + arr.length + "项：" + arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="zs" />张三
<input type="checkbox" name="names" value="ls" />李四
<input type="checkbox" name="names" value="ww" />王五
<p id="message"></p>
</body>JQuery的Dom操作
使用html()方法读取或者设置元素的innerHTML
使用text()方法读取或者设置元素的innerText
使用attr()方法读取或者设置元素的属性（对于JQuery没有封装的属性用attr进行操作）
alert(@("a:first").attr("href")); 获取a标签的第一个超链接地址
$("a:first").attr("href","http://www.baidu.com"); 设置a标签的第一个超链接地址
removeAttr删除属性（注意删除不是清空）
动态创建Dom节点
方法：$(html字符串)，返回一个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()方法用来在元素的末尾追加元素。
prepend()方法在元素的开始添加元素
after() 方法在元素之后添加元素（兄弟）
before()方法在元素之前添加元素（兄弟）
删除节点 remove()
remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
将节点清空 empty()
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//动态加载网站
// var link = $("<a href='http://www.baidu.com'>百度</a>");
// $("div:first").append(link);
});
$(function () {
//动态加载网站列表
// var data = { "百度": "http://www.baidu.com", "谷歌": "http://www.google.com" };
// $.each(data, function (key, value) {
// var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
// $("#table1").append(tr);
// });
});
</script>
</head>
<body>
<div></div>
<table id="table1"></table>
</body>节点操作
替换节点：
$("br").replaceWith("<hr/>"); 将<br/节点替换为<hr/>
包裹节点：
$("b").wrap("<font color='red'></font>") 将所有的粗体字红色显示
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#replace").click(function () {
$("br").replaceWith("<hr />");
$("p").wrap("<font color='red'></font>")
});
});
</script>
</head>
<body>
qweqwqw<br />
的首付款了<br />
第三方<br />
热帖个<br />
<p>d321321</p>
<p>e31esfd</p>
<input type="button" value="replaceWith" id="replace" />
</body>样式操作
获取样式：attr("class") 设置样式：attr("class","myclass") 追加样式：addClass("myclass") 移除样式：removeClass("myclass")
切换样式：toggleClass("myclass") 判断是否存在样式：hasClass("myclass")
给body设置body{filter:Gray;}可以让网页编程黑白显示（哀悼日灰白效果）（仅IE）
<head>
<title></title>
<style type="text/css">
.class1{ background-color:Red; }
.class2{ font-size:50px; }
.class3{ color:Yellow;}
.night{ background-color:Black;}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
$("#div1").addClass("class2");
});
$("#btnRemove").click(function () {
$("#div1").removeClass("class2");
});
$("#btnToggle").click(function () {
$("#div1").toggleClass("class3");
});
$("#btnLight").click(function () {
$("body").toggleClass("night");
});
});
</script>
</head>
<body>
<div id="div1" class="class1">你好</div>
<input type="button" value="添加样式" id="btnAdd" />
<input type="button" value="移除样式" id="btnRemove" />
<input type="button" value="切换样式" id="btnToggle" />
<input type="button" value="开关灯" id="btnLight" />
</body>RadioButton操作
取得RadioButton的选中值
$("input[name=names]:checked").val()
<input checked="checked" name="names"type="radio" value="男" />男
<input checked="checked" name="names"type="radio" value="女" />女
<input checked="checked" name="names"type="radio" value="未知" />未知
设置RadioButton，CheckBox的选中值
$("input[name=names]").val(["女"]);
或者：
$(":radio[name=names]").val(["女"]); 注意：val中参数的[]不能省略
单独设置值用attr方法将checked属性设置为true
$(":checkbox[value=篮球]").attr("checked",true);
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#getValue").click(function () {
alert($(":radio[name=names]:checked").val());
});
$("#setValue").click(function () {
//$(":radio[name=names]").val(["女"]);
$("#test1").attr("checked", true);
});
$(":checkbox").val(["篮球", "足球"]);
});
</script>
</head>
<body>
<input name="names" type="radio" value="男" />男<br />
<input name="names" type="radio" value="女" />女<br />
<input id="test1" name="names" type="radio" value="未知" />未知<br />
<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<input type="button" value="设值" id="setValue" />
<input type="button" value="取值" id="getValue" />
</body>事件
直接写事件调用的click方法其实是用bind方法创建的，如果每次写都很麻烦，所以JQuery内部自动将bind方法简化，可以直接用click方法 unbind("click") 移除事件
合成事件：hover(函数1，函数2) 当鼠标放在元素上时调用函数1，当鼠标离开元素的时候调用函数2。
相当于将mouseenter跟mouseleave合并在一起了（不经常用）
事件冒泡：JQuery中也想JavaScript一样有事件冒泡
$(function () {
$("#p1").click(function () { alert("p被点击了"); });
$("#td1").click(function () { alert("td被点击了"); });
$("#tr1").click(function () { alert("tr被点击了"); });
$("#t1").click(function () { alert("t被点击了"); });
});
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
方法：
终止冒泡：调用stopPropagetion() 只要在匿名函数中传一个参数（一般写e，也可以自己写），然后再函数体重调用e.stopPropagetion()方法就可以阻止该元素以上的冒泡
$("#tr1").click(function (e) { alert("tr被点击了"); e.stopPropagation(); });
如果在上一级跟下一级都有onclick事件，只向触发下一级的事件，就可以在此元素上加e.stopPropagetion()方法将其终止掉
阻止默认：preventDefault()方法 相当于Dom中window.event.returnValue =false; 阻止其行为用法和终止冒泡类似
$(":submit").click(function (e) { if ($("#name").val().length <= 0) { alert('用户名不能为空'); e.preventDefault(); } });
<form action="aaa.aspx">
<input type="submit" value="提交" />
</form>
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#p1").click(function (e) { alert("target源，this只是当前"); alert($(this).html()); alert($(e.target).html()); });
$("#td1").click(function (e) { alert("冒泡出的事件this不是表示当前"); alert($(this).html()); alert($(e.target).html()); });
$("#zb").click(function (e) { alert(e.pageX + ":" + e.pageY); });
$("#one").one("click",function () {
alert('one方法只能触发一次');
});
$("#until").bind("click", function () {
alert('bind方法可以一直触发');
});
});
</script>
</head>
<body>
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
<input type="button" value="坐标" id="zb" />
<input type="button" value="一次性事件" id="one" />
<input type="button" value="一直触发事件" id="until" />
</body>其他事件
属性：pageX、pageY(触发事件的X,Y坐标，相当于Dom中的clientX、clientY)、target（获得触发事件的元素,相当于Dom中srcElement）
which如果是鼠标事件获得按钮（1左键，2中键，3右键）
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下（bool值）
keyCode、charCode属性发生事件的keyCode(键盘码)、charCode(ASCII码)
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#p1").click(function (e) { alert("target源，this只是当前"); alert($(this).html()); alert($(e.target).html()); });
$("#td1").click(function (e) { alert("冒泡出的事件this不是表示当前"); alert($(this).html()); alert($(e.target).html()); });
$("#zb").click(function (e) { alert(e.pageX + ":" + e.pageY); });
});
</script>
</head>
<body>
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
<input type="button" value="坐标" id="zb" />
</body>动画
show()、hide()方法显示、隐藏元素。 toggle()方法可以在显示、隐藏之间切换
如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定的时间进行动态显示、隐藏（单位为毫秒）
也可以用内置的速度fast(200毫秒)、normal（400毫秒）、slow（600毫秒） JQuery动画函数中需要速度的地方一般也可以使用这三个值
$(function () {
$("#qh").click(function () {
$("#div1").toggle();
});
$("#yc").click(function () {
$("#div1").hide();
});
$("#xs").click(function () {
$("#div1").show();
});
});
<div id="div1">看了离开</div>
<input type="button" value="隐藏" id="yc" />
<input type="button" value="显示" id="xs" />
<input type="button" value="切换" id="qh" />JQuery插件：
JQuery cookie：
cookie就是保存在浏览器上的内容（就是一些数据），用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问的时候就可以取出上次保存（记忆）的内容。
cookie不是JQuery特有的概念，只不过JQueryCookie把它简化的更好用了而已。
Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的如果禁用了Cookie就不能使用了，不过一般不考虑Cookie的情况。
Cookie的几个特征：
Cookie是与域名相关的，所有163.com不能读取baidu.com记录的Cookie，所有读取、设置的时候不用考虑域名Cookie的冲入
一个域名能写入的Cookie总尺寸是有限制的，一般就是几千字节，能写入的Cookie总条数一般也就几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie
Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除，用户也可能会手动清除
JQuery Cookie使用
使用方法：Cookie保存的就是键值对
1.添加jquery.cookie.js文件
2.设置值，$.cookie('名字','值')。cookie中保存的值都是文本
3.读取值，var v=$.cookie('名字')
alert($.cookie("用户名"));
$.cookie("用户名","tom"); 在同域名的另外一个页面中也能读取到
设置值的时候还可以设置第三个参数：$.cookie('名字','值',{expires:7,path:'/',domain:'baidu.com',secure:true})
expires表示要求浏览器保存Cookie几天（这只是对浏览器的建议，可能没到时间浏览器就自动清除了），如果不设定expires，那么在浏览器关闭以后就清除，options参数
哪个设置那个
domain表示这个域名下得含有baidu.com的子页面都可以访问此Cookie
//记录上次用户退出时的用户名、密码
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.cookie("UserName")) {
$("#username").val($.cookie("UserName"));//将上次记录的用户名密码读取到页面
$("#password").val($.cookie("Password"));
}
$("#login").click(function () {
$.cookie("UserName", $("#username").val());//将用户登陆时的用户名，密码保存到Cookie中
$.cookie("Password", $("#password").val());
});
});
</script>
</head>
<body>
<label for="username">用户名：</label><input type="text" id="username" /><br />
<label for="password">密 码：</label><input type="password" id="password" /><br />
<input type="button" value="登陆" id="login" />
</body>//记录用户上次退出时的背景颜色
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tbColor td").css("cursor", "pointer").click(function () {
var bgcolor = $(this).css("background-color");
$("body").css("background-color", bgcolor);
$.cookie("LastBgColor", bgcolor, { expires: 7 }); //{expires:7}设置保存数据7天，这样浏览器关闭就暂时不会清除Cookie了
});
if ($.cookie("LastBgColor")) {
var bgcolor = $.cookie("LastBgColor");
$("body").css("background", bgcolor);
}
});
</script>
</head>
<body>
<table id="tbColor">
<tr>
<td style="background-color:Red">红色</td>
<td style="background-color:Yellow">黄色</td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>JQueryUI插件
度娘ing......
----------------------
Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
详细请查看：http://edu.csdn.net/heima/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员_Dom学习知识简单总结
- 黑马程序员_HTML学习知识简单总结
- 黑马程序员_.NET学习15(回看总结JQuery)
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 黑马程序员_ADO.NET学习知识总结
- 黑马程序员——OC基础学习(四)---封装,继承和多态的学习知识总结
- 黑马程序员学习log第七篇基础知识：JAVA的面向对象之GUI总结
- 黑马程序员_java基础知识学习总结二
- 黑马程序员学习log第五篇基础知识：JAVA的面向对象之集合总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 黑马程序员_Java Script简单知识总结（JS特有的）
- 函数知识学习和第一周简单总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 黑马程序员_java基础知识学习总结四
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 黑马程序员_C#面向对象学习知识总结1
- 黑马程序员-基础知识学习总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 黑马程序员——OC基础学习(二)---对象方法和类方法的学习知识总结
- 黑马程序员_C#面向对象学习知识总结2