jquery总结

GoodWell

浏览: 29551 次
性别:
来自: 河北邢台

最近访客更多访客>>

春花秋月何时了

stephenhs

a471291809

DriveingBy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Ajax CSS JavaScript HTML

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 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素

获得未完全加载的图像的大小

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>

$(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>

</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>

/**

层次元素关系

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>

<h1>

层级选择器的使用方式

</h1>

</div>

邮箱：<input name="test"/>

<form>

<label>

</span

分享到：

jquery入门（一） | Dom总结

2011-04-18 13:53
浏览 856
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery总结

评论

发表评论

相关推荐

最近访客更多访客>>