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 相关文章推荐
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jquery退出each循环的写法
Feb 26 Javascript
JS判断字符串包含的方法
May 05 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
php中http_build_query 的一个问题
2012/03/25 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
yii用户注册表单验证实例
2015/12/26 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JS解析XML的实现代码
2009/11/12 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python实现截屏的函数
2015/07/25 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python实现俄罗斯方块游戏
2020/03/25 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python做接口测试的必要性
2019/11/20 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
学生个人的自我评价分享
2013/11/05 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
商业街策划方案
2014/05/31 职场文书
课程设计的心得体会
2014/09/03 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
欢迎词怎么写
2015/01/23 职场文书
民事二审代理词
2015/05/25 职场文书
比赛口号霸气押韵
2015/12/24 职场文书