最后一篇了 终于见到了成功的曙光在向我招手啊真是太兴奋啦!!!这次继续由我为大家带来JQuery的一些简单的应用吧
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
div div{ | |
/*color: red;*/ | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
我是外部div | |
<div>1111111</div> | |
<div>2222</div> | |
<div>33333333333</div> | |
<div>44444444444444444</div> | |
</div> | |
<button >获取并显示第一个div下面的所有的子div元素,并提取显示每个子元素中的内容</button> | |
<hr/> | |
<table> | |
<tr> | |
<th>序号</th><th>姓名</th><th>性别</th> | |
</tr> | |
<tr> | |
<td>1</td><td>历史1</td><td>男</td> | |
</tr> | |
<tr> | |
<td>2</td><td>历史2</td><td>男</td> | |
</tr> | |
<tr> | |
<td>3</td><td>历史3</td><td>女</td> | |
</tr> | |
<tr> | |
<td>4</td><td>历史4</td><td>男</td> | |
</tr> | |
<tr> | |
<td>5</td><td>历史5</td><td>男</td> | |
</tr> | |
</table> | |
<button onclick="settable()">设置表格效果</button> | |
<script src="js/jquery-1.12.2.min.js"></script> | |
<script> | |
function settable(){ | |
$("table").css(‘border‘,‘1px solid lightgray‘); | |
$("table").css({ | |
‘width‘:‘600px‘, | |
‘border-collapse‘:‘collapse‘, | |
‘text-align‘:‘center‘ | |
}); | |
$("table th, table td").css(‘border‘,‘1px solid lightgray‘); | |
$(‘table tr:first‘).css(‘background-color‘,‘#d3d3d3‘); | |
// $(‘table tr:not(:first):even‘).css(‘background-color‘,‘#eee‘); | |
$(‘table tr:gt(0):even‘).css(‘background-color‘,‘#eee‘); | |
$(‘table tr:not(:first):odd‘).css(‘background-color‘,‘#ggg‘); | |
} | |
// alert($(‘div div‘).length); | |
// for(var i=0; i<$(‘div div‘).length; i++){ | |
// alert($(‘div div‘).eq(i).html()); | |
// } | |
// jquery的循环,使用each函数 | |
// jQuery的each函数,循环所获取的原生的js元素对象 | |
// $(‘div div‘).each(function(i){ | |
//// alert(this.innerHTML); | |
// alert($(this).html()); | |
// }); | |
// :first 指代获取第一个元素 | |
// alert($("div div:first").html()); | |
// alert($("div div").eq(0).html()); | |
// alert($("div div:eq(0)").html()); | |
// $("div div:not(:first)").each(function(i){ | |
// alert($(this).html()); | |
// }); | |
// :even 获取索引序号为偶数的元素 | |
// $("div div:even").each(function(i){ | |
// alert($(this).html()); | |
// }); | |
// $("div div:odd").css(‘color‘,‘red‘); | |
</script> | |
</body> | |
</html> |
这次的代码是刚学习不久的JQuery代码 个人的话对此也不是太过熟悉 必须要加强对代码的熟练巩固了啊,真是太不好意思了,简单的来说,JQuery使得我们的代码学习书写简单了许多,方便了代码开发的工作者,使之更为快捷的使用编写,辛苦了大佛们。这次的代码则利用的JQuery实现了一个按钮更改页面上的表单元素,也就是css样式,更为轻便。
时间: 2024-10-17 01:37:04