jquery讲解（二）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Demo01.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入Jquery的js文件 --> <script type="text/javascript" src="./js/jquery-1.4.4.js"></script> <script> /** 内容选择器 1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合 2、:empty 匹配空元素 没有子元素或没有文本的元素 3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合 4、:parent 匹配含有子元素或者文本的元素的对象集合 总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合 */ /**页面载入事件处理*/ $(function(){ /**获取td中含有10的td的对象集合*/ var $tds = $("td:contains('redarmy')"); /**输出此集合的长度*/ alert($tds.size()+"=========="+$tds.text()); /**获取tr中含有redarmy的tr对象的集合*/ var $rtds = $(".rdc:contains('redarmy')");//tr对象 /**输出此集合的长度*/ alert($rtds.text()+"-------"+$rtds.size()); /**获取rdc中td的含有redarmy的td对象集合*/ var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象 alert($rtds1.size()+"===="+$rtds1.text()); /**获取id为qw的tr对象中td的空元素*/ var $etd = $("#qw>td:empty"); alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td> //获取tbody中含有rdc的tbody对象 var $tbdys = $("#tbdy:has(.rdc)"); alert($tbdys.html()+"------------"+$tbdys.size()); //获取tbody中含有rdc的tr对象集合 var $trs = $("#tbdy>.rdc"); alert($trs.html()+"------------"+$trs.size()); //获取.rdc中含有子元素或者文本元素的.rdc的对象 var $tdps = $(".rdc:parent"); //tr对象 alert($tdps.html()+"--------"+$tdps.text()); }) </script> </head> <body> <div align="center"> <div> <h1>内容选择器的应用</h1> </div> <div><table border="1px" cellpadding="0" cellspacing="0"><thead><tr id="thed"><th>序号</th><th>名称</th><th>邮箱</th></tr></thead><tbody id="tbdy"><tr content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><!-- 引入Jquery的文件 --><script type="text/javascript" src="./js/jquery-1.4.4.js"></script><script> /**页面载入处理*/ function test(){ /**不可见性的测试*/ var $hids = $("div:hidden"); alert($hids.html()+"----------"+$hids.text()); /**可见性测试*/ var $vlis = $("#rdc:visible"); alert($vlis.html()); /**表单选择器*/ var $btns = $(":button"); /**获取button按钮中的value属性的值*/ alert($btns.attr("value")+"------------"+$btns.size()); /**遍历所有的button的value属性值*/ for(var i=0;i<$btns.size();i++){ /**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/ // alert($($btns[i]).attr("value")); } //获取btn的子元素为button按钮的input对象 var $divbtns = $("#btn>input:button"); alert($divbtns.size()); //获取所有checkbox的复选框 var $ckbs = $(":checkbox"); //获取ckb中所有checkbox的复选框 var $ckbs1 = $("#ckb input:checkbox"); alert($ckbs1.length); //获取所有的input select 的对象集合 var $ipts = $(":input"); alert($ipts.size()); } $(function(){ //获取所有的checkedinput表单对象 不包含select中的option //var $ickeds = $("input:checked"); var $ickeds = $("input[checked='true']"); alert($ickeds.length); //获取所有复选框被选中的表单对象 /** var $ckbs = $("input:checkbox:checked"); alert($ckbs.length); */ /**根据属性attribute=value*/ var $ckbs = $("input[type='checkbox']:checked"); alert($ckbs.length); /**表单对象的属性： :checked :disabled :enabled :selected 以上的结果可以通过属性进行改造： input[checked='true'] 作业：查看上面三种是否也可以改造*/ });</script></head><body><div><div><h1>可见性的测试</h1></div><div><div style="display: none;">通过样式设计不可见！</div><div> <form action=""> <table> <tr id="rdc"> <td>用户名：</td> <td><input type="text" name="name"/></td> </tr> <tr> <td>性别：</td> <td><select name="sex"> <option>男</option> <option>女</option> </select></td> </tr> <tr> <td>年龄：</td> <td><input type="text" name="age"/></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email"/></td> </tr> <tr> <td>上传：</td> <td><input type="file" name="file"/></td> </tr> <tr id="ckb"> <td>爱好：</td> <td><input type="checkbox" name="fav"/> 看书 <input type="checkbox" name="fav" checked="checked"/>打球 <input type="checkbox" name="fav"/>篮球 <input type="checkbox" name="fav"/>游泳 </td> </tr> <tr> <td><input type="hidden" value="id" name="id"/></td> <td><input type="button" value="修改"/></td> </tr> </table> </form></div></div> <div id="btn"> <input type="button" value="修改1"/> <input type="button" value="修改2"/> <input type="button" value="修改3"/> <input type="checkbox" name="fav" checked="checked"/>游泳 <input type="radio" checked="checked"/>man <input type="radio"/>woman </div></div></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Demo03.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><!-- 引入jquery的js文件 --><script type="text/javascript" src="./js/jquery-1.4.4.js"></script><script>function test() {/**测试设置属性值 attr("key",fn)*/$("#attr>input").attr("value", function() {return "redarmy";});alert("-------中介线-------");/**设置属性及属性值 attr(key,value);*/$("#attr>input").attr("value", "m_j");//获取值var name = $("#attr>input").attr("name");alert(name);//匹配元素中批量设置很多属性的最佳方式/**attr(properties) 名/值 {}*/$("#attr>input").attr( {value : "x_l",disabled : "disabled"});/**移除某个属性*/$("#attr>input").removeAttr("disabled");/**添加类名*/$("#attr>input").addClass("ipt");/**移除类名*/$("#attr>input").removeClass("ipt"); alert("---------------------------执行之前观察效果");/**如果存在（不存在）就删除（添加）一个类。 */$("#attr>input").toggleClass("ipt") alert("---------------------------执行之后观察效果"); $("#attr").html('邮箱：<input name="name" type="text" />');$("#attr").text("<u>Some</u> new text");alert($("#single").val("Single2"));}$(function() { /*如果是type =checkbox,radio,select val值代表的是checked,selected type="text" val("")代表的是value的值*/$("#nam").val("HelloWorld");});</script><style>.ipt {border-color: red;}</style></head><body><div align="center"><div id="attr">用户名：<input name="name" type="text" />密码：<input name="name" type="text" id="nam"/></div> <div> <select id="single"> <option>Single</option> <option>Single2</option> </select> </div></div></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Demo04.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 引入Jquery的js文件 --><script type="text/javascript" src="./js/jquery-1.4.4.js"></script><script type="text/javascript">function test() {/**eq()匹配结果中的第几个对象*/var $p = $("p").eq(1);alert($p.html());/**filter("")过滤*/var $p1 = $("p").filter(".rcd");alert($p1.html());/**filter(",,,,....")可以有多个表达式*/var $p2 = $("p").filter(".rcd,:first");alert($p2.text());}$(document).ready(function() { /**把鱼$(#ad>p).span连接成一个对象*/var $adp = $("#ad>p").add("span");alert($adp.text())});</script></head><body><div><div><h1>筛选的使用</h1></div><div><p>过滤</p><p>查找</p><p class="rcd">串联</p></div><div id="ad"><p>Hello</p><span> redarmy_chen </span></div></div></body>