1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
$("#test").show(); // 显示隐藏的div $("div").html("Hello iMooc!"); // 让页面所有的div 的innnerHTMl更改为 HEllo,iMooc // 选择器 $("#default").html($("#divtest").html()); // 让ID为 default 的内容显示为 #divtest的内容 $("button").attr("disabled","true"); // 让页面所有button标签变为不可用 // disabled:true; 不可用 attr 是 设置某个属性值 disabled ="disabled" var $redHTML = $(".red").html(); $(".green").html($redHTML); // 通过class 获取类名 $("form *").attr("disabled", "true"); // 将form元素包含的元素全部设置为不可用 * 选择全部 $(".red,.green").html("hi,我们的样子很美哦!"); // 通过 , 选择多个元素 $("div label").css("background-color","blue"); // 与上面一个道理, 在行内加样式 $("div>label").css("border", "solid 5px red"); // div>label 选择子元素,不包括孙元素 有点小不同 $("p+").css("background-color","red"); // 获取<p>元素最近邻的下一个元素,并修改它的背景色。 // 可以有2种写法 p+ ,p+元素名 第二种写法比较容易让开发者读懂代码 $("p~span").css("border", "solid 1px red"); $("p~span").html("我们都是p先生的粉丝"); //获取<p>元素下面全部的相邻元素,并修改它们的边框色和显示内容。 //调用$("p~span")选择器代码,获取了<p>元素下面两个(全部)的<span>元素, //该元素不包含<p>元素上面的元素和不属于同辈范围的元素。 // 过滤选择器 $("li:first").css("background-color", "red"); // li标签 选择第一个 $("li:last").css("background-color", "red"); // li标签 选择最后一个 $("li:eq(3)").css("background-color", "#60F"); // :eq(index) 参数index表示索引号 0开始 $("tr:gt(2)").css("background-color","#B2E0FF"); // 选择3个tr 之后的所有tr $("li:contains('jQuery')").css("background", "green"); // 按照文本内容来查找一个或多个元素 $("li:has('p')").css("background-color", "blue"); // 获取了包含<p>元素的全部<li>元素 var $strHTML = $("input:hidden").val(); $("div").html($strHTML); //获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。和 display=“none” // val() 是jquery用来获取input值的方法 // value 是js的方法 $("li:visible").css("background-color","blue"); // 跟上面相反 //获取的是全部可见的元素,也就是说, //只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。 $("li[title='蔬菜']").css("background-color", "green"); // 属性选择器 选择 title 值为 蔬菜的元素 $("li[title!='蔬菜']").css("background-color", "green"); // 跟上面相反,取除了蔬菜的元素 $("li[title*='果']").css("background-color", "green"); // // [attribute*=value]属性选择器,获取属性值中包含某一指定内容的全部<li>元素, $("li:first-child").css("background-color", "green"); // 选择所有 li元素的 第一个标签 $("li:last-child").css("background-color", "blue"); // 选择所有 li元素的 最后一个标签 $("li:first-child").hide(); // hide 隐藏 相当于 display = "none" // addClass 是添加 class 名 $("#frmTest :input").addClass("bg_blue"); // 有个空格 // 代码获取了表单中的全部元素,并使用addClass()方法修改它们在页面中显示的背景颜色 $("#frmTest :text").addClass("bg_blue"); // 选择单行文本框 type="text" $("#frmTest :radio").attr("disabled","true"); // 单选按钮 $("#frmTest :checkbox").attr("disabled","true"); // 复选框 $("#frmTest input:submit").addClass("bg_red"); // 使用:submit选择器可获取表单中的这个submit提交按钮元素。 $("#frmTest :image").addClass("bg_red"); // 获取<input>图像域,而不能获取<img>格式的图像元素。 $("#frmTest :button").addClass("bg_blue"); // 获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。 $("#frmTest :checked").attr("disabled", true); // // 获取处于选中状态的全部元素。 var $txtOpt = $("#frmTest :selected").text(); $("#tip").html("选中内容为:" + $txtOpt); // 与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。 |
问题:复选框元素,其中有的处于选中状态,通过jQuery选择器,将这些 选中状态的元素隐藏,代码为:
$(“form input:checked”).hide();
解析:
选择器之间有空格表示父元素 子元素关系,没有空格加冒号表示当前元素的伪类,比如 :hover :focus :checked,
所以这些伪类选择器,和它们要修饰的元素是靠在一起的
checked选择器与元素之间没有空格
推荐2篇w3c 的文章
jQuery 选择器
jQuery 参考手册 – 选择器