jQuery之DOM
1.jQuery属性。
获取元素属性的语法:
attr(name) 例子:$("#img1").attr("src");
设置元素单个属性的语法:
attr(key,value) 例子:$("#img1").attr("src","2.jpg");
设置元素多个属性的语法:
attr({key0:value0,key1:value1}) 例子:$("#img1").attr({src:"3.jpg",title:"jQuery换了一张图片"});
通过绑定方法设置元素的属性
attr(key,function(index)) 例子$:("#img1").attr("src",function(){ Math.floor(Math.random())+".jpg" });
删除元素的属性
removeAttr(name) 例子:("#img1").removeAttr("title");
2.jQuery内容。
获取元素的HTML内容:
html()
设置元素的HTML内容:
html(value)
获取元素的文本内容:
text()
设置元素的文本内容:
text(value)
text()与html()获取到的内容有什么区别呢? text()获取只获取文本,当该元素下有html代码时会被自动去除。
如对于代码:<div id="div1"><p>测试文本</p></div>
$("#div1").text(); 获取到的是:"测试文本"
而$("#div1").html(); 获取到的是:"<p>测试文本</p>"
对于设置而言:
$("#div1").html("<p>测试文本</p>"); 实际在浏览器显示的是:"测试文本"。也就是说,<p></p>会被浏览器解释。
$("#div1").text("<p>测试文本</p>"); 实际在浏览器显示得是:"<p>测试文本</p>"。也就是说,<p></p>也会当做文本显示出来。
3.jQuery value.
获取value:
val() 例子:$("#input1").val();
设置value:
val(value) 例子:$("#input1").val("确认提交");
4.jQuery css
jQuery设置单一CSS样式语法:
css(name,value)
例子:$("#div1").css("background-color","blue"); 生成的代码为 <div id="div1" style=""></div>
$("#div1").css({ "background-color":"red",color:"wihte" }); 生成的代码为<div id="div1" style="color:white"></div>
//注意一次过设置多个CSS样式时有"-"横线的css要用双引号括起来
jQuery追加CSS类别语法: 注意它还会保留原有的CSS类别
addClass(class)
例子:$("#div1").addClass("css1"); 生成的代码为 <div id="div1" class="css1"></div> 生成的样式会被浏览器解释显示。
若继续执行:
$("#div1").addClass("css2"); 生成的代码为 <div id="div1" class="css1 css2"></div>
jQuery切换类别语法:当元素已含有同名称的className的CSS类别时,删除该类别。如果没有则增加一个该名称的类别。
toggleClass(className) toggleClass对于参数className的样式有则删除,无则添加。
例子1:$("#div1").toggleClass("css_1"); 生成的代码为<div id="div1" class="css_1"></div>
当再次执行同样的代码$("#div1").toggleClass("css_1"); 生成的代码为<div id="div1" class=""></div>
例子2:$("#div1").toggleClass("css_1"); 生成的代码为<div id="div1" class="css_1"></div>
再执行:$("#div1").toggleClass("css_2"); 生成的代码为<div id="div1" class="css_1 css_2"></div> 注意此处不是将css_1替换为css_2
再执行$("#div1").toggleClass("css_1"); 生成的代码为<div id="div1" class="css_2"></div>
jQuery删除类别语法: 可以删除1个 多个 或 全部删除
removeClass([class])
例子:有这样一段代码<div id="div1" class="css_1"></div>
执行 $("#div1").removeClass("css_1"); 执行后的代码为: <div id="div1" class=" "></div>
有这样一段代码<div id="div1" class="css_1 css_2"></div>
执行 $("#div1").removeClass("css_1 css_2")</div> 执行后的代码为 <div id="div1" class=" "></div>
有这样一段代码<div id="div1" class="css_1 css_2"></div>
执行$("#div1").removeClass(); 执行后的代码为<div id="div1" class></div>
5.jQuery创建节点
jQuery创建节点语法:
$(html)
例子: $("<div>jQuery创建的节点</div>"); 这样就创建了一个div节点。
执行一下两行代码
var dom = $("<span>jQuery创建的节点</span>");
$("#div1").append(dom); //注意仅仅创建是无效的,必须要插入到页面内部才会生效。
执行后的结果为: <div id="div1"><span>jQuery创建的节点</span></div>
6.jQuery插入节点
内部插入节点:
append(content) content表示追加到目标的内容
例子1: 原有代码: <div id="div1"></div>
执行 $("#div1").append("<p>jQuery插入节点</p>"); 生成的代码为:<div><p>jQuery插入节点</p></div>
此处插入的是新建的节点。如果是将页面上原有的节点append()会怎么样呢?
例子2: 原有代码:
<div id="div1">第一个DIV1</div>
<div id="div2"><span id="span1">DIV2里的span1</span></div>
执行 $("#div1").append($("#span1"));
后的代码为:
<div id="div1">第一个DIV1<span id="span1">DIV2里的span1</span></div>
<div id="div2"></div>
注意到:实际上相当于把第二个div里的span移到第一个div里面了。
appendTo(content) content表示被追加元素(一般是已经存在页面上的元素)
例子1: 原有代码 <div id="div1"></div>
$("<p>一个P元素<p>").appendTo($("#div1"));
执行后的代码为: <div id="div1"><p>一个P元素</p></div>
例子2:原有代码:
<div id="div1"></div>
<div id="div2"><span id="span1">我是div2里的span1</span></div>
执行: $("#span1").appendTo($("#div1"));
执行后的代码为:
<div id="div1"><span id="span1">我是div2里的span1</span></div>
<div id="div2"></div>
append(function(index,html)) 将一个function函数作为append方法的参数;
例子:原有代码 <div id="div1"></div>
执行: $("#div1").append(getHtml());
function getHtml(){ return "<p>jQuery通过调用函数生成了我!</p>"; }
执行后的代码为 <div><p>jQuery通过调用函数生成了我!</p></div> 该方法常用于动态生成html再追加到页面元素中
此外插入节点的方法还有
prepend(content)
prepend(function(index,html))
prependTo(content)
这三个方法的使用与append的三个方法大致一样。主要区别是prepend在插入的时候是插入到原有内容的前面,而append是插入到原有内容的后面。
例子:
原有代码:<div id="div1">原有内容</div>
执行:$("#div1").prepend("<p>prepend插入的节点</p>").append("<p>append追加的节点</p>");
之后代码为 <div><p>prepend插入的节点</p>原有内容<p>append追加的节点</p></div>
外部插入节点:
after(content)
after(function)
before(content)
before(function)
after before与append prepend的区别是,插入的时候,after与before与被插入元素是兄弟关系,而append和prepend与被插入元素是父子关系。
例子:
原有代码 <div id="div1"><p>我是原有的P元素</p></div>
执行代码:$("#div1").prepend("<p>我是prepend函数插入的p元素</p>").append("<p>我是append函数插入的p元素</p>")
.after("<div id=\"div3\">我是after函数插入的div元素</div>").before("<div id=\"div2\">我是before插入的div元素</div>");
执行后的实际代码为
<div id="div2">我是before插入的div元素</div>
<div id="div1">
<p>我是prepend函数插入的p元素</p>
<p>我是原有的p元素</p>
<p>我是append函数插入的p元素</p>
</div>
<div id="div3">我是after函数插入的div元素</div>
外部插入节点方法2
insertAfter(content)
insertBefore(content)
例子:有如下代码
<div id="div1"><p id="p1">我是div1里面的p1里的内容</p></div>
执行代码:
$("<p>我是insertBefore方法插入的内容</p>").insertBefore($("#p1"));
$("<p>我是insertAfter方法插入的内容</p>").insertAfter($("#p1"));
执行后实际结果为
<div id="div1">
<p>我是insertBefore方法插入的内容</p>
<p id="p1">我是div1里面的p1里的内容</p>
<p>我是insertAfter方法插入的内容</p>
</div>
也就是说,insertBefore,insertAfter与before,after基本一致,只是被插入元素与插入内容位置对调了而已。
7.复制节点
clone() 复制节点元素,如果需要连元素的全部行为也进行复制,可以通过方法clone(true);
例子:原有代码:
<div id="div1"><img id="img1" src="1.jpg" /></div>
$("#img1").click(function(){
$("#img1").clone().appendTo($("#div1"));
})
当点击图片后,HTML代码变为
<div id="div1"><img id="img1" src="1.jpg"><img id="img1" src="1.jpg"></div>
在此要注意的是,虽然同样的img标签id也一样,但是点击复制出来的图片的时候,不会触发原有事件,
如果希望连事件也一样复制,只需将上面的代码clone()改为clone(true)即可,这样,复制的时候会连原有元素的行为事件也一起复制。
8.替换元素节点
replaceWith(content)
replaceAll(content)
例子:原有代码:<div><p id="p1">我是div里的p里的内容</p></div>
执行 $("#p1").replaceWith("<span>我是span里的内容</span>");
执行后的HTML代码变为 <div><span>我是span里的内容</span></div>
可以看到div里的p元素已经被span替换了。
replaceAll与replaceWith的区别不大,只是 被替换元素与替换内容倒过来而已。
例子:<div><p id="p1">我是div里的p里的内容</p></div>
执行 $("<span>我是span里的内容</span").replaceAll($("#p1"));
执行后HTML代码变为<div><span>我是span里的内容</spam></div>
9.wrap包括元素
语法:
wrap(html), wrap(elem),wrap(function) html代表自定义字符串代码,elem代表所选中DOM元素,function代表一个函数,用函数返回的代码作为包括代码。
例子:原有的代码 <div id="div1"><p id="p1">我是div里的p元素的内容</p></div>
执行代码: $("#p1").wrap("<span></span>");
执行之后HTML代码变为<div id="div1"><span><p id="p1">我是div里的p元素的内容</p></span></div>
注意到p元素已经被<span>标签包括起来了。
例子2:原有代码:
<div id="div1">
<p id="p1">我是p1里的内容</p>
<p id="p2">我是p2里的内容</p>
</div>
执行代码: $("#p1").wrap($("#p2"));
执行之后的结果为:
<div id="div1">
<p id="p2">
我是p2里的内容<p id="p1">我是p1里的内容</p>
</p>
<p id="p2">我是p2里的内容</p>
</div>
注意到:当选择DOM元素用wrap包裹元素的时候,是另外复制一份包裹元素的。并不是将被包裹元素移动到包裹元素里。
例子3:原有代码 <div id="div1"><p id="p1">我是p里的内容</p></div>
执行代码:
$("#p1").wrap(function(){
return "<div></div>";
})
执行之后HTML代码变为:<div id="div"><div><p>我是p里的内容</p></div></div>
移除元素的包裹元素
unwrap() 移除元素的父元素或包裹标记
例子:<div><p><span id="span1">我是span里的元素</span></p></div>
执行代码: $("#span1").unwrap();
HTML代码变为<div><span id="span1">我是span里的元素</span></div>
注意到<span>标签外的p标签已经被移除了
内包裹,将参数中的元素在里面包裹选中的内容
语法:
wrapInner(html),wrapInner(elem),wrap(function) html为自定义字符串代码,elem为选中的DOM元素,function表示用函数返回值作为参数。
例子:原有代码<div id="div1"><p id="p1">我是p里的内容</p></div>
执行代码: $("#p1").wrapInner("<b></b>");
执行之后HTML变为 <div id="div1"><b><p id="p1">我是p里的内容</p></b></div>
wrapInner(elem),wrapInner(function)与wrap(elem),wrap(function)大致相同,只是包裹选中元素里面的内容而已。
语法:
wrapAll(html),wrapAll(elem) 将所选中的元素及其所有兄弟元素用参数中的代码包裹起来。
例子:
<div id="div1">
<p id="p1">我是p第一行</p>
<p>我是p第二行</p>
<p>我是p第三行</p>
</div>
执行代码:$("#p1").wrapAll("<div></div>");
执行后HTML代码变为:
<div id="div1">
<div>
<p id="p1">我是p第一行</p>
<p>我是p第二行</p>
<p>我是p第三行</p>
</div>
</div>
如果wrapAll()改为wrap()
则生成的代码为
<div id="div1">
<div><p id="p1">我是p第一行</p></div>
<div><p>我是p第二行</p></div>
<div><p>我是p第三行</p></div>
</div>
可以看到wrap()与wrapAll是不同的。wrap()是每个选中的元素都用参数中的代码包裹一次。而wrapAll是所选中的元素的所有兄弟元素都用参数中的代码包裹起来。
10.遍历元素
语法:each(callback)
例子:原有代码
<div id="div1">
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</div>
执行代码:
$("#div1 > ul > li").each(function(){
$(this).text("我被jQuery改了");
})
执行后HTML代码为:
<div id="div1">
<ul>
<li>我被jQuery改了</li>
<li>我被jQuery改了</li>
<li>我被jQuery改了</li>
</ul>
</div>
11.删除元素
语法:remove([expr])
empty();
例子:原有代码
<div id="div1">
<ul>
<li>第一个li</li>
<li>第二个li</li>
</ul>
</div>
事件:$("li").click(function(){
$(this).remove();
})
当点击第一个li时,生成的HTML为
<div id="div1">
<ul>
<li>第二个li</li>
</ul>
</div>
注意到第一个<li>元素已经从HTML中删除了。
如果将上面的remove()方法换成empty()方法生成的代码又是什么?
<div id="div1">
<ul>
<li></li>
<li>第二个li</li>
</ul>
</div>
由此可以看出empty()与remove()的区别是empty()仅仅是清空所选中元素的内容,并不会讲元素从HTML代码中删除,仍然保留元素所占位置。
而remove()是将元素从HTML代码中删除,并其所占位置也会被删除。
加参数的remove()例子:
<div>
<ul>
<li title="1">第一个li</li>
<li title="2">第二个li</li>
</ul>
<input id"button1" type="button" value="删除第二个li">
</div>
执行代码:
$("#button1").click(function(){
$("li").remove("li[title=2]");
})
执行之后的HTML代码为:
<div>
<ul>
<li title="1">第一个li</li>
</ul>
<input id"button1" type="button" value="删除第二个li">
</div>
作者: | 逆心 |
出处: | http://www.cnblogs.com/kissdodog/archive/2012/12/04/2801162.html |
jQuery之DOM的更多相关文章
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- jquery和dom之间的转换
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
随机推荐
- 『重构--改善既有代码的设计』读书笔记---Duplicate Observed Data
当MVC出现的时候,极大的推动了Model与View分离的潮流.然而对于一些已存在的老系统或者没有维护好的系统,你都会看到当前存在大把的巨大类----将Model,View,Controller都写在 ...
- 学渣也要搞 laravel(2)—— HTTP路由[1]篇
前几天忙了,然后快两个星期没有发博客.今天正式回归.哈哈 1. 路由 说到路由当时学的时候给我疑惑了几天..没有仔细看文档.然后一脸蒙蔽的去用 postman[谷歌插件] 测试路由方法.然后就很奇怪 ...
- python核心编程2第二章课后练习
2-1 变量, print 和字符串格式化运算符.启动交互式解释器.给一些变量赋值(字符串,数值等等)并通过输入变量名显示它们的值.再用 print 语句做同样的事.这二者有何区别? 也尝试着使用字符 ...
- C语言学习笔记(一):数组传递时退化为指针
这几天闲来无事,写了一个数组元素排序函数如下: #include <stdio.h> #include <stdlib.h> void ArraySort(int array[ ...
- linux下配置NFS服务器
(声明:本文大部分文字摘自Linux NFS服务器的安装与配置) 一.NFS简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Su ...
- Java Learning:并发中的同步锁(synchronized)
引言 最近一段时间,实验室已经倾巢出动找实习了,博主也凑合了一把,结果有悲有喜,BAT理所应当的跪了,也收到了其他的offer,总的感受是有必要夯实基础啊. 言归正传,最近在看到java多线程的时候, ...
- Java实现http服务器(一)
基于Java实现Http服务器有多种多样的方法 一种轻量级的方式是使用JDK内置的com.sun.net.httpserver包下和sun.net.httpserver包下类提供的方法构建,该方法轻便 ...
- SignalR介绍与Asp.net,前台即时通信【转】
SignalR 是一个asp.net异步库,它提供广播消息到多个client端的机制. SignalR能用来持久客户端与服务端的连接,让我们便于开发一些实时的应用,例如聊天室在线预订系统,股票交易等实 ...
- 深入了解一下PYTHON中关于SOCKETSERVER的模块-C
同时处理多个客户端请求,并且为不同的CLIENT开不同的线程处理. 这个东东,就显然实用性稍强了一些.(FORK和THREAD方式均可,但各有应用) #!/usr/bin/env python fro ...
- 李洪强iOS开发之-环信01_iOS SDK 前的准备工作
李洪强iOS开发之-环信01_iOS SDK 前的准备工作 1.1_注册环信开发者账号并创建后台应用 详细步骤: 注册并创建应用 注册环信开发者账号 第 1 步:在环信官网上点击“即时通讯云”,并点 ...