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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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调用三种数据库的方法(2)
2006/10/09 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Python中的元类编程入门指引
2015/04/15 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python和Go语言的区别总结
2019/02/20 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
UML设计模式笔试题
2014/06/07 面试题
教师研修随笔感言
2014/01/23 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
护士自我鉴定总结
2014/03/24 职场文书
新入职员工工作总结
2015/10/15 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电