1.css选择器

标签选择器：a{...}

id选择器：#note{...}

类选择器：div.note{..}、.dream{...}

群组选择器：td,p,div,a{...}

后代选择器： #link a{...}

通配选择器：*{...}

2.jQuery选择器

看一个小例子：

<html>

<head>

    <script src="../jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        function demo(){

            alert("demo");

        }

    </script>

</head>

<body>

    <p onclick="demo();">点击我</p>

</body>

</html>

这段代码虽然实现了功能，但没有将网页内容和行为分离。

<p class="demo">点击我</p>

    <script type="text/javascript">

        $(".demo").click(function(){

            alert("jQuery demo");

        })

    </script>

这部分有点不明白，为什么我把js代码放在head里就没用了，这可能和加载顺序有关系。

我们可以发现，他们选择器的使用方式是一样的。.demo{} --$(".demo")

$("")获取的永远是对象，即使网页上没有此元素，因此判断元素存在与否应该使用：

    if ($("#tt").length>0)

        {

            //do something

        }

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

 <!-- 测试的元素 -->

  <div class="one" id="one" >

 id为one,class为one的div

      <div class="mini">class为mini</div>

  </div>

    <div class="one"  id="two" title="test" >

     id为two,class为one,title为test的div.

      <div class="mini"  title="other">class为mini,title为other</div>

      <div class="mini"  title="test">class为mini,title为test</div>

  </div>

  <div class="one">

      <div class="mini">class为mini</div>

      <div class="mini">class为mini</div>

      <div class="mini">class为mini</div>

      <div class="mini"></div>

  </div>

  <div class="one">

      <div class="mini">class为mini</div>

      <div class="mini">class为mini</div>

      <div class="mini">class为mini</div>

      <div class="mini"  title="tesst">class为mini,title为tesst</div>

  </div>

  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>

  包含input的type为"hidden"的div<input type="hidden" size="8"/>

  </div>

  <span id="mover">正在执行动画的span元素.</span>

还有css

  div,span,p {

    width:140px;

    height:140px;

    margin:5px;

    background:#aaa;

    border:#000 1px solid;

    float:left;

    font-size:17px;

    font-family:Verdana;

  }

  div.mini {

    width:55px;

    height:55px;

    background-color: #aaa;

    font-size:12px;

  }

  div.hide {

    display:none;

  }
  • 基本选择器：
#id $("#text")选取id为test的元素
。class $(".test")选取所有class为test的元素
element $("p")选取所有的<p>元素
* $("*")选取所有元素
selector1,selector2... $("div,span,p.myClass")选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素
  • 层次选择器(后代元素，子元素，相邻元素，兄弟元素)
$("ancestor descendant") $("div span")选取<div>里的所有的<span>元素
$("parent>child") $("div>span")选取<div>元素下元素名是<span>的子元素
$("prev+next") $(".one+div")选取class为one的下一个<div>元素
$("pre~siblings") $("#two~div")选取id为two的元素后面的所有<div>兄弟元素

等价关系

$(".one+div") $(".one").next("div")
$("#two~div") $("#prev").nextAll("div")

siblings和$("pre~siblings")进行比较

$("#prev~div").css("","")//选取#prev之后的所有同辈div元素

$("#prev").nextAll("div").css("","")//同上

$("#prev").siblings(div).css("","")//选取#prev所有同辈的div元素，无论前后位置
  • 过滤选择器

基本过滤选择器

:first $("div:first")选取所有<div>元素中第一个<div>元素
:last $("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector) $("input:not(.myClass)")选取class不是myClass的<input>元素
:even $("input:even")选取索引是偶数的<input>元素
:odd $("input:odd")选取索引是奇数的<input>元素
:eq(index) $("input:eq(1)")选取索引等于1的<input>元素
:gt(index) $("input:gt(1)")选取索引大于1的<input>元素
:lt(index) $("input:lt(1)")选取索引小于1的<input>元素
:header $(":header")选取网页中所有的<h1><h2><h3>...
:animated $("div:animated")选取正在执行动画的元素

内容过滤选择器

:contains(text) $("div:contains('我')")选取含有文本我的<div>元素
:empty $(div:empty)选取不包含子元素的<div空元素>
:has(selector) $("div:has(p)")选取含所有<p>元素的<div>元素
:parent $("div:parent")选取拥有子元素的<div>元素

可见性过滤选择器

:hidden $(":hidden")选取所有不可见的元素，包括<input type="hidden"/><div style="display:none">和<div style="visibility:hidden">等元素，如果只想选取<input>元素，可以使用$("input:hidden")
:visable $("div:visible")选取所有可见的<div>元素

属性过滤器

[attribute] $("div[id]")选取拥有属性id的元素
[attribute= value] $("div[tittle=test]")获取title为“test”的<div>元素
[attribute!= value] $("div[tittle!=test]")获取title不等于“test”的<div>元素(没有属性title的<div>也会被选取)
[attribute^= value] $("div[tittle^=test]")选取属性tittle以test开始的<div>元素
[attribute$= value] $("div[tittle$=test]")选取属性tittle以test结束的<div>元素
[attribute*= value] $("div[tittle*=test]")选取属性tittle含有test的<div>元素
[selector][selector][selector] $("div[id][tittle$=''test]")选取拥有属性id，并且属性title以"test"结束的<div>元素

子元素过滤选择器

:nth-child(index

/even/odd/equatin)

eq(index)只匹配一个元素，而:nth-child将为每个父元素匹配子元素，并且：nth-child(index)

的index从1开始
:first-child 选取每个父元素的第一个子元素
:last-child 选取们每个父元素的最后一个子元素
:only-child 如果摸个元素是他的父元素中唯一的子元素，那么匹配，否则不匹配。

表单对象属性过滤选择器

:enabled $("#form1 :enabled")选取id为“form1”的表单内的所有可用元素
:disabled $("#form1 :disabled")选取id为“form1”的表单内的所有不可用元素
:checked $("input:checked");选取所有被选中的<input>元素
:selected $("select :selected");选取所有被选中的选项元素

表单选择器

:input $(":input")选取所有<input>,<textarea>,<select>,<button>元素
:text $(":text")选取所有的单行文本框
:password $(":password")获取所有密码框
:radio $(":radio")h获取所有单选框
:checkbox $(":checkbox")获取所有的复选框
:submt $(":submt")获取所有的提交按钮
:image $(":image")获取所有的图片按钮
:reset $(":reset")获取所有重置按钮
:button $(":button")获取所有按钮
:file $(":file")获取所有上传文件
:hidden $(":hidden")选取所有不可见元素
  • 选择器中的一些注意事项：

一、选择器中含有特殊字符

1.含有".","#","[","("等，要用//转移

比如：<div id="id#d">bb</div>

$('#id#b')就是错的，要用$('#id//#b')

2.属性选择器的引号问题

低版本：$('div[@title="test"]');

现在正确写法：$('div[title="test"]')

二、选择器中含有空格符的注意事项

$('.test :hidden'):选取class 为test的元素里面的隐藏元素

$('.test:hidden'):选取隐藏的class为"test"的元素

案例研究：略

锋利的JQuery-Jquery选择器的更多相关文章

  1. 锋利的jQuery ——jQuery选择器（二）

    一.jQuery选择器 1)CSS选择器 CSS选择器有:1>标签选择器  E{CSS规则} 2>ID选择器   #ID{CSS规则} 3>类选择器  E.className{CSS ...

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

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

  3. HTML 学习笔记 JQuery（选择器）

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

  4. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  5. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  6. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  7. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  8. jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  9. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  10. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

随机推荐

  1. antuomake 生成configure的使用

    configure 作为编译配置脚本,有大量选项可供不同编译需求,这些选项直 接作用到最终生成的Makefile文件 问题:automake默认的gcc编译选项为-Wall -O2 -g,怎么改为我们 ...

  2. 【NetOffice Excel】Excel合并单元格【原】

    CSharp操作Excel采用开源的原生.NET程序集NetOffice,格式兼容性更好. 在操作Excel的时候有时候需要合并单元格 using ExcelOffice = NetOffice.Ex ...

  3. 【转】c#文件操作大全（二）

    61.文件夹移动到整合操作 FolderDialog aa = new FolderDialog();            aa.DisplayDialog();            if (aa ...

  4. C# 与C++的数据转换

    一.类型转化 下面重点罗列下常用的类型转化. C++类型 C#类型 备注说明 Int Int16.Int32 没有悬念,直接转化 Uint UInt16.Uint32.int 在程序中,不太清楚是,就 ...

  5. Linux 服务器如何禁止 ping 以及开启 ping

    Linux 默认是允许 ping 响应的,也就是说 ping 是开启的,但 ping 有可能是网络攻击的开始之处,所以关闭 ping 可以提高服务器的安全系数.系统是否允许 ping 由2个因素决定的 ...

  6. php5 图片验证码一例

    php5 图片验证码. GD库的函数1,imagecreatetruecolor -----创建一个真彩色的图像imagecreatetruecolor(int x_size,int y_size) ...

  7. linux系统文件属性及企业精典故障案例

    linux系统文件属性: [root@nginx_back ~]# stat keepalived-1.2.7.tar.gz 查看文件属性 File: "keepalived-1.2.7.t ...

  8. （转）《深入理解java虚拟机》学习笔记4——Java虚拟机垃圾收集器

    Java堆内存被划分为新生代和年老代两部分,新生代主要使用复制和标记-清除垃圾回收算法,年老代主要使用标记-整理垃圾回收算法,因此java虚拟中针对新生代和年老代分别提供了多种不同的垃圾收集器,JDK ...

  9. HubbleDotNet开源全文搜索组件相关资源

    系统简介 HubbleDotNet 是一个基于.net framework 的开源免费的全文搜索数据库组件.开源协议是 Apache 2.0.HubbleDotNet提供了基于SQL的全文检索接口,使 ...

  10. 插入排序(insertion_sort)

    最简单的排序算法,又称插值排序,原理类似于打扑克牌时把摸到的牌插入手中已有序牌的过程. void insertion_sort(int* A ,int n){ int i,j,key; ;i < ...