JQuery知识快览之五—操作属性和结构
前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法。
prop还是attr?
从JQuery1.6版开始,新增了prop方法来获取和设置JQuery对象的属性,这里的prop方法和attr方法究竟有什么区别呢?
要弄懂这个问题,我们首先要区别property和attribute两个概念。property主要是针对DOM对象的,而attribute主要是针对HTML标签的。这样对prop和attr这两个方法来说,它们的区别主要在如下几个方面:
1.我们知道对于checkbox这个DOM对象来说,它必然有个选择状态,且它的选择状态只有两种,要么是选中状态,要么是非选中状态,所以不管什么时候我们用prop方法获取其checked值,都能获得一个确定的值,true或false,而对于checkbox的HTML表示来说,它可以简单的表示为<input type="checkbox"/>,这里你可以不用对checked属性赋值,这时,在用attr获取checked值时,其值将是undefined.
2.对于某些HTML标签属性,在DOM对象中将对应不同的属性名,比如<li class="highlight">,其attribute名是class,但是其property名却是className.
3.用prop赋值将是针对其当前的状态赋值,而对于某些属性,attr则是赋予一个初始值。这样prop将永远能动态的改变checkbox的状态,而对某些浏览器来说,attr只能在checkbox被显示在页面上之前改变checked的初始状态,而之后则再也无法改变checked的状态。而且prop能永远获得checkbox的当前状态,而不管checkbox的当前状态如何,attr只能获得初始状态。
4.内置的DOM property不能被移出,而attribute可以。
操作属性
1.prop(name|name,value|name,function(index,oldprop))
2.attr(name|name,value|name,function(index,oldprop))
注意:尽量不要使用prop定义复杂的非内置的属性。当获取属性值时,prop和attr都只能获取对象集内第一个元素的属性。
3.removeProp(name)
4.removeAttr(name)
注意,尽量不要使用属性移除操作,而应该修改属性值
获取对象的内容
1.html([htmlstr]|function(index,oldhtml))
获取或设置对象集中对象的innerHtml
2.text([textstr]|function(index,oldtext))
获取或设置对象集中对象的文本。当对象集中有多个对象时,获取其文本,将把对象集中所有元素,其文本甚至是子孙节点的文本拼接在一起返回。
当设置文本时,若给定的文本串中含有html标签,将被转换。如$("li").text("<p>This is a test.</p>");的结果是得到如下内容
<li>
<p>This is a test.</p>
</li>
3.val([value]|function(index,oldvalue))
获取或设置checkbox,radio,select这类元素的值。
DOM文档操作
1.元素的插入
before(content[,content]|function(index))
将content元素插入对象集中对象的前面
after(content[,content]|function(index))
将content元素插入对象集中对象的后面
prepend(content[,content]|function(index))
将content元素插入对象集中对象的里面,作为其第一个子女
append(content[,content]|function(index))
将content元素插入对象集中对象的里面,作为其最后一个子女
insertBefore(target)
将对象集中的对象都插入target元素前面
insertAfter(target)
将对象集中的对象都插入target元素后面
insertAfter(target)
将对象集中的对象都插入target元素里面
prependTo(target)
将对象集中的对象都插入target元素里面,作为其第一个子女
appendTo(target)
将对象集中的对象都插入target元素里面,作为其最后一个子女
2.元素的替换
replaceWith(conten|function)
用content来替换对象集中对象
replaceAll(target)
用对象集中所有对象来替换target元素,如果对象集中的对象在DOM文档中,这种替换会使原有对象从原来的位置被移除。
3.元素的删除
empty()
清空对象集中所有对象的子孙元素。
remove([selector])
删除对象集中的所有对象及其子孙元素,若有selector,则只删对象集中符合selector条件的对象及其子孙元素。
detach([selector])
功能和remove一样,只是detach会将被删的对象返回,如果你还需要用到这些对象则用detach。
4.其他操作
clone([withdataandevents] [,deepwithdataandevents])
复制对象集中的对象。
wrap(element|function(index))
用某元素将对象集中的对象分别包含起来。
unwrap()
将对象集中对象的父元素删除。
wrapAll(element)
用某元素将对象集中的所有对象包含起来
wrapInner(element|function(index))
将某元素分别放入对象集中的各对象中。
JQuery知识快览之五—操作属性和结构的更多相关文章
- JQuery知识快览之三—JQuery对象集
本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...
- JQuery知识快览之二—事件
事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...
- JQuery知识快览之四—样式
前面我们获取了对象集,本文介绍怎么控制对象集的样式 基本概念 在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制 ...
- JQuery知识快览之一—选择器
阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- jQuery 操作属性
jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
随机推荐
- PhantomJS:基于WebKit、开源的服务器端JavaScript API
PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM ...
- C++动态内存分配
C++动态内存分配1.堆内存分配 :C/C++定义了4个内存区间:代码区,全局变量与静态变量区,局部变量区即栈区,动态存储区,即堆(heap)区或自由存储区(free store). 堆的概念:通常定 ...
- const 关键字及作用
1.const 修饰一般常量,可以把变量变成常量 例如: int num=10; num=100; printf(“num=%d\n”,num); 输出的来得值为:100: 但是如果const in ...
- .NET C#: NameValueCollection
NameValueCollection class is in System.Collection.Specialized assembly. Unlike with HashTable, NameV ...
- Java之Structs框架初探
今天是小白第一次自己的接触Struts框架,因为网上的资料都是从Structs2开始,跟Structs1完全不同,因此,小白直接跳过1学习版本2的搭建,废话不多说,直接开始. 首先要搭建框架,就肯定要 ...
- C++之路进阶——bzoj1468(tree)
F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser gryz2016 Logout 捐赠本站 Notice:由于本OJ ...
- 事务——sql server中的事务应用举例
sql中事务只针对一个update,delete,insert语句,如果一段程序中有超过一个这样的语句,就需要每个都判断是否出错,否则就会出现若干我们不希望的情形出现,举例如下(表结构见最后): 1, ...
- 实验一 操作系统模仿cmd
实验一.命令解释程序的编写 专业:商软(2)班 姓名:王俊杰 学号:201406114252 一. 实验目的 (1)掌握命令解释程序的原理: (2)掌握简单的DOS调用方法: (3 ...
- Mac配置环境变量(Java,Android,Gradle,Maven,Hosts)
JAVA_HOME 配置环境变量 # 使用vim打开.bash_profile文件,加入java环境变量 $ vim .bash_profile export JAVA_HOME=$(/usr/lib ...
- cmd进入某个目录
love you my pig java枚举类 cmd进入某个目录 2011-04-06 15:49:38| 分类: 小知识 | 标签: |字号大中小 订阅 1.开始->运行->C ...