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 相关文章推荐
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
js+canvas实现五子棋小游戏
Aug 02 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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/04/23 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue小白入门教程
2018/04/02 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
python使用folium库绘制地图点击框
2018/09/21 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python创建或生成列表的操作方法
2019/06/19 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
《永远的白衣战士》教学反思
2014/04/25 职场文书
初中历史教学反思
2016/02/19 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python