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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
9个JavaScript日常开发小技巧
Oct 06 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
YB217、YB235、YB400浅听
2021/03/02 无线电
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
js代码实现轮播图
2020/05/04 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python学生管理系统代码实现
2020/04/05 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python实现自动装机功能案例分析
2020/10/22 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
英语专业职业生涯规划范文
2014/03/05 职场文书
政治思想表现评语
2014/05/04 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
个人收入证明格式
2015/06/24 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js