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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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中遍历二维数组的几种方法详解
2013/06/08 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Django Celery异步任务队列的实现
2019/07/24 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Pytorch释放显存占用方式
2020/01/13 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Django中ORM的基本使用教程
2020/12/22 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
优秀实习生感言
2014/03/01 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
小学中队长竞选稿
2015/11/20 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis