<body>

        <input type="button" id="btn1" value="选择为one的元素"/>

        <input type="button" id="btn2" value="选择样式为mini的元素"/>

        <input type="button" id="btn3" value="选择所有的div元素"/>

        <input type="button" id="btn4" value="选择所有元素"/>

        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

        <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>

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;}

js代码

<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(){

                    $("#one").css("background-color","pink");

                });

                $("#btn2").click(function(){

                    $(".mini").css("background-color","pink");

                })

                $("#btn3").click(function(){

                    $("div").css("background-color","pink");

                })

                $("#btn4").click(function(){

                    $("*").css("background-color","pink")

                })

                $("#btn5").click(function(){

                    $("#two,mini").css("background-color","pink")

                })

            })

        </script>

    </head>

JQuery操作基本选择器的更多相关文章

  1. Jquery操作属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery 操作css 选择器

    .addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...

  4. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  5. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

  6. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  7. jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性

    使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. Bank Simulation Program银行管理系统C++ :)

    设计并实现简单的银行存取款系统,系统主界面包括登录和注册两个选项,选择登录,提示用户输入银行帐号和密码,验证通过后进入主界面,主界面包括:存款.取款.查询余额.历史记录.修改密码等功能.注册功能让用户 ...

  2. Java集合框架汇总

    HashMap是一个最常用的Map,它根据键的HashCode值存储数据,根据键可以直接获取它的值,具有很快的访问速度,遍历时,取得数据的顺序是完全随机的.HashMap最多只允许一条记录的键为NUL ...

  3. Mongodb内嵌对象关联查询

    db.-10-30T00:00:00Z"),"$lt":ISODate("2018-10-30T23:59:00Z")}, "equip.$ ...

  4. Roads in the North POJ - 2631

    Roads in the North POJ - 2631 Building and maintaining roads among communities in the far North is a ...

  5. HDU 5119 Happy Matt Friends (14北京区域赛 类背包dp)

    Happy Matt Friends Time Limit: 6000/6000 MS (Java/Others)    Memory Limit: 510000/510000 K (Java/Oth ...

  6. 关于tree节点的刷新

    1.刷新节点分为刷新整个树和刷新指定节点 (1)刷新整个树 $("#tree").tree("reload"); (2)刷新指定节点(方法:传入需要刷新节点的父 ...

  7. 谈一谈Tomcat中webSocket，Jetty WebSocket 和Spring WebSocket以及github中Java-WebSocket.jar分别对Socket协议的角色定位以及效果的不同点；

    开局先上一张图:(http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html)   当前截图来自于apache的tomcat官网(问:为 ...

  8. 图说不为人知的IT传奇故事-4-王安用一生来跟IBM抗衡

    此系列文章为“图说不为人知的IT传奇故事”,各位大忙人可以在一分钟甚至几秒内了解把握整个内容,真可谓“大忙人的福利”呀!!希望各位IT界的朋友在钻研技术的同时,也能在文学.历史上有所把握.了解这些故事 ...

  9. windows下SecureCRT无法使用Backspace（删除键）和上下左右键

    MongoDB Shell中退格键使用的问题. 利用SecureCRT工具访问linux的时候,在使用MongoDB的交互式shell的时候,退格键(Backspace)无法使用,导致无法修改输入的字 ...

  10. jmeter全局变量配置：将token运用到全局（跨线程组使用变量）

    请注意元器件的执行顺序: 请将提取token的配置原件放在设置全局变量的配置元器件前面(本来是一个超级马虎的人,真是俗称“方脑壳”啊) 1.获取登录后的token(提取可以用json path Ext ...