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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
React优化子组件render的使用
May 12 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
浅谈vue项目,访问路径#号的问题
Aug 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php简单静态页生成过程
2008/03/27 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
php与js的区别是什么
2013/08/05 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
英语专业毕业生自我鉴定
2013/11/09 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang