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 09 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
Node.js简单入门前传
Aug 21 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue实现路由切换改变title功能
May 28 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php中session与cookie的比较
2015/01/27 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python区分不同数据类型的方法
2019/10/14 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
工作中个人的自我评价
2013/12/31 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
书法大赛策划方案
2014/06/04 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
教师年终个人总结
2015/02/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android