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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
js实现中文实时时钟
Jan 15 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
教师岗位职责范本
2013/12/29 职场文书
5s推行计划书
2014/05/06 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Python软件包安装的三种常见方法
2022/07/07 Python