jQuery介绍

最新推荐文章于 2024-08-27 01:45:00 发布

转载最新推荐文章于 2024-08-27 01:45:00 发布 · 529 阅读

Dev 专栏收录该内容

42 篇文章

订阅专栏

jQuery介绍：

http://www.w3school.com.cn/jquery

《锋利的Jquery》

需要的基础：HTML, CSS, JavaScript,Ajax.

jQuery是一个 JavaScript 函数库。

jQuery库包含以下特性：HTML 元素选取;HTML 元素操作;CSS 操作;HTML 事件函数;JavaScript特效和动;HTML DOM 遍历和修改;AJAX;Utilities.

三种不同方式：

var txt1="<p>Text</p>"; // 以 HTML 创建新元素

var txt3=document.createElement("p"); txt3.innerHTML="Text";

// 以 DOM 创建新元素

var txt2=$("<p></p>").text("Text"); // 以 jQuery 创建新元素

jQuery库：

在html文件的head标签内，在语句（<scripttype="text/javascript">）之前，加载jQuery库。

从http://jquery.com/下载，放到本地

注释：两个版本的 jQuery 可供下载：Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）

使用 Google 的 CDN jQuery 核心文件

注释：拿到最新版本，1.8.0改成1.8，或者直接改成1。

/jquery/1.8.0/jquery.min.js"></script>

使用 Microsoft 的 CDN jQuery 核心文件

/jquery-1.4.min.js"></script>

JQuery语法：

jQuery 使用的语法是XPath 与 CSS 选择器语法的组合。这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。放在（$(document).ready(function())里面。

基础语法是：$(selector).action()

美元符号定义 jQuery，可以不用$用jQuery本身。

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

注释：美元符号（$）可作为jQuery定义，某些其他JavaScript 库中的函数（比如 Prototype）同样使用$ 符号。1可以用noConflict() 的方法来取个别名（var jq = $.noConflict();）;2用（$.noConflict();）释放美元符号（$）给其他的框架用, jQeury用全名;3局部用美元符号（$）,把$符号作为变量传递给 ready 方法，如（jQuery(document).ready(function($){$....）。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

把所有 p 元素的背景颜色更改为红色.

jQuery 事件函数：

可以把jQuery 代码放到<head>部分的事件处理方法中。实际项目中为了函数易于维护，把jQuery放到独立的.js 文件中。

引入单独js文件中的函数

<head>

</head>

触发或将函数绑定到被选元素的鼠标悬停事件

$(selector).mouseover(function)

按钮的点击事件被触发时会调用一个函数

$("button").click(function() {..some code... } )

jQuery效果

隐藏和显示：

可传参数，(speed,callback)。可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

注释：使用 toggle() 方法来切换 hide() 和 show() 方法

$("p").hide();

$("p").show();

$("p").toggle();

元素的淡入淡出效果：

fadeIn()

fadeOut()

fadeToggle()

可传参数，(speed,callback)。可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

fadeTo()，可选参数(speed,opacity,callback)，opacity透明程度。

$("#div2").fadeTo("slow",0.4);

元素上下滑动：

slideDown()

slideUp()

slideToggle()

$(this).slideToggle("slow");

动画效果

必需的 params 参数定义形成动画的 CSS 属性。

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

$(selector).animate({params},speed,callback);

$("button").click(function(){

$("div").animate({

left:'250px',

opacity:'+=0.5',

height:'-=150px',

width: 'toggle'

});

中途停止动画效果

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$(selector).stop(stopAll,goToEnd);

注释：callback 参数是在当前动画 100% 完成之后执行的函数。

jQuery 方法链接：

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

多个动作	$("#p1").css("color","red").slideUp(2000).slideDown(2000); $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);

jQuery与HTML：操作 DOM

获取和设置：

text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){ alert("Text: " + $("#test").text());});

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world!

(index: " + i + ")";

});

html() - 设置或返回所选元素的内容（包括 HTML 标记）

$("#btn2").click(function(){alert("HTML: " + $("#test").html(“new html”));});

val() - 设置或返回表单字段的值

$("#btn1").click(function(){

alert("Value: " + $("#test").val());

});

attr() - 获取属性

支持回调函数

$("button").click(function(){alert($("#w3s").attr("href"));});

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

$("#w3s").attr("href", function(i,origValue){return origValue + "/jquery"; });

添加和删除

append() - 在被选元素的结尾插入内容	$("p").append("end.");
prepend() - 在被选元素的开头插入内容	$("p").prepend("begin:");
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素）一可选参数，允许您对被删元素进行过滤	$("#div1").remove();
empty() - 从被选元素中删除子元素

jQuery与CSS：操作 CSS

addClass() - 向被选元素添加一个或多个类	$("#div1").addClass("important blue");
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作	$("h1,h2,p").toggleClass("blue");
css() - 设置或返回样式属性	$("p").css("background-color"); $("p").css("background-color","yellow");
元素和浏览器窗口的尺寸：width()；height()；innerWidth()；innerHeight()；outerWidth()；outerHeight()	var txt=""; txt+="Width: " + $("#div1").width() + "</br>";

jQuery遍历：

jQuery 提供了多种遍历DOM 的方法。遍历方法中最大的种类是树遍历（tree-traversal）。

parent() 方法返回被选元素的直接父元素。	$("span").parent();
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。	$("span").parentsUntil("div");
children() 方法返回被选元素的所有直接子元素。	$("div").children();
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。	$("div").find("*");
siblings() 方法返回被选元素的所有同胞元素。	$("h2").siblings();
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。	$("h2").nextUntil("h6");
jQuery prev(), prevAll() & prevUntil() 方法 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）
过滤：三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。	$("div p").first();
eq() 方法返回被选元素中带有指定索引号的元素。 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 not() 方法返回不匹配标准的所有元素。	$("p").not(".intro");

jQuery和AJAX：

AJAX = 异步JavaScript 和XML（AsynchronousJavaScript and XML）。

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。通过jQuery AJAX 方法，您能够使用HTTP Get 和HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON -同时您能够把这些外部数据直接载入网页的被选元素中。(不同的浏览器对AJAX 的实现,JQuery帮你解决了)。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

$("#div1").load("demo_test.txt #p1");

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("SUCCESS");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

get方法

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

Post方法

可选的 data 参数规定连同请求发送的数据。

$("button").click(function(){

$.post("/example/jquery/demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

注释：GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。http://www.w3school.com.cn/tags/html_ref_httpmethods.asp