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日历 推荐
Dec 03 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
jQuery队列操作方法实例
2014/06/11 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
使用JS动态显示文本
2017/09/09 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
js实现简单扫雷
2020/11/27 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python中内置的日志模块logging用法详解
2016/07/12 Python
python读取文件名称生成list的方法
2018/04/27 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
如何将json数据转换为python数据
2020/09/04 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
黄河的主人教学反思
2014/02/07 职场文书
股份转让协议书
2014/04/12 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
展览会邀请函
2015/02/02 职场文书
求职信如何撰写?
2019/05/22 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js