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 校验中国身份证号码实例详解
Apr 11 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
JS实现分页导航效果
2020/02/19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python入门篇之数字
2014/10/20 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python调用百度语音REST API
2018/08/30 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
如何使用Pytorch搭建模型
2020/10/26 Python
渗透攻击的测试步骤
2014/06/07 面试题
小学英语教师先进事迹
2014/05/28 职场文书
拔河比赛口号
2014/06/10 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
学校教学管理制度
2015/08/06 职场文书
python爬虫--selenium模块
2021/03/31 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL