码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript

时间：2021-04-07 11:05:06      阅读：0      评论：0      收藏：0      [点我收藏+]

标签：efi   only   你好   添加元素   hash   path   document   remove   birt   

JavaScript

严格检查模式strict

  • ‘use strict‘ ; ----严格检查模式，预防JavaScript的随意性导致产生的一些问题，放在script标签的第一行
  • 局部变量建议使用let去定义
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        ‘use strict‘;
        let i = 1;
    </script>
</head>
<body>

</body>
</html>

数据类型

  • 字符串
\u4e2d  \u####  unicode字符
\x41            Ascll字符
  • 多行字符串编写
//tab 上面 esc下面
<script>
        ‘use strict‘;
        let name = "niyun";
        let age = 26;
        var msg = `你好呀
sss
hello`;
        console.log(msg)
    </script>
输出：
你好呀
sss
hello
  • 模板字符串
<script>
        ‘use strict‘;
        let name = "niyun";
        let age = 26;
        var msg = `你好呀,${name}`;
        console.log(msg)
    </script>
  • 字符串的不可变性

数组

  • Array可以包含任意的数据类型
var arr = [1,2,3,4,"ss"]
  1. 长度：arr.length 给数组赋值，数组大小会发生改变
  2. indexOf，通过元素获得数组下标索引，字符串"1"和数字1是不同的
  3. slice（）：截取Array的一部分，返回一个新数组，类似于String中的substring
  4. push（），pop（） 尾部
  5. unshift（），shift（） 头部
  6. 排序sort（）
  7. 元素反转arr.reverse（）
  8. concat（）：数组尾部添加元素，但是不改变原数组，只是返回一个新的数组
  9. 连接符arr.join（‘-’）：打印拼接数组，使用特定的字符串连接
  10. 多维数组

对象

若干个键值对

var 对象名 = {
    属性名：属性值，
    属性名：属性值， 
    属性名：属性值
}

  • 动态的删除属性，通过delete 对象.属性

  • 判断一个属性是否在这个对象中

‘age‘ in person
true
//由于person继承了Object类，所以有toString属性
‘toString‘ in person
true
  • 判断一个属性是否是这个对象自身拥有的用hasOwnProperty（）
person.hasOwnProperty(‘toString‘)
false
person.hasOwnProperty(‘age‘)
true

iterator

  1. 遍历数组
//通过for of 遍历值，通过for in 遍历下标
<script>
‘use strict‘;
var arr =[3,4,5];
for (let number of arr) {
    console.log(number)
}
</script>

<script>
‘use strict‘;
var arr =[3,4,5];
arr.name = "sss";//早期的漏洞
for (let number of arr) {
    console.log(number)
}
</script>
注意：这里不能把name打印出来
  1. 遍历map
<script>
‘use strict‘;
var map =[["tom",3],["jack",4],["hahha",5]];
for (let number of map) {
    console.log(number)
}
</script>
  1. 遍历set
<script>
‘use strict‘;
var set = new Set([3,4,5]);
for (let number of set) {
    console.log(number)
}
</script>

函数

定义函数方式一

function abs(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义函数方式二

var abs = function(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

function(x) {...}这是一个匿名函数。

arguments

arguments是一个JS免费赠送的关键字获得入参；

rest

function aaa(a,b,...rest) {
            console.log(a);
            console.log(b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用...标识

变量

提升变量的作用域

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

全局对象window

var x = "xxx";
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert（）这个函数本身也是一个window变量

规范

由于我们所有的全局变量都会绑定到window上。如果不同的js文件使用相同的全局变量，冲突~>如何能够减少冲突？

//唯一全局变量
var kuangApp = {};

//定义全局变量
kuangApp.name = "kaungshen";
kuangApp.add = function (a,b) {
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

局部作用域let

function aaa() {
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i);//问题：i出了作用域还可以用？
}
输出：0~10

使用let解决局部作用域冲突的问题

function aaa() {
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i);
}
输出：0~9 Uncaught ReferenceError: i is not defined

apply

在js中可以控制this指向！

<script>
    function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var kuangshen = {
    name: ‘秦疆‘,
    birth: 2000,
    age:getAge
}
</script>
//kuangshen.name
//方法一定要带括号()
//kuangshen.age()   ok
//getAge   NaN      window

this是无法指向的，是默认指向调用它的那个对象；

apply

<script>
    function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var kuangshen = {
    name: ‘秦疆‘,
    birth: 2000,
    age:getAge
};
</script>
//getAge.apply(kuangshen,[])
//21

内部对象

标准对象：

typeof 123
"number"
typeof ‘123‘
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

JSON

  • Z在JavaScript一切结尾对象，任何js支持的类型都可以用JSON来表示；number，string。。。

  • 格式：

    对象都用{}

    数组都用[]

    所有的键值对都是用key-value

  • JSON字符串和JS对象的转化

//JSON字符串(JSON字符串的键都为字符串)转化为对象
var obj = JSON.parse(‘{"name":"niyun","age":26}‘);

//对象转换为JSON字符串（JSON字符串的键都变为字符串）
var user = {
    name:"niyun",
    age:26
};
var jsonUser = JSON.stringify(user);

Ajax

  • 原生的js写法 xhr异步请求
  • jQuery封装好的方法 $("#name").ajax("")
  • axios请求

面向对象原型编程

原型：

var Student = {
    name:"qingjiang",
    age:3,
    run:function () {
        console.log(this.name+" is running!!!");
    }
};
var xiaoming = {
    name:"xiaoming",
    age:3
};
var bird = {

    fly: function () {
        console.log(this.name + " is fly..")

    }
};
xiaoming["__proto__"]=bird;
// xiaoming["__proto__"]=Student;
// xiaoming.__proto__=Student;

通过__proto__实现继承

class继承

class关键字，在ES6之后引入的

  1. 定义一个类，属性，方法
class Student {
    constructor(name) {
        this.name = name;
    };
    hello(){
        alert(this.name + ": 你好啊");
    }
}
var niyun = new Student("倪运");
  1. 继承
class Student {
    constructor(name) {
        this.name = name;
    };
    hello(){
        alert(this.name + ": 你好啊");
    }
}
var niyun = new Student("倪运");

class Xiaohong extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
}
var xiaohong = new Xiaohong("小红",100);

操作DOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

JavaScript诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • Firefox

三方

  • QQ浏览器
  • 360浏览器

window

window代表窗口

window.innerHeight
817
window.innerWidth
628
window.innerWidth
407
window.outerHeight
920
大家可以调整浏览器窗口试试。。。

Navigator

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断代码和编写代码

screen

代表屏幕尺寸

screen.width
1440
screen.height
960

location

location代表当前页面的URL信息

location
Location {ancestorOrigins: DOMStringList, href: "https://www.baidu.com/", origin: "https://www.baidu.com", protocol: "https:", host: "www.baidu.com", …}
ancestorOrigins: DOMStringList {length: 0}
assign: ? assign()
hash: ""
host: "www.baidu.com"（重点）
hostname: "www.baidu.com"
href: "https://www.baidu.com/"（重点）
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ? reload()（重点）--刷新网页
replace: ? replace()
search: ""
toString: ? toString()
valueOf: ? valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

location.assign(‘https://blog.kuangstudy.com‘)//所有访问百度的都会调到这个页面

document

document代表当前页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title="kuangshen"
"kuangshen"

获取具体的文档树节点

<dl id="app">
    <dt>javaSE</dt>
<dt>javaEE</dt>
<dt>java</dt>
</dl>
<script>
    var dl = document.getElementById("app")
</script>

获取cookies

document.cookies

劫持cookies原理

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

服务器端可以设置cookies：httpOnly

history

history.back()//后退
history.forward()//前进

操作DOM对象（重点）

DOM:文档对象模型

核心

浏览器网页就是一个DOM树形结构

  • 更新：
  • 遍历
  • 删除
  • 添加

要操作一个DOM节点，就必须先获得这个DOM节点

获得DOM节点

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName
father.children
father.firstchild
father.lastchild

更新节点

id1.innerText = ‘345‘
id1.innerHTML = ‘<strong>123</strong>‘

操作js

id1.style.color = ‘yellow‘;//属性用字符串包裹
id1.style.fontsize = ‘100px‘;//中划线用驼峰规则代替

删除节点

删除节点的步骤：首先获取父节点，再删除自己

var self = document.getElementById(‘p1‘);
var father = p1.parentElement;
father.removeChild(self)

删除多个节点的时候，children是时刻变化的

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以了，但是这个DOM节点已经存在元素了，不想删除原来的，通过追加

<!--插入DOM-->
    <p id="js">javascript</p>
<div id="list">
    <p id="se">JavasSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById("js");
var list = document.getElementById("list");
</script>

list.appendChild(js)； ----将id为js的p标签剪切到id为list的div标签的最下面

newP.setAttribute("id","newP")//万能设置属性
list.insertBefore(js,ee);//在id为ee的节点前面插入id为js的节点

操作表单

MD5工具类：

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>

提交表单，md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form</title>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
        </script>
    </head>
    <body>
        <!--onsubmit= 绑定一个提交测试的函数，返回true通过，返回false不提交这个表单-->
        <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
            <p>
                <span>用户名：</span><input type="text" name="username" id="username">
            </p>
            <p>
                <span>密码：</span><input type="password" id="input-password">
            </p>
            <p>
                <input type="hidden" name="password" id="md5-password">
            </p>
            <p>
                <button type="submit">提交</button>
            </p>
        </form>
        <script>
            function aaa() {
                alert(1);
                var uname = document.getElementById("username");
                var pwd = document.getElementById("input-password");
                var md5pwd = document.getElementById("md5-password");
                md5pwd.value = md5(pwd.value);
                return true;
            }
        </script>
    </body>
</html>

jQuery

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="lib/jQuery-3.6.0.js"></script>
    </head>
    <body>
<!--
公式：$(‘选择器‘).事件
-->
        <a href="" id="test-jquery">点我</a>
        <script>
            $(‘#test-jquery‘).click(function () {
                alert("hello")
            })
        </script>
    </body>
</html>

文档工具站：jQuery文档工具站

JavaScript

标签：efi   only   你好   添加元素   hash   path   document   remove   birt   

原文地址：https://www.cnblogs.com/yunni/p/14619923.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！