从满腹经纶到入行小白：理论学习与实际应用的差距

最新推荐文章于 2024-06-22 16:08:19 发布

ryelqy

最新推荐文章于 2024-06-22 16:08:19 发布

阅读量594

点赞数

分类专栏：总结与应用

本文链接：https://blog.csdn.net/ryelqy/article/details/81348429

版权

总结与应用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前言

任何一门能够应用到中的学门、技能，都有一定的底蕴，只能成为理论中的理论，无法真正应用到实际中。在学校、在书上，我们能获取到知识有多少能应用到实际上呢？

我们翻开Jquery API中文文档（http://jquery.cuishifeng.cn/），上面的所有方法，是不是我们都能用到实际上呢？答案是全部100%都能用上。没有用上的东西是不会被开发出来，即使开发出来，时间一长也会被淘汰。

但是，文档里面的方法，是不是我们都能用得上呢？不一定。知识、方法，学校里讲得很多，书上写得很多，可是到头来什么是实际开发中绝大多数时候我们都能用上的呢？

二、误区

1、所有知识都必须记住，所有知识都能用上。从理论上来说，这句话是对的。但实际情况是，各司其职，分工有序。框架有专门的人写，项目架构有架构师写，前端，有专门的前端工程师写，大点的公司还有专门的人做数据库，再大点的公司就是不是用java而是用C 和C++了。

2、Java开发工程师只是做后台代码开发。上面不是说了吗，前端有专门的前端工程师写，那么Java工程师就应该专注后台。实际上80%的时间都会耗在前台js上。

3、开发中需要用到各式各样的技能。前面的那句话是对的，但对于实际业务开发来说，做的最多的事情是“增删查改”。

4、开发中用到的技能早已学会。学校培养学生来来去去就是先教技能，然后扔一本习题巩固知识。而现实生活是，你已经学会一点知识，然后扔了一本习题给你，你只会做50%的习题，剩下那50%需要你通过自学、百度、请教前辈和同事等方法来完成。

三、绝大多数时候的Jquery

我们在学习Jquery的时候，会发现，哇，好多方法，好多知识点，怎么多怎么记啊？实际中都会用上吗？会！不然为什么要开发出来。但是，绝大多数的时候，我们只会用上当中的几种。

1、选择器

<input id="id" name="name" value="1" class="c1">
<input id="id2" name="name" value="2" class="c2">
通过id获取：$("#id").val();
通过id同时获取多个Jquery对象：$("#id,#id2")
通过类来获取：$(".c1").val();
通过对象及其名称来获取：$("input[name='name']");
通过类型来获取：$(":radio");

2、事件

学了一大堆，到头来最有用的只有三个

//<button>标签默认submit类型，点击就会提交表单
<button id="btn1" type="button">这是个按钮</button>
<inout type="text" id="text" value="1">

$(document).ready(function(){
    $("#btn1").click(function(){
        //TODO Something
    });

    $("#text").change(function(){
        //TODO Something
    });
});

3、ajax

jquery提供了封装了原生态的ajax请求，对大多数的ajax请求都会通过jquery封装的接口来实现ajax请求，没办法，因为实在很方便。而用得最多的是$.ajax，也是最基本，功能多，可配置的参数多。

$.ajax的设计本生就是一种加法思维，需要什么功能就配置什么参数，可是实际中能用上的并不多，在大多数情况下，可以由其封装后的$.post(url,jsondata,function(){});来替代，该方法大大减少了参数的配置。

<form id="form">
    <input type="text" id="text" name="text" value="this is a text"/>
</form>

//方法一：
var text = $("#text").val();
$.post("${pageContext.request.contextPath}/test/test",{"text":text},function(data){
    //TODO Something
});

//方法二：序列化表单
$.post("${pageContext.request.contextPath}/test/test",$("#form").serialize(),function(data){
    //TODO Something
});

//方法三：不传参数，不需要回调函数
$.post("${pageContext.request.contextPath}/test/test",function(data){
    //TODO Something
});
$.post("${pageContext.request.contextPath}/test/test");

//方法四：同步请求，不用ajax
$("#form").submit();

4、数组及列表操作

//对于ajax返回来的数据，有可能包含列表和数组，可以通过$.each遍历展示到前台页面
//假设后台：List<Student> list = studentDao.findAll();
$.post("${pageContext.request.contextPath}/test/test",{"text":text},function(data){
    var list = data.list;
    $.each(list,function(i,item){
        //i:为当前索引值，item为列表对象本生
        console.log(item.name);//打印当前学生的名字到控制台
    });
});

5、文档操作

1）文档插入

在表格<table></table>中加入一行
$.post("${pageContext.request.contextPath}/test/test",{"text":text},function(data){
    var list = data.list;
    $.each(list,function(i,item){
        $("table").append("<tr><td>" + item.name + "</td><td>" + item.age + "</td></tr>");
    });
});

2）删除标签

标签内部内容置空
$("p").empty();
标签整体移除
$("p").remove();

6、属性与CSS类

//操作属性
$("#form).attr("action","${pageContext.request.contextPath}/test/test");
$("#form).removeAttr("action");

//操作CSS
$("#div").css("display","none");//设置div隐藏
$("#div").css("display","inline");//设置div显示

//添加移除类
$("#div").addClass("c1 c2");//添加
$("#div").removeClass("c1");//移除
$("#div").removeClass();//移除所有class