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实现预览待上传的本地图片
Mar 15 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
详解vue 图片上传功能
Apr 30 Javascript
express异步函数异常捕获示例详解
Nov 30 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防CC攻击实现代码
2011/12/29 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php微信开发接入
2016/08/27 PHP
PHP文件操作实例总结
2016/09/27 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
javascript轮播图算法
2016/10/21 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python3 配置logging日志类的操作
2020/04/08 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
金融事务专业毕业生求职信
2014/02/23 职场文书
优质服务活动实施方案
2014/05/02 职场文书
工会主席事迹材料
2014/06/03 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
推普标语口号大全
2015/12/26 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js