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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Vue中props的使用详解
Jun 15 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
详解Python的单元测试
2015/04/28 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python装饰器代码深入讲解
2021/03/01 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
写自荐信要注意什么
2013/12/26 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
秘书英文求职信
2014/04/16 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书