JQuery查找DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下:

DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。

为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树。HTML代码如下:

<p class="nm_p" title="欢迎访问三水点靠木" >欢迎访问三水点靠木</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

顺便说下,类命名的nm是nowamagic的简写~

使用JQuery在文档树上查找节点非常容易,可以通过JQuery选择器来完成。

查找元素节点

获取元素节点并打印出它的文本内容,JQuery代码如下:

var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
var li_txt = $li.text(); // 输出第二个<li>元素节点的text

以上代码获取了<ul>元素里第2个<li>节点,并将它的文本内容“简单易懂的JavaScript魔法”打印出来。

查找属性节点

利用JQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字,例如:

获取属性节点并打印出它的文本内容,JQuery代码如下:

var $para = $(".nm_p"); // 获取<p>节点
var p_txt = $para.attr("title"); // 输出<p>元素节点属性title

以上代码获取了class为nm_p的<p>节点,并将它的title属性的值“欢迎访问简明现代魔法图书馆”打印出来。

本例完整JQuery代码如下:

<script type="text/javascript">
//<![CDATA[
$(function(){
  var $para = $(".nm_p"); // 获取<p>节点
  var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
  var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
  var li_txt = $li.text(); // 输出第二个<li>元素节点的text
  $("#btn_1").click(function(){
    alert(ul_txt);
  });
  $("#btn_2").click(function(){
    alert(li_txt);
  });
  $("#btn_3").click(function(){
    alert(p_txt);
  });
});
//]]>
</script>

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

Javascript 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
javascript 精粹笔记
May 09 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
zend framework多模块多布局配置
2011/02/26 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
前端性能优化建议
2020/09/17 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
将python图片转为二进制文本的实例
2019/01/24 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
出纳岗位职责模板
2013/11/27 职场文书
家长写给老师的建议书
2014/03/13 职场文书
转让协议书范本
2014/09/13 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书