关于JQuery

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();
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,843评论 0 3
  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 2,361评论 0 0
  • 1.库和任务的区别 框架与库之间最本质区别在于控制权:you call libs, frameworks call...
    饥人谷_菠萝阅读 1,631评论 0 0
  • jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法...
    convertible阅读 1,430评论 0 1
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 7,931评论 1 40