Jquery(第二操作html元素)

来源：互联网发布：易语言源码怎么用编辑：程序博客网时间：2024/05/20 07:19

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/jquery.js"></script>
<title>jQuery操作DOM</title>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
alert($("#test").text());
});
$("#btn2").click(function() {
alert($("#test").html());
});
$("#hrefs").click(function() {
alert($("#runoob").attr("href"));
});
});
/*text()、html() 以及 val() 的回调函数:
* 回调函数由两个参数组成，分别为：被选中元素的下标以及原始旧的值，然后以函数新值返回希望的字符串
*/
$(document).ready(function() {
$("#btn1").click(function() {
$("#test1").text(function(i, origText) {
return "旧文本：" + origText + "新文本：" + i;
});
});
$("#btn2").click(function() {
$("#test2").html(function(i, origText) {
return "旧的html:" + origText + "新的html:" + i;
});
});

$("#btn3").click(function() {
$("#test3").val("val取值");

});
});
//使用attr改变其值
$(document).ready(function() {
$("#hrefs").click(function() {
$("#runoob").attr("href", "http://www.baidu.com");
});
});
//attr回调函数
$(document).ready(function() {
$("#hrefs").click(function() {
$("#runoob").attr("href", function(i, origValue) {
return origValue + "/jquery";
});
});
});
/*jquery添加新元素的四个方法:
1、append()-->再被选元素的结尾插入内容； 2、prepend()-->在被选元素的开发插入
3、after()-->再被选元素之后插入内容；4、before在备被选元素之前
*/
$(document).ready(function(){
$("#btest1").click(function(){
var txt1=$("<p></p>").text("使用jquery创建文本");
var txt2=document.createElement("p");
txt2.innerHtml="追加多个DOM元素";
var txt3="<p>使用文本拼接</p>";
//$("h1").append("<h5>我是append追加在结尾的元素</h5>");
$("h1").append(txt1,txt2,txt3);
});
$("#sethtml").click(function(){
$("h1").prepend("<h5>我是追加在开头的元素</h5>").prepend("<h2>在开头插入多次</h2>");
});
})
//before ,after插入
$(document).ready(function(){
$("#btest1").click(function(){
var txt1=$("<p></p>").text("使用jquery创建文本");
var txt2=document.createElement("p");
txt2.innerHtml="追加多个DOM元素";
var txt3="<p>使用文本拼接</p>";
//$("h1").append("<h5>我是append追加在结尾的元素</h5>");
$("h1").before(txt1,txt2,txt3);
});
$("#sethtml").click(function(){
$("h1").after("<h5>我是通过after插入的元素</h5>");
});
});
//元素的删除 remove会整个删除;empty会清空内容
$(document).ready(function(){
$("#testClass").click(function(){
$("h1").remove(".testAppend");
});

});
//jquery操作css元素 removeClass()
$(document).ready(function(){
$("#testCss").click(function(){
//$("p,h1,h2").addClass("blue");
//$("button").addClass("important");
$("p,h1,h2").toggleClass("blue");
});
});
//css()返回设置或返回元素的一个或多个样式属;语法：css("propertyname","value");
//设置多个属性 css({"propertyname":"value","propertyname":"value",...});
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","blue");
//$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
//jquery求width()和height()方法
$(document).ready(function(){
$("#querySize").click(function(){
var txt="";
txt+="div高度:"+$("#divss").width()+"div宽度："+$("#divss").height();
$("#divss").html(txt);

});
});

</script>
</head>
<body>
<div>
<p id="test">
这是段落中的 <b>粗体</b> 文本。
</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>
<a href="http://www.runoob.com" id="runoob">菜鸟教程</a>
</p>
<button id="hrefs">显示 href 属性的值</button>

<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<div id="divss">
<p>
输入框: <input type="text" id="test3" value="菜鸟教程">
</p>
</div>

<h1 class="testAppend">测试append方法</h1>
<button id="btest1">append</button>
<button id="sethtml">prepend</button>
<button id="setvalue">设置值</button>
<button id="setbess">添加文本</button>
<a href="http://www.runoob.com" id="runoob">菜鸟教程</a>
<button id="hrefs">修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
<button id="testClass">测试remove方法</button>
<button id="testCss">jquery操作css</button>
<button id="querySize">jquery操作css</button>
</body>

</html>

求size看图：

0 0