1. jQuery概述
- jQuery是一个优秀的JavaScript框架
- 主要提供如下功能
- 访问页面框架的局部
- 修改页面的表现
- 更改页面的内容
- 响应事件
- 为页面添加动画
- 与服务器异步交互
- 简化常用的JavaScript操作
- 下载并使用jQuery
- 官方网站（http://jquery.com/）
- 不需要任何安装过程
2. jQuery的“$”
- 选择器
- 功能函数前缀
- window.onload
- window.onload的冲突
- ready()方法
- 创建DOM元素
3. 选择器
- 属性选择器
- 位置选择器
3. 实例
实例一 ：一行代码实现隔行变色效果：
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>无标题页</title>
<style type="text/css">
.tablecss
{
text-align: center
width: 393px;
background-color: #ffcc66;
border:1;
}
.eventr
{ text-align: center;
background-color: #ffffff;
}
.oddtr
{
text-align: center;
background-color: #66ffcc;
}
</style>
<script language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js">
</script>
<script language="javascript">
$(function()
{
// $("tr").onclick(function(){alert();});
$("table.tablecss tr:nth-child(odd)").addClass("oddtr");
$("table tr:nth-child(even)").addClass("eventr");
}
)
</script>
</head>
<body>
<table class="tablecss">
<tr>
<td >
001</td>
<td >
xiaoming</td>
<td >
14</td>
</tr>
<tr>
<td >
002</td>
<td >
xiaohong</td>
<td >
13</td>
</tr>
<tr>
<td >
003</td>
<td >
xiaozhamg</td>
<td>
15</td>
</tr>
<tr>
<td >
004</td>
<td >
zhuqilin</td>
<td >
22</td>
</tr>
<tr>
<td >
005</td>
<td >
zhangzhiqiang</td>
<td >
22</td>
</tr>
<tr>
<td >
006</td>
<td >
wangliyan</td>
<td >
21</td>
</tr>
<tr>
<td >
007</td>
<td >
zhouzhengwen</td>
<td >
22</td>
</tr>
<tr>
<td >
008</td>
<td >
tty</td>
<td >
29</td>
</tr>
<tr>
<td >
009</td>
<td >
aming</td>
<td >
30</td>
</tr>
</table>
</body>
</html>
运行效果：
实例二 ：选择器
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>无标题页</title>
<script language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js">
</script>
<script language="javascript" type="text/javascript">
window.onload=function()
{
var zql=$("h2 a");
for(var i=0;i<zql.length;i++)
{
zql[i].href="http://www.sina.com.cn/";
zql[i].innerHTML="新浪";
}
}
</script>
</head>
<body>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</body>
</html>
运行效果：
实例三：字符串操作：
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 runat="server">
<title>无标题页</title>
<script language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js">
</script>
<script language="javascript" type="text/javascript">
var str=" 123456789";
str=$.trim(str);
alert(str.length);
alert(str);
</script>
</head>
<body>
</body>
</html>
实例4：获取浏览器的型号和版本号“
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>无标题页</title>
<script language="javascript" src=jquery.js>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script language="javascript" type="text/javascript">
function getbrowser()
{
if($.browser.msie)
{ return "IE";}
if($.browser.mozilla)
{ return "mozilla";}
if($.browser.safari)
{return "safari";}
if($.browser.opera)
{return "opera";}
}
var a=getbrowser();
document.write("你的浏览器是："+a+"你的版本号是："+$.browser.version)
</script>
</div>
</form>
</body>
</html>
四：核心部分
$(expr)：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础。expr：字符串，一个查询表达式或一段html字符串
例子：
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
function jq(){
alert($("div > p").html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”
$(elem)
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
alert($(document).find("div > p").html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
function jq(){
$(document.body).background("black");
}
运行：当点击id为test的元素时，背景色变成黑色
$(elems)
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
$(form1.elements ).hide();
}
运行：当点击id为test的元素时，隐藏form1表单中的所有元素。
jQuery代码及功能：
四：总结
通过Jquery使我们操作更加方便.
共同学习，写下你的评论
评论加载中...
作者其他优质文章
