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验证表单第二部分
Nov 25 Javascript
javascript 常用功能总结
Mar 18 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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的加密方式及原理
2012/06/14 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python实现K最近邻算法
2018/01/29 Python
python列表list保留顺序去重的实例
2018/12/14 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
请说出几个常用的异常类
2013/01/08 面试题
编程输出如下图形
2013/11/24 面试题
报到证丢失证明
2014/01/11 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
运动会致辞稿50字
2014/02/04 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书