前端学习之三——jquery选择器
Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器。
1.非基本过滤选择器,一般需要和基本过滤选择器搭配使用。
2,从性能上将,原声支持的Id选择器,标签选择器,类选择器性能最好,其他一般是通过dom循环查找得到,因此,允许的条件下,优先选择js原生支持的js原生选择器。
3,最好提供选择器的上下文,来缩小目标元素的查找范围。
一、基本选择器。
#id;.class;element;*;selector1,selector2,...selectorN(将每一个选择器匹配到的元素合并后一起返回)
二、层次选择器
$("ancestor descendant"); 选取后代元素;
$("parent>child"); 选取子元素;
$("selector").next();选取紧接着的下一个同辈元素;
$("selector").nextAll() 选取之后的所有同辈元素;
$("selector").siblings() 选取之前及之后的所有同辈元素;
$("selector").prev() 获取之前的同辈元素
$("selector").parents() 获取祖先元素
$("selector").parent() 获取父元素
$("selector").closet() 获取最近匹配的祖先元素
以后几个层次型的查找函数,都可以使用选择器作为函数参数
三、基本过滤选择器
:first;:last;:even;:odd;:eq(index);:gt(index);:lt(index); 按照同一类元素的下标进行选择
:not(selector);:header;:animated;:focus::parent;按照元素的状态进行选择
四、内容过滤选择器
:empty;:contains(key);
:has(seletor)符合某种选择器特征的元素
:find(seletor)符合某种选择器特征的后代元素
:filter(seltor)符合某种选择器特征的同辈元素
五:可见性过滤选择器
:hidden;:visible
六、属性过滤选择器
[attribute];[attribute=value];[attribute!=value];[attribute^=value];[attribute$=value];[attribute*=value];[attribute|=value];[attribute~=value];[attribute1][attribute2]...[attributeN]
七:子元素过滤选择器
:nth-child(index/even/odd);:first-child;last-child;:only-child;
八:表单元素选择器
:input;:text;:password;:radio;:checkbox;:submit;:image;:reset;:button;:file;
九:表单元素属性过滤选择器
:enabled;:disabled;:checked;:selected;
前端学习之三——jquery选择器的更多相关文章
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 4月10日学习笔记——jQuery选择器
概念 jQuery 是一套Javascript脚本库,注意 jQuery 是脚本库,而不是脚本框架."库"不等于"框架".jQuery 并不能帮助我们解决脚本的 ...
- 前端学习之jquery(二)
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
- web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...
- 前端学习之-- Jquery
Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...
- jQuery 学习(2)——jQuery选择器
1.jQuery为元素添加CSS样式如下: <div id="tt1">单个样式:css()内"属性名称","value"< ...
随机推荐
- go语言坑之并发访问map
fatal error: concurrent map read and map write 并发访问map是不安全的,会出现未定义行为,导致程序退出.所以如果希望在多协程中并发访问map,必须提供某 ...
- Robot Framework(一)安装笔记
参考网址:https://www.cnblogs.com/yinrw/p/5837828.html因为自己安装了py,网上教程都是统一安装py2.7开始的. 所以这里总结下安装笔记:cmd命令界面进行 ...
- Two strings CodeForces - 762C (字符串,双指针)
大意: 给定字符串$a$,$b$, $b$可以任选一段连续的区间删除, 要求最后$b$是$a$的子序列, 求最少删除区间长度. 删除一段连续区间, 那么剩余的一定是一段前缀和后缀. 判断是否是子序列可 ...
- springboot2整合zookeeper集成curator
步骤: 1- pom.xml <dependency> <groupId>org.apache.curator</groupId> <artifactId&g ...
- 第一篇 jQuery
1-1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- es分数_score衰减函数
1.按日期衰变 GET news/doc/_search { "query" : { "function_score": { "query" ...
- spring boot入门与进阶教程
SpringBoot入门.SpringBoot进阶.Spring Cloud微服务.Spring Ecosystem 微服务相关.Spring Boot 入门 IDEA 版本.Spring Boot集 ...
- Ngnx工作原理(1)
Nginx 是一个轻量级的HTTP 服务程序,相比其他服务器程序如Apache,Nginx占用内存少,稳定性高,并发处理能力强.同时Nginx 还是一个反向代理服务程序,和邮件代理服务程序.Nginx ...
- JavaScript学习基础
基本语法 JavaScript语法和Java语言类似,每个语句以 : 结束,语句块用 {...}包起来.JavaScript并不强制要求在每个语句的结尾加: ,但是建议都加上,不给自己找麻烦. ...
- CDN和浏览器缓存
1,CDN 旨在解决的最重要的问题是什么,我们称之为网络延迟,通过网络获取资源总是比从本地获取慢,无论服务器是在同一个局域网中还是位于世界的另一个角落,都是如此.这里的速度差异是 IT 行业的一个核心 ...