js知识
js基础
什么是javascript
基于浏览器的解释型语言，嵌入在HTML文件中，由浏览器解释执行；
实现一些页面动态效果、表单验证、用户交互、数据传输等的功能
包括以下三个部分：
嵌入页面的方法：
- 直接设置元素的事件属性
- 嵌入方式
- 外链方式
以绑定事件为例，说明js嵌入页面：
//1.设置元素的事件属性
<div onclick="setTime(this);">点击计时</div>
//this 作为一个实参，传给函数的形式参数，为事件源
//但是函数内部的this关键字 是指向window
//也可以传入事件对象event, event.target 获取事件源
//2.嵌入方式，设置事件属性
<div id="setTime">点击计时</div>
<script text="text/javascript">
var div = document.getElementById("setTime");
div.onclick = function (){//实现计时}
</script>
//增加事件监听
div.addEventListener("click",function(){//实现计时})
//外链，引入写好的js代码
<script src='xxxx.js' type="text/javascript"></script>
事件，即用户的行为，如点击、切换焦点等
事件处理，元素监听事件，当事件发生时，自动进行一系列的操作
绑定，设置元素的事件属性
常用基础方法
弹窗alert，alert(“xxxx”)
控制台输出console(“xxx”,“xxxx”)
document.write(“xxxxxx”)，页面渲染后，再次执行（如事件中）会覆盖页面
用户输入弹出prompt(“your name”,“默认值”)
typeof obj；查看数据类型
instanceOf String；是否是该类的对象
isNaN(obj) 判断转数字的结果，可以转则返回false
类型转换：强制转换、自动转换（字符串拼接+）
//Number----> String
var a = 10;
var s = a.toString();//转为字符串，谁调用，把谁转为字符串
String.toString();//将String方法转为字符串
var s1 = a + "";//转为字符串，java可以拼接；python不可以拼接
var s2 = String(a);
//String--->Number
var num = Number(s2);//s2必须是数值字串;否则返回NaN
var num1 = Number.parseInt(s2);
var num2 = Number.parseFloat(s2);
Number(null);//0
Number(true);//1
Number(undefined);//NaN
语法规则
- ；可加，可不加
- 全局作用域、函数作用域的变量var; 块级作用域的变量let(ES6)；常量const (如：const VDOM)，不可修改
- js严格区分大小写；注释// /**/ Ctrl+/
- 变量命名，字母、数字、下划线、$；数字不开头
- 禁止使用关键字命名，小驼峰
var a,b,c; //undefined
a = 10;
const PI = 3.1415926
PI.toFixed(2);//常量、变量保留几位小数
- 数据类型
Number, 包含整数、小数
String, 单引号、双引号的一个或多个字符
Boolean, true/false
undefined, 未给值
Null, 空值
Object,对象类型{} ，引用类型
var obj = {};
obj.name = 'jack';
obj.name;//访问
obj["name"]//
操作符
+
−
∗
/
%
+ - * / \%
+−∗/%
+
=
+=
+=
−
=
-=
−=
∗
=
*=
∗=
/
=
/=
/=
%
=
\%=
%=
+
+
++
++
−
−
--
−−
//++ -- 这里跟java相同
var a = 10;
var b = a++;//先赋值，再++；运算中也是一样
var c = ++a;//先 ++ ，再赋值
a++ + ++a + a++； //a=10，运算结果为10+12+12；然后a为13
比较运算符
==, 值的比较，忽略数据类型
===，全等，数值+数据类型
10 == '10';//值相等 ; 同java还比较是否是同一对象；
10 === '10';//false，比较值、类型
'name' === 'name';//java中"name".equals("name") /==
逻辑运算符
&& 同python中的‘and’
|| 同python中的‘or’
！ 同python中的‘not’
a?a:b 三目 同python中的‘b = a if a else b’
//练习判断输入的年份是否闰年
var year = prompt("输入年份：");
var num = Number(year);//转为数值类型
if((num % 4 == 0 && num % 100 != 0) || num % 400 == 0 ){
alert("闰年");
}else{
alert("不是闰年");
}
分离事件绑定
即不使用内联的方式
<div id="test">测试</div>
<script>
var div = document.getElementById("test");
div.onclick = function(){};//绑定点击事件
div.addEventListener("click",function(){});//绑定点击事件
</script>
//isNaN(obj) 判断转数字的结果，可以转则返回false
//不可以转数字，则返回true
//练习：判断输入是否数字，打印是、不是
元素的隐藏、显示
display 属性
none; 隐藏
block;显示为块
inline; 行内
inline-block；行内块元素
案例：
实现3s 显示广告，点击X 关闭 这样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>广告案例</title>
</head>
<body>
<style type="text/css">
img {
margin: 0;
padding: 0;
}
#ad {
background-color: lightblue;
width: 300px;
/*宽度同第一张图片，将第二张图片挤下去*/
text-align: right;
/*第二张图片 靠右*/
/* opacity: 0.3; */
position: fixed;
/*脱离文档流*/
right: 0;
top: 100px;
z-index: 100;
/*图层级别*/
}
#ad .adPic1 {
width: 300px;
display: none;
}
#ad .adPic2 {
width: 50px;
opacity: 0.8;
display: none;
}
</style>
<script type="text/javascript">
// 3s后第一
setTimeout(function () {
var pic1 = document.getElementsByClassName("adPic1")[0]
var pic2 = document.getElementsByClassName("adPic2")[0]
//show pic
pic1.style.display = "inline-block";
pic2.style.display = "inline-block";
// bind event
pic2.onclick = function () {
//设置css 样式
pic1.style.display = "none";
pic2.style.display = "none";
}
},3000);
</script>
<div id="ad">
<img class="adPic1" src="./ad.jpg" alt="加载失败啦">
<!-- 图片之间的换行，会导致图片间有缝隙 -->
<!-- img行内块元素 -->
<img class="adPic2" src="./close.jpg" alt="">
</div>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae assumenda consequatur nostrum quas
pariatur, exercitationem iure perferendis illum omnis ab incidunt aspernatur perspiciatis, molestias placeat
magnam. A ut quam libero!</span><span>Temporibus deleniti debitis minus sequi? Sequi illo, dolorum eum minus
omnis sunt impedit unde obcaecati exercitationem, dolores dolor. Debitis iste deleniti quo animi, commodi
dolorum quibusdam hic totam dolor vero.</span><span>Corporis dolores expedita magni molestias quae adipisci,
magnam eius sapiente quidem. Harum provident nemo aperiam, quas ipsum, nisi facilis rem, minus hic labore
nobis molestiae distinctio libero exercitationem aspernatur culpa.</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, nisi. Culpa nobis minus nam officiis
distinctio voluptatem enim consectetur cupiditate non eum sit architecto tempore repellat, aut quia
doloribus cum.</span><span>Delectus molestiae mollitia, itaque, repudiandae doloremque odit recusandae,
labore nemo dignissimos libero voluptas. Ipsam ullam modi sequi ex voluptas earum facere, repellendus,
veritatis neque voluptates magni. Maiores praesentium ducimus recusandae?</span><span>Repellat id ut, vitae
laboriosam ducimus fuga ab doloribus rerum illum sed omnis molestiae amet. Inventore ullam corporis
provident excepturi tempora hic dolore animi voluptatem. Saepe, beatae! Dolore, rerum ipsam.</span></p>
<p><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit error officia cumque incidunt ab nemo vel,
iusto labore in quia a amet voluptates adipisci ad! Incidunt dolorem cupiditate suscipit
molestiae!</span><span>Sint qui provident consequatur, voluptas nostrum architecto eligendi accusamus veniam
dolore delectus corporis doloremque totam esse odit vel cumque vero temporibus eos itaque neque. Nostrum
deserunt voluptatum quae odit non?</span><span>Accusamus molestiae ea in vel adipisci exercitationem saepe
reprehenderit voluptates cum necessitatibus rem laudantium facilis dignissimos laboriosam, a sit reiciendis!
Atque itaque facere culpa eveniet placeat, ipsam obcaecati cupiditate recusandae?</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime rerum provident unde quia temporibus ipsa
corporis, quam obcaecati deserunt sunt dolore velit voluptas delectus quibusdam animi explicabo et,
assumenda minus?</span><span>Aperiam accusantium atque inventore iusto voluptatibus dolores neque
repellendus recusandae, reprehenderit, tenetur, distinctio quas consequuntur deserunt voluptate iste
suscipit consectetur? Iusto et quisquam, iste natus optio impedit quo modi minima!</span><span>Expedita,
voluptas. Voluptatibus perspiciatis quidem tempora, laudantium assumenda voluptatem non ipsum adipisci fuga
aut excepturi fugiat numquam praesentium. Sunt labore tenetur ipsa dolores vitae officia nesciunt ad
suscipit quibusdam iusto.</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ea accusamus culpa beatae deleniti
voluptatibus. Facilis tenetur optio blanditiis consequatur, eum nobis at totam veniam voluptates tempora
ullam vel repellendus?</span><span>Odit non ex quas magnam, blanditiis labore reiciendis mollitia impedit
sed. A, possimus reiciendis. Illo, magni facilis maiores, id ad illum voluptatibus quia, repudiandae in
aliquid quo eligendi veniam fugit!</span><span>Eaque quas nam quae accusamus obcaecati animi! Rerum error
sunt accusantium provident vitae odit excepturi culpa soluta doloremque. Assumenda, harum. Excepturi eaque,
obcaecati distinctio laboriosam aut error harum ratione quibusdam?</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, ut temporibus! Rem porro dolor
voluptates laudantium optio, quos corrupti! Id delectus nemo quae! Ipsa omnis praesentium culpa, adipisci ad
explicabo!</span><span>Debitis vel in totam impedit eligendi illum provident soluta placeat asperiores
veniam? Numquam fugit assumenda harum. Quod vero, eos suscipit numquam iure vitae, rerum sequi impedit
voluptatibus pariatur repellat perspiciatis.</span><span>Molestiae, perferendis. Repellat aut tempora fuga
veniam doloremque hic dolores cupiditate provident mollitia voluptatem quaerat exercitationem non atque,
molestias quod qui fugit excepturi commodi ea dolorum. Quibusdam nesciunt totam quis!</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum perspiciatis sapiente cupiditate, qui
voluptates, dolorum rerum consequatur neque ipsum minima, repudiandae nihil fuga fugit? Similique ducimus
dicta nam cum quas?</span><span>Ab alias ipsa quis, nulla tempore quia ullam dolore? Cupiditate aliquid et
quasi cum perferendis repudiandae quae natus minima esse aperiam laudantium vero consequatur eum, ducimus ad
repellat iusto mollitia?</span><span>Quae, obcaecati excepturi doloribus velit accusantium corrupti facilis
iusto animi cum ipsam repudiandae exercitationem architecto alias fugit dolorem incidunt quas illo esse.
Temporibus explicabo aspernatur esse ab, unde aliquam quam?</span></p>
<p><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis dolor obcaecati dolorum fugit dolores
exercitationem. Tenetur modi, hic eveniet porro ea ad facere aliquam a ratione corrupti possimus expedita
quam.</span><span>Aut architecto expedita quae minus ut fugit, tempore repudiandae fugiat dolore,
accusantium qui distinctio animi quidem similique soluta esse ab aperiam dicta veritatis, consequuntur
deserunt! Nisi ullam architecto adipisci optio!</span><span>Labore voluptates minima iure doloremque aperiam
sequi molestias id magnam nihil possimus fuga itaque dolores, esse soluta assumenda similique omnis officia
atque expedita. Magnam iusto deleniti officiis blanditiis cupiditate ipsa?</span></p>
<p><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus vero ea ullam explicabo recusandae officiis
nihil necessitatibus distinctio nobis ipsam eveniet dolorem nulla sit reiciendis laborum, inventore at alias
aspernatur.</span><span>Fugit ipsum nemo ipsam minus quis, velit quibusdam adipisci. Ad asperiores
repudiandae voluptatibus placeat ipsam, enim aut sapiente, accusamus amet quas blanditiis nihil delectus
consequatur repellendus ipsum eaque quaerat mollitia.</span><span>Temporibus doloribus molestias nam sit?
Cumque voluptatibus corporis iste, sit debitis facere culpa ut totam perspiciatis cupiditate, accusamus
optio eveniet necessitatibus. Rem similique, cupiditate eligendi eveniet rerum in assumenda totam.</span>
</p>
<p><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt fugiat ad omnis, iusto voluptas dolor
perferendis alias vero dignissimos magnam, aperiam nobis facilis? Dolore mollitia, molestiae accusamus
numquam iusto eos!</span><span>Obcaecati quam id atque suscipit ab! Odit fugit nam architecto? Ea,
reiciendis sit eveniet obcaecati quo corrupti molestias doloribus explicabo perspiciatis facilis atque fugit
quaerat hic iusto, fuga placeat consequatur.</span><span>Facilis nesciunt aliquam nisi in illum minus,
ratione quibusdam quo enim? Facere voluptatum dolorem voluptatem harum eaque ullam reprehenderit amet velit
rerum eveniet, labore incidunt blanditiis quaerat, nam asperiores pariatur.</span></p>
</body>
</html>
实现带模态的动态效果
点击，弹出登录框，位于页面的正中央，使用遮罩层盖住底层页面
注意：
div 块元素，默认占一行，没有高度（由内容填充）
设置width:400px; 生效
设置height:300px; 生效
设置width:100%; 父元素宽的100%
设置height:100%;父元素高的100%，若父元素没有高度，则该设置不生效！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Login window</title>
</head>
<body>
<style>
html,body{ /*群组选择器*/
height: 100%;
margin:0;
padding:0;
}
.bgLayer{
width: 100%;
height:100%; /*父元素必须得有高度*/
background-color: rgba(0,0,0,0.1);
position: fixed;
left:0;
top:0;
display: none;/*默认不显示*/
z-index: 100;
}
.login_block{
width:400px;
height:300px;
border-radius: 5%;
background-color: white;
position: absolute; /*脱文档流*/
top:50%; /*距离父元素上边距*/
left:50%;/*距离父元素左边距*/
/* 外边距margin为正值，向右、下移动；
外边距为负值，向左、上移动
*/
margin-top:-150px;
margin-left:-200px;
/* 内部表单 居中 */
text-align: center;
font-size: 30px;
}
.closeBtn{
width:100%;
background-color:lightblue;
}
</style>
<div class="content">
<p><span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, praesentium neque cumque illum at tempore error voluptate suscipit earum reiciendis dolore, cum obcaecati impedit debitis corrupti consequuntur ea! Incidunt, reprehenderit?</span><span>Error dolor molestiae doloremque? Repellat consequuntur tenetur quae voluptates, libero asperiores a odio est odit animi dolor blanditiis quo exercitationem eos assumenda ratione ex labore consequatur ab laborum dolores eveniet?</span><span>Provident omnis quidem in molestias deserunt harum nisi illum natus, molestiae sed quisquam debitis doloribus eius libero at sequi quae dolores. Dolor iusto inventore velit quo doloribus quasi, alias sunt?</span><span>Esse quasi quia, vitae asperiores qui pariatur expedita autem, eos error reprehenderit voluptates debitis laudantium similique unde provident veritatis in aspernatur labore deleniti repellendus delectus id commodi? Debitis, amet eos.</span><span>Sunt eligendi accusamus labore voluptate odio, non perferendis sed architecto nobis ipsa quisquam illo ipsum iusto dicta pariatur impedit ea atque modi quas consequatur? Dolore enim nulla reiciendis placeat officiis.</span><span>Itaque quidem animi et necessitatibus vitae! Optio accusamus odio voluptatibus repellendus fugit nisi aut, consectetur expedita quas deserunt in aspernatur! Dignissimos quisquam totam architecto facere dolorem eaque earum distinctio fuga!</span><span>Necessitatibus facilis mollitia fuga cumque voluptatem. Voluptates labore nobis saepe quibusdam facilis sequi maxime dicta alias eos nesciunt, quae, cumque libero, consectetur quod adipisci. Amet quidem vero aspernatur maiores sed.</span><span>Laborum asperiores atque, cupiditate aspernatur totam cum iste voluptatem reiciendis? Cupiditate quibusdam, fugiat reprehenderit, maiores sed, aliquid consequatur ea totam aperiam iure voluptatem blanditiis impedit asperiores unde sit ipsam neque.</span><span>Sint suscipit voluptas ab aspernatur aperiam quidem vitae provident officia dignissimos, quasi id repudiandae at, perspiciatis voluptatem earum nulla dolor praesentium unde sit neque labore quo? Harum veniam possimus iusto?</span><span>Modi adipisci maiores rerum nisi quasi sit repellat maxime omnis soluta ratione ipsa blanditiis, nostrum cumque? Dolores ducimus exercitationem quia ipsum modi voluptatibus officia quibusdam debitis! Doloribus eum molestiae saepe!</span><span>Quos sequi sit, architecto totam assumenda non, omnis similique quam voluptates accusamus, id earum consectetur alias. Vel sint, enim numquam nostrum earum hic. Nulla animi obcaecati dolorum voluptas nesciunt culpa.</span><span>Consequuntur unde quia dignissimos, earum autem cum! Distinctio dolor porro, laborum quae explicabo beatae accusamus, a similique odio reiciendis nulla exercitationem dolore, minus sed quis ex ipsa harum maxime! Adipisci.</span><span>Corrupti saepe, officiis sunt optio laborum porro vero tempora? Vero nisi doloribus blanditiis iusto saepe vitae, consequuntur officiis qui sapiente beatae aspernatur debitis impedit ea quae laborum quod, excepturi animi?</span><span>Accusamus, praesentium? Error et sit dolore itaque asperiores ratione placeat adipisci modi beatae rem aliquam inventore vel, animi mollitia voluptates eius consequuntur cupiditate dolores earum necessitatibus vero velit blanditiis! Suscipit?</span><span>Praesentium incidunt nihil quos laudantium exercitationem deserunt atque quis voluptate saepe in ratione eum et, mollitia cumque fugiat fuga illo vero iste corporis beatae quidem, veritatis quo non! Perspiciatis, sequi.</span><span>Magnam aperiam perferendis ipsam vero, quis quidem dolor quia non neque quod eos veritatis et mollitia consectetur quo quasi facilis quam nobis minus soluta eaque culpa vitae. Soluta, esse saepe.</span><span>Non eum dicta numquam architecto est delectus veritatis soluta qui quo quod tempora expedita sunt officia velit, cupiditate odit vel dolores eveniet facilis fugit atque, repudiandae quam excepturi! Sapiente, quis?</span><span>Cupiditate, laudantium. Suscipit quod, id accusantium cupiditate eius, dolorum quidem fugit sunt adipisci corporis exercitationem rem iure officiis sapiente ipsum veniam expedita. Blanditiis, unde quisquam magni fuga mollitia necessitatibus non?</span><span>Praesentium eius illo voluptas officia nam labore, consectetur consequatur quo vel temporibus aperiam corrupti unde? Maxime delectus ullam unde enim totam! Obcaecati impedit sequi cum rerum culpa a maxime tempore!</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ducimus optio corrupti dolore distinctio eius ex praesentium sed. Modi reprehenderit molestiae sequi voluptas, explicabo enim voluptatum ipsa! Temporibus, facere architecto.</span><span>Id rem nostrum alias, laborum, maxime labore ab voluptatum accusamus exercitationem assumenda quasi incidunt enim! Accusamus nemo debitis doloremque, reprehenderit odio veritatis voluptas reiciendis molestias veniam provident repellat accusantium? Voluptate.</span><span>Expedita in, aut quisquam repudiandae explicabo soluta molestiae aliquam obcaecati quam minus doloremque nesciunt sed velit quidem distinctio dignissimos fuga id harum, perferendis nisi animi officiis. Omnis commodi impedit voluptatibus.</span><span>Ut voluptas nemo sunt qui omnis recusandae ea aliquam illum laudantium excepturi quasi ex sint, optio nulla iusto tenetur, ab ad autem sapiente. Fuga voluptatibus aliquid eligendi ab excepturi? Eos.</span><span>Laboriosam officiis ipsam nisi minus repudiandae iure culpa quam natus labore cupiditate facilis repellat perspiciatis amet magnam suscipit molestias a quas quis, nihil distinctio! Veniam nostrum hic voluptatum veritatis aliquam?</span><span>Pariatur, unde nesciunt? Perferendis illum earum modi cumque officia facere quia aperiam hic maiores, quaerat laboriosam ipsum quidem asperiores, ipsa illo! Cupiditate eum praesentium itaque voluptatem sapiente perferendis pariatur rerum.</span><span>Nobis ab, sapiente dignissimos temporibus doloribus, soluta obcaecati adipisci iusto laborum voluptatum quae amet officiis quidem, velit vel ipsa ullam. Amet neque, dolor cum error earum fuga ipsum! Magni, odio?</span><span>Delectus quod voluptatum nam harum iusto eum eveniet consequatur incidunt unde, necessitatibus quam rerum voluptate vero earum pariatur facilis, exercitationem fugiat dolores velit. Quas magni doloribus, atque saepe doloremque molestias?</span><span>Sit facere ipsam, et vero magni, consectetur obcaecati reiciendis provident cum, quo repellendus optio autem quae sapiente explicabo rerum quibusdam dignissimos? Odio ipsum aspernatur, necessitatibus nulla saepe cumque ut soluta.</span><span>Ipsum quasi error repudiandae veniam omnis ea sequi, enim fuga dolorem. Quis perferendis, ullam quod modi facilis velit iste omnis sequi dolores non labore? Consequatur ducimus numquam natus atque exercitationem?</span><span>Nostrum maiores voluptates perferendis vitae repudiandae, accusantium quos itaque sint aliquid voluptate deleniti, labore magnam sit eligendi corrupti. Quisquam autem nihil veniam quam, placeat iure alias laboriosam vitae labore blanditiis.</span><span>Porro cum officia adipisci quos quas rem repellendus atque, provident accusantium dolorem dicta est quae commodi, sed nemo illo nam, doloremque ratione odit. In ipsa perspiciatis repellat cumque, eaque culpa.</span><span>Earum inventore tempore suscipit molestiae? Quas perferendis, saepe rerum ut repellendus neque aut voluptates mollitia nemo nihil, laborum cupiditate facere fuga. Repellat maiores nam rem quam voluptates vitae dolorum ab.</span><span>Blanditiis, consequatur iure esse dolor qui maxime? Deserunt dolorum tenetur eligendi cumque molestiae quos suscipit asperiores explicabo perferendis? Quidem reiciendis tempora deleniti commodi minima perferendis veniam aperiam odit. Voluptates, aperiam!</span><span>Aliquam error minima sint! Sequi, sapiente. Adipisci, eum. Eius voluptas laboriosam quam incidunt nobis, harum qui dicta similique repellat, ipsam officia fuga eos ipsa nam recusandae. Illo consequatur dolore magnam.</span><span>Deleniti sed ratione repellat, accusamus enim minima tempora odit quibusdam doloribus ea possimus. Veniam vel dolore, non optio deleniti quia quos, magnam quibusdam maxime quasi ipsa! Commodi nostrum odit blanditiis.</span><span>Sed atque beatae consequuntur? Ullam inventore aliquam, labore fuga incidunt deleniti vel, quo dicta quisquam molestias perferendis amet eveniet autem deserunt reprehenderit nisi soluta odio vero esse dignissimos necessitatibus ex?</span><span>Ab tenetur amet facere sint accusamus dicta aliquid quo alias iste praesentium officiis labore, aut dolores velit. Sequi laudantium alias quae dolores est atque mollitia dignissimos soluta dolorem hic. Voluptatum.</span><span>Eaque amet maxime ad suscipit eum atque nisi in soluta! Totam praesentium explicabo iure dolorum doloremque eaque debitis fugit quisquam atque voluptatum incidunt animi quidem amet omnis, impedit quae a.</span></p>
<p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt ad a pariatur, quisquam quibusdam eos fugit cumque veritatis eaque, totam dolorum, at officia repellat optio voluptatum fuga commodi recusandae magni.</span><span>Iusto sint labore illum minus ipsum eos minima, soluta enim error est pariatur molestias expedita necessitatibus placeat dicta fugiat quasi culpa nihil suscipit at impedit repellendus in repudiandae fuga. Quia?</span><span>Vel perspiciatis earum deserunt error, laudantium at magnam vitae, ex praesentium amet similique provident explicabo ipsum recusandae, in nulla enim iusto modi autem ipsa? Saepe, dicta ipsa! Corporis, cum ut.</span><span>Molestiae alias harum fuga minima pariatur, aspernatur ut eos adipisci voluptates, dolores tempora cumque earum sapiente! Dolor mollitia voluptate sed, reprehenderit velit dicta! Sapiente quae nobis dolores tempora cumque? Quia?</span><span>Dolor molestias, rerum quae dolore qui at accusantium itaque repellendus expedita, temporibus, consectetur quaerat atque fugit aliquid. Quam, sapiente. Error laudantium consequatur sed hic tempora repellat, accusamus voluptatibus sequi esse.</span><span>Officiis repudiandae temporibus aut! Quas nam numquam ducimus facere excepturi quia ullam rerum nemo laboriosam esse eaque animi quasi ut vel deleniti repudiandae voluptatibus temporibus explicabo, nostrum hic quisquam sequi!</span><span>Ipsa voluptate error eveniet veniam deleniti! Ipsa, maxime esse itaque illo recusandae odit. Saepe nam impedit, eligendi expedita quod eaque, ipsam, fugit et animi quae optio in similique at voluptas?</span><span>Molestiae neque qui alias quae, architecto eos dolorum possimus. Nemo saepe laudantium praesentium expedita illo asperiores enim cupiditate ex quo vel dolorum harum qui perspiciatis veniam dicta, itaque maxime sint.</span><span>Cumque impedit nisi obcaecati doloribus expedita? Necessitatibus sequi consequuntur libero blanditiis eaque optio vitae iste explicabo deserunt autem exercitationem iusto, incidunt qui est magnam, culpa sed repudiandae consectetur fugit tenetur!</span><span>A, neque modi natus numquam alias voluptatibus eius eveniet aliquam tenetur officiis corporis, nulla pariatur! Blanditiis illo, voluptas, cumque nulla eligendi voluptates commodi quae quas tenetur repellendus assumenda sint similique?</span><span>Quibusdam beatae dolore repellat iure cupiditate? Animi iste asperiores reprehenderit illum, aut natus! Voluptas delectus sapiente quisquam molestiae earum facilis, in excepturi, nam, minima ipsum dignissimos veniam! Id, blanditiis doloremque!</span><span>Ipsam numquam assumenda rem consequuntur odio, eius quae dolorem, sunt quis aut asperiores quasi quaerat nesciunt repudiandae nemo provident accusantium! Maxime, distinctio ab earum adipisci omnis ut necessitatibus hic obcaecati.</span><span>Delectus, officiis reiciendis, perferendis sapiente excepturi repellat tempore, ad aliquam libero esse illo ab corporis facere quo. Omnis illum cupiditate consequatur iste vitae veritatis? Tempore, omnis! Vero rerum ullam cumque!</span><span>Facere obcaecati commodi alias nobis perspiciatis ratione debitis sint nisi, hic sapiente nulla optio quasi veniam excepturi atque voluptate modi saepe tempora nesciunt quaerat? Ducimus veniam rerum unde voluptatum earum.</span><span>Quae architecto voluptates, ex cupiditate porro molestias officia nobis fugit corrupti laborum, maiores excepturi ut saepe omnis eum perspiciatis! Odit exercitationem praesentium repellendus dicta in quam rem tempora mollitia eveniet!</span><span>Recusandae ea explicabo quidem amet quibusdam iusto dolore facere qui nesciunt, quo nobis quae vel illo! Iure distinctio commodi, ab eius id minus ad eum laudantium, excepturi soluta corporis delectus.</span><span>Quaerat mollitia officiis ullam incidunt rerum, illum amet consectetur aliquam est molestiae fugiat blanditiis doloremque? Nisi, eaque? Quod expedita perferendis qui, exercitationem, corporis voluptatem autem quae rerum vero nesciunt maiores.</span><span>Suscipit, praesentium corporis nostrum quasi eius sequi architecto, vel obcaecati cum aspernatur nemo nulla quas voluptatibus esse illo quisquam, laborum earum neque animi debitis dolorem? Minima aliquid sunt saepe dolorum.</span><span>Eos deleniti corrupti, in veritatis mollitia aliquam possimus, inventore aliquid odit aperiam eveniet necessitatibus quod expedita consectetur qui illum, placeat autem? Nesciunt rem magni sapiente fugiat cum omnis assumenda culpa!</span></p>
</div>
<!-- 背景遮罩层，带着后代元素一起 脱离文档流 -->
<div class="bgLayer">
<!-- 设置登录块 -->
<div class="login_block">
<div class="closeBtn">X</div>
<form action="">
<label for="">用户名:</label><br>
<input type="text" name="user" placeholder="输入用户名" maxlength="50"><br>
<label for="">密码:</label><br>
<input type="password" name="pwd" placeholder="输入密码" maxlength="50"><br>
<input type="submit" value="登录">
</form>
</div>
</div>
<script type="text/javascript">
// 点击body任意地方，触发事件
var content = document.getElementsByClassName("content")[0];
var bgLayer = document.getElementsByClassName("bgLayer")[0];//节点存在，只是不显示
var closeBtn = document.getElementsByClassName("closeBtn")[0];
content.onclick = function(e){ //增加的事件监听，而不是单单的onlick属性
bgLayer.style.display = "block"; //内联的style属性
console.log("点击了content");
console.log(this);//this 触发事件的对象
console.log(e);//e 事件对象本身
}
closeBtn.onclick = function(){
bgLayer.style.display = "none"; //为什么 无效果？？因为点击关闭，同时也点击了body!
// 不能在body上添加 显示登录框的 事件监听
console.log("点击了关闭");
}
</script>
</body>
</html>
js流程控制、函数
流程控制
- 顺序结构
按照顺序执行 - 选择结构
if/ switch
//1
if(true){}
//2
if(true){
}else{
}
//3
if(true){
}else if(){
}else if(){
}else{
}
//switch 全等匹配
switch(数值类型){
case 1:xxxx;break;
case 2:xxxx;break;
default:xxxxxx;
}
//若没有break,则从匹配到的位置依次往下执行
注意与Python区别
- 循环结构
while(){
}
do{
xxx;
}while();
for(var i;i<arr.length;i++){
xxx;
}
arr.forEach(e=>{console.log(e);})//箭头函数
函数
便于代码维护、重用
//普通函数
function myFunc(p){ //p形式参数，默认undefined
xxxx;
var a = 10;//函数作用域的局部变量
console.log(this);//
return xx;
}
//调用
myFunc(5); //实际参数 this 是window对象,可以查看其属性、方法
myFunc.call(4); //this 是第一个参数封装的对象,p接收第二个参数
//无名函数，常用于事件绑定
var a = function(){}; //a 引用函数栈地址
a();//执行
(function(){})(p)//调用
作用域
全局作用域、函数作用域；ES6新增块级作用域let
var a = 10;
function func(){
console.log(a);//先查找局部变量，有局部的声明，值为undefined
var a = 5;//声明局部变量，把声明提升到函数的顶部
console.log(a);
}
func();
console.log(a);
//输出结果 undefined，5，10
//块级作用域
{
var a = 10;
}
{
let b = 10;
}
获取DOM 节点
常用方法
document.getElementById("idValue"); //返回唯一元素
document.getElementsByClassName("className");//集合
document.getElementsByName("nameAttr");//集合
document.getElementsByTagName("div");//集合
document.querySelector("#idValue");//
node.innerHTML ;//可以放入标签、文本；获取、设置
node.innerText;//only text；获取、设置
value; //表单控件的属性值；获取、设置
var div = document.getElementsByClassName("test")[0];
console.log(div.innerHTML);//获取已有的内容
div.innerHTML = "<div>add content</div>";//设置新内容
获取DOM练习
在input组件中，输入内容，内容改变，则改变显示区域的内容，如下：
要求：
鼠标点击输入框，控制台打印‘获取焦点’
点击以为的地方，打印‘失去焦点’
内容改变（失去焦点时，先自动判断内容是否改变）时，显示在showArea区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取元素节点</title>
</head>
<body>
<!-- 输入组件 -->
<input type="text" name="content" id="test" placeholder="输入内容" maxlength="20">
<!-- 显示区域 -->
<div id="showArea">
</div>
<!-- 要求：
鼠标点击输入框，控制台打印‘获取焦点’
点击以为的地方，打印‘失去焦点’
内容改变（失去焦点时，先自动判断内容是否改变）时，显示在showArea区域
-->
<script type="text/javascript">
var input = document.getElementById("test");
var content = document.getElementById("showArea");
input.onfocus = function(){
//获取焦点事件
console.log("获取焦点");
}
input.onblur = function(){
console.log("失去焦点");
}
input.onchange = function(){
console.log("内容改变");
content.innerHTML = input.value;
}
</script>
</body>
</html>
节点属性操作
e.getAttribute("attr");//获取属性值 也可以 e.attr;
e.setAttribute("attr",'value');//替换值 e.attr = value;
e.removeAttribute("attr");//删除属性 e.attr = "";
//内联的属性
//有些地方不支持 .属性的方式，还得用方法操作
- 练习：
实现点击切换图片的效果，动态改变图片的src，
图片、文本等内容会超出div块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换</title>
</head>
<body>
<style>
.container {
width: 200px; /*尽管div设置了宽高，但是里面的内容会超出，溢出*/
height: 300px;
background-color: lightblue;
/* 容器块 居中显示 */
position: fixed;
left:50%;
top:50%;
margin-left: -100px;
margin-top: -150px;
}
.showImg{
width:200px;
height:300px; /*图片要设置大小*/
}
</style>
<!-- 容器 div块、img行内块、button行内元素-->
<div class="container">
<img class="showImg" src="images/dog1.jpg" alt="dog1加载失败">
<button class="changeBtn">切换></button>
</div>
<script type="text/javascript">
var btn = document.getElementsByClassName("changeBtn")[0];//元素集合，通过索引访问
var img = document.getElementsByClassName("showImg")[0];
var i;
btn.onclick = function () {
// 实现循环切换图片，所有图片只有最后数字不同
// 获取当前的图片链接
var url = img.src; //img.getAttribute("src")
//划分字符串，返回数组
var arr = url.split(".");
console.log(arr)
//获取链接字符串最后的序号
var ord = arr[0].charAt(arr[0].length - 1)
var fileName = arr[0].substring(0,arr[0].length - 1);
console.log(ord,fileName);
i = Number(ord) + 1;
if(i<4){
img.src = fileName + i + ".jpg";
}else{
i = 1;
img.src = fileName + i + ".jpg"
}
}
</script>
</body>
</html>
- 练习
通过超链接的点击，实现页面内容的切换
<a href="">跳转到当前页</a>
<!-- 使用超链接+name属性 定义一个锚点 -->
<a href="#top">跳转到锚点</a>
<a href="/user/">从服务器的根目录开始</a>
<a href="login.html">从服务器的当前目录开始</a>
<a href="javascript:console.log('xx');">执行js，不再跳转</a>
<a href="javascript:;">空的js，不再跳转</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击超链接 切换内容格式</title>
</head>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla atque amet aliquam quisquam sapiente delectus repellat autem reprehenderit expedita natus esse, in modi minus suscipit quod magni. Voluptates, ratione itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eveniet vel provident delectus, quos facilis vitae repellat sunt laboriosam dicta magni illum ipsam non est quod iure ad dignissimos odio.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut, vitae fugit similique officiis velit, labore placeat reiciendis exercitationem nisi saepe dignissimos sapiente soluta quia repellat magnam, maxime neque assumenda! Quibusdam!
</p>
<!-- 直接绑定事件，点击时，执行事件处理程序，然后刷新当前页面
不让其跳转则，加入js，仅执行javascript
-->
<a href="javascript:;" class="changeBg">改变背景</a>
<a href="javascript:;" class="larger">字体变大</a>
<a href="javascript:;" class="smaller">字体变小</a>
<a href="javascript:;" class="restoreSize">字体恢复</a>
<style type="text/css">
p{
width:500px;
height: 100px; /*内容溢出*/
overflow: auto;/*hidden、scroll、auto*/
background-color: lightblue;
opacity: 0.8;
font-size: 20px;
}
</style>
<script type="text/javascript">
var changeBg = document.getElementsByClassName("changeBg")[0];
var larger = document.getElementsByClassName("larger")[0];
var smaller = document.getElementsByClassName("smaller")[0];
var restoreSize = document.getElementsByClassName("restoreSize")[0];
var p = document.getElementsByTagName("p")[0];
//创建一个数组
var aList = new Array(changeBg,larger,smaller,restoreSize);
function configOtherA(obj){
aList.forEach(o=>{ //
var label = o===obj?true:false;
// console.log(obj)
if(label){
// continue;箭头函数中不可以使用continue
}else{
//其他超链接 字体变蓝色
o.style.color = "blue";
}
})
}
changeBg.onclick = function(){
console.log("改变背景色");
// 更改文本框的样式
p.style.backgroundColor = 'lightpink';
// 更改超链接字体颜色
this.style.color = "red";
// 更改其他超链接的颜色
configOtherA(this);
}
larger.onclick = function(){
p.style.fontSize = "30px";
console.log(this); //触发事件的对象 this
this.style.color = "red";
configOtherA(this);
}
smaller.onclick = function(){
p.style.fontSize = "10px";
this.style.color = "red";
configOtherA(this);
}
restoreSize.onclick = function(){
p.style.fontSize = "20px";
this.style.color = "red";
configOtherA(this);
}
</script>
</body>
</html>
vscode 快捷键
Ctrl+/; 注释当前行， 或者注释选中的多行
Alt+shift+f ; 批量格式化代码
tab; 自动补全
Number("5")//转为数值
var a = 3.14;//var 没有块级的作用 let是本块内使用 const常量
a.toFixed()//转为整数字符串
固定长度的数组
Array(0)
Array(1)
…
Array(n)
- 数组的去重
const arr = [3,3,3,4,4,2,5];
const unique_arr = Array.from(new Set(arr)) //Set一种数据结构，类似数组，无重复
//Array.from 将Set对象转为数组
const arr1 = [1,2,3];
const arr2 = [4,5]
const arr3 = [...arr1,...arr2]//展开数组，放入
arr3.reduce((pre,cur)=>{return pre+cur})//数组求和
- 数组元素拼接
["a","b","c"].join();//默认逗号拼接
["a","b","c"].join(" ");//空格拼接
获取json对象的值
Object.values({name:"jack",age:23})---->["jack",23]
对数组的每个元素映射
["jack",23].map(functionname)
["jack",23].map(function(a){return a+5})
函数的调用
function test(a){
return a + 4;
}
test("jack");//"jack4"
test.call(this,"jack");//"jack4"
抛出异常
throw Error("xxxx")
5414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
