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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
Javascript节点关系实例分析
May 15 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
webpack之devtool详解
Feb 10 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Django数据统计功能count()的使用
2020/11/30 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
新年晚会主持词
2014/03/24 职场文书
经典团队口号大全
2014/06/21 职场文书
2015年暑期见闻
2015/07/14 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android