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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Javascript的表单验证长度
Mar 16 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
Yii全局函数用法示例
2017/01/22 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
javascript的函数
2007/01/31 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python 备份程序代码实现
2017/03/06 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python中Numpy mat的使用详解
2019/05/24 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
公司承诺书范文
2014/05/19 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
骨干教师个人总结
2015/02/11 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android