JQuery 学习笔记（随笔）01-02 例子练习
例一。<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../script/jquery-1.7.1.js"></script>
</head>
<body>
<!-- jquery 写法-->
<p class="demo1">jquery 例子</p> //这样写的目的是让DOM加载完毕 这样就不用写$(document).
<script>//ready(function(){...........})
$(".demo1").click(function(){
alert("jquery demo");
})
</script>
</body>
</html>
<!--javascript写法-->
<!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=gb2312" />
<title>无标题文档</title>
<script src="../../script/jquery-1.7.1.js"></script>
<script>
function demo(){
alert("javascript demo！");
}
</script>
</head>
<body>
<p >点击我</p>
</body>
</html>
当 jquery 查询的几点不存在的时候也不会报错。
例二。
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../script/jquery-1.7.1.js"></script>
<script>
window.onload=function(){
var items=document.getElementsByTagName("p");
for(var i=0;i<items.length;i++){
items.onclick=function(){
alert("suc!");
}
}
}
</script>
</head>
<body>
<p>测试一</p>
<p>测试二</p>
</body>
</html>
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../script/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){ //http://www.agoit.com/images/smiles/icon_evil.gif因为下面有DOM标签 所以一定要等到DOM元素加载完毕才能执行js脚本
$("p").click(function(){
alert("func!");
});
})
</script>
</head>
<body>
<p>测试一</p>
<p>测试二</p>
</body>
</html>
<!-- ------------------------------------------------>
例三 隔行变色
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../script/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#table1 tr:even").css("backgroundColor","red");
})
</script>
</head>
<body>
<table id="table1">
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</table>
</body>
</html>
例四 计算选中的个数
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../script/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
var items=$("input:checked"); //注意顺序
alert("您选中的个数是："+items.length);
})
})
</script>
</head>
<body>
<input type="checkbox" name="items" id="item1" />
<input type="checkbox" name="items" id="item1" />
<input type="checkbox" name="items" id="item1" />
<input id="button" type="button" value="你选择的个数"/>
</body>
</html>
例子五 特殊符号的处理
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $id_a = $('#id.a');//jQuery对象
var $id_b = $('#id#b');//jQuery对象
var $id_c = $('#id'); //jQuery对象
alert( $id_a.html() );//这样会获取不到，输出null
alert( $id_b.html() );//这样会获取不到，输出null
alert( $id_c.html() );//这样会获取不到，输出null
var $id_right_a = $('#id\\.a');//jQuery对象,对特殊字符,我们转义一下
var $id_right_b = $('#id\\#b');//jQuery对象,对特殊字符,我们转义一下
var $id_right_c = $('#id\\'); //对特殊字符，我们转义一下
alert( $id_right_a.html() );//正确输出"aa"
alert( $id_right_b.html() );//正确输出"bb"
alert( $id_right_c.html() );//正确输出"cc"
})
</script>
</head>
<body>
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id">cc</div>
</body>
</html>
例六：jquery 空格处理
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//注意区分类似这样的选择器
//虽然一个空格，却截然不同的效果.
var $t_a = $('.test :hidden');
var $t_b = $('.test:hidden');
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden') = "+len_a); //输出 4
alert("$('.test:hidden') = "+len_b); //输出 3
})
</script>
</head>
<body>
<div class="test">
<div style="display:none;">aa</div>
<div style="display:none;">bb</div>
<div style="display:none;">cc</div>
<div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>
</body>
</html>
之后。。。正在完善
页:
[1]