您的位置：首页 > Web前端 > JQuery

第一章 jquery开发入门 学习笔记

2012-04-22 16:34 465 查看
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" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery javascript class function html input
相关文章推荐
新的分享
章节导航