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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
微信小程序8种数据通信的方式小结
Feb 03 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
微信小程序实现点击页面出现文字
Sep 21 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动态生成VRML网页
2006/10/09 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript调试说明
2010/06/07 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
应聘医药代表职位求职信
2013/10/21 职场文书
安全先进班组材料
2014/12/26 职场文书
辞职信格式模板
2015/02/27 职场文书
python爬虫selenium模块详解
2021/03/30 Python
解决Pytorch中关于model.eval的问题
2021/05/22 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server