想看简单的技术实例？jQuery简单实现点击切换！
2024-01-23 15:47:36
由于最近沉迷于搞一些企业级应用，导致自己对技术的基础底层研究已经很久没有进行过深入研究了。前端的技术因为长期不用，已经基本忘记，所以最近找了几个简单实例来进行自我技术复盘。
我把自己的学习过程记录下来。
在此之前，我复习过关于前端的一些基础技术，主要涉及到的就是HTML 和CSS，在看过这些基础理论之后，因为是强类型编程，Java 与JavaScript相差的知识点并不多，所以没有深入了解就进行开发了。
由于对JavaScript编程技术的浅显理解，导致对于JavaScript框架库的理解也十分浅薄。简单JavaScript项目中，简单的使用一些jQuery的API与方法，事实上，框架库带给开发人员的方便程度，是其他编程技术所无法及得的。通过我所开发的这个demo，我的技术能力之低自然也就可以一览无遗了，所以还是老老实实学习吧。
我的demo是这样的：
首先是创建一个简单的HTML代码。当然前端部分也是十分灵活的，但是最基本的还是需要了解HTML与CSS的基础语法。
<p>
<a class="toggle" href="javascript:void(0);" data-show-text="显示" data-hide-text="隐藏">显示</a>
</p>
<div class="toggle-container" style="display: none;">
<p>
toggle container
</p>
</div>
当然，前面这部分代码作用就不多介绍了。对其稍作简单了解之后，你就可以很明确的知道下面一段jQuery代码的作用是什么了。
jQuery(function($) {
var $toggle = $('.toggle'),
$container = $('.toggle-container'),
textShow = $toggle.attr('data-show-text'),
textHide = $toggle.attr('data-hide-text'),
flag;
$toggle.click(function() {
if (flag === true) {
$toggle.text(textShow);
$container.slideUp();
flag = false;
} else {
$toggle.text(textHide);
$container.slideDown();
flag = true;
}
})
});
最关键的一句代码，就是：
$toggle.click(function() {
// ...
}
这一句代码，表示了页面上具有这个类名（class）的HTML元素，一旦被点击，就会自动触发function进行相应的操作。
这个HTML中的JavaScript代码块的作用十分简单，不需要掌握很深入的jQuery知识，通过简单查询文档，就可以简单的实现相应的触发效果。
- 首先我们需要针对HTML元素做处理。
需要指出的是，jQuery的代码中，对于jQuery进行调用的方式应该是这样的：
jQuery(function($){
// ...
});
这种对jQuery的封装，主要是为了可以对编写代码时添加智能提示，让开发过程更加舒适与快速。
jQuery提供了很多很便捷的API和方法，如:
.attr()
.click()
.hide()
.show()
.slideUp()
.slideDown()
- 最后，需要让代码符合浏览器的兼容性要求，在CSS中添加如下代码：
.toggle-container {
display: none;
height: 0;
overflow: hidden;
transition: height 0.3s;
}
相关API与方法的知识，在jQuery的官方文档中。
由于我所使用的jQuery版本为1.8.2，且为本地项目，所以没有进行引入jQuery库的处理。这部分工作，我们应该在实际项目中进行考量。
jQuery 的官方网站：https://www.jquery.com/
到这里，一个简单的点击切换效果的DEMO我们就完成了。
