jQuery深入浅出（一）

最新推荐文章于 2023-11-17 22:13:38 发布

........千年老妖

最新推荐文章于 2023-11-17 22:13:38 发布

阅读量513

点赞数 1

分类专栏： jQuery框架文章标签： jQuery深入浅出（一）

本文链接：https://blog.csdn.net/qq_36760873/article/details/101388006

版权

jQuery框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery深入浅出（一）

1.jQuery 概念：
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
简而言之：Query是一个JavaScript函数库。
也是是一个轻量级的"写的少，做的多"的JavaScript库。
2. jQuery进阶
本阶段主要介绍jQuery的深入内容，包括jQuery动画、常用工具函数，以及如何用jSon和Ajax进行数据交换，还有左侧导航案例等。
3.jquery理解：jQuery属于js型框架，他们的共同点都是直接了当
得到元素，得到之后要干什么，怎么干
看一段实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画效果</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#test").hide();
	  $("p").hide(3000);
	  $("h2").hide();
  });
});
	$(document).ready(function(){
  $("#button2").click(function(){
  
	  $("h2").show(3000);
	    $("h2").
  });
});
		$(document).ready(function(){
  $("#button3").click(function(){
  
	  $("h2").toggle(3000);
	  
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button id="button1">隐藏</button>
	<button id="button2">显示</button>
	<button id="button3">切换</button>
</body>

</html>

实现效果：
在这里插入图片描述
通过以上代码：可以分析到：
第一个按钮是隐藏：
（1）先获得元素：开始准备：

$(document).ready(function(){

$("#button1").click(function(){
（2）干什么：获取隐藏方法
$("#test").hide();

（3）怎么干：让他慢慢隐藏，时间3秒，把其他我想要隐藏的元素可以一并隐藏掉
$(“p”).hide(3000);
$(“h2”).hide();
});
});

同样的思路，再接着实现第二个，发现只不过是换了一个方法而已，将隐藏hide替换为显示show，如果想要切换，就换为Toggle（）方法，以此类推，动画的实现（animate（）方法），或者是淡入淡出（fadeIn or fadeOut ;fadeToggle）,亦或是滑入滑出（slideDown() or slideUp() slideToggle()方法）瞬间发现不攻自破；
那么，在此基础上，我们如何使页面效果更加生动、动画的兼容性更好呢？请看链接：
jQuery动画总结

........千年老妖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery深入浅出（一）

jQuery深入浅出（一）1.jQuery 概念：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。简而言之：Query是一个JavaScript函数库。也是是一个轻量级的"写的少，做的多"的JavaScript库。2. jQuery进阶本...
复制链接

扫一扫