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 delete操作符应用实例
Jan 13 Javascript
20个最新的jQuery插件
Jan 13 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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/06/23 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Dojo 学习要点
2010/09/03 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Java 生成随机字符的示例代码
2021/01/13 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
运动会解说词50字
2014/01/18 职场文书
青年文明号事迹材料
2014/01/18 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
党员活动总结
2015/02/04 职场文书
《穷人》教学反思
2016/02/19 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis