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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
详解Python中的文件操作
2021/01/14 Python
一份比较全的PHP面试题
2016/07/29 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
学习考察心得体会
2014/09/04 职场文书
违纪检讨书
2015/01/27 职场文书
自主招生自荐信格式
2015/03/04 职场文书
监守自盗观后感
2015/06/10 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android