-
[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"]能在网站中帮助我们匹配不同类型的文件查看全部
-
<script type="text/javascript"> //查找所有div中，属性name=p1的div元素 $("div[name=p1]").css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“-”的div元素 $('div[name|="a"]').css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); </script>查看全部
-
69行开始，自己好好看看吧查看全部
-
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 注释：indexOf() 方法对大小写敏感！ 注释：如果要检索的字符串值没有出现，则该方法返回 -1。 addClass（）方法只会增加一个类名到元素上，并不会替换原来的类名。查看全部
-
多选框的时候返回的是数组，包含每一个满足selected="selected"的选项。多选框中都没有被selected="selected"的话，就会返回null 单选框的时候，有selected="selected"选项就返回这个，没有的话就返回第一个。 --------------------------------- 注意事项： 通过.val()处理select元素， 当没有选择项被选中，它返回null .val()方法多用来设置表单的字段的值 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值 .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()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
-
这一节代码有意思的。 看最后两个内容，如果直接写最后一个，会发现是右侧的div出现“增加新的文本内容”，原因是倒数第二个任务，改掉整个div的内容，变成文字，所以第一个div中不存在a元素了，所以第一个a是存在于第二个div中，所以css应用于右侧。 --------------------------------------------------------- .html与.text的异同: .html与.text的方法操作是一样，只是在具体针对处理对象不同 .html处理的是元素内容，.text处理的是文本内容 .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器查看全部
-
$('input:eq(2)').attr('value',function(i, val){ return '通过function设置' + val }) 原样是 $('selector').attr(attributeName,function( index , oddValue ){}) 自己理解：因为jQuery已经进行封装，封装是采用的是index和oddValue的方式，所以调用的时候，我们只要给这两个参数起两个合法名字就可以。 至于index的存在是因为，前面selector可能选择了多个，所以要迭代器一个一个的完成，比如改成$("input:lt(2)")就是选择了前两个，那么拼接工作会应用于前两个样式。查看全部
-
注意的问题： dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性 例如：html中常用的id、class、title、align等： <div id="immooc" title="慕课网"></div> 而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等 获取Attribute就需要用attr，获取Property就需要用prop查看全部
-
lt小于选择器不熟悉 85行，是a: 不是bb：查看全部
-
<p id="show"></p> <script type="text/javascript"> function show (ele) { if (ele instanceof jQuery) { $("#show").html('元素的长度的 = ' + ele.length) } else { alert(ele+' 不是jQuery对象') } } </script> <script type="text/javascript"> //查找id = div1的DOM元素,是否可见 show( $('#div1:visible') ); </script> <script type="text/javascript"> //查找id = div2的DOM元素,是否可见 show($('#div2:visible')); </script> <script type="text/javascript"> //查找id = div3的DOM元素,是否可见 show( $('#div3:visible' )); </script> <script type="text/javascript"> //查找id = div1的DOM元素,是否隐藏 show( $('#div1:hidden') ); </script> <script type="text/javascript"> //查找id = div2的DOM元素,是否隐藏 show($('#div2:hidden')); </script> <script type="text/javascript"> //查找id = div3的DOM元素,是否隐藏 show( $('#div3:hidden') ); </script>查看全部
-
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等 我们有几种方式可以隐藏一个元素： CSS display的值是none。 type="hidden"的表单元素。 宽度和高度都显式设置为0。 一个祖先元素是隐藏的，该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0 ？？？？？？？？？如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。查看全部
-
<h3>:parent/:empty</h3> <div class="left"> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a></a> </div> </div> <script type="text/javascript"> //选择所有a元素，找到对应的父元素 //增加一个蓝色的边框 $("a:parent").css("border", "3px groove blue"); </script> <script type="text/javascript"> //找到a元素下面的所有空节点(没有子元素) //增加一段文本与边框 $("a:empty").text(":empty").css("border", "3px groove red"); </script> </body>查看全部
-
<body> <h2>内容筛选器</h2> <h3>:contains/:has</h3> <div class="left"> <div class="div"> <p>:contains</p> </div> <div class="div"> <p>:contains</p> </div> <div class="div"> <p> <span>:has</span> </p> </div> <div class="div"> <p>:contains</p> </div> </div> <script type="text/javascript"> //查找所有class='div'中DOM元素中包含"contains"的元素节点 //并且设置颜色 $(".div:contains(contains)").css("color", "#CD00CD"); </script> <script type="text/javascript"> //查找所有class='div'中DOM元素中包含"span"的元素节点 //并且设置颜色 $(".div:has(span)").css("color", "blue"); </script>查看全部
-
:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 :parent与:empty是相反的，两者所涉及的子元素，包括文本节点查看全部
-
<script type="text/javascript"> //:eq //选着单个 $(".aaron:eq(3)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:gt 选择匹配集合中所有索引值大于给定index参数的元素 $(".aaron:gt(4)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:lt 选择匹配集合中所有索引值小于给定index参数的元素 //与:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD"); </script> <h3>:not</h3> <div class="left"> <div> <input type="checkbox" name="a" /> <p>Aaron</p> </div> <div> <input type="checkbox" name="b" /> <p>慕课</p> </div> <div> <input type="checkbox" name="c" checked="checked" /> <p>其他</p> </div> </div> <script type="text/javascript"> //:not 选择所有元素去除不匹配给定的选择器的元素 //选取所有input中,没有checked属性的p元素，赋予颜色 $("input:not(:checked)+p").css("background-color", "#CD00CD"); </script>查看全部
举报
0/150
提交
取消