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 元素相对定位代码
Oct 15 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jquery实现动态画圆
Dec 04 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 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
第四节--构造函数和析构函数
2006/11/16 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
JS Timing
2007/04/21 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
AngularJS中的promise用法分析
2017/05/19 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python字符串处理实现单词反转
2017/06/14 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
想学画画?python满足你!
2020/12/24 Python
女性时尚网购:Chic Me
2019/07/30 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
校园活动策划书范文
2014/01/10 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
医院保洁服务方案
2014/06/11 职场文书
超市店庆活动方案
2014/08/31 职场文书
质量负责人岗位职责
2015/02/15 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
行政撤诉申请书
2015/05/18 职场文书
地球上的星星观后感
2015/06/02 职场文书
工作年限证明模板
2015/06/15 职场文书