前端学习之三——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;

时间: 2024-11-06 07:19:56

前端学习之三——jquery选择器的相关文章

jQuery基础学习(二)—jQuery选择器

一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   

前端学习之jquery

一 jQuery是什么?   <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera

web前端学习总结--JQuery

jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户更方便地处理HTML.Events.实现动画效果,并且方便为网站提供AJAX交互 使用户的HTML页面保持代码和HTML内容分离 注:jQuery2.x开始不再支持Internet Explorer6,7,8 jQuery是一个JS框架,极大的简化了JS编程 jQuery的核心理念是write le

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

前端学习-02 jQuery结束each循环、模板字符串、css的@charset

jQuery的each方法结束循环 let arr = [1, 5, 7, 2, 8, 9]; $(arr).each(function(index, item) { if(item == 5) { return true; // 相当于 continue, 进行下一次循环 } if(item == 8) { return false; // 相当于break, 结束循环 } console.log(item); // 1 7 2 }) 控制台打印结果:1  7  2 模板字符串 字符串拼接繁琐

JQuery选择器和DOM的操作-入门学习

嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因.好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作. 一.JavaScrip

【前端学习】【jQuery选择器】

jQuery选择器 jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM(Document Object Model)和Ajax(Asynchronous JavaScript and XML)操作都依赖于选择器. jQuery选择器 1 优势 1.1 简洁的写法 1.2 支持CSS1到CSS3选择器 1.3 完善的处理机制 2 CSS选择器和jQuery选择器 2.1 基

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言 在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常"犯迷糊",需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到.为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高. [相关博文] [前端学习--如何修改<a href="#">url name</a> 使用javascript和JQuery] [示例页面]--test-ul.html <!DOCTY

jQuery学习一(选择器)

一直在学习web前端的知识,学习jQuey也有一段时间了,想总结一下.这一章先来学习jQuery选择器的知识. 一.jQuery选择器的介绍 jQuery中的选择器完全继承了css的风格.利用jQuery选择器,可以非常快速和便捷的找出DOM元素,学习jQuery选择器是学习jQuery的基础,因为所有的行为都要在获取元素之后才能生效 二.jQuery选择器 1.基本选择器 基本选择器是最常用也是最简单的选择器,通过元素的id,class和标签名等来查找DOM元素 选择器 描述 返回 示例 #i