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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
js 幻灯片的实现
Dec 06 Javascript
jquery 插件学习(四)
Aug 06 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
动态加载jQuery的方法
Jun 16 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python数据结构之翻转链表
2017/02/25 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
django和vue实现数据交互的方法
2019/08/21 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
六一儿童节开幕词
2015/01/29 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电