jquery对dom节点的操作【推荐】


Posted in Javascript onApril 15, 2016

1、JavaScript脚本放在哪里才好? 

1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载。

2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容。

3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行。所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中。

2、jquery的常用函数

如:children() 、parent()、each()、text()、html()、val()、next();

 

<ul class="level-1"> 

<li class="item-i">I</li> 

<li class="item-ii">II 

<ul class="level-2"> 

<li class="item-a">A</li> 

<li class="item-b">B 

<ul class="level-3"> 

<li class="item-1">1</li> 

<li class="item-2">2</li> 

<li class="item-3">3</li> 

</ul> 

</li> 

<li class="item-c">C</li> 

</ul> 

</li> 

<li class="item-iii">III</li> 

</ul>

a、children()

遍历DOM树,搜索指定元素的直接子节点;此方法仅在DOM树中向下遍历一层 

// jquery 

$('ul.level-2').children().css('background-color', 'red'); 

$('ul.level-2').children('.item-*').css('background-color', 'red');

b、parent()

向上遍历DOM树,用于搜索每个指定元素的直接亲元素。这个和children()函数的遍历范围是一样的,都是遍历一层。

$('li.item-a').parent().css('background-color', 'red');

c、each()

循环访问集合中的每个元素。

//数组的遍历 

var arr = ["Test1", "Test2", "Test3"]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //二维数组的遍历 

var arr = [ 

["Test1", "Test2", "Test3"], 

["Test4", "Test5", "Test6"], 

["Test7", "Test8", "Test9"] 

]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //遍历json数据 

var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" }; 

$.each(obj, function (i, item) { 

alert(i); 

alert(item); 

});

4、text() 函数

text()是jquery对象的一个方法,用于访问指定元素的文本内容。它合并指定元素的文本内容,并以字符串的形式返回。可以用于赋值。

5、html() 函数

从指定元素中的第一个元素获取html内容,以字符串的形式返回。可以用于赋值。

区别:text() 与 html() 函数的区别

区别一:text()函数可用于xml 文档 和 html 文档,而 html() 只能用于html文档。

区别二:html()函数不仅仅显示文本,输出的还包括标签对和文本,而text()只有文本。

6、val()函数

返回或设置被选元素的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值。

7、next()函数

获得匹配元素集合中每个元素相邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

3、对dom的操作

如:prepend() , prependTo() , clone() , append() , appendTo() , before() , insertBefore() , after() , insertAfter() ,remove() , detach() , empty() , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()

以上这篇jquery对dom节点的操作【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
You might like
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
js实现网页随机验证码
2020/10/19 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python如何使用腾讯云发送短信
2020/09/17 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
代理协议书范本
2014/04/22 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
环保倡议书怎么写
2014/05/16 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js