1.选择器

　　

2.基本选择器

　　

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  7.  <script type="text/javascript">
  8.      $(function(){
  9.          //选择 id 为 one 的元素
  10.          $("#btn1").click(function(){
  11.              $("#one").css("background","#ffbbaa")
  12.          });
  13.          //选择 class 为 mini 的所有元素
  14.          $("#btn2").click(function(){
  15.              $(".mini").css("background","#ffbbaa")
  16.          });
  17.          //选择 元素名是 div 的所有元素
  18.          $("#btn3").click(function(){
  19.              $("div").css("background","#ffbbaa")
  20.          });
  21.          //选择 所有的元素
  22.          //选择 元素名是 div 的所有元素
  23.          $("#btn4").click(function(){
  24.              $("*").css("background","#ffbbaa")
  25.          });
  26.          //选择 所有的 span 元素和id为two的元素
  27.          $("#btn5").click(function(){
  28.              $("span,#two").css("background","#ffbbaa")
  29.          });
  30.      })
  31.  </script>
  32.  <style type="text/css">
  33.              div, span, p {
  34.                  width: 140px;
  35.                  height: 140px;
  36.                  margin: 5px;
  37.                  background: #aaa;
  38.                  border: #000 1px solid;
  39.                  float: left;
  40.                  font-size: 17px;
  41.                  font-family: Verdana;
  42.              }
  43.              div.mini {
  44.                  width: 55px;
  45.                  height: 55px;
  46.                  background-color: #aaa;
  47.                  font-size: 12px;
  48.              }
  49.              div.hide {
  50.                  display: none;
  51.              }
  52.          </style>
  53.  </head>
  54.  <body>
  55.      <!-- button按钮 -->
  56.      <input type="button" value="选择 id 为 one 的元素" id="btn1" />
  57.      <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
  58.      <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
  59.      <input type="button" value="选择 所有的元素" id="btn4" />
  60.      <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br>
  61.  
  62.      <div class="one" id="one">id 为 one,class 为 one 的div
  63.          <div class="mini">class为mini</div>
  64.      </div>
  65.      <div class="one" id="two" title="test">id为two,class为one,title为test的div
  66.          <div class="mini" title="other">class为mini,title为other</div>
  67.          <div class="mini" title="test">class为mini,title为test</div>
  68.      </div>
  69.      <div class="one">
  70.          <div class="mini">class为mini</div>
  71.          <div class="mini">class为mini</div>
  72.          <div class="mini">class为mini</div>
  73.          <div class="mini"></div>
  74.      </div>
  75.      <div class="one">
  76.          <div class="mini">class为mini</div>
  77.          <div class="mini">class为mini</div>
  78.          <div class="mini">class为mini</div>
  79.          <div class="mini" title="tesst">class为mini,title为tesst</div>
  80.      </div>
  81.      <div style="display:none;" class="none">style的display为"none"的div</div>
  82.      <div class="hide">class为"hide"的div</div>
  83.      <div>包含input的type为"hidden"的div<input type="hidden" size="8"></div>
  84.      <span id="span">^^span元素^^</span>
  85.  </body>
  86.  </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. Oracle 11g DRCP连接方式——基本原理

    学习Oracle是一个复杂.繁琐的过程.在浩如烟海的Oracle官方资料.新特性.MOS资料和各种Internal知识面前,我们总是觉得力不从心.不知所措.但是,这往往也就是我们不断坚持.积累和追寻的 ...

  2. 用到的设计模式总结--单例模式+工厂方法模式+Builder模式

    一,工厂方法模式和单例模式 工厂方法模式中有一个抽象的工厂接口和一个抽象的产品接口.然后,具体的工厂实现抽象工厂并负责生产具体的产品.由客户端决定 new 哪个具体的工厂,从而生产哪种产品. 因此,与 ...

  3. html5 canvas从圆开始

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Angular 下的 directive （part 2）

    ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现.   该指令可以应用于<body>元素,但首选使用多个ng ...

  5. Tju_Oj_3988Password

    这个题是给树的前序和中序,输出后序. 做法是根据前序找根,根据根在中序中找中序的左右子树,根据左右子树长度找前序的左右子树,依此递归. 做过之后感觉还是比较基础的,废话不多说,上题上代码. Bob w ...

  6. scala笔记之惰性赋值（lazy）

    一.lazy关键字简介 lazy是scala中用来实现惰性赋值的关键字,被lazy修饰的变量初始化的时机是在第一次使用此变量的时候才会赋值,并且仅在第一次调用时计算值,即值只会被计算一次,赋值一次,再 ...

  7. C# 常用控件属性及方法介绍

      C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...

  8. oracle的中文排序问题

    mysql中文排序有convert(name using gbk)这样的函数,于是研究了一下oracle中文排序: 使用拼音排序 SQL> select * from chineseordert ...

  9. linux下热插拔事件的产生是怎样通知到用户空间，kobject_uevent_env之uevent【转】

    转自:http://blog.csdn.net/myarrow/article/details/8259888 1．kobject, ktype, kset 1) kobject: 代表sysfs中的 ...

  10. find中的-print0和xargs中-0的奥妙【转】

    find cygnus/firmware_cygnus/target/linux/brcm5830/files/arch/arm/mach-iproc/pm_iproc/ -name "*. ...