本文实例讲述了 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.jb51.net/code/HtmlJsRun 在线运行测试):
五, 运行说明
在上面的代码中, 使用元素选择器获取了一组 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 常见事件用法与技巧总结,jQuery 常用插件及用法总结,jQuery 扩展技巧总结及jquery 选择器用法总结
来源: http://www.jb51.net/article/140054.htm