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. Graham's Scan法求解凸包问题

    概念 凸包(Convex Hull)是一个计算几何(图形学)中的概念.用不严谨的话来讲,给定二维平面上的点集,凸包就是将最外层的点连接起来构成的凸多边型,它能包含点集中所有点的.严谨的定义和相关概念参 ...

  2. UDP ------ UDP 和 TCP 的对比

    UDP是无连接协议,客户端和服务器通信之前不需要建立握手连接: UDP没有应答机制,所以也没有重发机制,很大的可能会造成丢包.收到重复包.乱序的情况: UDP可以实现局域网广播功能,即某个主机可以向所 ...

  3. Ansible Role

    Ansible Role 专题总揽 https://www.jianshu.com/p/1be92c3f65ec lework 关注 2017.03.02 12:57* 字数 629 阅读 1439评 ...

  4. HTML5 快速学习二 Canvas

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...

  5. python高级特性和高阶函数

    python高级特性 1.集合的推导式 列表推导式,使用一句表达式构造一个新列表,可包含过滤.转换等操作. 语法:[exp for item in collection if codition] if ...

  6. python常用模块-配置文档模块(configparser)

    python常用模块-配置文档模块(configparser) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. ConfigParser模块用于生成和修改常见配置文档,当前模块的名称 ...

  7. svn使用笔记

    一.checkout:第一次下载trunk里面的代码到本地 二.commit:提交一些修改* out of date : 本地版本号 < 服务器版本号* 如果过期,就update,可能会出现co ...

  8. HDU 4508 湫湫系列故事——减肥记I （完全背包）

    题意:有n种食物,每种食物可以给湫湫带来一个幸福感a,同时也会给她带来b的卡路里的摄入,然后规定她一天摄入的卡路里的量不能超过m,一共有n种食物,问可以得到的 最大的幸福感是多少? 解题报告:一开始以 ...

  9. webpack react 错误整理

    1.ERROR in ./src/entry.js Module build failed: SyntaxError 解决方法: 安装babel-preset-react,  npm install ...

  10. SocketServer源码学习补充

    在前两个文章中整理了关于BaseServer部分以及BaseRequestHandler,以及通过对TCP的处理的流程的整理,这次整理的是剩下的关于用于扩展的部分,这里通过对线程扩展进行整理 Thre ...