jQuery选择器基础入门教程


Posted in Javascript onMay 10, 2016

本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:

什么是jQuery选择器

使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。

在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回。

首先来看看什么是选择器。

//根据id获取jQuery对象
var jQueryObject=$("#testDiv");

上例中使用了id选择器,选取id为testDiv的DOM对象并将它放入jQuery对象,最后返回了一个jQuery对象。

现在通过jQueryObject变量就可以操作testDiv图层了,因为jQueryObject是一个jQuery对象,所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容:

jQueryObject.html("修改后的HTML内容");

通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。

jQuery选择器的强大在于提供了丰富的选择器,如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。

jQuery选择器核心函数

jQuery选择器调用的是jQuery核心函数:

jQuery(EXPRESSION,[econtext]);

这个函数接收一个包含选择器表达式的字符串,然后用这个字符串去匹配一组元素。

jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数,或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式(通常由CSS选择器组成),然后根据这个表达式查找所有匹配的元素。

默认情况下,如果没有指定context参数,$()将在当前的HTML document中查找DOM元素:如果指定了context参数,如一个dom元素集jQuery对象,则会在这个context中查找。在jQuery1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。

参数说明如下:

~Expression:必选参数,选择器表达式。

~Context:可选参数,选择器上下文

~jQuery,选择器返回的jQuery对象,jQuery对象,jQuery对象是一个集合,可以使用链式语法调用各种jQuery函数。

Context参数能够缩小选择器的范围,加快查找速度。

希望本文所述对大家jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery元素选择器用法实例
Dec 23 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
jQuery的文档处理程序详解
May 10 #Javascript
You might like
php生成文件
2007/01/15 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python简单实现基数排序算法
2015/05/16 Python
python实现最长公共子序列
2018/05/22 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
几道PHP面试题
2013/04/14 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
端午节活动总结报告
2015/02/11 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
杨善洲电影观后感
2015/06/04 职场文书
客户答谢会致辞
2015/07/30 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA