JavaScript

2022-10-21 09:48:33

1、引入JavaScript

a、内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("test");
    </script>
</head>
<body>

</body>
</html>

b、外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js1.js"></script>
</head>
<body>

</body>
</html>

2、基本语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //所有得变量都是使用var来定义
       var num = 123;
       var name = "cling"
        alert(num+name)
        //console.log（变量）：用来在网页中得控制台来打印变量
    </script>
</head>
<body>

</body>
</html>

2.1 严格检查模式

在script标签得第一行中添加  'use strict'。

2.2多行字符串编写：

括在table键上面哪个键的里面

2.3 数组

a.slice（）截取array中的一部分，规则也是左边闭区间右边开区间。
b.push():压入到尾部。pop:尾部弹出
unshift:压入到头部。shift:从头部弹出
c.sort()排序。reverce()倒序
d.concat():修改数组，返回一个新的数组。但是原来的数组没有被破坏

e.join():拼接数组

2.4对象

a.定义

var person = {
	属性 ：属性值 ，
	属性 ：属性值，
	属性 ：属性值
}

b.动态添加、删除属性

		delete person name		//删除name属性
		person.haha = "hahah"		//添加haha属性

c.判断属性是否在对象中，其父类的属性也算
	属性 in 对象
d.判断对象自己本身的属性：

2.5 Map和Set

Map:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        var map = new Map([['tom',100],['jack',90]]);       //Map的定义
        var name= map.get("tpm")                            //通过key获取value
        map.set("cling",60)                                 //新增或则修改
        map.delete("cling")                                 //删除
    </script>
</head>
<body>
</body>
</html>

Set:无序不重复的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        var set = new Set([1,2,3]);         //创建set
        set.add(5);                         //添加
        set.delete(4)                       //删除
    </script>
</head>
<body>
</body>
</html>

iterator ：遍历Map和Set

for(let x of arr){
console.log(x)
}
for(let x of map){
console.log(x)
}
for(let x of set){
console.log(x)
}

3.1函数

//第一种方式：
    function abs(x) {
        ...
    }
    //第二种方式
    var  abs = function (x) {
        ...
    }

3.1.1全局变量的规范：

因为定义的全局变量都会绑定到Windows上。所以在使用了不同的js文件，就会使相同的全局便量发生冲突。为了避免这种冲突就需要使用自己定义的唯一空间名字中，来降低全局命名的冲突问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    var cling = {};			//定义自己的唯一空间
    cling.name = "cling";
    cling.age = 3
    </script>
</head>
<body>
</body>
</html>

3.1.2 局部的变量建议使用let定义

a.由于使用的var定义，所以在作用域之外后i还是可以使用。

b.使用let来定义后就使真的局部变量了

3.1.3 ES6中使用const定义的常量（全大写）不能更改

3.1.4 JSON和JS对象对比

        var user = {
            name:"cling",
            age:3,
            sex:'mail'
        }
        var jsonUser = JSON.stringify(user);    //对象转换为json字符串
        var obj = JSON.parse(jsonUser);         //json字符串转化为对象

3.1.5 操作BOM对象

a.window(浏览器窗口)

window.innerHeight
763
window.outerHeight
834
window.innerWidth
522
window.outerWidth
1536
window.alert("asdf")

b.location（当前的页面URL的信息）

location
Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms"
origin: "http://localhost:63342"
pathname: "/JavaScript/lesson1/js1.html"
port: "63342"
protocol: "http:"
reload: ƒ reload()
replace: ƒ replace()
search: "?_ijt=uj8je791vjtt6l1tg6jks02tms"
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location

c.document(文本内容)

document.title="cling"
'cling'

d.history

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

3.1.6操作DOM对象

获取节点

var h1 = document. getElementsBytagName(hl),
var p1= document. getElementById(p1);
var p2 = document. getElementsByctassName(p2);

更新节点

s.style.color='yellow';		 //s使已经获取的一个节点
'yellow'
s.style.fontSize='500px';
'500px'

删除节点

方法一

<body>
<div id="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    <ul id="ul">
        <li>li1</li>
        <li>li2</li>
    </ul>

    <script>
    </script>
</div>
</body>

方法二

注意：同时删除多个节点的时候，children的下表是时刻都在变化的。

插入节点

创建一个新的标签:

var newp = document.createElement('p'); //创建一个p标签
ul.append(newp);		//插入到ul中去
newp.id='newp'		//设置id
newp.innerText='cling'		//设置名字

4、表单操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <p>
        <span>username:</span> <input type="text" id="username">
    </p>
    <p>
        <span>password:</span> <input type="password" id="pwd">
    </p>
    <button type="button" onclick="click()">提交</button>
</form>
<script>
    function click() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        var pwd_md5 = md5(pwd);         //使用md5进行加密
        console.log(uname.value);           //这里的value有点问题
        console.log(pwd.value);
    }
</script>
</body>
</html>

jQuery

jQuery包含大量的JavaScript函数

1、

可以引入下载的包也可以引用在线的CDN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>        //在线cdn
</head>
<body>
<a href="" id="test-jquery">点击</a>
<script>
    $("#test-jquery").click(function () {
            alert("a")
    })
</script>
</body>
</html>

2、鼠标位置追踪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
    #divMouse{
        height: 500px;
        width: 500px;
        border:1px solid red;
    }
</style>
<body>
    mouse:<span id="mouseMove">展示</span>
    <div id="divMouse">moveMouse</div>
<script>
    $(function () {
        $("#divMouse").mousemove(function (e) {
            $("#mouseMove").text('X:'+e.pageX+',Y:'+e.pageY);
        })
    })
</script>
</body>
</html>

3、juqery相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="ul">
    <li name="li1">one</li>
    <li class="class1">two</li>
    <li id="li3">three</li>
    <li id="li4">four</li>
</ul>

<script>
    $('#ul li[class=class1]').text();               //读取内容
    $('#ul li[class=class1]').text("修改的内容");       //修改内容提供
    $('#ul li[id=li3]').html("<strong>newStrong</strong>");     //修改HTML格式
    $('#ul li[class=class1]').css({ "color": "#ff0011", "background": "blue" });
    $('#ul li[class=class1]').hide();           //隐藏标签
    $('#ul li[class=class1]').show();           //显示标签
</script>
</body>
</html>

码农公寓