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通过JSON字符串创建JSON对象
Aug 24 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 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实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
jquery编写日期选择器
2017/03/16 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
美容院考勤制度
2014/01/30 职场文书
文艺演出策划方案
2014/06/07 职场文书
环卫工作汇报材料
2014/10/28 职场文书
黄石寨导游词
2015/02/05 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
台风停课通知
2015/04/24 职场文书
建国大业观后感800字
2015/06/01 职场文书