<!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. java集合系列——Map介绍（七）

    一.Map概述 0.前言 首先介绍Map集合,因为Set的实现类都是基于Map来实现的(如,HashSet是通过HashMap实现的,TreeSet是通过TreeMap实现的). 1:介绍 将键映射到 ...

  2. Delphi10.2 VCL Forms Application 的构成

    Delphi10.2 项目的构成(File Extensions of Files Generated by RAD Studio) Step1.打开 Delphi10.2,选择[File | New ...

  3. uva11538

    解题思路: 1. 计数问题, 有三种相对摆放方式: 水平, 竖直, 对角线. 根据加法原理即可, 并且没有交集. 水平和竖直是一样的, 只要n*m矩形旋转90度. 所以结果是: n*m*(m-1)+n ...

  4. [转]python单元测试unittest

    单元测试作为任何语言的开发者都应该是必要的,因为时隔数月后再回来调试自己的复杂程序时,其实也是很崩溃的事情.虽然会很快熟悉内容,但是修改和调试将是一件痛苦的事情,如果你在修改了代码后出现问题的话,而单 ...

  5. zoj1109 水题（大神绕道） Language of FatMouse

    Language of FatMouse Time Limit: 10 Seconds      Memory Limit:32768 KB We all know that FatMouse doe ...

  6. Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 第八章 关于SQL查询出错的一些问题

    问题一:在使用MySQL使用传参查询并返回结果集时,没错,小伙伴们都知道少不了Statement接口和PreparedStatement对象.问题来了,有时竟然查询不了,Debug进去,发现执行的SQ ...

  8. 奥利奥好吃吗？Android 8.0新特性适配测试报告来啦！

    WeTest 导读 谷歌2017 I/O开发者大会上发布了Android 8.0的正式版, 其官方代号为Oreo(奥利奥).网上关于Android8.0新功能特性的介绍已铺天盖地,新功能特性会对程序应 ...

  9. win10 edge扩展

    安装红石预览版 https://dev.windows.com/zh-cn/microsoft-edge/extensions/#available-extensions 微软翻译 鼠标手势

  10. Git相关操作三

    1.显示当前分支: git branch 输入上述命令可以显示出分支,*所在的分支为当前分支. 2.新建分支: git branch new_branch new_branch为新建分支的名称,注意该 ...