1.1 jQuery概述
1.1.1 jQuery主旨：以更少的代码，实现更多的功能(Write less,do more)
1.1.2 jQuery基本功能
1、访问和操作DOM元素
2、控制页面样式
3、对页面事件的处理
引入jQuery库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以轻松地实现二者的结合。
4、大量插件在页面中的运用
5、与Ajax技术完美结合
1.1.3 搭建jQuery开发环境
1、下载jQuery文件库
在jQuery的官方网站(http://jquery.com)中下载。
2、引入jQuery文件库
下载完jQuery框架文件后，并不需要任何安装，仅需要使用<script>文件导入标记，将jQuery框架文件jquery-1.4.2.min.js导入页面中即可。如下：
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>1.4.1编写第一个简单的jQuery应用
实例1-1 编写第一个简单的jQuery程序
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个简单的jQuery应用</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("您好，欢迎来到jQuery世界");
});
</script>
</head>
<body>
</body>
</html>在上述文件的代码中，有一段如下的代码
$(document).ready(function(){
//程序段
})
该段代码类似于传统的JavaScript代码
window.onload = function(){
//程序段
}
虽然两段代码在功能上可以互换，但它们之间又有许多区别：
执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包括图片下载）后才能执行。很明显，前者的执行效率高于后者。
执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
$(document).ready(function(){})可以简写成$(function(){})，因此与下面的代码是等价的。
$(document).ready(function(){
//程序段
})
等价于
$(function(){
//程序段
})
1.1.5 jQuery程序的代码风格
1、"$"美元符的使用
2、事件操作链接式书写
示例1-2 jQuery事件的链式写法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery事件的链式写法</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<style type="text/css">
.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:5px;display:none}
.divCurrColor{background-color:Red}
</style>
<script type="text/javascript">
$(function(){
$(".divTitle").click(function(){
$(this).addClass("divCurrColor").next(".divContent").css("display","block");
});
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">主题</div>
<div class="divContent">
<a href="#">链接一</a><br/>
<a href="#">链接二</a><br/>
<a href="#">链接三</a><br/>
</div>
</div>
</body>
</html>代码功能说明：当用户单击Class名称为“divTitle”的元素时，自身增加名称为"divCurrColor"的样式；同时，将接下来的Class名称为"divContent"元素显示出来。
注：.next([selector])此方法取得每个匹配的元素的后一个同辈元素的元素集合
可以用一个可选的表达式进行筛选，只有紧邻的同辈元素会被匹配，而不是后面所有的同辈元素
1.2 jQuery 的简单应用
1.2.1 jQuery访问DOM对象
1、什么是DOM对象
DOM(Document Object Model,文本对象模型)的每一个页面都是一个DOM对象
例如：在页面中有2个<div>标记元素，其代码如下：
<div id="divTmp">测试文本</div>
<div id="divOut"></div>
通过下面的JavaScript代码可以访问DOM对象和获取或设置器内容值
var tDiv = document.getElementById("divTmp");//获取DOM对象
var oDiv = document.getElementById("divOut");//获取DOM对象
var cDiv = tDiv.innerHTML;//获取DOM对象中的内容
oDiv.innerHTML=cDiv;//设置DOM对象中的内容
2、什么是jQuery对象
在jQuery库中，通过本身自带的方法获取页面元素的对象，我们称之为jQuery对象；为了同样实现在ID为"divOut"的标记中显示ID为“divTmp”的标记内容，采用jQuery访问页面元素的方法，器实现的代码如下：
var tDiv = $("#divTmp") //获取jQuery对象
var oDiv = $("#divOut") //获取jQuery对象
var cDiv = tDiv.html()//获取jQuery对象中的内容
oDiv.html(cDiv)//设置jQuery对象中的内容
1.2.2 jQuery控制DOM对象
实例 1-3 控制DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>控制DOM对象</title>
<style>
.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn .btnCss{border:solid 1px #535353;width:60px}
</style>
<script type="text/javascript">
function btnClick(){
//获取文本框的值
var oTxValue = document.getElementById("Text1").value;
//获取单选按钮值
var oRdoValue = (Radio1.checked)?"男":"女";
//获取复选按钮值
var oChkValue = (Checkbox1.checked)?"已婚":"未婚";
//显示提示文本元素
document.getElementById("divTip").style.display = "block";
//设置文本元素内容
document.getElementById("divTip").innerHTML=oTxValue+"<br>"+oRdoValue+"<br>"+oChkValue;
}
</script>
</head>
<body class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名：<input id="Text1" type="text" class="txtCss"/><br/>
性别：<input id="Radio1" type="radio" value="男"/>男
<input id="Radio2" type="radio" value="女"/>女<br/>
婚否：已婚<input id="Checkbox1" type="checkbox"/><br/>
<div class="divBtn">
<input id="Button1" type="button" value="提交" class="btnCss" οnclick="btnClick();">
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>以上是通过传统的JavaScript方法获取用户输入的信息，下面通过引入jQuery方式显示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>控制DOM对象</title>
<style>
.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn .btnCss{border:solid 1px #535353;width:60px}
</style>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(){
//获取文本框的值
var oTxtValue = $("#Text1").val();
//获取单选按钮值
var oRdoValue = $("#Radio1").is(":checked")? "男":"女";
//获取复选框按钮的值
var oChkValue = $("#Checkbox1").is(":checked")?"已婚":"未婚";
//显示提示文本元素和内容
$("#divTip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue);
});
});
</script>
</head>
<body class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名：<input id="Text1" type="text" class="txtCss"/><br/>
性别：<input id="Radio1" type="radio" value="男"/>男
<input id="Radio2" type="radio" value="女"/>女<br/>
婚否：已婚<input id="Checkbox1" type="checkbox"/><br/>
<div class="divBtn">
<input id="btnSubmit" type="button" value="提交" class="btnCss">
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>$("#Text1").val()在jQuery库中表示获取ID号为"Text1"的值；$("#Radio1").is(“:checked”)表示ID号为"Radio1"的单选按钮是否被选中
1.2.3 jQuery控制页面CSS
在jQuery框架中，通过自带的JavaScript编程，提供全部的CSS3下的选择器，开发者可以首先定义自己的样式文件，然后通过jQuery中的addClass()方法将该样式轻松地添加到页面中指定的某元素中，而不用考虑浏览器的兼容性。
下面通过一个简单的示例来介绍如何使用jQuery中的toggleClass(className)方法来实现页面样式的动态切换功能
示例1-4 jQuery控制CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery控制CSS样式</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<style type="text/css">
.divDefault{width:260px;font-size:10pt;padding:5px}
.divClick{width:260px;border:solid 1px #666;font-size:10pt;background-color:#eee;padding:5px}
</style>
<script type="text/javascript">
$(function(){
$(".divDefault").click(function(){
$(this).toggleClass("divClick").html("点击后的样式");
});
});
</script>
</head>
<body>
<div class="divDefault">点击前的样式</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
