jQuery 学习之路(3):DOM操作
一、在元素内部插入
.append(content[,content]) 在指定元素的内部末尾插入字符串,或在指定元素的内部末尾移入指定元素,如 $(".container").append($("p"));
.appendTo(target) 将指定元素移动到某元素内部的末尾,如 $("p").appendTo( $( ".container"));
.prepend(content[,content]) 类似 .append 方法,只是插入位置变成内部开头。
.prependTo(target) 类似 .appendTo 方法,只是插入位置变成内部开头。
.html(htmlString) 替换元素内部所有内容,包括标签
.text(text) 类似于 .html(htmlString),不包括标签
二、在元素外部插入
.after(content[,content]) 在指定元素后面(同辈)增加字符串,若参数是元素,则将该元素移到指定元素后面
.insertAfter(target) 将指定元素移动到某元素后面(同辈)
.before(content[,content]) 类似 .after 方法,只是位置变成前面
.inertBefore(target) 类似 inertAfter 方法,只是位置变成前面
三、包裹元素插入
.wrap(wrappingElement) 用参数里的元素分别包在所有匹配元素的外围,如 $('p').wrap('<b></b>');
.unwrap() 分别删除所有匹配元素的外围元素
.wrapAll(wrappingElement) 类似于 wrap 方法,只是把所有匹配的元素做为一个整体,在外层包上指定元素
.wrapInner(wrappingElement) 在指定元素内部,使用参数里的元素包裹其内部所有元素。
四、元素移除
.remove() 连同元素一起删除
.empty() 删除元素内部所有数据
.detach() 类似于 .remove() 但是保留删除的元素的对象,在需要的时候仍可恢复
五、元素替换
.clone() 将指定元素复制
.replaceWith(newContent) 将指定元素用参数里的元素替换
.replaceAll(target) 基本同 replaceWith ,只是源和目标被逆转
六、元素属性操作
.arrt(attributeName[,value]) 获得或设置属性的值
.prop(propertyName[,value]) 获得或设置属性的值
.removeAttr(attributeName) 删除指定的属性
.removeProp(propertyName) 删除指定的属性
.val([value]) 获得或设置元素的value值
关于 attr(...) 和 prop(...) 的区别,参见:
http://www.javascript100.com/?p=877
七、样式操作
.addClass(className) 为元素增加指定样式
.removeClass(className) 为元素删除指定样式
.hasClass(className) 判断元素是否包括指定样式
.toggleClass(className) 为元素切换指定样式,一般配合事件使用,如在单击事件中调用,每单击一次切换一下样式。该方法可以由上面三个方法配合实现同样效果。
八、样式属性
.css(cssName[,cssValue]) 获取或设置某个样式的值,也可以同时设置多个css样式,如 $( this ).css(["width", "height", "color", "background-color"]);
.height([value]) 获取或设置样式 height 的值,是 css 方法的一种情况
.width([value]) 获取或设置样式 width 的值,是 css 方法的一种情况
.innerHeight() 获取 height + padding 的值
.innerWidth() 类似上
.outHeight() 获取 height + padding + border 的值,或 .outHeight(true),则为 height + padding + border + margin 的值
.outWidth() 类似上
.position() 获取某一元素相对其父元素的偏移,返回的变量有两个属性 left 和 top ,可分别获取横坐标和纵坐标
.offset() 获取某一元素相对当前视口的偏移,返回的变量有两个属性 left 和 top ,可分别获取横坐标和纵坐标
.scrollLeft([value]) 与获取和设置滚动条的偏移有关
.scrollTop([value]) 与获取和设置滚动条的偏移有关
jQuery 学习之路(3):DOM操作的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
- jquery学习笔记(二):DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- jQuery 学习之路(1):引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- JQuery选择器,事件,DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- javascript学习(二) DOM操作HTML
一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...
- 【php学习之路】字符串操作
无论学习那种语言,字符串操作都是必备的基础.学php的时候总是会不知不觉的与C#比较,用起来总觉得怪怪的没有那么顺手,有些命名也差别很大,再加上很多函数命名是简写形式不百度下还真不知道什 ...
- jQuery 【事件】【dom 操作】
事件 hover( function(){},function(){}) -- 鼠标移入移出事件 toggle(function(){},function(){},function(){} ...
随机推荐
- kali2016.2源
最近中科大的源出了问题,官方源又会重定向到意大利. 一下源目前亲测可用:kali2016.2源 清华大学 deb http://mirrors.tuna.tsinghua.edu.cn/kali ka ...
- Mono开发环境搭建(Windows)
一.下载 1.登录http://www.mono-project.com/下载 2.开发工具Xamarin Studio(好像是免费) http://www.monodevelop.com/downl ...
- Eclipse 代码自动补全配置方法
Eclipse默认只有在出现 “.”时才进行代码提示,更改方法为: 即把“.”改为“.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ”,表示输 ...
- PriorityQueue
基本概念 顾名思义,PriorityQueue是优先级队列,它首先实现了队列接口(Queue),与LinkedList类似,它的队列长度也没有限制,与一般队列的区别是,它有优先级的概念,每个元素都有优 ...
- CentOS同步时间
用date查看系统当前时间,date -R 可查看时区. CentOS 同步时间由ntp服务提供,可以用"yum install ntp -y"安装. 装完后运行命令 ntpdat ...
- Mysql学习笔记(四)聊聊数据库索引
小心情(可直接跳到分割线后) 今天心情好些了.一些浓的化不开的坏情绪,也渐渐的在晚上解决掉一个复杂的逻辑问题后,渐渐消散了. 今天中午去吃饭的时候,坤哥漫不经心的说:'我这么多年终于悟出了一个道理,人 ...
- zoj 3946 Highway Project(最短路 + 优先队列)
Highway Project Time Limit: 2 Seconds Memory Limit: 65536 KB Edward, the emperor of the Marjar ...
- SaltStack配置管理之状态模块和jinja2(五)
官方文档 https://docs.saltstack.com/en/latest/topics/states/index.html 配置管理之SLS Salt State SLS描述文件(YAM ...
- BigDecimal数据加法返回值接收
1.相加 两个BigDecimal变量a,b. 如果想进行相加,即a加b的话,返回值需要使用a进行接收,如下: a = a.add(b); BigDecimal为不可变类, 所以执行运算的结果需要再返 ...
- uC/OS-II配置文件
/*************************************************************************************************** ...