Jquery简介：
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery 语法：
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
jQuery 语法实例
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
Previous Page
Next Page
jQuery 选择器：
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择器实例语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 事件函数：
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
实例
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
$("p").hide();
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src 属性来引用文件）：
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 事件
下面是 jQuery 中事件方法的一些例子：Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery AJAX 函数：
什么是 AJAX？
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。
AJAX 和 jQuery
jQuery 提供了用于 AJAX 开发的丰富函数（方法）库。
通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中！
写的更少，做的更多
jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：
$(selector).load(url,data,callback)
请使用 selector 来定义要改变的 HTML 元素，使用 url 参数来指定数据的 web 地址。
只有当您希望向服务器发送数据时，才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时，您才需要使用 callback 参数。
Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能，但是同时也更难使用。
option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
jQuery AJAX 请求请求 描述
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
下面我们来举几个实例：
案例一：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
层次元素关系
1、祖先关系 空格符号
2、父子关系 大于符号
3、紧跟的关系 +符号
4、紧跟后的所有兄弟关系 ~符号
CSS样式
1、css("");带有一个参数是获取其属性的值
2、css("","");为其对象设置一个指定的属性和属性值
3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
*/
$(document).ready(function(){
/**层级元素选择器的使用方式*/
/**祖先关系 符号为===>空格*/
var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象
/**输出Jquery对象的大小*/
alert("后代个数是："+$frmipts.size());
/**父子关系 符号为===>>*/
var $ipt = $("form>input");
//为你获取的input添加背景颜色
/**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/
var iptt = $ipt[0];
iptt.style.backgroundColor="red";
alert("-----------改变中介线---------------");
/**采用Jquery对象本身的css方法来设置样式*/
$ipt.css("background-color","blue");
/**匹配所有紧接在某个元素后的某个元素符号为===> +*/
var $lipts=$("label+input");
/**为其添加背景颜色*/
$lipts.css("background-color","green");
/**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/
var $fipts = $("form~input");
$fipts.css("background-color","yellow");
/**我使用到了CSS样式
.css("")//获取其样式属性的值
案例： $fipts.css("background-color");
.css("","") //为其添加样式属性及属性值
$fipts.css("background-color","yellow");
.css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。
$fipts.css({"background-color":"red","color":"blue"});
*/
alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color"));
});
</script>
</head>
<body>
<div>
<div>
<input name="ddd"/>
<h1>
层级选择器的使用方式
</h1>
</div>
<div id="#frm">
邮箱：<input name="test"/>
<form>
<label>
Name:
</label>
<input name="name"/>
<fieldset>
<label>
Newsletter:
</label>
<input name="newsletter" />
</fieldset>
<label>
Age:
</label>
<input name="age"/>
</form>
<label>
周星驰:
</label>
<br/>
姓名：<input name="none" /><br/>
</div>
</div>
</body>
</html>
案例二;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
简单选择器
1、：first 匹配的第一个
2、：last 匹配的最后一个
3、：lt(index) 小于某个的
4、：gt(index) 大于某个的;
5、：eq(index) 等于某个 相当于过滤器中的.eq(index)
6、：even 奇数行
7、：odd 偶数行
8、：header 匹配h1,h2 h3 等标题
9、：not 除去匹配的(剩下的)
过滤器：
.eq(index)匹配某个
属性中html代码
.html()返回整个html文本
属性的文本
.text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
//纠正：开始讲的过滤器
*/
/**页面载入事件处理*/
$(function(){
//获取class类别选择器JQuery对像集合中的第一个对象
var $tr1 = $(".rdc:first");
//属性：.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
alert($tr1.html());
//获取class选择器对象集合中的最后一个对象
var $ltr = $(".rdc:last");
//属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
alert($ltr.text());
/** even匹配的是索引是:0 2 4 但行数是1,3 5......
:even 选择奇数行并且为其添加背景颜色为红色*/
$("tr:even").css("background-color","red");
/** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
$("tr:odd").css("background-color","blue");
/**$("tr")取得所有的行的JQuery对象的集合
.eq(index)匹配一个给定索引值的元素的Jquery对象
.css("","")为Jquery对象添加一个样式属性和属性值
对象链式操作*/
$("tr:eq(2)").css("background-color","yellow");
//等效于
$("tr").eq(2).css("background-color","yellow");
/**集合 List --->get(index)--->具体的对象--->具体对象的方法*/
/**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
$("tr:lt(1)").css("background-color","green");
/**取得索引大于1 并且把背景颜色设置为black*/
$("tr:gt(1)").css("background-color","black");
//匹配不是最后一行的样式背景颜色统一设置为红色
$("tr:not(:last)").css("background-color","red");
//匹配标题
alert($(":header").html());
});
</script>
</head>
<body>
<div align="center">
<div>
<h1>简单选择器的应用------过滤器</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td>
1001
</td>
<td>
redarmy_chen
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr class="rdc">
<td>
1003
</td>
<td>
m_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
案例三：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
/**
在这里重点介绍：
一：Jquery中的基本选择器
1、id选择器
2、class选择器
3、元素选择器器
4、*
5、并列选择器 用英文的逗号区分
二：重点介绍了Jquery对象转换成DOM对象的方法
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
2、可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
三：重点介绍Jquery对象中的get(index)方法,size()方法,length属性
*/
$(document).ready(function(){
//ID匹配的选择器Jquery对象
//alert($("#thed"));
/**转换成DOM对象的方式
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
*/
alert(($("#thed")[0]).innerHTML);
//class匹配选择器Jquery对象
alert($(".rdc"));
/**
2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
*/
var domObject = $(".rdc").get(0);
alert(domObject.innerHTML);
//* 匹配所有的元素的Jquery对象
alert($("*"));
alert($("*").get(0).innerHTML)
//根据给定的元素名称获取Jquery对象
alert($("tr"));
/**采用第一种方式把$("tr")转换成DOM对象*/
alert(($("tr")[$("tr").size()-1]).innerHTML);
alert(($("tr")[$("tr").length-1]).innerHTML);
//匹配所有选择器的Jquery组合对象
alert($("tr,tr.rdc"));
alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)
});
</script>
<style>
#thed{
background-color: blue;
}
.rdc{
background-color: red;
}
#tbdy rdc{
}
</style>
</head>
<body>
<div>
<div>
<h1>
选择器的使用方式
</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td>
1001
</td>
<td>
redarmy_chen
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1003
</td>
<td>
m_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
案例四：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
内容选择器
1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
*/
/**页面载入事件处理*/
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds = $("td:contains('redarmy')");
/**输出此集合的长度*/
alert($tds.size()+"=========="+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $rtds = $(".rdc:contains('redarmy')");//tr对象
/**输出此集合的长度*/
alert($rtds.text()+"-------"+$rtds.size());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
alert($rtds1.size()+"===="+$rtds1.text());
/**获取id为qw的tr对象中td的空元素*/
var $etd = $("#qw>td:empty");
alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
//获取tbody中含有rdc的tbody对象
var $tbdys = $("#tbdy:has(.rdc)");
alert($tbdys.html()+"------------"+$tbdys.size());
//获取tbody中含有rdc的tr对象集合
var $trs = $("#tbdy>.rdc");
alert($trs.html()+"------------"+$trs.size());
//获取.rdc中含有子元素或者文本元素的.rdc的对象
var $tdps = $(".rdc:parent"); //tr对象
alert($tdps.html()+"--------"+$tdps.text());
})
</script>
</head>
<body>
<div align="center">
<div>
<h1>内容选择器的应用</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td></td>
<td>
redarmy_chen
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr id="qw">
<td></td>
<td colspan="2"/>
<td>1</td>
</tr>
</tbody>
<!-- 为了测试：parent -->
<tr class="rdc">
aaa
</tr>
</table>
</div>
</div>
</body>
</html>
案例五：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo06.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
$(function() {
$("input[type='button']").bind("click", function() {
/*
$.get("stu.xml",function(msg){
alert("--------"+msg.documentElement.nodeName);
},"xml");
*/
$.post("stu.xml",function(msg){
alert("--------"+msg.documentElement.nodeName);
},"xml");
});
});
//xhr.post("get","url","async");
//xhr.readState==4 xhr.status==200
</script>
</head>
<body>
<input type="button" value="Ajax请求" />
</body>
</html>
文章中没有提到的可以参考帮助文档上边非常详细 非常全
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
