jQuery教程

来源：互联网发布：无盘网吧网络拓扑图编辑：程序博客网时间：2024/05/22 09:18

一.jQuery基础

<html><head><script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script>$(document).ready(function(){    $("p").click(function(){        $(this).hide();    });});</script></head><body><p>点击我会消失！</p><p>点击我！</p><p>再点击我！</p></body></html>

1.语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
$ 符号定义 jQuery
选择符（selector）"查询（或查找））" HTML元素
jQuery 的 action() 执行对元素的操作
实例：
$(this).hide() - 隐藏当前元素。
$("p").hide() - 隐藏所有 <p> 元素。
$(".test").hide() - 隐藏所有具有 class="test" 的元素。
$("#test").hide() - 隐藏所有具有 id="test" 的元素。
2.事件

（1）click()
（2）dblclick()
（3）mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。
（4）mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。
（5）mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
（6）mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。
（7）hover()：用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

<script type="text/javascript">$("#p1").hover(function(){    alert("你进入了 p1!");},function(){    alert("再见! 现在你离开了 p1!");});</script>

（8）focus()：当元素获得焦点时，发生 focus 事件。

<script type="text/javascript">$("input").focus(function(){    $(this).css("background-color", "#cccccc");});</script>

－－－－－－－－－－

二.jQuery效果

1.淡入淡出

jQuery Fading 方法：通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：fadeIn() ， fadeOut() ， fadeToggle() ， fadeTo()
（1）jQuery fadeIn() 用于淡入已隐藏的元素。

<script type="text/javascript">$("button").click(function(){    $("#div1").fadeIn();    $("#div2").fadeIn("slow");    $("#div3").fadeIn(3000);});</script>

（2）jQuery fadeOut() 方法用于淡出可见元素。

<script type="text/javascript">$("button").click(function(){    $("#div1").fadeOut();    $("#div2").fadeOut("slow");    $("#div3").fadeOut(3000);});</script>

（3）jQuery fadeToggle() 方法：两者切换
（4）jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

<script type="text/javascript">$("button").click(function(){    $("#div1").fadeTo("slow", 0.15);    $("#div2").fadeTo("slow", 0.4);    $("#div3").fadeTo("slow", 0.7);});</script>

3.动画

（1）animate() 方法
Query animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
1)必需的 params 参数定义形成动画的 CSS 属性。
2)可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
3)可选的 callback 参数是动画完成后所执行的函数名称。默认情况下，所有 HTML
元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
把 <div> 元素往右边移动了 250 像素：

<script type="text/javascript">$("button").click(function(){    $("div").animate({left: '250px'});}); </script>

（2）animate() - 操作多个属性

<script type="text/javascript">$("button").click(function(){    $("div").animate({        left: '250px',        opacity: '0.5',        height: '150px',        width: '150px'    });}); </script>

注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
（3）animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

<script type="text/javascript">$("button").click(function(){    $("div").animate({        left: '250px',        height: '+=150px',        width: '+=150px'});}); </script>

4.停止动画

方法用于在动画或效果完成前对它们进行停止。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
默认地，stop() 会清除在被选元素上指定的当前动画。

<script type="text/javascript">$("#stop").click(function(){    $("#panel").stop();});</script>

－－－－－－－－－－

三.jQuery html

1.获取内容和属性：
（1）三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
（2）jQuery attr() 方法用于获取属性值。
例：获得链接中 href 属性的值：

<script>$(document).ready(function(){    $("button").click(function(){        alert($("#ts").attr("href"));    });});</script><body><p><a href="http://tsinghua.edu.cn" id="ts">清华大学官网</a></p><button>显示 href 值</button></body>

2.设置内容和属性

（1）设置内容 - text()、html() 以及 val()

<script type="text/javascript">$("#btn1").click(function(){    $("#test1").text("Hello world!");});$("#btn2").click(function(){    $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){    $("#test3").val("Dolly Duck");});</script>

（2）改变（设置）链接中 href 属性的值：

<script type="text/javascript">$("button").click(function(){    $("#ts").attr("href", "http://www.tsinghua.edu.cn");});</script>

（3）attr() 方法也允许您同时设置多个属性。

<script type="text/javascript">$("button").click(function(){    $("#w3s").attr({        "href" : "http://www.w3schools.wang/jquery",        "title" : "W3Schools jQuery Tutorial"    });});</script>

（4）Query 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<script type="text/javascript">$("button").click(function(){    $("#w3s").attr("href", function(i, origValue){        return origValue + "/jquery";     });});</script>

3.jQuery添加元素

用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

4.jQuery删除元素

（1）如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
（2）jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
1）删除 class="test" 的所有 <p> 元素：
$("p").remove(".test");
2）删除所有带有 class="test" 和 class="demo" 的 <p> 元素：
$("p").remove(".test, .demo");

5.jQuery获取并设置CSS类

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
（1）在添加类时，您也可以选取多个元素：

<script>$(document).ready(function(){    $("button").click(function(){        $("h1, h2, p").addClass("blue");        $("div").addClass("important");    });});</script><style>.important {    font-weight: bold;    font-size: xx-large;}.blue {    color: blue;}</style>

（2）可以在 addClass() 方法中规定多个类：

<script type="text/javascript">$("button").click(function(){    $("#div1").addClass("important blue");});</script>

（3）在不同的元素中删除指定的 class 属性：

<script type="text/javascript">$("button").click(function(){    $("h1, h2, p").removeClass("blue");});</script>

（4）jQuery toggleClass() 方法对被选元素进行添加/删除类的切换操作：

<script type="text/javascript">$("button").click(function(){    $("h1, h2, p").toggleClass("blue");});</script>

6.jQuery css()方法：设置或返回被选元素的一个或多个样式属性。

（1）如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
$("p").css("background-color");
（2）如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
$("p").css("background-color", "yellow");
（3）如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color": "yellow", "font-size": "200%"});
7.jQuery尺寸

jQuery 提供多个处理尺寸的重要方法：
width() height() innerWidth() innerHeight()
outerWidth() outerHeight()

－－－－－－－－－－－－－

四.jQuery遍历

1.祖先

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：parent() ， parents() ， parentsUntil()

（1）parent() 方法返回被选元素的直接父元素。

<script>$(document).ready(function(){    $("span").parent().css({"color": "red", "border": "2px solid red"});});</script>

（2）parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

（3）parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

<script type="text/javascript">$(document).ready(function(){    $("span").parentsUntil("div");});</script>

2.后代
下面是两个用于向下遍历 DOM 树的 jQuery 方法：children() ， find()
（1）children() 方法返回被选元素的所有直接子元素。
下面的例子返回每个 <div> 元素的所有直接子元素：

<script type="text/javascript">$(document).ready(function(){    $("div").children();});</script>

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

<script type="text/javascript">$(document).ready(function(){    $("div").children("p.first");});</script>

（2）find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

<script type="text/javascript">$(document).ready(function(){    $("div").find("span");});</script>

下面的例子返回 <div> 的所有后代：

<script type="text/javascript">$(document).ready(function(){    $("div").find("*");});</script>

3.同胞
（1）siblings() 方法返回被选元素的所有同胞元素。

<script type="text/javascript">$(document).ready(function(){    $("h2").siblings();});</script>

也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

<script type="text/javascript">$(document).ready(function(){    $("h2").siblings("p");});</script>

（2）next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
下面的例子返回 <h2> 的下一个同胞元素：

<script type="text/javascript">$(document).ready(function(){    $("h2").next();});</script>

（3）nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素：

<script type="text/javascript">$(document).ready(function(){    $("h2").nextAll();});</script>

（4）nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

<script type="text/javascript">$(document).ready(function(){    $("h2").nextUntil("h6");});</script>

4.过滤

三个最基本的过滤方法是：first()，last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
（1）first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

<script type="text/javascript">$(document).ready(function(){    $("div p").first();});</script>

（2）last() 方法返回被选元素的最后一个元素。

（3）eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，下面的例子选取第二个 <p> 元素（索引号 1）：

<script type="text/javascript">$(document).ready(function(){    $("p").eq(1);});</script>

（4）filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "url" 的所有 <p> 元素：

<script type="text/javascript">$(document).ready(function(){    $("p").filter(".intro");});</script>

（5）not() 方法返回不匹配标准的所有元素。
提示： not() 方法与 filter() 相反。

阅读全文

0 0