jquery对dom的操作常用方法整理


Posted in Javascript onJune 25, 2013

Jquery对dom的操作也是很总要的。

1.三个简单实用的用于 DOM 操作的 jQuery 方法:

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容(包括 HTML 标记)

· val() - 设置或返回表单字段的值

2.attr()获取属性。当然这两也是可以自己设置值来修改的,

3.对html内容的添加。添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

4.删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

· remove() - 删除被选元素(及其子元素)

· empty() - 从被选元素中删除子元素

5.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

· addClass() - 向被选元素添加一个或多个类

· removeClass()- 从被选元素删除一个或多个类

· toggleClass()- 对被选元素进行添加/删除类的切换操作

· css() - 设置或返回样式属性

例子

$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘,'分开。Blue一定是一个设置好的.Blue{}类选择器

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");有样式就会移除,没样式就会添加

6.设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

7.jQuery 尺寸 方法

jQuerywidth() 和height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

jQueryinnerWidth() 和innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

jQueryouterWidth() 和outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

Javascript 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue首次渲染全过程
Apr 21 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
Extjs单独定义各组件的实例代码
Jun 25 #Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 #Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 #Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 #Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 #Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 #Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 #Javascript
You might like
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP页面中文乱码分析
2013/10/29 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
关于js类的定义
2011/06/28 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
导师工作推荐信范文
2014/05/17 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015年社区综治工作总结
2015/04/21 职场文书