zoukankan      html  css  js  c++  java
  • JavaQuery选择器

    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="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>
  • 相关阅读:
    973. K Closest Points to Origin
    919. Complete Binary Tree Inserter
    993. Cousins in Binary Tree
    20. Valid Parentheses
    141. Linked List Cycle
    912. Sort an Array
    各种排序方法总结
    509. Fibonacci Number
    374. Guess Number Higher or Lower
    238. Product of Array Except Self java solutions
  • 原文地址:https://www.cnblogs.com/yunfeioliver/p/7784162.html
Copyright © 2011-2022 走看看