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. 【BZOJ】4559: [JLoi2016]成绩比较 计数DP+排列组合+拉格朗日插值

    [题意]n位同学(其中一位是B神),m门必修课,每门必修课的分数是[1,Ui].B神碾压了k位同学(所有课分数<=B神),且第x门课有rx-1位同学的分数高于B神,求满足条件的分数情况数.当有一 ...

  2. CF 1008C Reorder the Array

    You are given an array of integers. Vasya can permute (change order) its integers. He wants to do it ...

  3. sqlalchemy操作数据库（二）

    sqlalchemy的基本操作 表结构如下: from sqlalchemy import create_enginefrom sqlalchemy.ext.declarative importdec ...

  4. 升级lamp中php5.6到php7.0过程

    升级过程我就直接摘录博友,http://www.tangshuang.net/1765.html,几乎问题和解决办法都是参照他的,所以我也就不另外写了.谢谢!! 周末看了一下php7的一些情况,被其强 ...

  5. oracle 修改属性

    alter table 表名 modify 字段名 类型; alter table 表名 modify 字段名 属性名; alter table TEST modify sbirthday not n ...

  6. codevs 1230 元素查找

    题目链接:http://codevs.cn/problem/1230/ 题解: 会有很多方法写这道题,写个裸的哈希练练手 #include<cstdio> ,MOD=; int n,m,h ...

  7. 八、springboot整合redis

    整合Redis 一. 注解方式实现添加缓存 1.在pom.xml加入依赖 <!-- 配置使用redis启动器 --> <dependency> <groupId>o ...

  8. 关于Eclipse连接sql server 2008的若干问题

    以下内容转自:https://www.cnblogs.com/skylarzhan/p/7619977.html Eclipse中使用SQL server 2008数据库 一.准备材料 要能够使用数据 ...

  9. 开源的python机器学习模块

    1. Scikit-learn Scikit-learn 是基于Scipy为机器学习建造的的一个Python模块,他的特色就是多样化的分类,回归和聚类的算法包括支持向量机,逻辑回归,朴素贝叶斯分类器, ...

  10. 课堂实验-String类和Arrays类

    课堂实验 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arrays类 sort binarySea ...