一、基本

    1. #id:

      html:<div id="demo1">demo1</div>
      
      jQuery:$("#demo1").css("background","red");

    2. element:
      html:<div>demo2</div>
      
      jQuery:$("div").css("background","blue");

    3. .class:
      html:<div class="demo3">demo3</div>
      
      jQuery:$(".demo3").css("background","yellow");

    4. *
      jQuery:$("*").css("background","green");

    5. selector1,selector2,selectorN
      html:<div class="demo3">demo3</div>
      <div id="demo4">demo4</div> jQuery:$(".demo3,#demo4").css("background","orange");

      二.层级:

    6. ancestor descendant
      html:<div><span>demo5</span></div>
      
      jQuery:$("div span").css("background","aqua");

    7. parent > child
      html:<div><p>demo6</p></div>
      
      jQuery:$("div>p").css("background","purple");

    8. prev + next
      html:<div><p>demo6</p></div>
      <p>demo7</p> iQuery:$("div+p").css("background","chartreuse");

    9. prev ~ siblings
      html:<p>demo7</p>
      <div>demo8</div>
      <div>demo8</div> jQuery:$("p~div").css("background","skyblue");

      3.基本筛选器:

    10. :first
      html:        <ul>
      <li>demo9</li>
      <li>demo9</li>
      <li>demo9</li>
      <li>demo9</li>
      <li>demo9</li>
      </ul> Jquery:$("li:first").css("background","crimson");

    11. :not

      jQuery:$("li:not(:first)").css("background","cadetblue");

    12. :even

      jQuery:$("li:even").css("background","fuchsia");

    13. :odd

      jQuery:$("li:odd").css("background","greenyellow");

    14. :eq(index)

      jQuery:$("li:eq(2)").css("background","gold");

    15. :gt(index)

      jQuery:$("li:gt(2)").css("background","blueviolet");

    16. :lang

      html:       <ul>
      <li>demo9</li>
      <li>demo9</li>
      <li lang="en">demo9</li>
      <li>demo9</li>
      <li>demo9</li>
      </ul> jQuery: $("li:lang(en)").css("background","salmon");

    17. :last:

      jQuery:$("li:last").css("background","slateblue");

    18. :lt(index)
      jQuery:$("li:lt(2)").css("background","teal");

    19. :header
      html:<h1>demo10</h1>
      <h2>demo10</h2> jQuery:$(":header").css("background","darkred");

    20. :animated:
      html:<div id="demo11">demo11</div>
      
      jQuery:$("#demo11").click(function(){
              $("#demo11:not(:animated)").animate({
                width:"+=20px"
              },1000);
           });

    21. :focus
      html:<input type="text" id="demo12" value="demo12" autofocus="autofocus"/>
      
      jQuery:$("input:focus").css("background","darkkhaki");

    22. :root
      jQuery:$(":root").css("background","seagreen");

    23. :target
      不会使用

      三、内容

    24. :contains(text)
      html:<div>demo13</div>
      
      jQuery:$("div:contains('demo13')").css("background","turquoise");

    25. :empty
      html:<input type="text" id="demo14" placeholder="demo14" />
      
      jQuery:$("input:empty").css("background","gray");

    26. :has(selector)
      html:<div><p>demo15</p></div>
      
      jQuery:$("div:has(p)").css("background","darkgreen");

    27. :parent
      html:<div><p>demo16</p></div>
      
      jQuery:$("p:parent").css("background","hotpink");

      四、可见性

    28. :hidden
      html:<div id="demo17" style="display: none;"></div>
      
      jQuery:console.log($("div:hidden"));

    29. :visible
      html:<p>demo18</p>
      
      jQuery:$("p:visible").css("background","lightseagreen");

      五、属性

    30. [attribute] 
      html:  <p id="demo18">demo19</p>
      <p id="demo19">demo19</p>
      <p id="test19">demo19</p>
      <p>demo19</p>
      jQuery:$("p[id]").css("background","olive");

    31. [attribute=value] 
      jQuery:$("p[id='demo18']").css("background","lightcoral");

    32. [attribute!=value] 
      jQuery:$("p[id!='demo18']").css("background","darkslategray");

    33. [attribute^=value] 
      jQuery:$("p[id^='demo']").css("border","1px solid red");

    34. [attribute$=value] 
      jQuery:$("p[id$='19']").css("border","1px solid blue");

    35. [attribute*=value] 
      jQuery:$("p[id*='1']").css("border","1px solid green");

    36. [attrSel1][attrSel2][attrSelN]
      html:<div id="demo20" class="demo20">demo20</div>
      
      jQuery:$("div[id][class = 'demo20']").css("border","1px solid black");

      六、子元素

      html:  <ul>
      <li>demo21</li>
      <li>demo21</li>
      <li>demo21</li>
      <li>demo21</li>
      <li>demo21</li>
      </ul>
    37. :first-child 
      $("ul li:first-child").css("border","1px solid blueviolet")

    38. :first-of-type
      $("li:first-of-type").css("border","1px solid green");

    39. :last-child 
      $("ul li:last-child").css("border","1px solid lightcoral");

    40. :last-of-type
      $("ul li:last-of-type").css("border","1px solid turquoise");

    41. :nth-child() 
      $("ul li:nth-child(2)").css("border","1px solid firebrick");

    42. :nth-last-child()
      $("ul li:nth-last-child(2)").css("border","1px solid blueviolet");

    43. :nth-last-of-type()
      $("ul li:nth-last-of-type(2)").css("border","1px solid fuchsia");

    44. :nth-of-type()
      $("ul li:nth-of-type(2)").css("border","1px solid crimson");

    45. :only-child 
      $("ul li:only-child").css("border","1px solid teal");

    46. :only-of-type
      $("ul li:only-of-type").css("border","1px solid orange");

      七、表单

      html:<form >
      <input type="text" value="demo22" disabled="disabled"/><br />
      <input type="password" /><br />
      <input type="radio" name="radio" checked="checked"/><label>radio1</label>
      <input type="radio" name="radio"/><label>radio2</label><br />
      <input type="checkbox" /><label>checkbox1</label>
      <input type="checkbox" checked="checked"/><label>checkbox2</label>
      <input type="checkbox" /><label>checkbox3</label><br />
      <input type="file"disabled="disabled"/><br />
      <input type="hidden" />
      <select name="selector">
      <option value="1">selector1</option>
      <option value="2">selector2</option>
      <option value="3" selected="selected">selector3</option>
      </select><br />
      <input type="submit" value="提交" /><br />
      <input type="image" value="images" /><br />
      <input type="reset" value="重置"/><br />
      <input type="button" value="btn1"/>
      <button>btn2</button>
      </form>
    47. :input 
      $(":input").css("border","1px solid darkblue");

    48. :text 
      $(":text").css("color","goldenrod");

    49. :password
      $(":password").css("background","fuchsia");

    50. :radio
    51. :checkbox
      console.log($(":radio"));
      console.log($(":checkbox"));

    52. :submit 
      $(":submit").css("border","1px solid red");

    53. :image
      $(":image").css("border","1px solid blue");

    54. :reset
      $(":reset").css("background","green");

    55. :button
      $(":button").css("background","blue");

    56. :file 
      $(":file").css("border","1px solid orange");

    57. :hidden 
      console.log($("input:hidden"));

      九、表单属性

    58. :enabled
      $("input:enabled").css("color","red");

    59. :disabled
      $("input:disabled").css("color","blue");

    60. :checked 
      console.log($("input:checked"));
    61. :selected 
      console.log($("select option:selected").html());

jQuery实践——选择器篇的更多相关文章

  1. JQuery之选择器篇(一)

      今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型   主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器   基本选择器是jQuery中最 ...

  2. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  3. jQuery实践树(2)

    上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...

  4. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  5. jQuery 各种选择器 $.()用法

    jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选 ...

  6. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  7. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  8. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  9. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

随机推荐

  1. c# unchecked关键字。byte 合并short

    参考MSDN 代码: public class BytesOperate { /// <summary> /// 计算校验和,SUM /// </summary> public ...

  2. visio取消自动粘附

    有时候画直线的时候需要直线摆在任意位置,这个时候自动粘附就很碍事了,总是自动把你的直线给摆到粘附的特殊位置上 如何取消: 视图->视觉帮助(点右下角的小箭头)->当前活动的->取消勾 ...

  3. rosetta2014/2015安装时出现INCLUDE(keyerror)错误,解决。

    错误: KeyError: 'INCLUDE' 使编译出错 解决方法: [usrname@host source]$ vim tools/build/site.settings 注释# "i ...

  4. 闭包内的微观世界和js垃圾回收机制

    一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...

  5. (一)NOR FALSH 讲解

    nor flash 起始地址: 1F FFFF  = 1 1111          1111 1111 1111 1111 = 2^20 *2 = 2^21=2M Nor Flash 采用了 A0- ...

  6. Tomcat源码导入eclipse的步骤

    Tomcat源码导入eclipse 一.下载源码 1.  进入Apache 官网:http://tomcat.apache.org/ 2.  在左边侧选择要下载的源码的版本. 3.  或者直接通过Ar ...

  7. EditPlus 3.7.164 中文版(4月3日更新)

    新的版本汉化了之前无法汉化的部分内容,并修复了旧汉化版的部分问题. 欢迎下载新的翻译文件.

  8. 【转】sql各种查询技巧

    高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student;   --all 查询所有 select all sex from ...

  9. java第二次作业

    这次通过学习,我掌握了下拉菜单和单选按钮的使用下拉菜单构造方法:JComboBox() 创建具有默认数据模型的 JComboBox.JComboBox(ComboBoxModel aModel) 创建 ...

  10. cocopods 安装与使用

    iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...