关于JQuery

2019-11-17  本文已影响0人  拾柒_aab0

jQuery到底是什么呢?

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

JQuery语法

jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

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

美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

jQuery hide() 和 show()

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

例:

 $("#hide").click(function(){
 $("p").hide();
 });

$("#show").click(function(){
$("p").show();
});

语法:
$(selector).hide(speed,callback);

$(selector).show(speed,callback);

jQuery toggle()

通过 jQuery,可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素,并隐藏已显示的元素:
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery 效果 - 滑动

jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。

语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法:

实例

$("#flip").click(function(){
$("#panel").slideDown();
});

jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。

语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法:

实例

$("#flip").click(function(){
$("#panel").slideUp();
});
上一篇下一篇

猜你喜欢

热点阅读