JavaScript和JQuery

最新推荐文章于 2023-04-11 09:26:38 发布

西北2020

最新推荐文章于 2023-04-11 09:26:38 发布

阅读量390

点赞数 1

分类专栏：前端技术文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44881854/article/details/114951215

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

日常闲聊：最近一直在认真学习，学的有点多，也有点快。感觉快消化不掉了，所以我决定暂停两天来总结一下。这个星期学了点前端技术，先从简单的html开始学，再到css，接着就是JavaScript，再就是JQuery，最后还学了bootstrap。实话说，学完这些我只用了三天的时间。感觉一下子接收了太多新鲜的东西，脑子有点膨胀。我反思了自己，发现自己的一个致命缺点，无论学什么都只想着快点学完，完全没考虑自己真正吸纳了多少，总结下来就只顾着学，却忽略了练习。所以我得改，不能一昧的求快，还要把所学的知识都变成自己的掌中宝。这几天学的前端技术，简单的总结一下吧，html就是最简单最基础的标签语言，之所以叫标签语言，是因为它是由各种标签所组成的。可用来写静态的网页。css呢，就是用来给网页加各种各样的样式。而JavaScript就是一个脚本语言，用来给静态网页增加动态效果。JQuery又是JavaScript的一个函数库，可以使用更简单的方式去替代JavaScript所能实现的功能。最后的bootstrap可以说是css的升级版，使用bootstrap可以非常简单的给网页添加更好看的样式。目前对前端这些技术大概了解到这么多，因为以后想走后端的路，所以应该不会再继续深入了。学了三天的前端技术，最想给大家分享一下的就是JavaScript和JQuery，我个人认为这是比较重要的，所以就来仔细研究研究这二者。

一、概念

JavaScript

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JQuery

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

二、作用

前面说过JQuery是JavaScript的一个函数库，所以大家应该能猜到这二者的作用和功能是大同小异的，不同的是实现方式有些差异，后面会一一进行比较。

JavaScript

1、为网页添加各式各样的动态功能,
2、为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

JQuery

Query库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

三、用法

JavaScript

html页面中的JavaScript

JavaScript通常写在script标签中。script标签可以放在head标签或body标签中，还可以放在整个html页面的结尾。总而言之，script标签它放在哪里没有确切的标准，可根据个人喜好来决定。

例：

<script> alert("hi,我是JavaScript");</script>

弹出的提示框：
在这里插入图片描述

外部的JavaScript

所谓外部的JavaScript就是一个独立于html文件的JavaScript文件（后缀名是 .js）。当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：例如，我们需要使用JQuery就必须引入JQuery的文件：

<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>

标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的很少。例：

<body>
		<a href="javascript:alert('我是标签中的JavaScript')">aa</a>
	</body>

在这里插入图片描述

JQuery

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。前面说外部的JS的时候已经提到过。

四、语法

JavaScript

变量声明

JS的语法跟Java的语法相似，但是它们有一个最大的区别，那就是Java定义一个数据时必须声明数据的类型，而JS定义数据时，统一使用关键字var，也就是不用声明数据的类型。这点比Java方便很多。这也意味着，在JS中，同一个变量它可以存储多个数据类型的数据，这也就是所谓的动态类型。
声明变量语法格式：

var 变量名称;

JS对象

前面说了，JS跟Java差不多，它们带有一些相应的类对象，有各种相应的方法。JS主要使用到的对象有以下几个，它们的方法都是跟java一样，可以通过查阅相应的帮助文档来了解。

String对象

Array对象

Date对象

Math对象

JQuery

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（action)。

基础语法格式：

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

在使用JQuery的时候，我们通常把代码写在如下代码中：

写法1：

$(document).ready(function(){
// 开始写 jQuery 代码...
});

写法2：

$(function(){
// 开始写 jQuery 代码...
});

那为什么要这样子写呢，其实这个叫做文档就绪事件，实际就是文档加载事件。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM进行操作。这个问题在写JS中也会遇到，所以我们通常会把JS写在文档的后面，或者通过onload来解决这个问题。jQuery的ready方法与JavaScript中的onload相似，但是也有区别：
在这里插入图片描述

五、获取html元素

JS

通过JS来获取html的内容，这得从DOM模型开始说起。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。DOM:Document Object Model,文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM 模型被构造为对象的树：
在这里插入图片描述通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
查找html元素有如下方法：

例：

<script>
function myLoad(){
//页面加载完毕之后再去获取页面上的元素，否则获取不到
//根据ID 获取元素，只能获取到唯一元素（如果有重名的ID元素，获取到的是第一个元素）
var div=document.getElementById("myDiv");
console.log(div);
//根据指定的类样式的名称获取元素，返回集合
var list=document.getElementsByClassName("demo");
console.log("根据类样式的名称获取到的元素的集合长度是："+list.length);
for(var i=0;i<list.length;i++){
console.log(list[i]);
}
//根据指定HTML标签名称获取元素，返回集合
var list2=document.getElementsByTagName("li");
console.log("根据标签的名称获取到的元素的集合长度是："+list2.length);
for(var i=0;i<list2.length;i++){
console.log(list2[i]);
}
//根据指定HTML元素的name属性获取元素，返回集合
var list3=document.getElementsByName("myli");
console.log("根据标签的名称属性获取到的元素的集合长度是："+list3.length);
for(var i=0;i<list3.length;i++){
console.log(list3[i]);
}
}
</script>
<body onload="myLoad()">
<p class="demo"></p>
<div id="myDiv" class="demo">
div
</div>
<ul class="demo">
<li>li11111111111</li>
<li name="myli">li11111111111</li>
<li>li11111111111</li>
<li name="myli">li11111111111</li>
</ul>
</body>

JQuery

JQuery获取html元素是通过选择器来实现的。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
所有选择器的案例：

<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//1、标签选择器：
function htmlSelector(){
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
}
//2、id选择器
function idSelector(){
//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html());
}
//3、.class选择器
function classSelector(){
var list=$(".mydiv");
console.log(list.length);
}
//4、 全局选择器
function allSelector(){
var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);for(var i=0;i<list.length;i++){
console.log(list[i]);//js的对象
}
}
//5、并集选择器
function andSelector(){
var list=$(".mydiv,p,li");
printList(list);
}
//6、后代选择器:包括所有的后代，儿子和孙子辈都有
function subSelector(){
var list=$("form input");
printList(list);
}
//7、子选择器：只有子元素
function sunSelector(){
var list=$("form>input");
printList(list);
}
//8、相邻选择器
function nextSelector(){
var list=$("label + input");
printList(list);
}
//9、同辈选择器
function sublingsSelector(){
var list=$("form ~ div");
printList(list);
}
//10、属性选择器
function attrSelector(){
var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是
userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开
头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结
尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了
user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又
有name属性以user开头的元素的集合
printList(list);
}
//11、可见性选择器
function seeSelector(){
//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元
素
list=$("input:hidden");
printList(list);
}

//打印集合
function printList(list){
for(var i=0;i<list.length;i++){
console.log(list[i]);
console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
console.log(list[i].value);//只有表单项元素才有value
}
}
</script>
</head>
<body>
<form>
<label>用户名：</label>
<input type="hidden" name="userId" value="1001" />
<input style="display: none;" value="隐藏的input" />
<input id="userName" name="userName" value="jiaobaoyu" /><br />
<label>密码：</label>
<input name="userPass" type="password" value="1234567"/><br />
<fieldset>
电话：<input id="phone" name="phoneuser" value="13712345789"/><br
/>
邮箱：<input name="emailuser" type="email" value="lina@sina.com"
/>
</fieldset>
</form>
地址：<input name="addressuser1" value="北京" /><br />
<ul>
<li>li111111</li>
<li>li111111</li>
<li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;" >div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>

六、修改html

JS

修改内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
修改 HTML 元素的内容的语法：
document.getElementById(id).innerHTML=新的 HTML。

例：

var s = document.getElementById("userNameS");
s.innerHTML="用户名不能为空！！";

注意：
不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

修改属性

修改 HTML 元素属性的语法：
方式1：document.getElementById(id).attribute=新属性值
方式2：document.getElementById(id).setAttribute(属性名，属性值);

例：

<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="新的div内容";
document.getElementById("myimg").src="x1.jpg";
<h1 style="color: green;" id="myh1">hello world</h1>
var h1=document.getElementById("myh1");
h1.setAttribute("class","bg");//设置属性
console.log(h1.getAttribute("class"));//获取属性class
console.log(h1.getAttribute("style"));//获取属性style

修改css

修改 HTML 元素css的语法：
document.getElementById(id).style.property=新样式

例：

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

JQuery

修改内容

$(selector).html() //在括号中写入需要修改的内容
$(selector).text()

//1、与内容相关的函数
function textFun(){
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内
容，包括了嵌套在内部的标签
console.log(str1);
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文
本，不包含标签的内容
console.log(str2);
var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素，val()可以获取到
console.log(str3);
console.log(str4);
}

修改属性

//2、与属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服！");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
}
}

修改css

function cssFun(){
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
}

七、操作DOM元素

JS

创建新的 HTML 元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<button type="button" onclick="createNewP()">动态添加一个元素--
appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素--
insertBefore</button>
<div id="div1">
<p id="p1">这是段落1</p>
<p id="p2">这是段落2</p>
</div>
<script>
function createNewP(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
//添加新创建的元素p到已经存在的元素div中
div.appendChild(newElementP);
}
function createNewP2(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
div.insertBefore(newElementP,p1);
}
</script>

替换 HTML 元素 -replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script>
function changeElemnt(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取要被替换的元素p1及其父元素div
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//将div中的元素p1替换为新创建的元素
div.replaceChild(newElementP,p1);
}
</script>

删除元素 -removeChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement()">删除p1-方式2</button>
<script>
function deleteElement(){
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//从父元素div中删除子元素p1
div.removeChild(p1);
}
function deleteElement2(){
var p1=document.getElementById("p1");
//p1.parentNode：作用就是获取要删除元素p1的父元素div
p1.parentNode.removeChild(p1);
}
</script>

JQuery

元素的添加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<style>
div{
background: lavenderblush;
padding: 20px;
}
p{
background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
// append() - 在被选元素的结尾插入内容
$("#btn1").click(function(){
$("div").append("<br/>新添加的文本<br/>");
$("div").append("<p>新添加的段落</p>");
});
//prepend() - 在被选元素的开头插入内容
$("#btn2").click(function(){
$("div").prepend("<br/>新添加的文本<br/>");
$("div").prepend("<p>新添加的段落</p>");
});
//after() - 在被选元素之后插入内容
$("#btn3").click(function(){
$("div").after("<br/>新添加的文本<br/>");
$("div").after("<p>新添加的段落</p>");
});
//before() - 在被选元素之前插入内容
$("#btn4").click(function(){
$("div").before("<br/>新添加的文本<br/>");
$("div").before("<p>新添加的段落</p>");
});
});
</script>
</head>
<body>
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<button id="btn3">after</button>
<button id="btn4">before</button>
<div>
div1
</div>
<p>p1</p>
</body>
</html>

元素的替换

replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理--元素替换</title>
<style>
div{
background: lavenderblush;
padding: 20px;
}
p{
background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
//replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
$("#btn1").click(function(){
//$("div").replaceWith("<br/>新替换的文本<br/>");
$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
});
//replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
$("#btn2").click(function(){
$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
});
});
</script>
</head>
<body>
<button id="btn1">replaceWith</button>
<button id="btn2">replaceWithAll</button>
<div>
div1
</div>
<br />
<div>
div2
</div>
<p>p1</p>
<p>p2</p>
</body>
</html>

元素的删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理--元素删除</title>
<style>
div{
background: lavenderblush;
padding: 20px;
}
p{
background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
//remove() - 删除被选元素（及其子元素）
$("#btn1").click(function(){
$("div").remove();//所有的div元素及其子元素被删除
});
//remove(筛选条件) - 删除符合筛选条件的元素
$("#btn2").click(function(){
$("div").remove(".test");//所有的div元素中引用了class="test"的
div被删除
});
//empty() - 从被选元素中删除子元素
$("#btn3").click(function(){
$("div").empty();//删除div中的所有子元素
});
});
</script>
</head>
<body>
<button id="btn1">remove()</button>
<button id="btn2">remove(筛选条件)</button>
<button id="btn3">empty()</button>
<div>
div1
<p>div1中的段落1</p>
<p>div1中的段落2</p>
<span style="background: lightblue; padding: 10px;">div1中的
span</span>
</div>
<br/>
<div class="test">
div2
</div>
<p>p1</p>
</body>
</html>

八、事件的绑定

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。
例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

JS

主要是在属性中绑定事件。比如要处理按钮点击产生的相应事件，就可以给这个按钮写上点击事件onclick，根据onclick触发相应的事件。
基本格式：

事件="相应的处理方法"

<button id="btn" type="button" onclick="fun2()"
onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>

function fun2(){
alert("触发了单击事件");
}
function fun3() {
document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
}
function fun4() {
document.getElementById("btn").innerHTML="点击我试试";
}

html常见的事件如下：
在这里插入图片描述

JQuery

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。JQuery主要是通过选择选择器给相应的元素添加事件。
格式：

$(selector).事件(function(){
相应的处理方法
})

常用DOM事件列表：
在这里插入图片描述
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//页面加载事件
$(function(){
//给所有的button绑定单击事件
$("button").click(function(){
//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个
按钮，this此时是JS对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有的超链接绑定鼠标移上事件
$("a").mouseover(function(){
var str=$(this).html();
$(this).html("鼠标移上-"+str);
});
//给所有的超链接绑定鼠标移出事件
$("a").mouseout(function(){
var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){
$(this).css("color","red");
});
});
</script>
</head>
<body>
<a href="#">首页</a> &nbsp;
<a href="#">零食</a> &nbsp;
<a href="#">鲜花</a> &nbsp;
<button type="button">普通按钮1</button>
<button type="button">普通按钮2</button>
<button type="button">普通按钮3</button>
</body>
</html>

九、 jQuery与js对象的转换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery与js对象的转换</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
//获取所有的div元素的集合
var list=$("div");
//遍历集合
for(var i=0;i<list.length;i++){
//list[i] 是js对象，打印出来是HTMLxxxElement格式的对象都是js对象，
//操作的时候都要遵循js对象的操作方法,例如获取元素内容使用innerHTML属
性
console.log(list[i]);
//将js对象转换为jQuery对象，可以使用所有jQuery方法，,例如获取元素内容使用html()函数
console.log($(list[i]));
}
});
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

其实JS和JQuery的作用远不止这些，这只是简单的列举了它们的一些不同之处，如果真的想要学习前端技术，这还有好多东西是要去挖掘的。如果只是想简单的入个门，只是想对后面学后端做一些铺垫的话，就没有必要去深入了。

西北2020

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和JQuery

日常闲聊：最近一直在认真学习，学的有点多，也有点快。感觉快消化不掉了，所以我决定暂停两天来总结一下。这个星期学了点前端技术，先从简单的html开始学，再到css，接着就是JavaScript，再就是JQuery，最后还学了bootstrap。实话说，学完这些我只用了三天的时间。感觉一下子接收了太多新鲜的东西，脑子有点膨胀。我反思了自己，发现自己的一个致命缺点，无论学什么都只想着快点学完，完全没考虑自己真正吸纳了多少，总结下来就只顾着学，却忽略了练习。所以我得改，不能一昧的求快，还要把所学的知识都变成自己的掌
复制链接

扫一扫