JavaScript框架：jQuery选择器精通教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript框架：jQuery选择器精通教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4999字，纯文字阅读大概需要8分钟。

内容图文

　　简单的说，jQuery是一个JavaScript框架，它的宗旨是：写更少的代码，做更多的事情。对于Web开发人员而言，jQuery是一个功能强大的JavaScript库，能更加快速开发相关应用，例如AJAX交互，JavaScript动画效果等。对于Web设计师而言，jQuery封装了Javascript源码细节，实现了与HTML标签的有效分离，便于设计师更加专注于Web页面设计效果。基于此，网页的用户体验大大增强，包括网页的交互性，视觉效果等等。

　　jQuery的核心设计思想是：选择某个网页元素，然后对其进行某种操作。那么如何选择、定位某个网页元素呢?对于JavaScript开发人员而言，通常的一种手段是document.getElementById()。而在jQuery语法中，使用的是美元符号“$”，等价的选择表达式写法为：

var someElement = $("#myId");
　　jQuery之所以称之为“jQuery”，主要就是因为它强大的选择器，也就是Javascript Query的意思。下面，我们具体介绍jQuery选择器相关的设计思想：

　　一、jQuery基本选择器

　　前面提到，选择器是jQuery的特色。jQuery的基本选择器主要分为tb以下五种类型：

　　1. $(“#myId”) // 选择ID为myId的网页元素

　　2. $(“标签名”) // 例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合

　　3. $(“.myClass”) // 获取的是HTML文档中所有的class为“myClass”的元素集合

　　4. $(“*”) // 这个获取的是HTML文档中的所有的元素

　　5. $(“selector1,selector2,selector3…selectorN “) // 这种选择器叫做组选择器。例如：$(“span,#two”)

　　// 选取所有的span标签元素和id=two的元素。

　　二、jQuery层次选择器

　　无论何时，通过jQuery选择器获取的jQuery对象任何时候都是一组元素。jQuery的层次选择器主要分为以下两种类型：

　　1. $(“ancestor descendant”)：选取parent元素后所有的child元素。ancestor的中文意思是“祖先”，descendant的中文意思是“后代”。例如：

　　$(“body div”) 选取body元素下所有的div元素。

　　$(“div#test div”) 选取id为“test”的div所包含的所有的div子元素

　　2. $(“parent > child”)：选取parent元素后所有的第一个child元素。例如：

　　$(“body > div”) 选取body元素下所有的第一级div元素。

　　$(“div#test > div”) 选取id为“test”的div所包含的所有的第一级div子元素
　三、jQuery过滤选择器

　　jQuery最基本过滤选择器包括：

　　1. :first // 选取第一个元素。$(“div:first”)选取所有div元素中的第一个div元素

　　2. :last // 选取最后一个元素。$(“div:last”)选取所有div元素中的最后一个div元素

　　3. :even // 选取索引是偶数的所有元素。$(“input:even”)选取索引是偶数的input元素。

　　4. :odd // 选取索引是奇数的所有元素。$(“input:odd”)选取索引是奇数的input元素。

　　5. :eq(index) // 选取索引等于index的元素。$(“input:eq(1)”)选取索引等于1的input元素。

　　6. :gt(index) // 选取索引大于index的元素。$(“input:gt(1)”)选取索引大于1的input元素。

　　7. :lt(index) // 选取索引小于index的元素。$(“input:lt(3)”)选取索引小于3的input元素。

　　jQuery内容过滤选择器，可以轻松地对DOM文档中的文本内容进行筛选，从而准确地选取我们所需要的元素。

　　1. :contains(text) // 选取含有文本内容为“text”元素。$(“div:contains(‘你’)”)选取含有文本“你”的div元素。

　　2. :empty // 选取不包含子元素和文本的空元素。$(“div:empty”)选取不包含子元素(包括文本元素)的div空元素。

　　3. :parent // 选取含有子元素或者文本的元素。$(“div:parent”)选取拥有子元素(包括文本元素)的div元素。

　　可以看见，jQuery内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

　　jQuery可见性过滤选择器的用法如下：

　　1. :hidden // 选取所有不可见的元素。$(“:hidden”)选取网页中所有不可见的元素。

　　2. :visible // 选取所有可见元素。$(“div:visible”)选取所有可见的div元素。

　　jQuery属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

　　1. [attribute] // 选择拥有此属性的元素。$(“div[id]“)选取拥有属性id的元素。

　　2. [attribute=value] // 选取属性值为value的元素。$(“div[name=test]“)选取属性name的值为“test”的div元素。

　　3. [attribute!value] // 选取属性值不等于value的元素。

　　4.[attribute^=value] // 选取属性的值以value开始的元素。

　　5. [attribute$=value] // 选取属性的值以value为结束的元素。

　　6. [attribute*=value] // 选取属性的值含有value的元素。

　　7. [selector1] [selector2] [selectorN] //复合属性选择器。$(“div[id][name*=test]“)选取拥有属性id，且属性name的值含有“test”的div元素

　　jQuery子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂。

　　1. :nth-child(index/even/odd/equation) // 选取每个父元素下的第index个子元素或者奇偶元素。

　　2. :first-child // 选取每个父元素的第一个子元素

　　3. :last-child // 选取每个父元素的最后一个子元素

　　jQuery表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，例如选择不可用的表单元素、被选中的下拉框、多选框等等。

　　1. :enabled // 选取所有可用的表单元素。$(“#form1 :enabled”)选取id为“form1”的表单内的所有可用元素。

　　2. :disabled // 选取所有不可用的表单元素。

　　3. :checked // 选取所有被选中的元素。$(“input:checked”)选取所有被选中的元素。

　　4. :selected // 选取所有被选中的选项元素。$(“select :selected”)选取所有被选中的选项元素(option)。

　　jQuery中引入了表单选择器，让我们能极其方便地获取到一个表单中的某个或某类型的元

内容总结

以上是互联网集市为您收集整理的JavaScript框架：jQuery选择器精通教程全部内容，希望文章能够帮你解决JavaScript框架：jQuery选择器精通教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端