<!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. 实例说明MVC,MVP,MVVM架构

    很早就知道有这三个概念,但是一直都不清楚是怎么回事,在网上搜索,都是泛泛而谈,没有具体例子,新手是看不懂的,直到找到这篇文章,我对这三个架构有了更清楚的了解. 从一个简单的例子去研究这三个架构. 注意 ...

  2. 学习Matplotlib

    介绍 Matplotlib是一个Python 2D绘图库,可以跨平台生成各种硬拷贝格式和交互式环境的出版品质量图.Matplotlib可用于Python脚本,Python和IPythonshell,j ...

  3. hdu1754线段树的单点更新区间查询

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. Linux系统centOS7在虚拟机下的安装及XShell软件的配置

    前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...

  5. JS方法总结

    1.普通的方法定义 function(){ } 2.变量方法定义 var text=function(){ } 3.对象方法定义 text:function(){ } 4.ES6 text(x=0,y ...

  6. 大数据开发 | MapReduce介绍

    1.  MapReduce 介绍 1.1MapReduce的作用 假设有一个计算文件中单词个数的需求,文件比较多也比较大,在单击运行的时候机器的内存受限,磁盘受限,运算能力受限,而一旦将单机版程序扩展 ...

  7. 理解js中的运算符优先级

    前言 我是有过这样的经历,获取年月日时写出这样的代码: new Date().getFullYear() 此时的我是心虚的,因为我不知道是先执行.运算还是new运算,于是赶紧贴到控制台里,哎呦

  8. JAVA提高三：反射总结

    为前期学习过反射,再这里再次复习总结下:[转载请说明来源:http://www.cnblogs.com/pony1223/p/7659210.html ] 一.透彻分析反射的基础_Class类 Cla ...

  9. Unity编辑器下重启

    我们项目AssetBundle打包走的是全自动化流程,打包之前要进行各种资源检测,如果检测顺利通过,则进入打包,否则提示错误资源名称及路径,打包中断!有时候即使资源检测通过也会打包崩溃,初步断定是Un ...

  10. 一天工作所用到的Git命令

    一天工作所用到的Git命令 像大多数新手一样,我一开始是在网上搜索 Git 命令,然后把答案复制粘贴,并没有真正理解它们究竟做了什么. 后来我曾经想过:"如果有一个最常见的 Git 命令的列 ...