<html xmlns="http://www./1999/xhtml"> <head> <title >过滤选择器</ title> <style type="text/css"> table{ border-collapse:collapse ;} #tbMy td{ width :122px; height:36px ; border: 1px solid #000;} </style > <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script> <script type="text/javascript"> //------------------------基本过滤器：:first/:last/:not()/:even/:odd/:eq()/:gt()/:lt()/:gt():lt()/.slice(start,end)/.index() $( function () { //$("td:first").html("first过滤出第一个");//相当于$("td").eq(0).html(""); //$("td:last").html("last过滤出最后一个"); //$("td:not(.myPreours)").html("排除class为myPreours的单元格"); //$("td:even").css("backgroundColor", "red"); //even筛选td下标为偶数的单元格 //$("tr:odd").css("backgroundColor", "red");//还可以用于tr实现奇偶行变色 odd为基数 //$("tr:eq(0)").css("backgroundColor", "red");//eq(0)筛选出下标为0的 //$("tr:gt(2)").css("backgroundColor", "red");//下标大于2的 //$("tr:lt(2)").css("backgroundColor", "red");//下标小于2的 //$("tr:gt(1):lt(2)").css("backgroundColor", "red");//下标大于1小于2的 下标小于2是以下标大于1之后的结果为基础的 而不是还以tr为基础 这点要搞清楚 //$("tr:slice(2,4)").css("backgroundColor", "red");//指定下标范围进行筛选 slice(start,end)不是过滤器了 而是方法 所以使用如下 //$("tr").slice(2, 4).css("backgroundColor","red"); //var $tds = $("td:not(.myPreours)"); //alert($tds.length); //$tds.text("改了盖勒～～～"); //var $tds = $("tr:gt(1):lt(2)"); //var $tds = $("tr").slice(1, 3);//从第1个拿到 小于 3的 //$tds.css("backgroundColor","red"); //$("tr:first").css("font-size", "30px");//第一行是表头，所以显示大字体（fontSize=30）， //$("tr:last").css("color", "red");//最后一行是汇总，所以显示红色字体。 //$("tr:gt(0):lt(3)").css("font-size", "28px").css("color", "blue");//正文的前三行是前三名，所以显示大的字体（28）表格的奇数行是绿色背景。 $( "tr").click(function () { alert($( "tr").index($(this ))); //获得被点击行的下标 index()方法在 $("tr")所有tr元素 查找$(this)当前元素 返回索引值 }); //---------------------------------属性过滤器 简单:td[id]/td[id=td1]/td[id!=td1]/:enable/:disable/input:checked/$(select option:selected)/$("#mF:input") //$("td[id=td1]").text("我有ID，你没有吧～");//属性过滤器 从td中选取id属性为td1的单元格 //$("td[id!=td1]").text("我有ID，你没有吧～");//以上结果取反 //$("td[id]").text("我有ID，你没有吧～"); //属性过滤器 从td中选取具有id属性的单元格 //表单对象选择器 //$("#form1:enable")//id为form1的Form表单 刷选出启用的控件 //$("#form1:disable")//筛选出form表单未启用的控件元素 //$("input:checked")//所有选中的元素 radio checkbox //$("select option:selected")//下拉框所有选中的元素 //alert($("#mF:input").length);Form表单中所有input元素个数 //详见过滤选择器2 }) </script > </head> <body> <form id="mF"> <table id="tbMy"> <tr> <td class="myPreours">ID </td> <td id="td1">NAME </td> <td> GENDER</td > </tr> <tr> <td class="myPreours">1 </td> <td class="myPreours">痞子 </td> <td id="td2">男 </td> </tr> <tr> <td> 2</td > <td> 一毛</td > <td> 女</td > </tr> <tr> <td> 3</td > <td> 三毛</td > <td> 男</td > </tr> <tr> <td> 4</td > <td> 三点</td > <td> 男</td > </tr> <tr> <td> 汇总：8888</td > <td></ td> <td></ td> </tr> </table > </form> <br /> <div id="testdiv" style=" border:1px solid #000; width :500px; height:600px; filter:Alpha(Opacity=70); opacity : 0.7; background-color:Red;"></ div> </body> </html>  2、表单对象过滤选择器 <html xmlns="http://www./1999/xhtml"> <head> <title >过滤选择器</ title> <style type="text/css"> table{ border-collapse:collapse ;} #tbMy td{ width :122px; height:36px ; border: 1px solid #000;} </style > <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script> <script type="text/javascript"> $( function () { //----------------------------------表单对象过滤器2:$(input:not(checked))/$("#selNations option:selected") //$("#mF:enabled").val("123");//设置到Form表单属性中去了 //$("input:enabled").val("123");//设置页面启用的input控件val值为123 input之前帮我们省略了 #mF //$("input:not(checked)").val();//未选中的val() $( "#btnSub").click(function () { var checkText = "" ; $.each($( "input:checked"), function (index, item) { checkText += "," + item.value; }); //alert(checkText); //alert($("#selNations option:selected").val());//在下拉框#selNations的子代option中查找属性为selected的项 }); }) //----------------------------------------元素的 $("input[name=names]:checked").each(function(index,itemm){})/$(":input", $("#mF"))/arr.join()/$(":input")./$(":text")./ $( function () { $( "input[name=names]").click(function () { //获得所有 name=names的input元素，并封装成Jquery对象 var $names = $("input[name=names]:checked" ); //Array var arr = new Array(); //声明一个数组 //循环 Jquery对象里的dom数组 $names.each( function (index, value) {//Jquery对象同样存在each()方法 arr[index] = value.value; //因为循环得到的就是dom对象 所以可以直接.value 不需要$(value).val()这样 降低效率 }); //显示字符串结果 $( "#msgNames").text("共选中" + $names.length + "条：" + arr.join(",")); //:input会选取所有的 select button textarea 都会得到 与$("input")只获得input //$(":input").val("哈哈哈哈"); //选择器相对定位 $("td",$("#mytr"))是相对该行tr下的搜有td //$(":input", $("#mF")).val("哈哈哈哈哈");//限定检索input范围在$("#MF")内 即在id为MF的表单中检索所有的input //$(":text").val("等价于$('input[type=text]').val()");//选取所有单行文本框 //同理 :password :radio....一样 查看帮助 }); }); </script > </head> <body> <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 id="Text2" type="text"/> <p id="msgNames"></ p> <textarea ></textarea> //---------------------------------------------------- <form id="mF" action="1.html" method="post"> <select id="selNations"> <option value="1">中国 </option> <option value="2">朝鲜 </option> <option value="3">利比亚 </option> </select> <input id="Text1" type="checkbox" value="男" /> <input id="Checkbox1" type="checkbox" value="女" /> <input id="txtName" type="text" disabled="disabled" /> <input id="txtPwd" type="text" /> <input id="txtRemark" type="text" /> <input id="btnSub" type="button" /> </form > </body> </html> |
|
|
来自： 昵称10504424 > 《Jquery》
