jQuery中元素选择器(element)简单用法示例


Posted in jQuery onMay 14, 2018

本文实例讲述了jQuery中元素选择器(element)简单用法。分享给大家供大家参考,具体如下:

一、介绍

元素选择器是根据元素名称匹配相应的元素。

通俗的讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。

可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为“刘伟”的学生,但是姓名为“吴语”的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个。

多数情况下,元素选择器匹配的是一组元素。

元素选择器的使用方法如下:

$("element");

其中,element为要查询元素的标记名。

例如,要查询全部div元素,可以使用下面的jQuery代码:

$("div");

二、应用

在页面中添加两个<div>标记和一个按钮,通过单击按钮来获取这两个<div>,并修改它们的内容。

三、代码

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div>这里种植了一棵草莓</div>
<div>这里养殖了一条鱼</div>
<input type="button" value="若干年后" />
<script type="text/javascript">
$(document).ready(
function()
{
 $("input[type='button']").click(
  function()
  {                //为按钮绑定单击事件
   $("div").eq(0).html("这里长出了一片草莓"); //获取第一个div元素
   $("div").get(1).innerHTML="这里的鱼没有了"; //获取第二个div元素
  });
});
</script>

四、运行效果(这里使用 http://tools.3water.com/code/HtmlJsRun 在线运行测试):

jQuery中元素选择器(element)简单用法示例

五、运行说明

在上面的代码中,使用元素选择器获取了一组div元素的jQuery包装集,它是一组Object对象,存储方式为[Object Object],但是这种方式并不能显示出单独元素的文本信息,需要通过索引器来确定要选取哪个div元素,在这里分别使用了两个不同的索引器eq()get()

这里的索引器类似于房间的门牌号,所不同的是,门牌号是从1开始计数的,而索引器是从0开始计数的。

在本实例中使用了两种方法设置元素的文本内容,html()方法是jQuery的方法,innerHTML方法是DOM对象的方法。

这里还用了$(document).ready()方法,当页面元素载入就绪的时候就会自动执行程序,自动为按钮绑定单击事件。

eq()方法返回的是一个jQuery包装集,所以它只能调用jQuery的方法,而get()方法返回的是一个DOM对象,所以它只能用DOM对象的方法。

eq()方法与get()方法默认都是从0开始计数。

$("#test").get(0)等效于$("#test")[0]

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php debug 安装技巧
2011/04/30 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
js对象的比较
2011/02/26 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
战友聚会邀请函
2014/01/18 职场文书
公司活动邀请函
2014/01/24 职场文书
餐厅筹备计划书
2014/04/25 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
文言文辞职信
2015/02/28 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
预备党员转正意见
2015/06/01 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Oracle用户管理及赋权
2022/04/24 Oracle