jQuery学习笔记（一）

最新推荐文章于 2024-01-20 21:49:50 发布

xiu52t

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量77

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/xiu52t/article/details/75287161

版权

WEB前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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事件

常见DOM事件

这里写图片描述

$(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);

xiu52t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（一）

jQuery 安装1、从 jquery.com 下载 jQuery 库Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）2、从 CDN 中载入 jQuery 百度CDNhead>script src="https://apps.bdimg.com/lib
复制链接

扫一扫

专栏目录