GoOver jQuery-基础&效果

最新推荐文章于 2024-07-19 12:58:53 发布

马码侠

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量118

点赞数

分类专栏：前端文章标签：前端 jQuery JavaScript

原文链接：https://www.runoob.com/jquery/jquery-tutorial.html

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

重温jQuery

简介

是一个JavaScript库，即JS框架
功能众多
大量插件

安装

下载jQuery库
CDN中载入（全称是Content Delivery Network，即内容分发网络。）
替代方案：通过CDN引用
1).staticfile CDN:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

2).baiduCDN

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

3).又拍云CDN

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

4).Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

5).Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

优势：提高加载速度

语法

对HTML元素的选取，并执行一定的操作
基础语法：$(selector).action()
文档就绪事件（即入口函数）：$(document).ready(function(){ //jQuery代码})；
对比JavaScript中： window.onload = functino(){//执行代码}
原因：等待页面加载完毕之后再对DOM进行操作
区别：jQuery等待所有标签加载完之后进行执行，而JavaScript等待所有内容都加载完成之后才会执行。

选择器

元素选择器
#id选择器
.class选择器

事件

事件定义
语法：$(“p”).click(); || $(“p”).click(function(){// click之后触发的事件})
常用事件属性：
1. click() 按钮点击事件被触发时调用一个函数
2. dblclick() 双击元素时触发dblclick事件
3. mouseseenter() 当鼠标元素穿过元素时，被触发
4. mouseleave() 当鼠标离开元素时，被触发
5. mousedown() 当鼠标指针移动到元素上方时
6. mouseup() 当在元素相应位置松开鼠标按钮时
7. hover() 模拟光标悬停事件
8. focus() 当鼠标点中元素或通过tab键定位到元素上时，该元素会获得焦点
9. blur() 失去焦点时，发生blur()事件

显示与隐藏

隐藏
显示
演示实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
//引入CDN 函数库
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
   //入口函数
$(document).ready(function(){
 //隐藏事件
 $("#hide").click(function(){
   $("p").hide();
 });
 //显示事件
 $("#show").click(function(){
   $("p").show();
  });
  
});
</script>
</head>
<body>
<p>我就是个实验品，什么时候是我的出头之日啊</p>
<button id="hide">别点我，你会消失的</button>
<button id="show">别点我，我会害人的</button>
</body>
</html>

带有参数的实例:hide(speed, callback);
speed表示显示或者隐藏的时间，callback表示隐藏或者显示后所执行的函数名称。

<script>
	$d(ocument).ready(dunction(){
	$("button").click(function(){
	$("p").hide(1000);
	)};
});
</script>
<body>
	<button>隐藏</button>
</body>

/* 第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。*/
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle()函数切换hide()和show()

  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

淡入淡出

fadeIn()淡入隐藏的可见元素：$(selector).fadeIn(speed,callback);
fadeOut()淡出可见元素：$(selector).fadeOut(speed,callback);
fadeToggle()方法：两者之间进行切换
fadeTo() 方法：$(selector).fadeTo(speed,opacity,callback);
opacity参数将效果设置为指定的不透明度

滑动

slideDown()
slideUp()
slideTogggle()
用法跟潜入潜出类似

动画

$(selector).animate({params},speed,callback);
animate()方法中 params参数定义形成动画的CSS属性
还可以使用相对值,比如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
   $("div").animate({
     left:'250px',
     height:'+=150px',
     width:'+=150px'
   });
 });
});
</script> 
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>

animate()使用预定义的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      //隐藏或者显示
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

animate()使用队列
如果编写多个animate()动画，则jQuery会创建包含这些方法调用的“内部”队列，然后注意执行（由于是Queue队列，则只允许在表头表尾进行操作，特点是先进先出）

停止动画
stop()方法，$(selector).stop(stopAll,goToEnd);
stopAll表示是否清除动画队列，默认是false，goToEnd表示是否立即完成当前动画
callback方法

实例

//隐藏效果在玩去拿实现后回调函数：
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>
//没有回调函数，警告框会在隐藏效果完成前弹出
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>

方法链接
在相同的元素上运行多条jQuery命令，一条接着一条（如此浏览器将不必多次查找相同的元素）,以下实例将css()、slideUp() 和 slideDown() 链接在一起


<script>
$(document).ready(function()
 {
 $("button").click(function(){
 //可以对此写法进行换行，缩进
   $("#p1").css("font-size","80px").slideUp(2000).slideDown(2000);
 });
});
</script>

马码侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GoOver jQuery-基础&效果

重温jQuery简介是一个JavaScript库，即JS框架功能众多大量插件安装下载jQuery库CDN中载入（全称是Content Delivery Network，即内容分发网络。）替代方案：通过CDN引用1).staticfile CDN:<script src="https://cdn.staticfile.org/jquery/1.10.2/jq...
复制链接

扫一扫