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入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
node中koa中间件机制详解
Aug 22 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
laypage+SpringMVC实现后端分页
Jul 27 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自带的进位制之间的转换函数
2013/06/08 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
vue实现登录拦截
2020/06/29 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python Socket传输文件示例
2017/01/16 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Django websocket原理及功能实现代码
2020/11/14 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
生产主管岗位职责
2013/11/10 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
师德培训心得体会2016
2016/01/09 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
讲解Python实例练习逆序输出字符串
2022/05/06 Python