<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            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;
            }
        </style>

        <!-- 导入 jQuery 库 -->
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function(){
                //1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
                //2. 为选择的 jQuery 对象添加 onclick 响应函数:
                // $("#btn1").click(function(){}), 响应函数的代码
                //写在 function(){} 的中括号中.
                $("#btn1").click(function(){
                    $("#one").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    $(".mini").css("background", "#ffbbaa");
                });
                $("#btn3").click(function(){
                    $("div").css("background", "#ffbbaa");
                });
                $("#btn4").click(function(){
                    $("*").css("background", "#ffbbaa");
                });
                $("#btn5").click(function(){
                    $("span,#two").css("background", "#ffbbaa");
                });
            })

        </script>

    </head>
    <body>
        <input type="button" value="选择 id 为 one 的元素" id="btn1" />
        <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
        <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
        <input type="button" value="选择 所有的元素" id="btn4" />
        <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />

        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>

jQuery选择器(ID选择器)第一节的更多相关文章

  1. jQuery的ID选择器失效问题

    jQuery的ID选择器,在同一项目别的文件中一切正常: 在当前页面,jQuery的其它功能(如:$(document).ready(function(){  alert("ok" ...

  2. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  3. Jquery的ID选择器

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></scri ...

  4. JQuery中的id选择器含有特殊字符时，不能选中dom元素

    1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下 ...

  5. 带空格的 jquery ID 选择器

    当 DOM ID有一个空格时,如何使用 jquery 的 ID 选择器? 例如,我的 DOM ID 是 <div id="content Module">Stuff&l ...

  6. JQuery————基础&&基础选择器

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  7. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  8. JQuery下载及选择器总结

    JQuery下载 JQuery只是一个JS函数库,要使用其中的方法还是要在JS文件中进行调用. 一般去https://mvnrepository.com/这个网站下载,搜索JQuery就能找到JS文件 ...

  9. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

随机推荐

  1. CenOs 部署记录

    1.安装APache.即 httpd 2.需要将80端口添加进iptable.外网才能访问.命令:iptables -I INPUT -p TCP --dport 80 -j ACCEPT

  2. shell查找指定时间段内的文件

    #!/bin/bash#20170905 输入参数格式echo "显示"$1"的备份文件"date_0=$1date_1=`expr $date_0 + 1`d ...

  3. hdu2222 ac自动机入门

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. Java历程-初学篇 Day08 数组

    一,什么是数组 所谓数组,是相同数据类型的元素按一定顺序排列的集合.若将有限个类型相同的变量的集合命名,那么这个名称为数组名.组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量.用 ...

  5. Erlang游戏服设计总结

    这主要是一年多来,个人从事Erlang游戏服开发中对一些事情的思考. 想到哪说到哪,没有条理可言. 欢迎讨论. 通常Erlang游戏服务的设计涉及到的东东包括如下: 任务系统 活动系统 公会系统 玩法 ...

  6. Java面向对象 包

       Java面向对象  包 知识概要:              (1)包的概念 (2)包的命名 (3)编译执行 (4)导入 (5)包的访问权限 包:   包(package)用于将完成不同功能 ...

  7. DevOps之存储和数据库

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <数据(Data)> 了解有关数据部分.涉及存储及数据库的概念:知识与技能的层次( ...

  8. Node.js之异步流控制

    前言 在没有深度使用函数回调的经验的时候,去看这些内容还是有一点吃力的.由于Node.js独特的异步特性,才出现了"回调地狱"的问题,这篇文章中,我比较详细的记录了如何解决异步流问 ...

  9. flask + wtform + google storage

    项目需要使用 flask 上传.下载文件到 google storage 上, 搜了一圈没有能直接结合 wtform 使用的插件,所以动手造了个轮子. 只实现了基本的上传,下载的功能,后续可能会完善预 ...

  10. Redis 学习笔记-应用场景

    Redis作缓存系统 Redis可以对每个键设置生存时间 可以限定数据占用的最大内存空间,在数据达到空间限制后可以按照一定规则自动淘汰不需要的键. 设置方法: 修改配置文件的maxmemory参数,限 ...