文档章节

JQuery选择器

laoyao
 laoyao
发布于 2014/02/25 18:51
字数 1006
阅读 152
收藏 18

Css选择器找到元素后添加样式,JQuery选择器找到元素后添加行为,其中JQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器

基本选择器是通过元素id,class和标签名来获取dom元素,网页中每个id只能使用一次,但是class可以使用多次,用法: $('username'),获取id=username的元素 $('.left'),获取所有class=left的元素 $('p'),获取所有标签为<p>的元素 $('*'),选取所有元素 $('div,span,p.testClass'),获取所有<div>,<span>和class=testClass的<p>标签元素

层次选择器可以通过dom元素间的层次关系来取得特定元素 $('div span')选取<div>里的所有的<span>元素 $('div > span')选取<div>元素下的元素名是<span>的元素 $('.one + div')选取class为one的下一个<div>兄弟元素 = $('.one').next('div') $('#two~div') 选取id为two的元素后面的所有<div>兄弟元素 = $('.two').nextAll('div')

过滤选择器: 过滤选择器又包括基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器

基本过滤选择器: :first $('div:first')选取所有<div>元素中的第一个<div>元素 :last $('div:last')选取所有<div>元素中的最后一个<div>元素 :not(selector) $('input:not(.myClass)')选取class不是myClass的<div>元素 :even $('input:even')选取索引值为偶数的<input>元素 :odd $('input:even')选取索引值为奇数的<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')获取正在执行动画的<div>元素

内容过滤选择器: :contains(text) $("div:coontains('我')")选取含有文本'我'的<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') :visible $('div:visible')选取所有可见元素<div>

属性过滤选择器: [attribute] $('div[id]')选取拥有属性id的元素 [attribute=value] $("div[title='test']")选取属性title为test的div元素 [attribute!=value] $("div[title!='test']")选取属性title不为test的div元素,注意没有属性title的div元素也会被选取 [attribute^=value] $("div[title^='test']")选取属性title以test开始的div元素 [attribute$=value] $("div[title$='test']")选取属性title以test结束的div元素 [attribute*=value] $("div[title='test']")选取属性title含有test的div元素 [seletor1][selector2][selectorN] $("div[id][title=$'test']")选取属性拥有id且属性title为test结束的div元素

表单对象属性过滤选择器

:enabled $("#form :enabled")选取id为form的表单内所有的可用元素 :disabled $("#form :enabled")选取id为form的表单内所有的不可用元素 :checked $("input:check")选取所有被选中的input元素 :selected $("select:selected")选取所有被选中的选项元素

表单选择器 :input $(":input") 选取所有的Input、textarea、select和button元素 :test $(":text") 选取所有的单行文本框 :password $(":password")选取所有的密码框 :radio $(":radio")选取所有的单选框 :checkbox $(":checkbox")选取所有的 复选框 :submit $(":submit")选取所有的 提交按钮 :image $(":image")选取所有的 图像按钮 :reset $(":reset")选取所有的重置按钮 :button $(":button")选取所有的按钮 :file $(":file")选取所有的上传域 :hidden $(":hidden")选取所有的不可见元素

© 著作权归作者所有

laoyao
粉丝 7
博文 22
码字总数 28605
作品 0
芜湖
程序员
私信 提问
jQuery 3教程(二):jQuery选择器

原文地址:jQuery 3教程(二):jQuery选择器 Introduction jQuery最方便的地方便是各种选择器。jQuery选择器完美兼容CSS 3选择器,甚至还有更强大的功能。 $ 在jQuery程序中,最常见的就是$符...

aqv
09/29
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
59
0
jQuery零基础入门——(二)Selector选择器

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎回到我们的jQuery零基础...

JandenMa
2018/07/01
68
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot初探---spring-boot-starter-web究竟干了啥

上一篇已经简单介绍了启动类的部分,这一篇主要讨论一下springboot引入的哪些依赖 我们都知道想用springboot做一个web应用,首先要做的是引入相关依赖,两步操作: 1、添加spring-boot-start...

计算机狼
55分钟前
6
0
基于Rocket.chat搭建内网聊天系统(使用docker,本机不需要安装meteor)

您可能不希望使用标准的Docker命令,而是希望对部署进行更多的自动化管理。这就是使用Docker-compose可能会派上用场的地方。 确保您已安装Docker和Docker-compose并且可以正常运行。 docker...

吴伟祥
57分钟前
8
0
conda 更新源

更新conda 源为阿里源 conda config --add channels http://mirrors.aliyun.com/pypi/simple conda config --set show_channel_urls yes 阿里云: http://mirrors.aliyun.com/pypi/simple/ 豆......

Mr_Tea伯奕
57分钟前
5
0
java 泛型使用

每次写泛型方法都翻下百度,还是自己记录下把。 1、定义一个泛型方法,使用传入参数类型来传递泛型。这种用法在封装json序列化工具类应该会用到。 List<xxx> aa = getList(xxx.class);pr...

朝如青丝暮成雪
今天
7
0
深入了解Java模板引擎Freemarker

前言 常用的Java模板引擎包括:JSP、Freemarker、Thymeleaf、Velocity,从Github上查阅到这几款主流的模板引擎的性能的对比,总体上看,JSP、Freemarker、Thymeleaf、Velocity在性能上差别不...

code-ortaerc
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部