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 相关文章推荐
document.all与WEB标准
May 13 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
jquery append与appendTo方法比较
May 24 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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中使用Oracle数据库(1)
2006/10/09 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
企业车辆管理制度
2014/01/24 职场文书
社区七一党员活动方案
2014/01/25 职场文书
学校政风行风整改方案
2014/10/25 职场文书
初中教师个人工作总结
2015/02/10 职场文书
骨干教师个人总结
2015/02/11 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle