JQuery中选择元素的方法:
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中选择元素的方法:的更多相关文章
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
- JQuery中each()的使用方法说明
JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- jQuery中常用的函数方法
jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...
- Jquery中find与each方法使用详解
本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
随机推荐
- iOS中nil 、NULL、 Nil 、NSNull
nil,定义一个空的实例,指向OC中对象的空指针. 示例代码: NSString *someString = nil; NSURL *someURL = nil; id someObject = ni ...
- ES6通过WeakMap解决内存泄漏问题
一.Map 1.定义 Map对象保存键值对,类似于数据结构字典:与传统上的对象只能用字符串当键不同,Map对象可以使用任意值当键. 2.语法 new Map([iterable]) 属性 size:返 ...
- Struts2 框架的值栈
1. OGNL 表达式 1.1 概述 OGNL(Object Graphic Navigation Language),即对象图导航语言; 所谓对象图,即以任意一个对象为根,通过OGNL可以访问与这个 ...
- Java 之 GUI 编程
GUI (Graphical User Interface, 图形用户接口) CLI (Command line User Interface, 命令行用户接口) Java 为 GUI 提供的对象都存 ...
- java获取当前路径&读取当前目录下文件
项目目录如下: test1.class中读取test.txt import java.io.*; import java.util.Scanner; public class Test1 { publ ...
- Java 连接池的工作原理(转)
原文:Java 连接池的工作原理 什么是连接? 连接,是我们的编程语言与数据库交互的一种方式.我们经常会听到这么一句话“数据库连接很昂贵“. 有人接受这种说法,却不知道它的真正含义.因此,下面我将解释 ...
- 《COM本质论》COM是一个更好的C++心得分享
昨天看了<COM本质论>的第一章"COM是一个更好的C++",认为非常有必要做一些笔记,于是整理成这篇文章.我相信你值得拥有. 这篇文章主要讲的内容是:一个实现了高速查 ...
- 详解JMeter函数和变量(转载)
详解JMeter函数和变量(1) JMeter函数可以被认为是某种特殊的变量,它们可以被采样器或者其他测试元件所引用.函数调用的语法如下: ${__functionName(var1,var2,var ...
- 基本数据类型(Day4)
一 什么是数据? eg:x=10 则10是要存储的数据 二 为什么数据要分不同的类型? 数据是用来表示不同状态的,当然不同的状态可以用不同的数据表示 三 数据类型 1.数字(整型,长整型 ,浮 ...
- Django-进阶之路--信号
Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...