1、JQuery的基本语法
为页面加入jquery支持非常容易，只需要通过script标签将支持的js文件导入就可以了。
<script language="javascript" src="jquery-1.3.1.js"></script>
JQuery语法：
使用JavaScript方式取得的对象被称为DOM对象，而使用JQuery取得的对象，在这里称为JQuery对象。
1、通过JQuery方式取得页面元素。
使用js可以通过getElementById、all.name、form.name等
使用JQuery可以通过以下几种方式取得页面元素：
1） 通过 #id的方式取得元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="jquery-1.3.1.js"></script>
<script language="javascript" >
function showValue() {
alert($("#mytext").val());
}
</script>
</HEAD>
<BODY>
输入姓名：<INPUT TYPE="text" NAME="name" id="mytext"> <br>
<INPUT TYPE="button" value="提交" onclick="showValue();">
</BODY>
</HTML>
注意需要使用$()将#id括起来，如果要取得value值，需要通过val()方法取得，而无法直接调用value属性。而且必须通过id来取得，而不能使用name属性。
2）通过标签名称取得，直接将标签名放入$()中
<script language="javascript" >
function showValue() {
alert($("input").val());
}
</script>
如果页面有多个元素，可以通过数组的方式取得其中的某一个
<script language="javascript" >
function showValue() {
alert($("input")[1].value);
}
</script>
但是如果使用.val()取得值会出现错误，因为数组中返回的对象为DOM对象，而不是JQuery对象。所以这里只能按照DOM对象的方式进行处理。
3） 依据class样式取得元素，需要将 .class 加入到$()中
<script language="javascript" >
function showValue() {
alert($(".err").html());
}
</script>
<style type="text/css">
.err{
color:red;
font-size:12px;
}
</style>
<span class="err">错误信息</span>
其中.html()方法的功能是取得span或div或td等元素的innerHTML属性，类似的还有.text()
4）取得页面中的所有元素，$(“*”)
2、为元素设置和取得属性（相当于getter与setter方法）
1） 特殊属性：
innerHTML、innerText、value、class，对于这四个属性使用专门的方法进行处理。
innerHTML：html()，取得和设置都使用该方法，不传参数的表示取得属性，传参数的表示设置属性
function showValue() {
alert($(".err").html("新的信息"));
}
innerText：text()，value：val()，使用方法与html()相同
class用来处理css样式
使用addClass添加新的样式，使用removeClass删除样式，使用toggleClass来替换新的样式，都需要传入样式名称（注意不要加.）
2） 普通的属性
都使用
attr方法来取得或设置属性，传一个参数表示取得该名称的属性值，传两个参数，表示为该属性设置一个新的值。
使用removeAttr可以删除某一个属性。
<script language="javascript" >
function showValue() {
alert($("input").attr("readOnly",""));
}
</script>
输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>
3、事件处理。
可以通过
blur()等方法调用或设置某元素的事件
<script language="javascript" >
function showValue() {
alert("原有方法");
}
function newValue() {
alert("新的方法");
}
function changeFun() {
$("#subbtn").click(newValue);
}
</script>
<style type="text/css">
.err{
color:red;
font-size:12px;
}
.ok{
color:green;
font-size:20px;
}
</style>
</HEAD>
<BODY>
输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>
<INPUT TYPE="button" value="提交" id="subbtn" onclick="showValue();"> <br>
<INPUT TYPE="button" value="切换方法" onclick="changeFun();">
</BODY>
但是在这里添加了方法后原有的方法并没有被删除，如果要删除，可以使用unbind方法进行删除
<script language="javascript" >
function loadInit() {
$("#subbtn").click(showValue);
}
function showValue() {
alert("原有方法");
}
function newValue() {
alert("新的方法");
}
function changeFun() {
$("#subbtn").unbind("click");
$("#subbtn").click(newValue);
}
</script>
<style type="text/css">
.err{
color:red;
font-size:12px;
}
.ok{
color:green;
font-size:20px;
}
</style>
</HEAD>
<BODY onload="loadInit();">
输入姓名：<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>
<INPUT TYPE="button" value="提交" id="subbtn"> <br>
<INPUT TYPE="button" value="切换方法" onclick="changeFun();">
</BODY>
注意：事件必须是通过JQuery绑定的，如果直接使用html进行编写，则无法取消绑定
补充：one方法，将一个事件绑定，但该方法只执行一次（一次性）
JQuery中包含几个特殊事件：$(document).ready()，表示页面加载完成时自动调用的函数，里面需要传入一个function参数
hover()：模仿鼠标悬停事件，实际上就是onMouseOver + onMouseOut，
4、DOM对象与JQuery对象的转换
DOM à JQuery ： $(DOM对象)
JQuery à DOM ： JQuery对象[下标]（如果只有一个，则下标为0）
2、在AJAX中使用JQuery开发，结合JSON
示例：修改之前的菜单联动
修改之前完成的JSONDemo，在列表显示页面，将调用方法修改
这里调用AJAX可以使用getJSON方法进行调用
function showplus(upid) {
// 参数分别为，URL路径、所传递的参数（使用JSON方式进行传递）
$.getJSON("area.do",{"status":"showplus","upid":upid},showplusCallback);
}
Action中的代码不需要修改，
// 返回的值通过obj参数返回，直接返回的就是JSON对象
function showplusCallback(obj) {
// 先将下拉列表清空
var select = document.getElementById("plus") ;
select.options.length = 1 ;
// 循环返回的areaplus数据
for (var i = 0 ; i < obj.areapluses.length ;i ++) {
var areaplus = obj.areapluses[i];
// 建立option
var option = document.createElement("option");
// 设置value属性
option.setAttribute("value",areaplus.id);
// 设置显示内容
option.appendChild(document.createTextNode(areaplus.title));
// 设置下拉列表
select.appendChild(option);
}
}
测试时发现js出现错误，原因是由于json.js与jquery.js有冲突，因此这里需要将 json.js的导入代码删除。
<script type="text/javascript" src="json.js"></script>
分享到：
相关推荐
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
**jQuery学习资料详解** jQuery，一个轻量级、高性能的JavaScript库，自2006年发布以来，因其简洁易用的API接口和强大的功能，迅速成为开发者们首选的前端工具之一。本资料旨在深入浅出地介绍jQuery的核心概念、...
本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先，我们来看看`jquery-1.2.6.js`，这是jQuery库的1.2.6版本的源代码文件。这个版本的历史悠久，但依然具有学习价值，因为它...
**jQuery学习资料大全** 在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码，使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源，无论你是初学者还是有...
《JQuery学习手册》是一份全面且深入的资源，旨在帮助开发者掌握JavaScript库JQuery的核心概念和实用技巧。这份手册不仅包含理论知识，还有实践应用的案例，是初学者和经验丰富的开发者提升JQuery技能的理想参考资料...
**jQuery学习网站** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的语法和强大的功能，jQuery成为了前端开发中的首选工具之一。 这篇博文链接...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
**jQuery学习示例大全** jQuery是一款广泛应用于网页开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个"jQuery学习示例大全"涵盖了从基础到进阶的各种示例，帮助开发者快速掌握...
这个“JQuery学习资料”压缩包包含了一系列与JQuery相关的学习资源，旨在帮助开发者深入理解和掌握JQuery的核心概念和实用技巧。 首先，`jquery1.4 API`是JQuery 1.4版本的官方API文档，它详细列出了该版本的所有...
**jQuery学习资料** jQuery是一款广泛应用于前端开发的JavaScript库，它极大地简化了JavaScript代码的编写，使得DOM操作、事件处理、动画制作等任务变得更加简单。本资料包包含了jQuery的学习资源，包括PPT教程和...
以下是对 jQuery 学习文档中提到的关键知识点的详细说明： 1. **jQuery 语法实例**： - `$(this).hide()`：隐藏当前选中的元素。 - `$("#test").hide()`：隐藏 ID 为 "test" 的元素。 - `$("p").hide()`：隐藏...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的：如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考，具有相对较低的贡献。...
**jQuery学习资料** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个学习资料包包含了多个面向初学者和中级开发者的资源，旨在帮助你快速掌握jQuery的核心...
《jQuery学习文档中文版》是面向初学者和进阶开发者的一份宝贵资源，它详尽地介绍了jQuery库的各种功能和用法。jQuery是一款强大的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，使得前端...
**jQuery学习课堂工具详解** jQuery，作为一款广泛应用于Web开发的JavaScript库，为开发者提供了简洁、高效的API，使得DOM操作、事件处理、动画设计以及Ajax交互变得更加简单。本"jQuery学习课堂工具"专注于帮助...