本文主要从以下几方面介绍jQuery应用中的内容：
1 jQuery 节点遍历
2 jQuery 中的过滤器
3 jQuery 属性操作
4 jQuery Dom节点操作
5 几个jQuery例子
6 jQuery 中的事件
7 jQuery 中的动态效果
一、 jQuery 节点遍历
== next() //用于获取节点之后的第一个同辈元素 注意,next() 中可以加过滤器 例如 next("div")
== nextAll() //获取节点之后的所有同辈元素(注意: 是节点之后,这一点是和siblings不同的)
<html> ????<head> ?????<script type="text/javascript" src="js\jquery-1.4.4.js"></script> ?????<script type="text/javascript"> ??????$(function(){ ???????$("#ulAAAA li").click(function(){ ????????$(this).css("background","yellow"); ????????$(this).next().css("background","pink"); ???????}); ??????}); ?????</script> ????</head> ????<body> ?????<form> ???????????<table id="table1" width="80%" border="1" cellspacing=0> ???????????<tr><td>姓名</td><td>年龄</td><td>职业</td><td>爱好</td></tr> ???????????<tr style="display:none"><td>杨帆</td><td>38</td><td>运营</td><td>唱歌（这一行不可见）</td></tr> ???????????<tr><td>王小花</td><td>23</td><td>设计师</td><td>绘画</td></tr> ???????????<tr><td>张明明</td><td>34</td><td>产品经理</td><td>书法</td></tr> ???????????<tr><td>赵志明</td><td>21</td><td>大学生</td><td>计算机</td></tr> ???????????<tr><td>马大利</td><td>46</td><td>董事长</td><td>旅游</td></tr> ???????????</table> ?????</form> ?????<ul id="ulAAAA"> ??????<li>刘备</li> ??????<li>关羽</li> ??????<li>张飞</li> ??????<li>诸葛</li> ??????<li>孙权</li> ??????<li>曹操</li> ??????</ul> ????</body></html>==siblings() //获取所有的同辈元素 (可以不是同类的,只要是同辈就行) 注意它也可以传参 例如 siblings(li)
//表格的被点击行高亮 : ("#table1 tr").click(function(){ ??$(this).css("background","pink"); ??$(this).siblings().css("background","white");});//用链式风格写: ?//本例为用鼠标滑过的时候,加亮滑过的表格$("#table1 tr").mouseover(function(){$(this).css("background","springgreen").siblings().css("background","white"); ????});//星级评分的例子 ?????????$(function(){ ????$("#table2 td").html("<img src=‘star.jpg‘ />"); ????$("#table2 td").mouseover(function(){ ????$("#table2 td").html("<img src=‘star2.jpg‘ />" ); ????$(this).nextAll().html("<img src=‘star.jpg‘ />" ); ???});});二、jQuery 中的过滤器
$("#table1 tr:eq(3)").css("background","green"); //将table1中第四行置成绿色 这是前面用的$("#table1 tr").eq(2).css("background","red"); ?//这个用的是过滤注意: 过滤与上面的不同之处在于,过滤,是对已选出来的元素,再进行过滤
例子：
//第一行加大,变粗体$("#tableScore tr:first").css("font-size","35").css("font-weight","bold");//第二,三,四行变红$("#tableScore tr:gt(0):lt(3)").css("color","red") //注意,它是从前一个gt(0)选择后的集合中再过滤//最后一行背景变绿色$("#tableScore tr:last").css("color","green")//改变最后一行,最后一个单元格的文字$("#tableScore tr td:last").html("打狼了");//隔行变色$("#tableScore tr:gt(0):even").css("background","pink"); //注意,隔行变色,要把第一行刨出去,所以用了 gt(0)//$("#table1 tr:gt(0):even").css("background","pink").next().css("background","silver") 这样也行, next() 取的是该奇数行下面的一行三、jQuery 属性操作
在帮助文档的属性标签下,有三大类 属性 CSS HTML代码,文本/值
== 属性
--attr(key,value) //为所有匹配的元素设置一个属性值
<img /> ????<img />$("img").attr("src","star2.jpg").attr("title","这是动态加上的属性");--attr(key)
alert($("img").attr(‘src‘)); ????????????alert($("img").attr(‘dog‘)); //可以取自己写上去的属性值--attr(properties) // 将一个“名/值”形式的对象设置为所有匹配元素的属性(即可同时设置多个属性)
$("img").attr({ src: "test.jpg", alt: "Test Image" });--removeAttr //移除属性
$("img").removeAttr("src");== CSS
--addClass(class) //为每个匹配的元素添加指定的css类名,注意,它会进行叠加
//例子,点击一个按纽,给一个<p>加上样式.waring{ ???color: red;} ??<p> dog</p> ????$("button").click(function(){ ????$("p").addClass("waring");});// ?例子,处理文本框的得到焦点和失去焦点事件$(function(){$("#userName").focus(function(){$("#lblMsg").removeClass("ok").addClass("info");}).blur(function(){$("#lblMsg").removeClass("info").addClass("ok"); ???});});// 上例也可以这样写$(function(){$("#userName").focus(function(){$("#lblMsg").attr("class","info"); ??//这里的class 也可以写成 className ?????????????????????????????}).blur(function(){$("#lblMsg").attr("class","error"); ?????????????????????????????}); ???}); ???????});--toggleClass(class) //如果存在（不存在）就删除（添加）一个类
--removeClass([class]) // 删除css
$("p").removeClass("waring");== 文本/值
--html() //取得第一个匹配元素的html内容
--html(val) //设置每一个匹配元素的html内容
--text() //略
--text(val) //略
--val() //获得第一个匹配元素的当前值
注意：在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
$(function(){$("button").click(function(){$("p").empty();$("p").append( ?"单选的值:"+$("#country").val() +"<br>"+ "多选的值" +$("#badMan").val().join(‘-‘) ??);}); });<select id="country"> ?<option>中国</option> ?<option selected>德国</option> ?<option>马来西亚</option></select> ???????????????????????????????????????<select id="badMan" multiple="multiple"> ?<option selected="selected">安倍晋三</option> ?<option>秦桧</option> ?<option selected="selected">奥八马</option></select><p>
.......
</p> -- val(array) // checkbox,select,radio等都能使用为之赋值
<select id="country"> ??<option>中国</option> ??<option>德国</option> ??<option>马来西亚</option></select> ??????????????????????????????????<hr> ???????????????????????????????????<select id="badMan" multiple="multiple"> ??<option selected="selected">安倍晋三</option> ??<option>秦桧</option> ??<option >奥八马</option></select> ???????????????????????????????????<hr> ?<input type="checkbox" value="西瓜"/> check1 ?<input type="checkbox" value="鱼"/> check2 ?<input type="radio" value="水蜜桃"/> radio1 ?<input type="radio" value="虾"/> radio2 ???????????????????????????????????<button>开选</button> ???????????????????????????$("button").click(function(){$("#country").val("马来西亚");$("#badMan").val(["奥八马", "秦桧"]); //给能多选的下拉框同时选两个值$("input").val(["鱼", "虾"]);});四、jQuery Dom节点操作
在帮助文档的 文档处理 项下,有四大类 内部插入,外部插入,包裹,替换,删除,复制动态创建Dom结点，使用 $(html字符串)来创建Dom结点,并且返回一个jQuery对象，然后调用append等方法,将新创建的节点添加到Dom中。
//例:$("#divNewNode").append("<a href=‘http://www.sin.com‘>新浪</a>"); // 这个没有使用$强转也行,在帮助手册中,就没有使用强转 ?<% List<CateInfo> cateList=CateDao.getCateList(); %> ?<% for(CateInfo c:cateList) { %>$("#select1").append("<option value=‘<%=c.getCateId()%>‘><%=c.getCateName()%></option>"); ?<% ??} ?%>}); ????????????????????????????????????????????????????????????????????????????var link=$("<a href=‘http://www.sin.com‘>馊狐</a>"); //本例使用了强转 link.css("font-size",30); //因为强转后的对象就是一个jQuery对象,所以可以使用jQuery的任何方法$("#divNewNode").append(link); ?????????????== 内部插入
---append(content) //向每个匹配的元素内部追加内容。上例用的就是这个方法
---prepend(content) //向每个匹配的元素内部前置内容。
<p>I would like to say: </p>$("p").prepend("<b>Hello</b>");例子:根据给定数据,动态创建一个table
var tData={"陈某":"95","张某某":"80","孙某某":"80","范跑跑":"56","杨达才":"80"};$.each(tData,function(key,value){var tr="<tr><td>"+key+"</td><td>"+value+"</td></tr>" ?这里为什么没写 value.value? 因为它不是对象类型的,就是一个常量$("#tableBBB").append(tr);});== 外部插入
----after(content) // $("p").after("<b>Hello</b>"); 注意 它是添加兄弟
----before(content)
== 删除
--- remove([expr]) //从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
<p>哈喽</p>你<p>好</p>$("p").remove(); //结果 ?你注意:remove 方法,有返回值,返回被删除的结点对象,还可以继续使用被删除的节点,比如将其移动到别的地方
比如：
ar list=$("#ul1 li").remove();
$("#ul2 ").append(list);
其实写成一句即可 $("#ul2 ").append($("#ul1 li").remove());
--- empty() ///删除匹配的元素集合中所有的子节点
<p>Hello, <span>Person</span> <a href="#">and person</a></p> ???????$("p").empty(); // <p></p>--- detach([expr]) //从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
//例子:<style type="text/css">.shengxiu{background:pink ???????}</style> ???????????????????????<ul id="ulRemove"> ???????<li>刘备</li> ???????<li class="shengxiu">关雨生锈了</li> ???????<li>张非</li> ???????<li class="shengxiu">孙权生锈了</li> ???????<li>黄盖</li> ???????<li class="shengxiu">吕布生锈了</li> ???</ul> ???<button id="btnRemove">除锈</button> ???$("#btnRemove").click(function(){$("#ulRemove li.shengxiu").remove(); ???????});//权限列表的添加<select id="selRole" multiple="multiple" style="width:15%; height:15%"> ????<option>增加</option> ???<option>删除</option> ???<option>修改</option> ???<option>查询</option></select> ???<button id="btnGo" >>></button> ???????????????????????$("#btnGo").click(function(){ ???$("#descRole").append( ???????????$("#selRole option:selected").remove()); ???});五、几个jQuery例子
//例一：设置一排复选框,在勾选时,将已经勾选的项取出,列在一个<p>内<input type="checkbox" name="ckStudent" value="赵明明">赵明明<input type="checkbox" name="ckStudent" value="杨显彪">杨显彪<input type="checkbox" name="ckStudent" value="矫咪">矫咪<input type="checkbox" name="ckPerson" value="杨国福">杨国福 ?//注意,它的name与其他不同,要过滤掉<input type="checkbox" name="ckTeacher" value="老王头">老王头 //注意,它的name与其他不同,要过滤掉 ???????????????????<p id="pMsg"> </p> ???????????????????$("input[name=ckStudent]").click(function(){ ???var array=new Array();
???$("input[name=ckStudent]:checked").each(function(key,obj){ ???????array[key]=obj.value; ?????????????????????????}); ???/* 这是以前用过的,也可以 ?????$.each($("input[name=ckStudent]:checked"),function(key,obj){ ????????array[key]=obj.value; ?????????????????????????}); ?*/ ???$("#pMsg").text(" 共选中了"+array.length+"项 ??"+ array.join(",")); ????????????????????????});//例二,计算器<input type="text" id="num1" />+<input type="text" id="num2"/><button id="btnAdd" >=</button><input type="text" ?id="num3" /> $("#btnAdd").click(function(){ ???var num1=$("#num1").val(); ???var num2=$("#num2").val(); ???????????????????????????????????????var result= parseInt(num1)+parseInt(num2); $("#num3").val(result);});//例三 10秒钟后可用的按钮var second=10;var interval; ?????????????????????$(function(){$("#btnArgee").attr("disabled" ,true ); ?????????????????????????????interval=setInterval("tick()",1000); ???}); ????????????????????????function tick(){ if(second ==0){$("#btnArgee").val("同意");$("#btnArgee").attr("disabled" ,false ); clearInterval(interval); ??????????????}else{$("#btnArgee").val("看好点协议内容,你还有 "+second-- +" 秒"); ??????????????}} ????????????????<button id="btnArgee"> ?</button>//例子 $(function(){$("#btnPub").click(function(){ ????????????????????????????????var title=$("#txtTitle").val();var content=$("#txtContent").val(); ????????????????????????????????var tr="<tr><td>"+title+"</td><td>"+content+"</td></tr>"; ?????????????????????????????????$("#tableTTT").append(tr); ???????????????????????????????????});}); ???????????????????????<p>十一快放假了,都乐的不是动静了</p> ??????????????????????????????<table id="tableTTT"> ??<tr><td>匿名</td><td>沙发</td></tr> ??</table> ??????????????????????????????<input type="text" id="txtTitle" /> <br /> ??<textarea id="txtContent" rows="10" cols="30"></textarea> ???????????????????????????<button id="btnPub">发布</button>//例子 选择水果<ul id="uiShuiguo"> ???<li>香蕉</li> ???<li>苹果</li> ???<li>哈蜜瓜</li> ???<li>芒果</li> ???<li>草梅</li> ???<li>水蜜桃</li></ul> ?????????????????????$("#uiShuiguo li").css("cursor","pointer").mouseover(function(){$(this).css("background","springgreen").siblings().css("background","white").click(function(){$(this).css("background","lightskyblue").appendTo($("#ul2")); ???????????????????????????????????????????????});}) ?????????六、jQuery 中的事件
分为以下几类 页面载入, 事件处理 ,事件委派,事件切换,事件
1.页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(document).ready(function(){// 在这里写你的代码...});//简单的写法$(function(){// 在这里写你的代码...})2.事件处理
-- bind(type, [data], fn) //为每个匹配元素的特定事件绑定事件处理函数
下例:在 btn1 这个按纽点击的时候,给 div 这个元素加个 onclick事件
$("#btn1").click(function(){$("#div1").bind("click",function(){ ???alert($(this).html()); ???});});思考:它和直接写 $("#div1").click(function(){...}) 有什么区别?
主要是后者一般都在 $.ready() 中初始,而bind可以随时绑定事件
-- one(type, [data], fn) 绑定事件只执行一次
例子:将上例中的 bind 直接改成 one 即可
-- unbind([type], [fn]) //将绑定事件取消
$("p").unbind() //取消所有绑定事件$("p").unbind( "click" ) ?//取消绑定的click事件例子,动态给div的click绑定两个函数,然后取消一个
$(function(){$("#btn1").click(function() {$("div").bind("click",test);$("div").bind("click",eat); ???????????}); ???????????????????????????????????????????$("#btn2").click(function() {$("div").unbind("click",test); ????????????????????????});}); ?????????????????????????????????????function test(){ ??alert("ok"); ??} ?function eat(){ ??alert("正在eat 东西"); ??} ???????????????????????????<div>我是div </div><button id="btn1">激活div</button><button id="btn2">取消div事件</button>3.事件委派
4.事件切换
-- hover(over,out) //一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
参数 over 表示鼠标移到元素上要触发的函
参数 out 表示鼠标移出元素时要触发的函数
//鼠标移动到表格上的时候高亮 ??????????????????????$("td").hover( function(){$(this).addClass("light"); ??????????}, function(){$(this).removeClass("light"); ??????????}); ?????????????????????-- toggle() //切换元素的可见状态
-- toggle(speed, [easing], [callback]) // easing 用来指定切换效果，默认是"swing"，可用参数"linear"
$("p").toggle("fast",function(){ ?????alert("Animation Done.");});--toggle(switch) //根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。
var flip = 0;$("button").click(function () {$("p").toggle( flip++ % 2 == 0 );});5.事件
--blur() //调用被选中元素的 blur事件
--blur(fn) //设定blur事件
注:常用的事件
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, // mouseout, mouseenter 组合起来其实就是hover,mouseleave,change,select,submit,keydown,keypress,keyup,error
七、jQuery 中的动态效果
jQuery中 动态效果主要有以下几类：
基本、 滑动、 淡入淡出、 自定义、 设置
1.基本
--hide() //slow", "normal", "fast
--hide(speed, [easing], [callback]) //，easing 默认是"swing"，可用参数"linear"
用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){ ????????alert("Animation Done."); ????????});--show()
--show(speed, [easing], [callback])
2.滑动
--slideDown(speed, [easing], [callback]) //通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
$("p").slideDown("slow"); //实验发现,它的效果和show 和 hide很象,只不过它只在是垂直方向上动作
--slideToggle(speed, [callback])
--slideUp(speed, [easing], [callback])
3.淡入淡出
--fadeIn(speed, [easing], [callback])
--fadeOut(speed, [easing], [callback])
--fadeTo(speed, opacity, [easing], [callback]) // $("div").fadeTo("slow", 0.2); 调到指定的透明度
--fadeToggle(speed, [easing], [callback])
$("p").fadeToggle("slow");
<table id="table1" ?width="80%" border="1" cellspacing=0 ><tr><td>这是不变的</td><td>数据一</td><td>数据三</td></tr>
</table> ??????????????Web前端基础——jQuery（三）
原文地址：http://www.cnblogs.com/1693977889zz/p/7604658.html