例一。<!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 onclick="demo()">点击我</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[i].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(){ //因为下面有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[name='items']: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[1]'); //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\\[1\\]'); //对特殊字符,我们转义一下
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[1]">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>
之后。。。正在完善
分享到:
相关推荐
jquery 学习笔记源码 1-3章
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery学习-----jquery库讲义,更快的了解jquery
jquery插件jquery-ui-timepicker-addon.j
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-weui-build查看例子请到dist\demos文件夹下进行浏览
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
jquery-ui日历控件还是很人性化的,但官网没找到很好的中文版,这里上传一下
jquery插件jquery-ui-1.8.2.custom.min.js
jQuery打印插件----jQuery.print.js实现网页的打印功能,亲测有效
NULL 博文链接:https://lhgyy00.iteye.com/blog/442374
jquery学习笔记附带例子,希望对新手有帮助
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
jquery-1.11.0 + jquery-UI-1.10.4
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例