当前位置：文档库 › JQUERY CHECKBOX全选取消全选

JQUERY CHECKBOX全选取消全选

jQuery--checkbox全选取消全选

用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！

jQuery版本：1.3.2

1
2
3
4
全选/取消全选

jQuery.attr获取/设置对象的属性值,如：

$("input[name='chk_list']").attr("checked");//读取所有name为'chk_list'对象的状态（是否选中）

$("input[name='chk_list']").attr("checked",true);//设置所有name为

'chk_list'对象的checked为true

再如：

$("#img_1").attr("src","test.jpg");//设置ID为img_1的src的值为

'test.jpg'

$("#img_1").attr("src");//读取ID为img_1的src值

下面的代码是获取上面实例中选中的checkbox的value值:

jQuery选择器

$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")

对这里的p段落标签有效.但对

对这里的p段落标签无效,这里要用 $("div .test) 5.临近选择器: $("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.

在$("div + #test")中能取到p段落节点

则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:

Jquery练习题2

单选： 1、下面哪一种不属于Jquery的选择器。（D） A：基本选择器B：层次选择器 C：表单选择器D：节点选择器 2、使用jquery检查元素在网页上是否存在。（B） A：if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、新闻,获取元素title的属性值。（C） A：$("a").attr("title").val(); B：$("#a").attr("title"); C：$("a").attr("title"); D：$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });

}); 单击按钮，这个会有什么效果。（C） A：弹出一次对话框，显示click one time 。 B：弹出一次对话框，显示click two time 。 C：弹出两次对话框，依次显示click one time，click two time。D：js编译错误。 5、页面中有三个元素，如下：

div标签

span标签p标签，如果这三个标签要触发同一个事件，那么正确的写法是（A）。 A：$("div,span,p").click(function(){ //…}); B：$("div || span || p").click(function(){ //…}); C：$("div + span + p").click(function(){ //…}); D：$("div ~ span ~ p").click(function(){ //…}); 6、页面中有一个select标签，代码如下：，要使“选项四”选中的正确写法。（B）

jQuery获取Select选择的Text和 Value

一、jQuery获取Select选择的Text和Value:语法解释： 1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3.varcheckValue=$("#select_id").val(); //获取Select选择的Value 4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5.varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值二、jQuery设置Select选择的Text和Value:语法解释： 1.$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2.$("#select_id ").val(4); // 设置Select的Value值为4的项选中 3.$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中三、jQuery添加/删除Select的Option项：语法解释： 1.$("#select_id").append(""); //为Select追加一个Option(下拉项) 2.$("#select_id").prepend(""); //为Select插入一个Option(第一个位置) 3.$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个) 4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 四、获取值 1.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text(); 3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; 4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true; 5.文本框，文本区域：$("#txt").attr("value")； 6.多选框checkbox：$("#checkbox_id").attr("value")； 7.单选组radio：$("input[@type=radio][@checked]").val(); 8.下拉框select：$('#sel').val(); 五、控制表单元素： 1.文本框，文本区域：$("#txt").attr("value",'');//清空内容 2.$("#txt").attr("value",'11');//填充内容 3.多选框checkbox：$("#chk1").attr("checked",'');//不打勾 4.$("#chk2").attr("checked",true);//打勾 5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 6.单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 7.下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 8.$("").appendTo("#sel")//添加下拉框的option 9.$("#sel").empty()；//清空下拉框 10.//遍历option和添加、移除option functionchangeShipMethod(shipping){ varlen = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("").appendTo($("select[@name=ISHIPTYPE]")); } } //取得下拉選單的選取值 $(#testSelectoption:selected').text(); 或$("#testSelect").find('option:selected').text(); 或$("#testSelect").val(); 六、下拉框: 1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 4.$("#select").empty();//清空下拉框//$("#select").html(''); 5.$("").appendTo("#select")//添加下拉框的option 稍微解释: 1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。 2.单选框:

jQuery选择器的工作原理和优化

jQuery选择器的工作原理和优化至于有那些选择器，在帮助手册中都有，自己去看，这篇主要是分析他的工作原理，而优化我们写的选择器，尤其在页面内容很多的情况下，更应该需要优化。下边就言归正传。每次申明一个jQuery对象的时候，返回的是 jQuery.prototype.init 对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可以实现继承，加上js的对象只是引用不会是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。当我们使用选择器的时候$(selector,content)，就会执行 init(selectot,content)，我们看看inti中是怎样执行的： if ( typeof selector == "string" ) { //正则匹配，看是不是HTML代码或者是#id var match = quickExpr.exec( selector );

//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {

JQuery基础、选择器

jQuery入门什么是jQuery jQuery是一个JavaScript库，通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。主旨：以更少的代码、实现更多的功能（write less ,do more!）官网：https://www.wendangku.net/doc/463981330.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库，它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：像CSS那样访问和操作DOM；修改CSS控制页面外观；简化JavaScript代码操作；事件处理更加容易；各种动画效果使用方便；让Ajax技术更加完美；基于jQuery大量插件；自行扩展功能插件。 jQuery最大的优势，就是特别的方便。比如模仿CSS获取DOM，比原生的JavaScript

要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法。最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。其他JavaScript库目前除了jQuery，还有5个JS库较为流行，他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype，是最早成型的JavaScript库之一，对JavaScript内置对象做了大量的扩展。 Dojo，Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools，轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS，简称Ext，原本是对YUI的一个扩展，主要创建前端用户界面。(付费的) jQuery代码的编写配置jQuery环境 1、获取jQuery最新版本从官网下载：https://www.wendangku.net/doc/463981330.html,/ 3、jQuery环境配置 jQuery不需要安装，把下载的jQuery.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时，只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件，也就是jQuery本质是一个.js文件，所以使用引入。简单的jQuery示例

jquery常用的选择器整理

jquery: 基本的选择器： $('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器层次选择器： $('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点并且选择器： $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值，大于某个范围 lt(索引值) less than 节点索引值，小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点

jQuery选择器种类

jQuery选择器种类由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器 1、基本选择器基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input") 2、层次选择器（主要是选择层次下面的元素） $("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素第三和第四个选择器常常用后面的写法代替

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签或 var div=document.getElementById('a'); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i 点击的是那个

点击那个就把在那个

的追加class="qhbg"样式比如：点击了回答榜变成

$(function(){ $('.anserdh li a').click(function(){ $('.anserdh li').removeClass('qhbg'); $(this).parent().addClass('qhbg'); })

Jquery选择器分类应用(最全最新)

现在我们开始Jquery 的选择器之旅哈哈。下面的选择器分类中，带有“过滤器”的分类表示是“过滤”选择器，否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类：［说明］ 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称说明举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId, a, .bgRed") ［学习建议］：大家暂时记住基础选择器即可，可以直接跳到下一节“jQuery 选择器实验室”进行动手练习，以后再回来慢慢学习全部的选择器，或者用到的时候再回来查询。 2.层次选择器 Hierarchy

child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点

对象. prev + next prev和next是两个同级别的元素. 选中在prev元素后面的next元素. $("#hibiscus+im g")选在id为hibiscus元素后面的img对象. prev ~ sibling s 选择prev后面的根据siblings 过滤的元素注:siblings是过滤器 $("#someDiv~[ti tle]")选择id为someDiv 的对象后面所有带有title 属性的元素 3.基本过滤器Basic Filters 名称说明举例 :first匹配找到的第一个元素查找表格的第一行:$("tr:first") :last匹配找到的最后一个元素查找表格的最后一行:$("tr:last") :not(selector)去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $("input:not(:checked )") :even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5...行:$("tr:even") :odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$("tr:odd") :eq(index)匹配一个给定索引值的元素注:index从0 开始计数查找第二行:$("tr:eq(1)") :gt(index)匹配所有大于给定索引值的元素注:index从0 开始计数查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)") :lt(index)选择结果集中索引小于N 的 elements 注:index从0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)") :header选择所有h1,h2,h3一类的 header标签. 给页面内所有标题加上背景色: $(":header").css("bac kground", "#EEE"); :animated匹配所有正在执行动画效果的元只有对不在执行动

JQuery深刻理解

JQuery深刻理解一：导言有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。二：普及JQuery知识知识1：用JQuery写插件时，最核心的方法有如下两个： $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object) 可以理解为JQuery实例添加一个方法。基本的定义与调用： /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert("执行方法一"); } }); $.fun1(); /* $.fn.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert("执行方法2"); } }); $(this).fun2(); //等同于 $.fn.fun3 = function () { alert("执行方法三"); } $(this).fun3(); 知识2:jQuery(function () { }); 与(function ($) { })(jQuery);的区别： jQuery(function () { }); //相当于 $(document).ready(function () { }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ (function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);

JQUERY选择器按照功能主要分为

jQuery选择器按照功能主要分为"选择"和"过滤".并且是配合使用的.可以同时使用组合成一个选择器字符串.主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选,"过滤"选择器也可以单独使用,表示从全部"*"中筛选.比如: $(":[title]") 等同于: $("*:[title]") 而"选择"功能的选择器则不会有默认的范围,因为作用是"选择"而不是"过滤". 下面的选择器分类中,带有"过滤器"的分类表示是"过滤"选择器,否则就是"选择"功能的选择器. jQuery选择器分为如下几类: [说明] 1.点击"名称"会跳转到此方法的jQuery官方说明文档. 2.可以在下节中的jQuery选择器实验室测试各种选择器 1.基础选择器Basics 名称说明举例 #id根据元素Id选择$("divId")选择ID为divId的元素element根据元素的名称选择,$("a")选择所有元素 .class根据元素的css类选择$(".bgRed")选择所用CSS类为 bgRed的元素 *选择所有元素$("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId,a,.bgRed") [学习建议]:大家暂时记住基础选择器即可,可以直接跳到下一节"jQuery选择器实验室"进行动手练习,以后再回来慢慢学习全部的选择器,或者用到的时候再回来查询. 2.层次选择器Hierarchy 名称说明举例 ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div")选择CSS类为 bgRed的元素中的所有

元素.

jquery CSS和xpath选择器

jQuery具有一个相当强大的选择器引擎，提供了完整的选择器语法，允许我们选择几乎所有的元素组合。jQuery 的选择器语法主要是基于 CSS3 和 XPath 的，对 CSS3 和 XPath 了解越多，使用 jQuery 时就越显得心应手。有关 CSS 和XPath，请参阅以下链接： ?CSS 1 ?CSS 2 ?CSS 3 ?xPath 值得注意的是， CSS3 并没有得到现今所有浏览器的支持，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎，并且实现了对 CSS3 的支持。想了解 jQuery 选择器更多信息，可以访问 jQuery 的官方文档有关 Selector 的部分。下面，在原官方文档的基础上作一些简单的翻译和说明。 1. CSS 选择器（CSS Selectors） jQuery 完整地支持 CSS 1-3，并且可以在（选择器）表达式里加入自定义的CSS-like （和xPath）。 1.1 jQuery 支持的 CSS 选择器语法 ?*任何 element ?E类型为 E 的所有element（其实 E 可以是任何 element） ?E:nth-child(n)一个类型为 E 的 element，它是其父 element 的第 n 个子 element ?E:first-child一个类型为 E 的 element，它是其父 element 的第一个子 element（相当于E:nth-child(0)） ?E:last-child一个类型为 E 的 element，它是其父 element 的最后一个子 element ?E:only-child一个类型为 E 的 element，它是其父 element 的唯一子element ?E:empty一个类型为 E 的用户界面（UI） element，它没有子 element （包括文本 element） ?E:enabled一个类型为 E 的用户界面（UI） element，它被设置为禁止（disabled） ?E:disabled一个类型为 E 的用户界面（UI） element，它被设置为允许（enabled） ?E:checked一个类型为 E 的用户界面（UI） element，它处于选中（checked）状态（适用于单选按钮和复选框）

04课堂练习-BTC-Jquery-01-Jquery过滤选择器案例

1.基本过滤选择器案例（利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc” 文件中第6个案例网页进行编码）改变第一个 div 元素的背景色为# bbffaa $("div:first").css("background","#bbffaa") 改变最后一个 div 元素的背景色为# bbffaa $("div:last").css("background","#bbffaa") 改变id不为 one 的所有div元素的背景色为#bbffaa $("div:not('#one')").css("background","#bbffaa") 改变索引值为偶数的div元素的背景色为#bbffaa $(“div:even").css("background","#bbffaa") 改变索引值为奇数的 div元素的背景色为#bbffaa $(“div:odd").css("background","#bbffaa") 改变索引值为等于 3的 div元素的背景色为#bbffaa $(“div:eq(3)").css("background","#bbffaa") 改变索引值为大于 3的 div元素的背景色为#bbffaa $(“div:gt(3)").css("background","#bbffaa") 改变索引值为小于 3的 div元素的背景色为#bbffaa $(“div:lt(3)").css("background","#bbffaa") 改变索引值为大于 3 且为奇数的div元素的背景色为#bbffaa $("div:gt(3):odd").css("background","#bbffaa"); 改变所有的标题元素的背景色为 # bbffaa $(":header").css("background","#bbffaa"); 改变当前正在执行动画的所有元素的背景色为#bbffaa $(":animated").css("background","#bbffaa"); 2.内容过滤选择器案例（利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码）改变含有文本‘di’的div元素的背景色为 # bbffaa $("div:contains(di)").css("background","#bbffaa"); 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为#bbffaa $("div:empty") .css("background","#bbffaa"); 改变含有 class 为 mini 元素的div元素的背景色为#bbffaa $("div:has(.mini)").css("background","#bbffaa"); 改变含有子元素(或者文本元素)的div元素的背景色为#bbffaa $("div:parent") .css("background","#bbffaa"); 3.可见性过滤选择器案例（利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码）改变所有可见的div元素的背景色为 # bbffaa $('div:visible').css("background","#bbffaa"); 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa $(':hidden').show(3000).css("background","#bbffaa") 选取所有的文本隐藏域, 并打印它们的值 $('input:hidden').length

jquery试题与答案

一、Jquery测试题 1下面哪种不是jquery的选择器？(单选) A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器考点:jquery的选择器(C) 2当DOM加载完成后要执行的函数，下面哪个是正确的？(单选) jQuery(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements) 考点：jquery的核心函数(C) 3下面哪一个是用来追加到指定元素的末尾的？(单选) A、insertAfter() B、append() C、appendTo() D、after() 考点：jquery的核心函数(C) 4下面哪一个不是jquery对象访问的方法？(单选) A、each(callback) B、size() C、index(subject) D、index() 考点：jquery的核心函数之对象访问（D） 5．jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样. 考点：jquery的核心函数之对象访问（length） 6.jquery中$(this).get(0)的写法和__________是等价的。考点：jquery的核心函数之对象访问（$(this)[0]） 7. 有这样一个表单元素，想要找到这个hidden元素，下面哪个是正确的？(单选) A、visible B、hidden C、visible() D、hidden() 考点：jquery的选择器（B） 8.如果需要匹配包含文本的元素，用下面哪种来实现？(单选) A、text() B、contains() C、input() D、attr(name) 考点：jquery的选择器（B） 9.现有一个表格，如果想要匹配所有行数为偶数的，用________实现，奇数的用_______实现。考点：jquery的选择器（even,odd） 10.如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素？(单选) A、text() B、get() C、eq() D、contents（）考点：jquery的选择器（C）

jQuery选择器大全(48个代码片段+21幅图演示)

文档不收费，希望下载一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器（遍历css类元素）将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element选择器（遍历html元素）将p元素的文字大小设置为12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器（遍历所有元素） $(document).ready(function () { // 遍历form下的所有元素，将字体颜色设置为红色 $('form *').css('color', '#FF0000'); });

5. 并列选择器 $(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin', '0'); }); 二、层次选择器 1. parent > child（直系子元素） $(document).ready(function () { // 选取div下的第一代span元素，将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

123 456

2. prev + next（下一个兄弟元素，等同于next()方法） $(document).ready(function () { // 选取class为item的下一个div兄弟元素 $('.item + div').css('color', '#FF0000'); // 等价代码 //$('.item').next('div').css('color', '#FF0000'); }); 下面的代码，只有123和789会变色

123