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 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
ES6的解构赋值实例详解
May 06 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
JS实现滑动插件
2020/01/15 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
详解Python中的文件操作
2016/08/28 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
python递归函数用法详解
2020/10/26 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
飞机制造技术专业求职信
2014/07/27 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
二审代理词范文
2015/05/25 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
基于python实现银行管理系统
2021/04/20 Python
springcloud整合seata
2022/05/20 Java/Android