-
查找所有class="first-div"下的a元素，只取第一个 //针对所有父级下的第一个 $('.first-div a:first-child').css("color", "#CD00CD"); 查找所有class="first-div"下的a元素，只取最后一个 //针对所有父级下的最后一个 //如果只有一个元素的话，last也是第一个元素 $('.first-div a:last-child').css("color", "red"); 查找所有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"); :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) 的区别前者是从前往后计算，后者从后往前计算查看全部
-
查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); 查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); 查找所有div中，有属性name中的值包含一个连字符“-”的div元素 $('div[name="a"]').css("border", "3px groove #00FF00"); 查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> 查找所有div中，属性name的值是用imooc开头的 $('div[name^=imooc]').css("border", "3px groove red"); 查找所有div中，属性name的值是用imooc结尾的 $('div[name$=imooc]').css("border", "3px groove blue"); 查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css("border", "3px groove #00FF00"); 查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css("border", "3px groove #668B8B");查看全部
-
jQuery与DOM的转化：查看全部
-
$(":visible") 选择所有显示的元素 $(":hidden") 选择所有隐藏的元素 我们有几种方式可以隐藏一个元素： CSS display的值是none。 type="hidden"的表单元素。 宽度和高度都显式设置为0。 一个祖先元素是隐藏的，该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0 如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。查看全部
-
<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> <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> :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 :parent与:empty是相反的，两者所涉及的子元素，包括文本节点查看全部
-
$(":first") 匹配第一个元素。<br> $(":last") 匹配最后一个元素。<br> $(":not(selector)") 选择所有元素去除不匹配给定的选择器的元素。<br> $(":eq(index)") 在匹配的集合中选择索引为index的元素。<br> $(":gt(index)") 在匹配的集合中选择所有大于给定index的元素。<br> $(":even") 选择索引为偶数的元素，从0开始计数。<br> $(":odd") 选择索引为奇数的元素，从0开始计数。<br> $(":lt(index)") 在匹配的集合中选择所有小于给定index的元素。<br> $(":header") 选择所有标题元素。<br> $(":lang(language)") 选择指定语言的所有元素。<br> $(":root") 选择根元素。<br> $(":animated") 选择正在执行动画的元素。 1、:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引 2、gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始查看全部
-
jQuery对象和DOM对象是完全不同的东西，要想对对象使用jQuery方法，就要先获取jQuery对象。查看全部
-
first 得到的仍然是JQuery对象，get 得到的是DOM对象查看全部
-
这节课东东太多了。记不住 了查看全部
-
toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除 .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值查看全部
-
层级选择器 1.$("div > p")选择所有div里面的第一个子元素P。即在所有div的儿子元素中寻找第一个P。 例子中：<div class="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> 因为P是div的孙子元素，所以没有被选中。 2.相邻兄弟选择器 $(".prev + div") 根据.prev后面紧跟的标签来定 “+” 后面的内容 。如果.prev后面紧跟的是<span></span> 那么这里应该写$(".prev + span"); 3.一般兄弟选择器 记住写法：$(".prev ~ div") 飘号后面的内容，根据想选择的标签来定。 若想选取.prev后面的所有span兄弟节点，应该写 $(".prev ~ span")查看全部
-
$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器 $( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器查看全部
-
1.$("div > p")不是选择所有div下的第一个p元素，而是所有div下的第一层所有的p元素（有可能是多个p）！！ 2."~"号是一般兄弟选择器 $(".prev ~ div")选取的是类名为"prev"元素后的所有兄弟div，即第51、52、56行的div，效果等同于$("span ~ div") $("div ~ span")选取的是第50、55行的span元素 这些选择器其实与CSS3的选择器相同，理解了CSS3的选择器，这些就很好理解了 3."+"号是相邻兄弟选择器 $(".prev + div")选取的是类名为"prev"的元素的相邻的div元素，选取的是第51行的div $("span + div")选取的是51行和56行的div $(".prev+span")选取不了任何一个元素，因为页面内只有一个类名为"prev"的元素，但是其相邻的兄弟元素不是span $("div+span")选取的是50行和55行的span元素 4.'.prev + '默认选的是.prev后面的第一个同级元素 '.prev ~ '默认选的是.prev后面的所有同级元素 5.注意：$(".prev + div")中，这两个（ｐｒｅｖ和ｄｉｖ）标签要求不一样，比如把６２行的$(".prev + div")ｄｉｖ改成ｓｐａｎ，就没有效果了； 但是，$(".prev ~ div")中。这两个（ｐｒｅｖ和ｄｉｖ）可以一样，把６８行中的ｄｉｖ改成ｓｐａｎ，同样可以看到ｃｓｓ蓝框效果。查看全部
-
$("*");选中文档页面中的元素 1,IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的 2,getElementById的参数在IE8及较低的版本不区分大小写 3,IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且 A在B之前，那么getElementById会选中A 4,IE8及较低的版本，浏览器不支持getElementsByClassName查看全部
-
A.浏览器的兼容： 1.IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的。 2.getElementById的参数在IE8及较低的版本不区分大小写。 3.IE7及较低版本中，表单元素中，若表单A的name属性名用了另一个元素B的ID名,并且A在B之前，那么getElementById会选中A 4.IE8及较低的版本，浏览器不支持getElementsByClassName B.选择页面中所有元素： 原生：document.getElementsByTagName("*") jquery: $("*") C.===表示数据和类型都相等 D.给页面所有元素加边框，还可以这样实现： var elements1 = document.getElementsByTagName("*"); var $e = $(elements1); //DOM对象转换成jQuery对象 $e.css("border","3px solid red")查看全部
举报
0/150
提交
取消