例一。<!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的基础到进阶内容，是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
<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框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架，...
jquery插件jquery-ui-timepicker-addon.j
jquery.qtip-1.0.0-rc3.js 弹出层
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识，包括其核心概念、选择器、DOM操作、事件...
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-ui中文日历控件，使用的时候记得先把文档编码改为UTF-8，否则中文显示乱码！
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
`jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例，它提供了丰富的交互式对话框功能，包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开（open）模式。这个插件使得在...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
jQuery-File-Upload-9.11.2(完整版，插件已下载),官方的很多引用文件都是线上的，加载很慢，下载到本地后更靠谱，这个版本是已经整理好的，直接调用后台php的部分也在其中，可以直接应用到项目中，直接拷贝过去就...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域，jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展，提供了丰富的用户界面组件...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**jQuery-WeUI-Build：构建轻量级的移动端Web UI解决方案** `jQuery-WeUI-Build` 是一个基于 jQuery 和 WeUI 框架的前端开发工具集，旨在为移动Web应用提供简洁、优雅的用户界面。这个项目的核心目标是帮助开发者...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
锋利的JQuery学习笔记