JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML（详看DOM（一）——HTML DOM ），这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢？顺便两者之间相互比较一下，看其差别。
一，首先看一下JQuery如何获取想要操作的元素的内容和属性的：
1，获得内容 -text()、html() 以及 val()
三个简单实用的用于 DOM操作的 jQuery方法：
- text() -设置或返回所选元素的文本内容
- html() -设置或返回所选元素的内容（包括 HTML标记）
- val() -设置或返回表单字段的值
2，获取属性 - attr()
好，我们来举一个简单例子，获取属性值：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#ljh").attr("href"));
});
});
</script>
</head> <body>
<p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客链接</a></p>
<button>我的博客链接</button>
</body> </html>
</span>
二，上边是获取了网页中一些元素的内容，或者属性，下边我们如果想改变呢？如何设置呢？当然可以直接设置，也可以通过函数来获取设置。看两个例子：
1，改变属性的值：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ljh").attr({
"href" : "http://blog.csdn.net/liujiahan629629/article/details/16991467",
"title" : "刘佳翰博客中的一篇文章"
});
});
});
</script>
</head> <body>
<p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>
</span>
2,利用回调函数进行修改设置的：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
}); $("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
}); });
</script>
</head> <body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
</html>
</span>
三，当然我们也可以添加和删除一些HTML元素。
1，添加的几个方法：
|
方法名 |
含义 |
|
Append() |
在被选元素的结尾插入内容 |
|
Prepend() |
在被选元素的开头插入内容 |
|
after() |
在被选元素之后插入内容 |
|
before() |
在被选元素之前插入内容 |
例子：利用append添加文本和列表项：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
//添加文本
$("p").append(" <b>Appended text</b>.");
}); $("#btn2").click(function(){
//添加列表
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head> <body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
</span>
after和before和他们的基本上也相同，不再演示，当然这里我们也可以一块添加若干个新元素，看一下这个例子：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body> <p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button> </body>
</html>
</span>
2，删除的几个方法，具体用法不再赘述，和上边的几个方法都是一样的：
|
方法名 |
含义 |
|
Remove() |
删除被选元素及其子元素 |
|
Empty() |
从被选元素中删除子元素 |
四，JQuery操作CSS
jQuery拥有若干进行 CSS操作的方法。下边为几种常用的方法
- addClass() -向被选元素添加一个或多个类
- removeClass() -从被选元素删除一个或多个类
- toggleClass() -对被选元素进行添加/删除类的切换操作
- css() -设置或返回样式属性
我们来看一个css（）方法的例子：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head> <body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>
</span>
五，直接控制元素和浏览器窗口的大小：
Jquery尺寸方法：
jQuery提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p> </body>
</html>
</span>
当然上边都是一些小例子，不过我们可以模仿这些小例子，来学习这些知识，然后举一反三通过API文档来学习其他的方法属性等，不过这些都是经常使用的，还是需要我们好好掌握的。通过JQuery能方便我们的很多编写代码，所以JQuery还是需要好好继续学习的！！！
JQuery(三)——操作HTML和CSS内容的更多相关文章
- jQuery之操作样式的css方法
注意点都在代码里 <style> div { width: 200px; height: 200px; background-color: pink; } </style> & ...
- jQuery(三)、属性、CSS
jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...
- jquery ：操作iframe
原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jquery 属性操作 attr( ) prop（）css( ）区别
一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...
- jQuery框架操作CSS
3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
随机推荐
- 被Oracle全局暂时表坑了
今天凌晨4点多钟,在客户现场的负责人打电话给我,说非常奇怪,下载功能时快时慢.此下载功能非常复杂,之前一直是我优化,在半梦半醒中打开电脑,通过远程看着现场同事在PL/SQL developer中操作. ...
- ssh 与 Telnet 的区别
简单来书,ssh 和 telnet 是实现相同的功能 , ssh中 数据是经过加密的,是安全的 , 而 Telnet是明文传输的ssh 是加密的,基于 SSL .telnet 是明码传输的,发送的数据 ...
- Oracle SQL函数之字符串函数
1.SQL> ) from dual; --ASCLL(x)返回x的ASCLL码,CHR(x)返回ASCLL码为x的字符 ASCII() ---------- ---------- ------ ...
- WPF实现窗体最小化后小图标在右边任务栏下
一 基本功能 1. 这里是用 NotifyIcon 控件来实现,但 WPF 下没有 NotifyIcon 控件,怎么办,用 WinForm 下的呗. 先引用 .NET 自带的两个程序集 Syste ...
- JavaScript脚本语言的正则校验法
正则校验法有很多种类型,有些可能会比较复杂难记,我这里罗列了大家常用的几种方法,方便查询. //校验是否全由数字组成 function isShuZi(s) { var patrn=/^[0-9]{1 ...
- Sublime+Emmet
Sublime使用Package Control安装Emmet插件: 按Ctrl+Shift+P命令板 输入install然后选择install Package,然后输入emmet找到 Emmet C ...
- java数据导出成 EXCEL
/** * * @param out 输出流 * @param maplist 数据 * @param title 标题 * @param headers 表头 * @param keys 表头对应的 ...
- RtlInitUnicodeString、IoCreateDevice、IoCreateSymbolicLink、IoDeleteDevice 四个 API 驱动函数的使用
要解释"驱动对象",就得先从 DriverEntry() 说起: 做过C语言开发的都知道程序是从 main() 函数开始执行.在进行 Windows 驱动程序开发的时候没有 mai ...
- const的一些总结
const的一些总结 采用const符号常量写出来的代码更容易维护,有些函数只读不写: 1 常变量: const 类型说明符 变量名 2 常引用: const 类型说明符 &变量名 3 常成员 ...
- 关于cookie的使用
cookie的属性 domain:域名,即cookie所能使用的范围,当然当前域下可以在当前域下cookie,还有一个就是该域名的父级域名(子级的域名下是可以访问父级域名下的cookie,父级域名是不 ...