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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
div层的移动及性能优化
Nov 16 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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微信开发之百度天气预报
2016/11/18 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
判断ie的两种简单方法
2013/08/12 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python自动12306抢票软件实现代码
2018/02/24 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python程序需要编译吗
2020/06/19 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
分享一个python的aes加密代码
2020/12/22 Python
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
金融专业求职信
2014/08/05 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
童年读书笔记
2015/06/26 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python