js基础

最新推荐文章于 2021-03-12 17:53:15 发布

置顶 XIAO_YuBaby

最新推荐文章于 2021-03-12 17:53:15 发布

阅读量233

点赞数

分类专栏： javascript 文章标签： js 基础知识

本文链接：https://blog.csdn.net/XIAO_YuBaby/article/details/98727627

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

`一.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);
    }
}

XIAO_YuBaby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础

js基础知识之常规语句一.js中的运算符分为三类：①算数运算符 ② 逻辑运算符 ③ 比较运算符运算符含义a++滞后自增++a提前自增/除法运算%取模（余数）x+=yx=x+y+①运算字符②字符串连接符==两个等号表判断===三个等号表绝对相等（数据类型，数值等均相等）...
复制链接

扫一扫