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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
Prototype Function对象 学习
Jul 12 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
使用Python读取大文件的方法
2018/02/11 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
EJB的激活机制
2013/10/25 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
股票投资建议书
2014/05/19 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
护林员个人总结
2015/03/04 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js