jQuery-层级

<script>
$(document).ready(function(){
  $("#but6").click(function(){
    $("#z *").toggle();        //("x y")
  });    //x下全部的y 选择器

  $("#but7").click(function(){
    $("#z > p").toggle();        //("x > y")
  });    //x里的所有子级 选择器

  $("#but8").click(function(){
    $("span + div").toggle();        //("x + y")
  });    //跟在x后面的所有 选择器

  $("#but9").click(function(){
    $("#z ~ p").toggle();        //("x ~ y")
  });    //跟x同辈的所有y 选择器

  //层级

});

</script>
<body>
<input id="but6" type="button" value="所有">
<input id="but7" type="button" value="子级">
<input id="but8" type="button" value="跟随的">
<input id="but9" type="button" value="同辈">
</body>
时间: 2024-08-02 02:51:30

jQuery-层级的相关文章

jquery层级选择器学习笔记

html文档中的所有节点构成的拓扑结构类似于家谱,节点与节点之间存在着类似于父子.兄弟.祖孙这样的关系,层级选择器就是用于处理html文档中节点与节点之间的关系.如下介绍四种层级选择器: 1.子选择器 $('parent>child') 当前参考节点是parent,在其子代元素中,选择指定的child类型的元素,即parent与child是父子关系. 2.后代选择器 $('ancestor descendant') 当前参考节点是ancestor(祖先节点),在其后代元素中,选择指定的desce

jquery 层级选择器

关于层级选择器. $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素. parent :任何有效的选择器. child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul选择下面的li 标签添加边框.}); $("ances

jQuery层级元素选择器

第一个: 1:空格表示所有 2:> 第一层 3:+/- 同级 +:之后的第一个元素 -:之后所有同级 d 代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

jquery层级选择器

parent > child 选择所有指定“parent”元素中指定的"child"的直接子元素. eg: $("ul > li").css("border","1px solid red");       子元素组合选择器(E > F)它只会选择第一级的后代. ancestor descendant 选择给定的祖先元素的所有后代元素 eg: $("form input").css(&qu

JQuery选择器——层级选择器

JQuery层级选择器 1   全选择器          $("*") 又名*选择器,在JQuery中选择文档页面中的元素,通配符*给所有元素设置默认边距 2   在.getElementsByTagName()传递*可以获取所有元素 3   getElementById的兼容性 getElementById的参数在IE8及较低的版本中不区分大小写 IE8及较低的版本,浏览器不支持getElementByClassName IE会将注释节点实现为元素,在IE中调用getElement

jQuery笔记总结

来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一下jQuery学习的整体思路 第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 JQuery概念 基于javascript的,同上,提高了代码的效率 j

前端学习系列之Jquery

Jquery简介 Jquery介绍 查找到某个具体的元素,然后给它添加样式,创建子元素等 Jquery基本选择器 id id选择器:根据给定的id查找指定的元素 语法 $("div"); .class 类选择器:根据class名称查找指定的元素 语法 $(".class"); selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内 语法 $("sele

分针网——每日分享: jquery选择器的用法

jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript的dom. 1. 基本选择器 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1"); ·* 匹配所有

JQuery重要知识点

jQuery基本选择器----包括ID选择器,标签选择器,类选择器,通配选择器和组选择器5种 a. ID选择器: $("#id") b. 标签选择器:$("element") c. 类选择器:$(".className") d. 通配选择器:$("*") 匹配指定上下文中所有元素 e. 组选择器:$("selector1,selector2,selectorN") 特点:无数量限制,以逗号分隔 (逐个匹配,

jquery问题总结

1.jquery层级关系 jQuery( "E> F" )这个子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代. jQuery( "prev ~ siblings" )(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围.前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素.