1、基本过滤选择器
<html xmlns="http://www.w3.org/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.w3.org/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>
相关推荐
本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考，具体如下： 前面一篇介绍了层次选择器，今天我们学习一下jQuery的另一种选择器：基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西，...
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：...
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器，方便以后查找。
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单...
本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11<...
主要介绍了jQuery表单元素过滤选择器用法,结合实例形式分析了jQuery表单元素过滤选择器针对表单元素匹配相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
共10章，两个综合案例（图片切割，在线聊天室），118个示例（JavaScript隔行变色，jQuery选择器隔行变色，JavaScript输出文字信息，jQuery输出文字信息，基本选择器选择元素，层次选择器选择元素，基本过滤选择器...
10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val()...
其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
本文实例讲述了jQuery内容选择器与表单选择器。分享给大家供大家参考，具体如下： 内容选择器 jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上，主要包括以下四种过滤方法： 内容选择...
使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...
jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类： 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两
本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器：基本元素选择器，层级选择器，过滤选择器，子元素过滤选择器，表单过滤选择器，属性选择器，表单对象过滤选择器。
第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...