-
jQuery选择器之内容筛选选择器 基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上 内容过滤器描述如下表： 注意事项： :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 :parent与:empty是相反的，两者所涉及的子元素，包括文本节点查看全部
-
jQuery选择器之基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器 筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述： 注意事项： :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引 gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始查看全部
-
jQuery选择器之表单对象属性筛选选择器 除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选 $(":enable");选取可用的表单元素； $("disable");选取不可用的表单的元素； $(":checked");选取被选中的<input>的元素； $(":selected");选取被选中的<option>的元素 注意事项： 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素 <script type="text/javascript"> //查找所有input所有可用的（未被禁用的元素）input元素。 $("input:enabled").css("border", "2px groove red"); </script> <script type="text/javascript"> //查找所有input所有不可用的（被禁用的元素）input元素。 $("input:disabled").css("border", "2px groove blue"); </script> <script type="text/javascript"> //查找所有input所有勾选的元素(单选框,复选框) //移除input的checked属性 $("input:checked").removeAttr('checked') </script> <script type="text/javascript"> //查找所有option元素中,有selected属性被选中的选项 //移除option的selected属性 $("option:selected").removeAttr('selected') </script>查看全部
-
<script type="text/javascript"> //子选择器 //$('div > p') 选择所有div元素里面的子元素P $("div > p").css("border", "1px groove red"); </script> <script type="text/javascript"> //后代选择器 //$('div p') 选择所有div元素里面的p元素 $('div p').css("border", "1px groove red"); </script> <h2>相邻兄弟选择器与一般兄弟选择器</h2> <div class="bottom"> <div>兄弟节点div, +~选择器不能向前选择</div> <span class="prev">选择器span元素</span> <div>span后第一个兄弟节点div</div> <div>兄弟节点div <div class="small">子元素div</div> </div> <span>兄弟节点span,不可选</span> <div>兄弟节点div</div> </div> <script type="text/javascript"> //相邻兄弟选择器 //选取prev后面的第一个的div兄弟节点 $(".prev + div").css("border", "3px groove blue"); </script> <script type="text/javascript"> //一般相邻选择器 //选取prev后面的所有的div兄弟节点 $(".prev ~ div").css("border", "3px groove blue"); </script>查看全部
-
jQuery选择器之层级选择器 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 选择器中的层级选择器就是用来处理这种关系 子元素 后代元素 兄弟元素 相邻元素 通过一个列表，对比层级选择器的区别 仔细观察层级选择器之间还是有很多相似与不同点 层级选择器都有一个参考节点 后代选择器包含子选择器的选择的内容 一般兄弟选择器包含相邻兄弟选择的内容 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下查看全部
-
jQuery选择器之全选择器（*选择器） 在CSS中，经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;} 通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素 描述： $( "*" ) 抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到 不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如: IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的 getElementById的参数在IE8及较低的版本不区分大小写 IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A IE8及较低的版本，浏览器不支持getElementsByClassName查看全部
-
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <script type="text/javascript"> //通过原生方法处理 //获取到所有的节点标记名为div的元素 //给每一个div加上蓝色的边框 var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通过jQuery直接传入标签名p //标签是可以多个的，所以得到的同样也是一个合集 $("p").css("border", "3px solid red"); </script>查看全部
-
jQuery选择器之元素选择器 元素选择器：根据给定（html）标记名称选择所有的元素 描述： $( "element" ) 搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持 右边编辑器代码所示： 第一组：通过getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的boder样式 第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式查看全部
-
jq 对象转换dom对象：var div = $div.get(inde); dom 对象转换jq对象：var $div=$(div);查看全部
-
.html(),.text()和.val()的差异总结： .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
-
jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。查看全部
-
jQuery选择器之表单元素选择器 //查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "1px groove red"); //匹配所有input元素中类型为text的input元素 $('input:text').css("background", "#A2CD5A"); //匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); //匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); //匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); //匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); //匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); //匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); //匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076");查看全部
-
jQuery选择器之子元素筛选选择器 $(":fist-chill"）选择所有父级元素下的第一个子元素 $(":last-child") 选择所有父级下的最后一个子元素 $(":only-child") 如果某个元素是其父元素的唯一子元素，那么它就会被选中 $(":nth-child") 所有父级下第n个子元素(n从1开始) $(":nth-last-child")所有父级下倒数第n个子元素(n从1开始) 注意事项： :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素 如果子元素只有一个的话，:first-child与:last-child是同一个 :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配 jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的 nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算 //查找class="first-div"下的第一个a元素 //针对所有父级下的第一个 $(".first-div a:first-child").css("color", "#CD00CD"); //查找class="first-div"下的只有一个子元素的a元素 $(".first-div a:only-child").css("color", "blue"); //查找class="last-div"下的第二个a元素 $('.last-div a:nth-child(2)').css("color", "#CD00CD"); //查找class="last-div"下的倒数第二个a元素 $('.last-div a:nth-last-child(2)').css("color", "red");查看全部
-
jQuery选择器之属性筛选选择器 属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方 浏览器支持： [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范 [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范 [name!="value"] 属于jQuery 扩展的选择器 CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的: [attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); 查找所有div中，有属性p2的div元素 $('div[p2]').css(); 查找所有div中，有属性name中的值只包含一个连字符“-”的div元素 $('div[name|="-"]').css(); 查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素 $('div[name~="a"]').css(); 查找所有div中，属性name的值是用imooc开头的 $('div[name^=imooc]').css(); 查找所有div中，属性name的值是用imooc结尾的 $('div[name$=imooc]').css(); ..有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css(); ..有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css();查看全部
-
Java中判断字符串对象中是否含有指定字符的时候，常常使用楼主提问之中的语句。 indexOf方法获取到指定的字符在字符串中第一次出现的位置，从0开始。如果一开始就是e则返回0，如果第二个位置是e则返回1，如果搜完整个字符串都没有e则返回-1 。 反证法 如果该方法不返回-1 就证明该字符串中含有e字符。查看全部
举报
0/150
提交
取消