当前位置: 开发笔记 > 前端 > 正文

jQuery学习笔记获取jQuery对象

作者：愤然尔立_980 | 来源：互联网 | 2022-02-27 10:46

为了将Web的结构层和表现层、行为层彻底分离，就不应该在HTML标签上直接定义样式或事件等。这意味着要想设置页面中的某个元素，就需要先把这个元素选择出来，选择器正是解决这个问题的技术

使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector).innerHTML以获取元素内部HTML代码是错误的，正确写法是$(selector).html()。同样的，判断一个DOM对象是否存在，不能够写成if($(selector))，而是if($(selector).length>0)。

　　当然jQuery对象和DOM对象可以互转换。从上面的例子也可以看出，jQuery对象可以视为是一个DOM对象数组，因此转换成DOM对象可使用get(index)方法或者[index]取下标；相反，DOM对象转换为jQuery对象只需直接用$(document.getElementById(“id”))包装一下就行了。

　　虽然取对象的方法很简单$(selector)，但是这个参数selector却是种类繁多。这里扼要说明一下：

　　过滤选择器：附在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，如$(selector:first)。若单独使用，$(:first)则等价于$(*:first)；

　　层次选择器：通过DOM元素间层次关系来获取特定元素，由两个选择器组合而成。选择过程为先按照第一个选择器选择元素，然后根据符号确定后代元素或子元素或兄弟元素，最后在这些元素范围内按照第二个选择器选取最后想要的元素；

　　下面就是各种选择器的表格说明- -这就打了我一上午，真蛋疼！

基本选择器

选择器	描述	返回
*	选取所有元素	集合元素
element	根据标签名选取元素	集合元素
#id	根据id属性值选取元素	单个元素
.class	根据class属性值选取元素	集合元素
selector1,selector2,…,selectorN	将每个选择器选取的元素合并在一个结果，主要用于选取不同元素	集合元素

基本过滤选择器

选择器	描述	返回
:first	选取第一个元素	单个元素
:last	选取最后一个元素	单个元素
:even	选取索引值是偶数的所有元素，索引从0开始	集合元素
:odd	选取索引值是奇数的所有元素，索引从0开始	集合元素
:eq(index)	选取索引值等于index的元素，index从0开始	单个元素
:gt(index)	选取索引值大于index的元素，index从0开始	集合元素
:lt(index)	选取索引值小于index的元素，index从0开始	集合元素
:not(selector)	选取匹配selector以外的元素	集合元素
:header	选取所有的标题元素	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素

子元素过滤选择器

选择器	描述	返回
:first-child	选取每个父元素的第一个子元素	集合元素
:last-child	选取每个父元素的最后一个子元素	集合元素
:only-child	如果某元素是父元素唯一的子元素，则将被选取	集合元素
:nth-child(odd)	选取每个父元素下索引值是奇数的子元素	集合元素
:nth-child(even)	选取每个父元素下索引值是偶数的子元素	集合元素
:nth-child(index)	选取每个父元素下索引值等于index的子元素	集合元素
:nth-child(equation)	选取每个父元素下索引值匹配equation的子元素	集合元素

内容过滤选择器

选择器	描述	返回
:contains(text)	选取文本内容为text的元素	集合元素
:has(selector)	选取含有后代元素为selector的元素	集合元素
:parent	选取含有后代元素或文本的元素	集合元素
:empty	选取不包含后代元素或文本的空元素	集合元素

可见性过滤选择器

选择器	描述	返回
:hidden	选取所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

属性过滤选择器

选择器	描述	返回
[attr]	选取拥有attr属性的元素	集合元素
[attr=value]	选取attr属性值为value的元素	集合元素
[attr!=value]	选取attr属性值不为value的元素	集合元素
[attr^=value]	选取attr属性值以value开始的元素	集合元素
[attr$=value]	选取attr属性值以value结束的元素	集合元素
*[attr=value]**	选取attr属性值含有value的元素	集合元素
[attr~=value]	选取attr属性值用空格分隔的值中有一个为value的元素	集合元素
[selector1][selector2]…[selectorN]	选取满足所有属性过滤选择器的元素	集合元素

层次选择器

选择器	描述	返回
selector1 selector2	从selector1的后代元素里选取selector2	集合元素
selector1>selector2	从selector1的子元素里选取selector2	集合元素
Selector1+selector2	从selector1后面的第一个兄弟元素里选取selector2	集合元素
selector1~selector2	从selector1后面的所有兄弟元素里选取selector2	集合元素

表单选择器

选择器	描述	返回
:input	选取<select><button>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:text</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=text]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:password</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=password]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:radio</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=radio]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:checkbox</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=checkbox]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:image</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=image]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:file</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=file]的<input>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:button</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=button]的<input>和<button>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:submit</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=submit]的<input><button>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:reset</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取符合[type=reset]的<input><button>元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=177> <P align=left><STRONG>:hidden</STRONG></P></TD> <TD vAlign=top width=219> <P align=left>选取所有不可见的元素</P></TD> <TD vAlign=top width=172> <P>集合元素</P></TD></TR></TBODY></TABLE> <P align=left> </P> <P align=center><STRONG>表单过滤选择器</STRONG></P> <TABLE class=jbborder> <TBODY> <TR> <TD vAlign=top width=189> <P><STRONG>选择器</STRONG></P></TD> <TD vAlign=top width=189> <P><STRONG>描述</STRONG></P></TD> <TD vAlign=top width=189> <P><STRONG>返回</STRONG></P></TD></TR> <TR> <TD vAlign=top width=189> <P align=left><STRONG>:enable</STRONG></P></TD> <TD vAlign=top width=189> <P align=left>选取所有可用表单元素</P></TD> <TD vAlign=top width=189> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=189> <P align=left><STRONG>:disable</STRONG></P></TD> <TD vAlign=top width=189> <P align=left>选取所有不可用表单元素</P></TD> <TD vAlign=top width=189> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=189> <P align=left><STRONG>:checked</STRONG></P></TD> <TD vAlign=top width=189> <P align=left>选取被选中的<input>元素（单选框、复选框）</P></TD> <TD vAlign=top width=189> <P>集合元素</P></TD></TR> <TR> <TD vAlign=top width=189> <P align=left><STRONG>:selected</STRONG></P></TD> <TD vAlign=top width=189> <P align=left>选取被选中的<option>元素</P></TD> <TD vAlign=top width=189> <P>集合元素</P></TD></TR></TBODY></TABLE> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/jquery" target="_blank" title="jquery">jquery</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了会员登录 \| 用户注册推荐阅读 html 交互式左右滑动导航菜单设计本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法，适用于需要展示多个链接或项目的网页布局。 ... [详细] 蜡笔小新 2024-12-18 17:56:15 react 2019年前端技术趋势及职业发展路径本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细] 蜡笔小新 2024-12-19 10:19:35 上传 JavaScript前端开发中常用的四种继承方法详解本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细] 蜡笔小新 2024-12-18 11:08:28 json ThinkPHP6多数据库部署指南本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署，包括读写分离的策略，以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细] 蜡笔小新 2024-12-17 18:59:28 json 实现元素随滚动条移动的效果本文介绍了如何使用JavaScript和jQuery实现页面元素随着滚动条的移动而相应变化位置的功能，提供了一段简洁的代码示例。 ... [详细] 蜡笔小新 2024-12-17 11:28:52 ajax 深入分析十大PHP开发框架随着PHP技术的发展，各类开发框架层出不穷，成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架，旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细] 蜡笔小新 2024-12-17 11:15:55 ajax Java远程教学系统毕业设计：源代码、MySQL数据库及文档本文介绍了Java语言开发的远程教学系统，包括源代码、MySQL数据库配置以及相关文档，适用于计算机专业的毕业设计。系统支持远程调试，采用B/S架构，适合现代教育需求。 ... [详细] 蜡笔小新 2024-12-17 05:12:29 ajax Web前端性能提升指南：简化JavaScript与消除重复脚本本文为Web前端性能优化系列的第七篇，重点探讨简化JavaScript代码及清除重复脚本的方法。通过这些技术，可以显著提高网页加载速度和用户体验。了解更多信息，请参阅我们的完整指南：Web前端性能优化。 ... [详细] 蜡笔小新 2024-12-16 15:54:29 overflow jQuery Mobile 安全漏洞可能导致XSS攻击近期，谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击（XSS）的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细] 蜡笔小新 2024-12-15 12:43:59 dom jQuery中 $(selector).each() 和 $.each() 的区别与应用在JavaScript开发中，jQuery库提供了两种遍历方法：$(selector).each() 和 $.each()。本文将详细探讨这两种方法的不同之处及其应用场景。 ... [详细] 蜡笔小新 2024-12-15 10:02:02 json cJinja：C++编写的轻量级HTML模板引擎本文介绍了cJinja，这是一个用C++编写的轻量级HTML模板解析库。它利用ejson来处理模板中的数据替换（即上下文），其语法与Django Jinja非常相似，功能强大且易于学习。 ... [详细] 蜡笔小新 2024-12-19 15:55:09 json C#中嵌套类的引用传递与修改探讨本文探讨了C#语言中类的嵌套使用，特别是当嵌套类作为方法参数时，其内部状态是否会因方法调用而发生改变的问题。通过实例分析，详细说明了引用类型在不同情况下的行为。 ... [详细] 蜡笔小新 2024-12-19 15:40:49 json 如何从python读取sql[mysql基础教程] 从python读取sql的方法：1、利用python内置的open函数读入sql文件；2、利用第三方库pymysql中的connect函数连接mysql服务器；3、利用第三方库pa ... [详细] 蜡笔小新 2024-12-19 15:06:29 console Java安装与运行指南及学习建议本文详细介绍了Java的安装、配置、运行流程以及有效的学习方法，旨在帮助初学者快速上手Java编程。 ... [详细] 蜡笔小新 2024-12-19 13:41:15 console 深入解析Spring Boot自动配置机制本文旨在深入探讨Spring Boot的自动配置机制，特别是如何利用配置文件进行有效的设置。通过实例分析，如Http编码自动配置，我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细] 蜡笔小新 2024-12-19 12:41:37 愤然尔立_980 这个家伙很懒，什么也没留下！ Tags \| 热门标签 icons v8 overflow firebug jq dom ajax firefox bootstrap cookies html5 css3 chart.js layout focus scheme console npm build yarn webkit dialog textview listview react base64 上传 requirejs hybrid json RankList \| 热门文章 1EmguCV常用函数解析与应用指南 2POP 绘图库 Asana/Drawsana 源代码看看 3LeetCode实战解析：数字加一问题 4Active Object设计模式解析 5Docker入门与实践指南 6提高CAD绘图效率的五大秘诀 751Talk音视频技术实践与挑战——LiveVideoStackCon讲师系列分享 8Web App vs Native App：未来的移动应用趋势 9利用CSS3和React实现数字滚动动画组件 10利用PHP网站管理Python爬虫的启动、停止及目标URL修改 11深入理解Quartz：Java定时任务框架详解 12List & Label 19 新增报表参数及多种数据提供器支持 13在Win10和VirtualBox环境下配置Ubuntu使用摄像头 14HTML与Android TextView中的文本样式调整方法及实践 15Android开发技巧：实现带描边的圆角图片 PHP1.CN \| 中国最专业的PHP中文社区 \| DevBox开发工具箱 \| json解析格式化 \|PHP资讯 \| PHP教程 \| 数据库技术 \| 服务器技术 \| 前端开发技术 \| PHP框架 \| 开发工具 \| 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved \| 京公网安备 11010802041100号 \| 京ICP备19059560号-4 \| PHP1.CN 第一PHP社区版权所有