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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javascript引导程序
Oct 26 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
留学顾问岗位职责
2014/04/14 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
MySQL基础(二)
2021/04/05 MySQL
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
Python sklearn分类决策树方法详解
2022/09/23 Python