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 相关文章推荐
js控制的遮罩层实例介绍
May 29 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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图片验证码代码
2008/03/27 PHP
10个实用的PHP代码片段
2011/09/02 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python sorted对list和dict排序
2020/06/09 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
门卫岗位安全职责
2013/12/13 职场文书
单位绩效考核方案
2014/05/11 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Javascript的promise,async和await的区别详解
2022/03/24 Javascript