第三篇 jQuery操作DOM
3-1 DOM页面文档
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM 树状文档</title>
<style type="text/css">
body{ font-size:13px;}
table,div,p,ul{ width:280px; border:solid 1px #666; margin:10px 0px 10px 0px; padding:0px; background-color:#eee;}
</style>
</head>
<body>
<table>
<tr><td>TD1</td></tr>
<tr><td>TD2</td></tr>
</table>
<div>Div</div>
<p>P</p>
<div><span>Span</span></div>
<ul>
<li>Li1</li>
<li>Li2</li>
</ul>
</body>
</html>
3-2 获取元素的属性 attr()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取元素的属性</title>
<style type="text/css">
body{ font-size:12px;}
div{ float:left; padding:10px;}
img{ border:solid 1px #ccc; padding:3px; float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//attr(name) ----获取元素的属性
var imgSrc = $("img").attr("src");
var imgTitle = $("img").attr("title");
$("#divAlt").html( imgSrc +"<br />"+imgTitle );
})
</script>
</head>
<body>
<img alt="" title="一副画" src="img/1.png" />
<div id="divAlt"></div>
</body>
</html>
3-3 设置元素的属性 attr(key,valus),attr({key:value,key:value})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置元素的属性</title>
<style type="text/css">
body{ font-size:12px;}
.clsSpn{ float:left; padding-top:10px; padding-left:10px;}
.clsImg{ border:solid 1px #ccc; padding:3px; float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
$("img").attr("alt","111"); //设置alt属性
$("img").attr("src","img/3.png"); //设置src属性
$("img").attr("title","test"); //设置title属性
$("img").attr({src:"img/2.png",title:"111"});//同时设置两个属性 $("img").addClass("clsImg");//增加样式
$("span").html("加载完毕");
})
</script>
</head>
<body>
<img alt="" src="img/1.png" style="float:left;" />
<span class="clsSpn">正在加载图片...</span>
</body>
</html>
3-4 设置元素属性（二），带函数 attr(key,function(index))
删除元素属性，removeAttr（name）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置元素的属性(二)</title>
<style type="text/css">
body{ font-size:12px;}
.clsSpn{ float:left; padding-top:10px; padding-left:10px;}
.clsImg{ border:solid 1px #ccc; padding:3px; float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//attr()
//removeAttr()
$(function(){
$("img").attr("src", function(){
return "img/" + Math.floor(Math.random()*2+1)+".png";
});
$("img").attr("title","1qaz");//
$("img").addClass("clsImg");
$("img").removeAttr("style");
})
</script>
</head>
<body>
<img alt="" src="img/1.png" style="float:left;" />
</body>
</html>
3-5 获取或设置元素的内容 html(),html(val),text(),text(val)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取或设置元素的内容</title>
<style type="text/css">
body{ font-size:15px; text-align:center;}
div{ border:solid 1px #666; padding:5px; width:220px; margin:5px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//html(val) --类似innerHTML，获取或设置元素的HTML内容
//text(val) --类似innerText，获取或设置元素的文本内容
$(function(){
var strHtml = $("#divShow").html(); //获取html内容
var strText = $("#divShow").text(); //获取文本内容
$("#divHTML").html(strHtml); //设置html内容
$("#divText").text(strText); //设置文本内容
})
</script>
</head>
<body>
<div id="divShow"><b><i>Write Less Do More</i></b></div>
<div id="divHTML"></div>
<div id="divText"></div>
</body>
</html>
3-6 获取或设置元素的值 val(val) --该方法常用于表单中获取或设置对象的值。
通过val()方法还可以获取select标记中的多个选项值，语法：val().join(",")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取或设置元素的值</title>
<style type="text/css">
body{ font-size:12px; text-align:center;}
div{ padding:3px; margin:3px; width:120px; float:left;}
.txt{ border:#666 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//val()
//val().join(",")
//val(array) --参数为数组，其作用是设置元素被选中
//**$(":radio").val(["radio2","radio3"]) --ID号为radio2和radio3的单选框被选中
$(function(){
$("select").change(function(){//设置列表框change事件
//获取列表框所选中的全部选项的值
var strSel = $("select").val().join(",");
$("#p1").html(strSel); //显示列表框所选中的全部选项的值
})
$("input").change(function(){
var strText = $("input").val();
$("#p2").html(strText);
})
$("input").focus(function(){//设置文本框focus事件
$("input").val("");//清空文本框的值
})
})
</script>
</head>
<body>
<div>
<select multiple="multiple" style="height:96px; width:85px;">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<p id="p1"></p>
</div>
<div>
<input type="text" class="txt" />
<p id="p2"></p>
</div>
</body>
</html>
3-7 直接设置元素样式值 css(name,value)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>直接设置元素样式值</title>
<style type="text/css">
body{ font-size:15px;}
p{ padding:5px; width:220px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//css(name,value)
$(function(){
$("p").click(function(){
$(this).css("font-weight","bold");
$(this).css("font-style","italic");
$(this).css("background-color","#eee");
})
})
</script>
</head>
<body>
<p>Write Less Do More</p>
</body>
</html>
3-8 增加css类别 addClass(class),addClass(class1 class2 ......)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加css类别</title>
<style type="text/css">
body{ font-size:15px;}
p{ padding:5px; width:220px;}
.cls1{ font-weight:bold; font-style:italic;}
.cls2{ border:solid 1px #666; background-color:red;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//addClass(class0 class1......)
$(function(){
$("p").click(function(){
$(this).addClass("cls1 cls2");
})
})
</script>
</head>
<body>
<p>Write Less Do More</p>
</body>
</html>
3-9 类别切换,删除类别
toggleClass(class) --当元素中含有名称为class的Css类别时，删除该类别，否则增加一个该名称的CSS类别。
removeClass(class) --$("p").removeClass("cls0");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类别切换,删除类别</title>
<style type="text/css">
.clsImg{ border:solid 1px #666; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//toggleClass(class) --当元素中含有名称为class的Css类别时，删除该类别，否则增加一个该名称的CSS类别。
//**toggleClass()可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。
//removeClass(class) --$("p").removeClass("cls0");
$(function(){
$("img").click(function(){
$(this).toggleClass("clsImg");
})
})
</script>
</head>
<body>
<img src="img/1.png" alt="" title="jQuery" />
</body>
</html>
3-10 动态创建节点元素 --$("body").append($div);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建节点元素</title>
<style type="text/css">
body{ font-size:13px;}
ul{ padding:0px; list-style:none;}
ul li{ line-height:2.0em;}
.divL{ float:left; width:200px; background-color:#eee; border:solid 1px #666; margin:5px; padding:0px 8px 0px 8px;}
.divR{ float:left; width:200px; display:none; border:solid 1px #ccc; margin:5px; padding:0px 8px 0px 8px;}
.txt{ border:#666 1px solid; padding:3px; width:120px;}
.btn{ border:#666 1px solid; padding:2px; width:60px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//创建节点
//var $div = $("<div title = '11'>2222</div>");
//$("body").append($div);
$(function(){
$("#Button1").click(function(){
//
var $str1 = $("#select1").val();
var $str2 = $("#text1").val();
var $str3 = $("#select2").val();
var $str4 = $("#text2").val(); var $div = $("<"+$str1 +" " + $str3 + "='" + $str4 +"'>" + $str2+"</"+$str1+">");
$(".divR").show().append($div);
})
}) </script>
</head>
<body>
<div class="divL"><p></p>
<ul>
<li>元素名：
<select id="select1">
<option value="p">p</option>
<option value="div">div</option>
</select>
</li>
<li>内容为：
<input type="text" id="text1" class="txt" />
</li>
<li>属性名：
<select id="select2">
<option value="title">title</option>
</select>
</li>
<li>属性值:
<input type="text" id="text2" class="txt" />
</li>
<li style="text-align:center; padding-top:5px;"><input id="Button1" type="button" value="创建" class="btn" /></li>
</ul>
</div>
<div class="divR"></div>
</body>
</html>
3-11 动态插入节点方法,内部插入节点方法（一）
append(content) --向所选择的元素内部插入内容
append(function(index,html)) --向所选择的元素内部插入function函数所返回的内容
appendTo(content) --把所选择的元素追加到另一个指定的元素集合中
prepend(content) --向每个所选择的元素内部前置内容
prepend(function(index,html)) --向所选择的元素内部前置function函数所返回的内容
prependTo(content) --将所选择的元素前置到另一个指定的元素集合中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态插入节点方法,内部插入节点方法（一）</title>
<style type="text/css">
body{ font-size:13px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//内部插入节点方法
//append(content) --向所选择的元素内部插入内容
//append(function(index,html)) --向所选择的元素内部插入function函数所返回的内容
//appendTo(content) --把所选择的元素追加到另一个指定的元素集合中
//prepend(content) --向每个所选择的元素内部前置内容
//prepend(function(index,html)) --向所选择的元素内部前置function函数所返回的内容
//prependTo(content) --将所选择的元素前置到另一个指定的元素集合中
$(function(){
$("div").append(retHtml);
function retHtml(){
var str = "<b>Write Less Do More</b>";
return str;
}
})
</script>
</head>
<body>
<div>jQuery</div>
</body>
</html>
3-12 动态插入节点方法,内部插入节点方法（二）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态插入节点方法,内部插入节点方法（二）</title>
<style type="text/css">
body{ font-size:13px;}
img{ border:solid 1px #ccc; padding:3px; margin:5px;}
span{ background-color:#999; }
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//appendTo(content) --该方法用于将一个元素插入另一个指定的元素内容中
//$("span").appendTo($("div")); --即将span标记插入div标记中
$(function(){
$("img").appendTo($("span"));
}) </script>
</head>
<body>
<img title="test" src="img/1.png" />
<span><img title="test2" src="img/2.png" /></span>
</body>
</html>
3-13 动态插入节点方法,外部插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态插入节点方法,外部插入节点</title>
<style type="text/css">
body{ font-size:13px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//外部插入节点
//after(content) --向所选择的元素外部后面插入内容
//after(function) --向所选择的元素外部后面插入function函数所返回的内容
//before(content) --向所选择的元素外部前面插入内容
//before(function) --向所选择的元素外部前面插入function函数所返回的内容
//insertAfter(content) --将所选择的元素插入另一个指定的元素外部后面
//insertBefore(content) --将所选择的元素插入另一个指定的元素外部前面
$(function(){
$("span").after(retHtml);
function retHtml(){
var str = "<b>Write Less Do More</b>";
return str;
}
})
</script>
</head>
<body>
<span>jQuery</span>
</body>
</html>
3-14 复制元素节点
clone() --该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
clone(true) --参数设置为true就可以复制元素的所有事件处理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复制元素节点</title>
<style type="text/css">
img{ border:solid 1px #ccc; padding:3px; margin:5px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//clone() --该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
//clone(true) --参数设置为true就可以复制元素的所有事件处理。
$(function(){
$("img").click(function(){
$(this).clone(true).appendTo("span");
})
})
</script>
</head>
<body>
<span><img title="test" src="img/3.png" /></span>
</body>
</html>
3-15 替换元素节点
replaceWith(content) --将所有选择的元素替换成指定的html或DOM元素，其中参数content为被所选择元素替换的内容
replaceAll(selector) --将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>替换元素节点</title>
<style type="text/css">
body{ font-size:13px;}
span{ font-weight:bold;}
p{ background-color:#eee; padding:5px; width:200px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//replaceWith(content) --将所有选择的元素替换成指定的html或DOM元素，其中参数content为被所选择元素替换的内容
//replaceAll(selector) --将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素
//**区别：在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。完成替换，被替换元素中的全部事件都将消失。
$(function(){
$("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>");
$("<span title='replaceAll'>xxx@163.cpm</span>").replaceAll("#Span2");
})
//一旦完成替换，被替换元素中的全部事件都将消失。 </script>
</head>
<body>
<p>姓名：<span id="Span1"></span></p>
<p>邮箱：<span id="Span2"></span></p>
</body>
</html>
3-16 包裹元素节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包裹元素节点</title>
<style type="text/css">
body{ font-size:13px;}
p{ background-color:#eee; padding:5px; width:200px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//wrap(html) --把所有选择的元素用其他字符串代码包裹起来
//wrap(elem) --把所有选择的元素用其他DOM元素包装起来
//wrap(fn) --把所有选择的元素用function函数返回的代码包裹起来
//unwrap() --移除所选元素的父元素或包裹标记
//wrapAll(html) --把所有元素用单个元素包裹起来
//wrapAll(elem) --把所有选择的元素用单个DOM元素包裹起来
//wrapInner(html) --把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来
//wrapInner(elem) --把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
//wrapInner(fn) --把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来
$(function(){
$("p").wrap("<b></b>");
$("span").wrapInner("<i></i>");
})
</script>
</head>
<body>
<p>111：<span>111111</span></p>
<p>222:<span>222222</span></p>
</body>
</html>
3-17 遍历元素
对同一标记的全部元素进行统一操作，jquery中，可以直接使用each()方法实现元素的遍历。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遍历元素</title>
<style type="text/css">
body{ font-size:13px;}
img{ border:solid 1px #ccc; padding:3px; margin:5px; width:143px; height:101px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//each(callback) --callback是一个function函数，该函数可以接受一个形参index，此形参为遍历元素的序号(从0开始)，如果需要访问元素中的属性，可以借助形参index,配合this关键字来实现元素属性的设置或获取。
$(function(){
$("img").each(function(index) {
//
this.title = "第"+index+"的图片，alt内容是"+this.alt;
});
})
</script>
</head>
<body>
<p>
<img src="img/1.png" alt="1" />
<img src="img/2.png" alt="2" />
<img src="img/3.png" alt="3" />
</p>
</body>
</html>
3-18 删除元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除元素</title>
<style type="text/css">
body{ font-size:13px;}
ul{ width:200px;}
ul li{ list-style:none; padding:0px; height:23px;}
span{ padding-left:20px;}
.btn{ border:#666 1px solid; padding:2px; width:60px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//remove()，remove([expr])--expr为可选项，如果接受参数，则该参数为栓选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除
//empty() --清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素
$(function(){
$("ul li:first").css("font-weight","bold");
$("#Button1").click(function(){
$("ul li").remove("li[title=t]");
$("ul li:eq(1)").remove();
})
}) </script>
</head>
<body>
<ul>
<li>学号</li>
<li title="t">1001</li>
<li>1002</li>
<li>1003</li>
<li style="text-align:center; padding-top:5px;"><input id="Button1" type="button" value="删除" class="btn" /></li>
</ul>
</body>
</html>
第三篇 jQuery操作DOM的更多相关文章
- 三、jquery操作DOM
DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式.在实际运用中,DOM更像是桥梁,通过它可以实现跨平台.跨语 ...
- 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 ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- *jquery操作DOM总结 (原创：最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- jQuery权威指南（第2版） 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
随机推荐
- 优雅的退出asyncio事件循环
import asyncio import functools import os import signal """ 信号值 符号 行为 2 SIGINT 进程终端,C ...
- Linux ＴＣ限制流量
一.TC原理介绍 Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制,主要是通过在输出端口处建立一个队列来实现流量控制. Linux流量控制的基本原理如 ...
- SRS之SrsRtmpConn::service_cycle详解
1. SrsRtmpConn::service_cycle 当服务器在 conn 线程的开始调用 connect_app 函数接收并解析客户端发送的 connect 消息后,调用该 service_c ...
- 软工第04组 Alpha冲刺（1/6）
队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 过去一段时间对项目的精度和分工进行了更加细致的划分,并初步进行了GamePlay逻辑部分的框架设计 GitHub签入记录: ...
- 前端单点登录（SSO）实现方法（二级域名与主域名）
1.单点登录介绍 单点登录 SSO 全称 Singn Sign On .SSO 是指在多个应用系统中,用户只需要登录一次用户系统,就可以访问其他互相信任的应用系统.例如:在网易官网登录账户,那么再进入 ...
- 在jenkins打开roboframework报告:Opening Robot Framework report failed
来源自: https://blog.51cto.com/icestick8586/1884615 --------------------------------------------------- ...
- mysql 查看库结构---查看表结构
查看库结构:SHOW DATABASES; 查看表结构: show tables即为显示当前数据库中所有的表.又如: mysql> use dbname //进入dbname库Database ...
- Linux性能分析之上下文切换
而在每个任务运行前,CPU 都需要知道任务从哪里加载.又从哪里开始运行,也就是说,需要系统事先帮它设置好 CPU 寄存器和程序计数器 CPU 寄存器,是 CPU 内置的容量小.但速度极快的内存.而程序 ...
- flutter vscode创建objc工程
通过vscode创建flutter工程时,默认创建的是swift项目工程,如果想要修改,可以通过vscode设置默认创建语言 1. Open vscode settings. Under User S ...
- Web jsp开发学习——终极解决jsp中request和response中文乱码的问题（加个过滤器）
中文乱码真的很烦人的.而且每次都要写,可麻烦了,而且有时候写了还不一定管用,所以我们可以试试过滤器 1.每个jsp头上当然要写上utf8啦 <%@ page language="jav ...