欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery学习笔记（一）

程序员文章站 2024-03-05 14:53:02
...

jQuery 安装

1、从 jquery.com 下载 jQuery 库

  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，是可读的代码）

2、从 CDN 中载入 jQuery

百度CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪 CDN

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

又拍云 CDN

<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

jQuery语法

jQuery 语法：1、选取 HTML 元素；2、对选取的元素执行某些操作。

基础语法：

$(selector).action()
  • 美元符号定义 jQuery
  • 选择符（selector）”查询”和”查找” HTML 元素(jQuery 中所有选择器都以美元符号开头：$()。)
  • jQuery 的 action() 执行对元素
实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，避免在文档没有完全加载之前就运行函数引发的操作失败。
将所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

简洁写法：
$(function(){

   // 开始写 jQuery 代码...

});

关于选择器：

1、
2、jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素
页面中元素的 id 应该是唯一的，所以要在页面中选取唯一的元素需要通过 #id 选择器

$("#test")

3、jQuery 类选择器可以通过指定的 class 查找元素

$(".test")

jQuery学习笔记（一）

关于jQuery事件

  • 常见DOM事件

jQuery学习笔记（一）

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

对于可选的 callback 参数，有以下两点说明：
1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；
2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；
3.callback既可以是函数名，也可以是匿名函数；

jQuery 效果 - 淡入淡出

jQuery 拥有四种 fade 方法

  • fadeIn()

淡入已隐藏的元素

$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取："slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
  • fadeOut()
    用于淡出可见元素
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取："slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
  • fadeToggle()

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取："slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
  • fadeTo()

允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);
可选的 speed 参数规定效果的时长。它可以取："slow"、"fast" 或毫秒
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
可选的 callback 参数是 fading 完成后所执行的函数名称

jQuery 效果 - 滑动

  • slideDown()

用于向下滑动元素

$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
  • slideUp()

用于向上滑动元素

$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
  • slideToggle()

在 slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery 动画

jQuery animate() 方法用于创建自定义动画

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
生成动画的过程中可同时使用多个属性

  • 当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

jQuery animate() - 使用队列功能

jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd);
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
goToEnd 参数规定是否立即完成当前动画。默认是 false
默认地stop() 会清除在被选元素上指定的当前动画
$("div").stop();//停止当前**的动画，但之后我们能再动画队列中再次**
$("div").stop(true);//停止当前动画，并清除动画队列，所以元素的所有动画都会停止
$("div").stop(true,true);//完成动作,快速完成动作，并停止它

注：Callback 函数在当前动画 100% 完成之后执行

jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上），浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

上一篇： Android代码实现AdapterViews和RecyclerView无限滚动

下一篇： Java开源工具iText生成PDF简单实例

推荐阅读