1、基本选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>基本选择器</title>
  <style type="text/css">
  #box {
  background-color: #FFF;
  border: 2px solid #000;
  padding: 5px;
  }
  </style>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function() {
  $("#btn1").click(function() {//触发不同的效果按钮点击事件
  //标签选择器，获取<h3>元素并为其添加背景颜色
  //$("h3").css({"background":"red"});
  //类选择器，获取并设置所有class为title的元素的背景颜色
  //$(".title").css({"background":"red"});
  //ID选择器，获取并设置id为box的元素的背景颜色
  //$("#box").css({"background":"red"});
  //并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
  //$("h2,dt,.title").css({"background":"red"});
  //交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
  //$("h2.title").css({"background":"red"});
  //全局选择器，改变所有元素的字体颜色
  $("*").css({"background":"red"});
  })
  });
  </script>
  <body>
  <input type="button" id="btn1" value="显示效果" />
  <div id="box">
  id为box的div
  <h2 class="title">class为title的h2</h2>
  <h3 class="title">class为title的h3</h3>
  <h3>热门排行</h3>
  <dl>
  <dt>
  <img src="data:images/case_1.gif" width="93" height="99" alt="斗地主" />
  </dt>
  <dd class="title">斗地主</dd>
  <dd>休闲游戏</dd>
  <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
  </dl>
  </div>
  </body>
  </html>

2、层次选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>层次选择器</title>
  <style type="text/css">
  * {
  margin: 0;
  padding: 0;
  line-height: 30px;
  }
   
  body {
  margin: 10px;
  }
   
  #menu {
  border: 2px solid #03C;
  padding: 10px;
  }
   
  a {
  text-decoration: none;
  margin-right: 5px;
  }
   
  span {
  font-weight: bold;
  padding: 3px;
  }
   
  h2 {
  margin: 10px 0;
  cursor: pointer;
  }
  </style>
  </head>
  <body>
  <div id="menu">
  <h2 title="点击看效果">全部旅游产品分类</h2>
  <dl>
  <dt>
  北京周边旅游<span>特价</span>
  </dt>
  <dd>
  <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a>
  </dd>
  </dl>
   
  <dl>
  <dt>景点门票</dt>
  <dd>
  <a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a>
  </dd>
  <dd>
  <a href="#">山水</a> <a href="#">双休</a>
  </dd>
  </dl>
  <span>更多分类</span>
  </div>
   
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(document).ready(function() {
  $("h2").click(function() {//点击h2标题时触发的事件
  //后代选择器，获取并设置#menu下的<span>元素的背景颜色
  //$("#menu span").css({"background":"red"});
  //子选择器，获取并设置#menu下的子元素<span>的背景颜色
  //$("#menu>span").css({"background":"red"});
  //相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
  //$("h2+dl").css({"background":"red"});
  //同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
  $("h2~dl").css({"background":"red"});
  });
  });
  </script>
   
   
   
   
   
   
  </body>
  </html>

3、属性选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>属性选择器</title>
  <style type="text/css">
  #box {
  background-color: #FFF;
  border: 2px solid #000;
  padding: 5px;
  }
   
  h2 {
  cursor: pointer;
  }
  </style>
  </head>
  <body>
  <div id="box">
  <h2 class="odds" title="cartoonlist">动画列表</h2>
  <ul>
  <li class="odds" title="kn_jp">名侦探柯南</li>
  <li class="evens" title="hy_jp">火影忍者</li>
  <li class="odds" title="ss_jp">死神</li>
  <li class="evens" title="yj_jp">妖精的尾巴</li>
  <li class="odds" title="yh_jp">银魂</li>
  <li class="evens" title="hm_da">黑猫警长</li>
  <li class="odds" title="xl_ds">仙履奇缘</li>
  </ul>
  </div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function() {
  $("h2").click(function() {
  //改变含有title属性的<h2>元素的背景颜色
  //$("h2[title]").css({"background":"red"});
  //改变class属性的值为odds的元素的背景颜色
  // $("[class='odds']").css({"background":"red"});
  //改变id属性的值不为box的元素的背景颜色
  //$("[id!='box']").css({"background":"red"});
  //改变title属性的值中以h开头的元素的背景颜色
  //$("[title^='h']").css({"background":"red"});
  //改变title属性的值中以jp结尾的元素的背景颜色
  //$("[title$='jp']").css({"background":"red"});
  //改变title属性的值中含有s的元素的背景颜色
  //$("[title*='s']").css({"background":"red"});
  //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
  $("li[class][title*='y']").css({"background":"red"});
  });
  });
  </script>
  </body>
  </html>

4、基本过滤选择器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>基本过滤选择器</title>
  </head>
  <body>
  获取焦点：<input type="text">
  <h1>h1网络小说</h1>
  <h2>h2网络小说</h2>
  <h3>h3网络小说</h3>
  <h4>h4网络小说</h4>
  <ul>
  <li>王妃不好当</li>
  <li>致命交易</li>
  <li class="three">迦兰寺</li>
  <li>逆天之宠</li>
  <li>交错时光的爱恋</li>
  <li>张震鬼故事</li>
  <li>第一次亲密接触</li>
  </ul>
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function() {
  $("h2").click(function(){
  //改变第1个<li>元素的背景颜色
  //$("li:first").css({"color":"red"});
  //改变最后一个<li>元素的背景颜色
  //$("li:last").css({"color":"red"});
  //改变class不为three的<li>元素的背景颜色
  //$("li:not(.three)").css({"color":"red"});
  //改变索引值为偶数的<li>元素的背景颜色
  //$("li:even").css({"color":"red"});
  //改变索引值为奇数的<li>元素的背景颜色
  //$("li:odd").css({"color":"red"});
  //改变索引值等于1的<li>元素的背景颜色
  //$("li:eq(1)").css({"color":"red"});
  //改变索引值大于1的<li>元素的背景颜色
  // $("li:gt(1)").css({"color":"red"});
  //改变索引值小于1的<li>元素的背景颜色
  //$("li:lt(1)").css({"color":"red"});
  //改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色
  //$(":header").css({"color":"red"});
  });
  //改变当前获取焦点的元素的背景颜色
  $("input").click(function(){
  //让获取焦点的元素改变背景色
  alert("是否获取焦点："+$(this).is(":focus"));
  $(":focus").css({"background":"red"});
  })
  });
  </script>
  </body>
  </html>

5、可见性过滤器

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>可见性过滤器</title>
  </head>
  <body>
  <button id="show">show</button>
  <button id="hide">hide</button>
  <div>显示1</div>
  <div>显示2</div>
  <div style="display:none">显示3</div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function() {
  //点击show按钮触发的事件
  $("#show").click(function(){
  $(":hidden").show();
  });
  //点击hide触发的事件
  $("#hide").click(function(){
  $("div:visible").hide();
  });
   
   
   
  });
  </script>
   
  </body>
  </html>

JavaQuery选择器的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  3. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  5. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  6. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  8. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  9. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

随机推荐

  1. 【AtCoder Grand Contest 012C】Tautonym Puzzle [构造]

    Tautonym Puzzle Time Limit: 50 Sec  Memory Limit: 256 MB Description 定义一个序列贡献为1,当且仅当这个序列 由两个相同的串拼接而成 ...

  2. 【译】第二篇 Replication：分发服务器的作用

    本篇文章是SQL Server Replication系列的第二篇,详细内容请参考原文. 分发服务器是SQL Server复制的核心组件.分发服务器控制并执行数据从一个服务器移动到另一个服务器的进程. ...

  3. Dream------scala--scala内部类实战

    Dream------scala--scala内部类实战 scala的内部类跟java的内部类有很大的不同,java中的内部类实际上是从属于外部类,而scala的内部类是从属于外部类对象的(及外部类实 ...

  4. LINUX的DNS设置【转】

    网卡DNS设置 用windos系统大家都知道,本地连接里面有一个DNS设置. 那么这个选项对应Linux系统的话就是在网卡配置文件,通过编辑vi  /etc/sysconfig/network-scr ...

  5. linux服务器登录时慢出现卡顿

    使用SSH远程登录Linux在输入用户名之后在过了好几秒之后才会出现输入密码.严重影响工作效率.登录很慢,登录上去后速度正常,这种情况的主要原因为: DNS反向解析的问题 SSH在登录的时候一般我们输 ...

  6. MVVM模式的命令绑定

    命令绑定要达到的效果 命令绑定要关注的核心就是两个方面的问题,命令能否执行和命令怎么执行.也就是说当View中的一个Button绑定了ViewModel中一个命令后,什么时候这个Button是可用的, ...

  7. python基础--re模块

    常用正则表达式符号 '.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r& ...

  8. KVM创建虚拟机

    一.复制现有img备份 1.ssh登陆宿主机 我的在 192.168.0.302.复制img 我的虚拟机img文件在 /home/images 我的img模板文件在 /home/tools/kvm/i ...

  9. python3项目之数据可视化

    数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的规律和关联. 数据科学家使用Python编写了一系列令人印象深刻的可视化和分析工具,其中很多也可供 ...

  10. SQL Case when 的使用方法 （转）

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...