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

jQuery学习笔记获取jQuery对象_jquery

作者：le__citron | 来源：互联网 | 2018-06-19 03:28

为了将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 Java实战之电影在线观看系统的实现本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细] 蜡笔小新 2023-12-14 15:52:03 hover CSS3选择器的使用方法详解，提高Web开发效率和精准度本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细] 蜡笔小新 2023-12-14 14:37:52 html Voicewo在线语音识别转换jQuery插件的特点和示例本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细] 蜡笔小新 2023-12-13 20:01:16 html 解决IE678伪类不兼容问题的方法本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细] 蜡笔小新 2023-12-13 10:50:43 html Html5-Canvas实现简易的抽奖转盘效果本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细] 蜡笔小新 2023-12-13 06:02:20 html 单击时动态创建元素 - Dynamically create element on click Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细] 蜡笔小新 2023-12-12 15:59:36 html 前端人员必须知道的三个问题及其发展阶段本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细] 蜡笔小新 2023-12-12 12:45:59 html jquery id选择器 id带.问题例如控件ID为user.id使用$(#user.id)不能得到正确的结果必须使用\\转义即$(#user\\.id)转载于:https:www.cnblogs.comrch ... [详细] 蜡笔小新 2023-12-12 12:22:11 html HTML5网页模板怎么加百度统计？本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细] 蜡笔小新 2023-12-11 12:06:41 html 使用jQuery / AJAX实现两个div的动态更新本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细] 蜡笔小新 2023-12-11 10:07:32 html Android实战——jsoup实现网络爬虫，糗事百科项目的起步本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细] 蜡笔小新 2023-12-11 09:19:45 html 【译】发送表单数据这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细] 蜡笔小新 2023-12-14 16:19:10 html 如何去除Win7快捷方式的箭头本文介绍了如何去除Win7快捷方式的箭头的方法，通过生成一个透明的ico图标并将其命名为Empty.ico，将图标复制到windows目录下，并导入注册表，即可去除箭头。这样做可以改善默认快捷方式的外观，提升桌面整洁度。 ... [详细] 蜡笔小新 2023-12-14 16:17:05 html 90后程序员的职业发展之路：从年薪3w到30w的经验分享本文是一位90后程序员分享的职业发展经验，从年薪3w到30w的薪资增长过程。文章回顾了自己的青春时光，包括与朋友一起玩DOTA的回忆，并附上了一段纪念DOTA青春的视频链接。作者还提到了一些与程序员相关的名词和团队，如Pis、蛛丝马迹、B神、LGD、EHOME等。通过分享自己的经验，作者希望能够给其他程序员提供一些职业发展的思路和启示。 ... [详细] 蜡笔小新 2023-12-14 15:22:09 jquery 解决文件名过长下载失败问题的jQuery方案本文介绍了使用jQuery解决文件名过长导致下载失败的问题。原方案中存在文件名部分丢失的问题，通过动态生成隐藏域表单并提交的方式来解决。详细的解决方案和代码示例在文章中给出。 ... [详细] 蜡笔小新 2023-12-11 16:59:20 le__citron 这个家伙很懒，什么也没留下！ Tags \| 热门标签 dom yarn focus vue chart chart.js requirejs npm checkbox svg base64 cookies scheme bootstrap 上传 iframe view webkit firefox chrome css jq css3 dialog jquery hybrid listview html react hover RankList \| 热门文章 1【精读】Numpy详解 2自定义VDA的欢迎画面 3solaris10下vim安装 4intel 赛扬M和奔腾4哪个好 5hive 调优问题 6PDF.js代码的编译环境搭建以及错误处理 7【自然框架】PowerDesigner 格式的元数据的表结 8yii2Event 实例及源码分析 9CLR类型设计之方法与构造器 10如何把网页设置为主页？ 11搭建企业内部的Nuget服务器 12JS拾荒の函数 13com.google.gson.stream.JsonWriter.beforeValue()方法的使用及代码示例 14使用BeanUtils.copyProperties复制对象的属性 15[Linux] Systemd 入门教程：命令篇 PHP1.CN \| 中国最专业的PHP中文社区 \| DevBox开发工具箱 \| json解析格式化 \|PHP资讯 \| PHP教程 \| 数据库技术 \| 服务器技术 \| 前端开发技术 \| PHP框架 \| 开发工具 \| 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved \| 京公网安备 11010802041100号 \| 京ICP备19059560号-4 \| PHP1.CN 第一PHP社区版权所有