一.js基础知识之常规语句
运算符与语句 打印出九九乘法表和菱形
一.js中的运算符
分为三类:①算数运算符 ② 逻辑运算符 ③ 比较运算符
运算符 | 含义 |
---|---|
a++ | 滞后自增 |
++a | 提前自增 |
/ | 除法运算 |
% | 取模(余数) |
x+=y | x=x+y |
+ | ①运算字符②字符串连接符 |
== | 两个等号表判断 |
=== | 三个等号表绝对相等(数据类型,数值等均相等) |
!= | 不等于 |
!== | 返回值为true/flase |
>= | 大于等于 |
<= | 小于等于 |
&& | 与 |
|| | 或 |
! | 非 |
三目运算符 | (条件)?“条件成立时输出”:“条件不成立时输出” (可当做if语句的简写) |
字符串的拼接
var str = “122345” //将数字转化为字符串,用引号将数字包起来
var c = “122” + ss + “345” + “abcdef”; //字符串之间用加号连接
二. 语句
① if 语句
1.if(条件){
}
2.if(条件){
}
else{
}
3.if(条件){
}
else if(){
}
else
}
*逻辑选择结构 嵌套
② switch语句
switch (n){
case(1) : 执行语句1;break;//n=1时,执行此语句
case(2) : 执行语句2;break;
case (3):执行语句3; break;
default : break;
eg:
var price = 100;
var type = "白条";
var zhe = 1.0;
switch (type) {
case "微信支付":
zhe = 0.9;
break;
case "支付宝":
zhe = 0.85;
break;
case "白条":
zhe = 1.2;
break;
default :
zhe = 1.0;
break;
}
console.log(price*zhe);
③for语句
for(var ; ; ){
}
④while语句
while(条件){
执行语句; //先判断后执行
}
do{
执行语句; //先执行后判断,至少会执行一次
}
while(条件)
三.例题
①.打印出菱形
输入菱形的行数,按确定键,出现菱形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="请输入行数" id="jishu" />
<button onclick="lingxing()">确定</button>
<script>
function lingxing(){
var z=parseInt(document.getElementById("jishu").value);
for(var i=0;i<z;i++){
var x=Math.abs((z-1)/2-i);
for(var a=0;a<x;a++){
document.write("+");
}
var y=z-2*Math.abs((z-1)/2-i);
for(var b=0;b<y;b++){
document.write("*");
}
document.write("<br>");
}
}
</script>
</body>
</html>
②.输出金字塔型九九乘法表
1.直接ul中的元素居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
text-align: center;
}
ul,li{
list-style: none;
display: inline-block;
padding-left: 10px;
font-size: 20px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<script>
document.write("<ul>");
for(var a=1;a<10;a++){
for(var b=1;b<=a;b++){
c=a*b;
document.write("<li>"+a+"*"+b+"="+c+"</li>");
}
document.write("<br>");
}
document.write("</ul>");
</script>
</body>
</html>
2.计算距离,让呈现出居中状态
给每个span给个固定宽,计算距离
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.test2{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="test">
</div>
<script>
for(var i =1;i<10;i++){
document.write("<p>");
for(var j=1;j<=i;j++){
document.write("<span style='display: inline-block;width: 60px'>"+i+"*"+j+"="+i*j+"</span>");
}
document.write("</p>")
document.getElementsByTagName("p")[i-1].style.paddingLeft=(30*(9-i))+"px";
console.log(document.getElementsByTagName("p")[i-1].style.paddingLeft);
}
</script>
</body>
</html>
二.JS基本语法之变量的声明
函数与闭包
一.零碎知识点
1.js引入网页
1. 外部引入 <script src="" type="text/javascript"></script> type 可以省略
2.直接内嵌到网页里面 分为上部内嵌和下部内嵌 下部内嵌可以提高网页的性能
2.定义变量 var 变量名称
①变量在使用之前 切记初始化
②未初始化会报错 undefined / a is not defined 未定义类型
③变量的命名规则:驼峰式
3. 变量的数据类型(面试可能会询问)
number string object(数组,对象) boolean null undefined( function)
typeOf 检测变量的数据类型
var a=10;
var b="nihao";
var c=true;
var d={}; //对象
var e=[]; //数组
var f=null; //空对象引用
var g=undefined;
console.log(typeof a);//number
console.log(typeof b);//string
console.log(typeof c);//boolean
console.log(typeof d);//object
console.log(typeof e);//object
console.log(typeof f);//object
console.log(typeof g);//undefined
console.log(typeof showname);//function
function showname(){}
4.值类型和引用类型
①值类型
空间不变,值的类型在不停地替换
②引用类型
例如founction,objict({},[ ] , null) 对应引用空间,引用的位置是可以变化的
5.变量会被js 提前声明(给变量一个空间)
二 .函数
1.函数也会被提前声明
2.带返回值的函数
function showinfo() {
//执行代码
return '1';
}
var a = showinfo();
console.log(a); //a=1
3.带参函数 ( 形参 实参)
function showname(name, sex, age) { //形参
return name;
}
var name = showname("张三", "男", 18); //实参
console.log(name);
如果函数没有参数列表 传递参数怎么接收参数(***
)
argument 参数列表对象
function showData() {
//arguments 参数列表对象
//arguments 取值按照集合来取值 key:value 索引
console.log(arguments[0], arguments[1], arguments.length);//小花,18 , 2
}
showData("小花", 18);
4.匿名函数
不带函数名称的函数 --------- 不提前声明
list(); not a function 报错
var list = function () {
console.log(arguments); //参数列表对象
return arguments[0];
}
console.log(list(1, 2, 3));
5.自执行函数
其他函数调用后才会执行,自执行函数不用调用便会自己执行
执行函数自有形参,实参,有返回值(函数有的它都有)
// 有实参形参 返回值
var mm = (function (x, y) {
console.log(x, y); //1,2
console.log(arguments); //arguments[2]: 0:1 1:2
return x + y;
})(1, 2);
console.log(mm); //3
var temp = "object";
(function () {
console.log(temp); //undefined (函数会提前声明)
var temp = "student"; //函数提前声明给了个空间,将object覆盖住了
console.log(temp); //student
})();
三, js中变量的作用域(作用范围)
局部变量 :函数定义区
全局变量 : 整个js
var a=10; //全局变量
function f1() {
var m=15; //f1()的局部变量
console.log(m,a);
}
function f2() {
var m=1; //f2()的局部变量
console.log(m,a);
}
f1();
f2()
四.js中的闭包
闭包的概念:
① 使用别人的局部变量
②闭包会大量占用内存 ,会导致网页内存泄露
③尽量避免使用闭包 会将闭包的值存在内存里面
关于闭包的例题
①
function f1(){
var a=10;
return a;
}
function f2(){
console.log(f1()); //使用了f1中的局部变量a
}
f2(); //10
②
function f1() {
var a=1;
t=function () {
a++;
}
return function () {
console.log(a);
}
}
var a1=f1(); // a1 = return function () { console.log(a); }
a1();//1
t();
a1();//2
t();
a1();//3
③
function f1() {
var n = 999;
return function f2() {
return n;
}
}
console.log(f1()()); //999 第一个括号执行f1函数,第二个括号执行f1返回的f2
console.log(f1()); // return function f2() { return n; }
④
function f1(){
var b=10;
return function (){
b++;
console.log(b);
}
}
f1()(); //11
⑤
var name="global"; //全局变量
function foo(){
console.log(name);
}
function fooOuter1(){
var name="local"; //局部变量,注意作用域,出了作用域后就无效
foo();
}
fooOuter1(); //global
function fooOuter2(){
var name="local";
function foo(){
console.log(name);//local // 局部函数取就近
}
foo();
}
fooOuter2();*/
⑥
function test() {
var value =2;
return function (params) {
console.log(window.value*params); //6
console.log(value*params); //4
}
}
value=3;
var a = test();
a(2);
//js里面定义全局变量 全局方法 都是window属性 浏览器最大对象
⑦
var m=0;
function f2(n){
temp=function (){
m+=n;
}
temp();
//方法的重写
//tostring object String tostring 重写tostring 会自动执行String 类里面的tostring
f2.toString=function (){
console.log(1);
return m;
}
/*console.log(typeof f2.toString());*/
return f2;
}
console.log(f2(1)); // 1 一次只能写一个,要是在写m的值不为0,是已经运行过的m值
console.log(f2(1)(2)); // 3
console.log(f2(1)(2)(3)); // 6
三. dom元素的获取
在进行dom元素获取的时候注意 获取的元素是否初始化
一. 常规获取 (动态获取)
集合类型
document.getElementsByClassName()
document.getElementsByName(“div”) //括号里写标签名
document.getElementsByTagName() //标签必须写name属性
单个对象
document.getElementById()
例:
//HTMLCollection 数组 取元素对象 按照索引来取值([])
集合类型
var b = document.getElementsByClassName("block");
/* b.innerHTML="1111";*/ //错误写法
b[0].innerHTML = "1111";
单个对象
var a1 = document.getElementById("binfo");
console.log(a1);
在js里面不能进行隐式迭代 (不能操作一堆元素 只能操作单个元素)
二.静态获取
//通过选择器来获取元素
var a4 = document.querySelector("#binfo/.binfo"); //返回单个元素
var a5 = document.querySelectorAll("#binfo1/.binfo1"); //返回的是多个元素 NodeList 集合
// .binfo1 对应id只可返回一个元素
三,获取特定的元素
console.log(document.body); //获取body
console.log(document.documentElement); //html 获取
dom元素事件的操作
一. dom事件
* 键盘事件
onkeydown onkeyup onkeypress(鼠标按下加抬起:按键事件)
* 鼠标事件
onmouseover onmousemove onmouseout(包涵垂直离开)
onmouseleave(水平离开) onclick ondbclick onmousedown
onmouseup oncontentmenu(鼠标右击,出现菜单) onmouseenter(鼠标进入事件)
* 表单事件
onfocus(获焦) onblur(失焦) onselected onchange(改变)
* 浏览器事件
onload(加载完成) onreload (重新加载) onresize(浏览器窗口变化)
onerror(图片加载失败)
二.事件在js中的写法
1. 直接在标签上写
<a href="javascript:;" onclick="hello()">
<script>
function hello(){
alert("hello world!");
}
</script>
2.动态绑定事件
事件里面的this 代表的是当前正在执行的对象
语法: 事件.对象 = 函数 (不可一次性绑定多个事件)
①匿名函数
var btn = document.querySelector("#btn");
btn.onclick = function () {
alert("你点我");
btn.onclick=null;
}
语法: 事件.对象 = 函数名称(不加括号)
②其他函数
btn.onclick=showalert;// 函数名称 不加括号
function showalert(){
alert("你点我");
}
3.事件的监听
语法:对象.addEventListener(事件名 ,函数 ,flase/true);
①事件名不加 on
②flase 为冒泡 从里到外,true为捕获 从外到里 。若不写第三个参数则默认为冒泡
优点:① 可以绑定多个事件 (常规的事件绑定只执行最后绑定的事件)
可以给同名的事件,绑定多个事件处理程序
同名事件不会覆盖,而是会依次执行
②可以解除相应的绑定
语法: 对象.removeEventListener(事件名 ,函数 ,flase/true);
//绑定多个事件
btn.addEventListener('click',function ( ) {
alert('11111');
},false);
btn.addEventListener('click',function ( ) {
alert('2222');
},false);
//解除事件的绑定
<input type="button" value="click me" id="btn5">
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
this.removeEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>
冒泡与捕获
1.了解事件捕获与冒泡
冒泡: 当父级元素拥有同名事件时才会被触发
捕获: 去寻找与父元素具有同名事件的子元素
<ul>
<li>1</li>
<p>1111</p>
<li>2</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul");
var li = document.getElementsByTagName("li");
ul[0].addEventListener("click", function () {
console.log(1);
},true); //①事件的捕获,点击ul输出 1 2 外到里 ②若为事件的冒泡,输出2 1 里到外
li[0].addEventListener("click", function (e) {
e.stopPropagation();
console.log(2); //阻止事件冒泡,输出为 2
},true);
</script>
2.阻止冒泡
语法: e.stopPropagation( ); e为事件的执行参数
四.事件的执行参数
事件的监听与冒泡捕获事件 事件的委托
e表示正在触发的对象所对应的事件
document.body.onkeypress=function (e) {
e=e||window.event; //有时写这句话是为了浏览器的兼容性(可以省略)
console.log(e); //由上述图片可以看出e对应的是一个事件
console.log(e.keyCode); //获取按键键值 ASCII值
console.log(e.code); //获取键值 eg: keyA space....
}
//事件的执行对象直接添加事件匿名函数上面
另一种写法:
可以直接声明变量使用window.event 调用事件的执行对象
document.body.onkeypress=function () {
var e=window.event; //匿名函数括号中不写 e
console.log(e);
console.log(e.keyCode);
console.log(e.code)
}
e.pageX, e.pageY 鼠标移动的 x,y坐标
document.documentElement.onmousemove=function(e){
e=e||window.event;
console.log(e.pageX, e.pageY);
}
// e.clientX, e.clientY 有时为了浏览器兼容性将坐标写成下边这样
var x= e.pageX|| e.clientX;
var y= e.pageY|| e.clientY;
e.target
若鼠标移动事件 则会显示出鼠标当前在的位置的标签名
四.this对象
1.函数里边的this 指代window对象
function a(){
console.log(this); //window
}
a();
2.事件里边的this 指代当前执行事件的
对象
<button class="btn"></button>
<script>
var btn=document.querySelector(".btn");
btn.onclick=function(){
console.log(this); //<button class="btn"></button>
}
</script>
五.dom元素属性操作
1.js代码若写到header中
window.onload 加载完成事件 dom元素已经渲染完成
window.onload=function(){
这里边是你的js内容
}
2. js里面获取或设置元素的属性
1.
innerHTML
获取文本值,但可以自动解析标签
2.innerText
只获取文本值,无法解析标签
3.value
针对表单元素
<button id="btn"></button>
<script>
var btn = document.getElementById("btn");
console.log(btn);
btn.innerHTML="<span>123</span>";
btn.innerText="<span>123</span>";
btn.value="111";
btn.className="btn blist"; //js中给元素赋类名称(前面的为旧名称,后边的为新名称)
</script>
运行结果如图:
js获取其他属性方式
语法:对象.style.属性
eg : btn.style.backgroundColor
console.log(btn.getAttribute("id")); //获取id名称
console.log(btn.getAttribute("class")); //获取class名称
console.log(btn.getAttribute("style")); //获取style
元素自定义属性
getAttribute也可以用来获取自定义的属性
1.给元素设置自定义属性
data-src
setAttribute()
eg:①btn.setAttribute("data-src", "./img/1.jpg");
② < img data-src="./img/1.jpg">
2.读取自定义属性
btn.getAttribute("data-src");
3.js样式的相关操作
-
j s操作的样式为元素的行内样式
js不能直接eg操作内嵌或者外部样式 -
如何获取内嵌样式或者外部样式
window.getComputedStyle();
只可以获取,但没办法去更改
eg:window.getComputedStyle( btn.width);
js里面数据类型的强制转化
1.
parseInt
强转为整数型
2.parseFloat
强转为浮点型
var a = "123";
console.log(parseInt(a)); //123
var b = "1.23";
console.log(parseFloat(b)); //1.23
console.log(parseInt(b)); //1
var c = "100px";
console.log(parseInt(c)); //100
var m = "px100";
console.log(parseInt(m)); //NaN
六.事件的委托
事件的委托 click事件委托
父级把他的事件委托给特定子集
//输出的当前点击的元素
//找到委托的元素对象
<ul>
<li>111</li>
<p>5464</p>
<li>11222</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var li = document.getElementsByTagName("li")[0];
ul.onclick = function (e) {
var child = e.target || e.srcElement; //当前鼠标点击的对象
if (child.nodeName.toLowerCase() == "li") { //nodeName 节点名称 toLowerCase转化为小写
console.log(1);
}
}