Jquery操作层级选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script src="../../js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background-color","gold");
                });

                $("#btn2").click(function(){
                    $("body>div").css("background-color","gold");
                })

                $("#btn3").click(function(){
                    $("#two+div").css("background-color","gold");
                })

                $("#btn4").click(function(){
                    $("#one~div").css("background-color","gold");
                });
            })
        </script>

    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
    padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
    padding-left:25px;
}
.high{
    color:red;
}

  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini {
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide {
    display:none;
  }

table        { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even        { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected        { background:#FF6500;color:#fff;}

原文地址:https://www.cnblogs.com/benjamin77/p/9162323.html

时间: 2024-10-11 11:06:29

Jquery操作层级选择器的相关文章

Jquery操作属性选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="..

jquery 操作css 选择器

.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function(index,currentClass)) 函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素. $("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式.

jquery中4种层级选择器的差别和使用

我使用的是JQuery-2.1.1版本,在这个版本以及之前,JQuery中的层级选择器有4种.我们通过这4种选择器,来操作下面的HTML. <div id="outer"> <input type="button" id="button1"> <input type="button" id="button2"> <input type="button&qu

Jquery框架之选择器|效果图|属性|文档操作

JavaScript和jquery的区别 Javascript是一门编程语言,我们用它来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到 注意:一般情况下,是库的文件,该库中都会抛出来构造函数或者对象,如果是构造函数,那么使用new关键字创建对象,如果是对象直接调用属性和方法 DOM文档加载的步骤 解析HTML

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

jquery学习:选择器&amp;dom操作

分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值")  获得与指定id属性值匹配的元素 3.类选择器 *  语法:$(".class的属性值")  获得与指定的class属性值匹配的元素 4.并集选择器: *  语法:$("选择器1,选择器2....")  获得多个选择器选中的所有元素 $(function (){ /

jQuery入门、jQuery选择器、jQuery操作

一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理念是write less,do more(写得更少,做得更多) 1.2 jQuery 和 Js 的区别 Javascript是一门编程语言,我们用它来编写客户端浏览器脚本.jQuery是javascript的一个库(框架),包含多个可重用的函数,用来辅助我们简化javascript开发. 注意:jQ

JQuery选择器——层级选择器

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

Jquery | 基础 | 慕课网 | 层级选择器

选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="