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

Jquery基础教程

2008-08-22 11:53 393 查看

1. jQuery概述

- jQuery是一个优秀的JavaScript框架

- 主要提供如下功能

　 - 访问页面框架的局部

　 - 修改页面的表现

　 - 更改页面的内容

　 - 响应事件

　 - 为页面添加动画

　 - 与服务器异步交互

　 - 简化常用的JavaScript操作

- 下载并使用jQuery

　 - 官方网站（http://jquery.com/）

　 - 不需要任何安装过程

2. jQuery的“$”

- 选择器

- 功能函数前缀

- window.onload

　 - window.onload的冲突

　 - ready()方法

- 创建DOM元素

3. 选择器

- 属性选择器

- 位置选择器

3. 实例

实例一：一行代码实现隔行变色效果：

<%@ 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使我们操作更加方便.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航