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 21 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
eval的两组性能测试数据
Aug 17 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
微信小程序自定义组件
Aug 16 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP采集腾讯微博的实现代码
2012/01/19 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
银行求职信个人范文
2013/12/16 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
初中英语教学反思
2014/01/25 职场文书
企业消防安全制度
2014/02/02 职场文书
卫生巾广告词
2014/03/18 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
期末个人总结范文
2015/02/13 职场文书
婚育证明格式
2015/06/17 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
java设计模式--原型模式详解
2021/07/21 Java/Android