1.选择器

　　

2.基本选择器

　　

3.程序（包含以上五种基本选择器）

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //选择 id 为 one 的元素

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

             $("#one").css("background","#ffbbaa")

         });

         //选择 class 为 mini 的所有元素

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

             $(".mini").css("background","#ffbbaa")

         });

         //选择 元素名是 div 的所有元素

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

             $("div").css("background","#ffbbaa")

         });

         //选择 所有的元素

         //选择 元素名是 div 的所有元素

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

             $("*").css("background","#ffbbaa")

         });

         //选择 所有的 span 元素和id为two的元素

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

             $("span,#two").css("background","#ffbbaa")

         });

     })

 </script>

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

 </head>

 <body>

     <!-- button按钮 -->

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

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

4.效果

　　

002 jquery基本选择器的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

随机推荐

  1. 【暴力Treap 或 离线归并】子串计数（genies）

    子串计数(genies) Description 给出一段含有n个元素的序列a,要求求出子串和小于等于t的子串个数 Input Data 输入共两行第一行包含两个整数,n,t分别表示序列a元素的个数和 ...

  2. 【转】crc16几种标准校验算法及c语言代码

    一.CRC16校验码的使用 现选择最常用的CRC-16校验,说明它的使用方法. 根据Modbus协议,常规485通讯的信息发送形式如下: 地址 功能码 数据信息 校验码 1byte 1byte nby ...

  3. python---django中orm的使用（3）admin配置与使用

    新建项目,并开启 python manage.py runserver 访问admin页面 http://127.0.0.1:8080/admin 补充:若是发现admin页面样式丢失:可能是因为在s ...

  4. spring注解 @Scheduled(cron = "0 0 1 * * *")实现定时的执行任务

    @Scheduled(cron = "0 0 1 * * *") 在使用该注解以前请做好以下准备工作,配置好相应的xm文件. 配置定时注解的步骤:http://blog.csdn. ...

  5. Dubbo学习笔记7：Dubbo的集群容错与负载均衡策略

    Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...

  6. ngx_lua_API 指令详解（六）ngx.thread.spawn、ngx.thread.wait、ngx.thread.kill介绍

    摘要:通过lua-nginx-module中的ngx.thread同时执行多个任务. ngx_lua中访问多个第三方服务 ngx_lua中提供了ngx.socket API,可以方便的访问第三方网络服 ...

  7. js调试系列: 源码定位与调试[基础篇]

    js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 ...

  8. 20155220 2016-2017-2 《Java程序设计》第六周学习总结

    20155220 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 输入输出 10.1 InputStream OutputStream 数据有来源与目 ...

  9. LCA 算法（二）倍增

     介绍一种解决最近公共祖先的在线算法,倍增,它是建立在任意整数的二进制拆分之上.   代码:   //LCA:Doubly #include<cstdio> #define swap(a, ...

  10. [转]Linux联网问题

    一.Kali联网问题 首先ifconfig,可以看到没有正在工作的网卡,只有localhost 然后ifconfig -a,可以看到eth0这块网卡并没有离家出走,只是罢工了而已 打开/etc/net ...