document.getElementById('div1');
document.getElementsByTagName('div');
getByClass(document,'box');

$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

$('li:eq(2)').css('background','black');//所选择的元素集合中下标为2的元素,下标从0开始;
$('li:odd').css('background','red');//匹配下标为基数的元素
$('li:even').css('background','red');//下标为偶数的元素

$('li').filter('.box').css('background','red');//className为box的li元素;

$('li').filter('[title=hello]').css('background','red');

1.基本元素选择器

$(“p”)            //选取<p>元素

$(“p.info”)      //选取所有class=”info”的<p>元素

$(“p#demo”)      //选取id=”demo”的第一个<p>元素

分层选择器:使用这种选择器时,需要传入多个值,并用空格或大于号分隔。例如:

$(“div input”)        //选择div下所有的input

$(“div > input”)     //选择父元素(div)下的子元素(input)

2、基本条件选择器

使用这种选择器时,需要在元素的选择符后加上基本条件运算符,这些条件运算符都是jQuery内置的运算符。例如:
复制代码

$(“p:first”)      //选择第一个段落

$(“p:last”)       //选择最后一个段落

$(“tr:even”)      //选择偶数表格行

$(“tr:odd”)      //选择奇数表格行

$(“input:not(:checked)”)   //选择所有未被选中的元素

$(“tr:eq(1)”)      //选择索引值为1的表格行

$(“tr:gt(0)”)      //选择索引值大于0的表格行

$(“tr:lt(2)”)      //选择索引值小于2的表格行

$(“:header”)      //选择所有标题元素

$(“:animated”)      //选择所有正在执行动画的元素

3、内容条件选择器

使用这种选择器时,需要在元素的后面加上内容筛选运算符。例如: $(“div:contains(„John‟)”)   //选择包含‘John’文本的层元素

$(“td:empty”)      //选择不包含文本或者子元素的表格单元

$(“div:has(p)”)     //选择包含段落元素的层元素

$(“td:parent”)      //选择包含文本或者子元素的表格单元

4、可见性条件选择器

使用这种选择器时,需要在元素后面加上可见性条件。例如:

$(“tr:hidden”)      //选择所有隐藏的表格行

$(“tr:visible”)      //选择所有可见的表格行

5、属性选择器

使用这种选择器时,需要利用元素属性并使用一定条件来进行选择。例如: $(“div[id]”)      //选择具有id属性的层
复制代码

$(“input[name=‟newletter‟]”)  //选择具有属性name并且属性值为‘newletter’的表单输入元素

$(“input[name!=‟newsletter‟]”) //选择具有属性name并且属性值不为‘newletter’的表单输入元素

$(“input[name^=‟news‟]”)  //选择具有属性name并且属性值以‘news’为起始内容的表单输入内容

$(“input[name$=‟letter‟]”)  //选择具有属性name并且属性值以‘letter’为结束内容的表单输入元素

$(“input[name*=‟man‟]”)   //选择具有属性name并且属性值包含‘man’内容的表单输入元素

$(“input[id][name$=‟man‟]”)  //选择具有属性id和name并且name的值以‘man’为结束内容的表单输入内容

复制代码

6、子元素选择器

使用这种选择器时,需要加入子元素的选择条件。例如:
复制代码

$(“ul li:nth-child(2)”)    //选择第2个列表项

$(“ul li:nth-child(even)”)   //选择偶数索引列表项

$(“ul li:nth-child(odd)”)   //选择奇数索引列表项

$(“ul li:nth-child(3n)”)   //选择索引值为3的倍数的列表项

$(“ul li:first-child”)    //选择第一个列表项

$(“ul li:last-child”)    //选择最后一个列表项

$(“ul li:only-child”)    //选择列表出现且仅出现一个的列表项

复制代码

7、表单元素选择器

使用这种选择器时,需要加入代表不同表单元素类型的标示符。例如:
复制代码

$(“:input”)       //选择所有input,textarea,select和button元素

$(“:text”)       //选择单行文本框

$(“:password”)     //选择密码框

$(“:radio”)       //选择单选按钮

$(“:checkbox”)     //选择复选框

$(“:submit”)      //选择提交按钮

$(“:image”)      //选择所有图像域

$(“:reset”)       //选择重置按钮

$(“:button”)      //选择普通按钮

$(“:file”)       //选择文件域

$(“:hidden”)      //选择隐藏域

$(“input:enabled”) //选择所有可用元素

$(“input:disabled”)    //选择所有不可用元素

$(“input:checked”)  //选择所有被选中的复选框和单选按钮

$(“select option:selected”)  //选择所有被选中的option

JQuery中选择元素的方法:的更多相关文章

  1. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  4. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

  5. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  6. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  7. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  8. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  9. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

随机推荐

  1. ZOJ 3331 Process the Tasks(双塔DP)

    Process the Tasks Time Limit: 1 Second      Memory Limit: 32768 KB There are two machines A and B. T ...

  2. HTTP 筛选器 DLL C:\Windows\Microsoft.Net\Framework\v4.0.30319\aspnet_filter.dll 加载失败。数据是错误。

    今天在一台win2003的云主机上,安装.net 4.0时,所有的网站都打不开了.打开事件查看器,发现以下错误: HTTP 筛选器 DLL C:\Windows\Microsoft.Net\Frame ...

  3. flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array

    mkdir /data/UnifiedLog/; cd /data/UnifiedLog/; wget http://mirror.bit.edu.cn/apache/flume/1.8.0/apac ...

  4. 在.NET中读取嵌入和使用资源文件的方法

    转http://www.jb51.net/article/84660.htm 本文分别介绍了使用GetManifestResourceStream读取嵌入资源,和使用. resx资源文件嵌入资源,希望 ...

  5. 【转】Spring中@Component的作用

    今天在写程序的时候看见一个以前没有见过的注解(@Component),在网上查找过后,经过实践,决定把它记录下来. 1.@controller 控制器(注入服务) 用于标注控制层,相当于struts中 ...

  6. Hibernate 处理事务

    1. Hibernate 的持久化类 1.1 什么是持久化类 持久化类: 就是一个 Java 类(JavaBean),这个 Java类与表建立了映射关系就可以是持久化类; 持久化类 = JavaBea ...

  7. requests 中response如何改变编码格式

    查看初始编码 首先查看拿到的response编码格式: (就不放代码了,因为此例需要用到cookie,可自行找个网站具体测试) 可见初始编码为:ISO-8859-1 修改编码 初始编码: 修改后编码: ...

  8. Python面向对象高级编程-_slots_

    使用_slots_ 正常情况下,当定义一个class,创建一个class的实例后,可以给实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Stu ...

  9. 2 TensorFlow入门笔记之建造神经网络并将结果可视化

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  10. LeetCode:课程表II【210】

    LeetCode:课程表II[210] 题目描述 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一 ...