javascript学习

最新推荐文章于 2021-12-02 14:34:19 发布

策谋本天成

最新推荐文章于 2021-12-02 14:34:19 发布

阅读量531

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44207403/article/details/106470517

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript学习

1. javascript引入方式

1.1 内部标签

<script>
    alert("hello");
</script>

1.2 外部引用

<script src="js/a.js"></script>

1.3行内引入

<开始标签 on+事件类型=“js代码”></结束标签>

行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件

<body>
<input type="button" οnclick="alert('行内引入')" value="button" name="button">
<button οnclick="alert(123)">点击我</button>
</body>

2.入门

<script>
    // console.log(score) 在控制台打印变量
    var score = 71;
    if(score <80){
        alert("70~80");
    }else {
        alert("80~100");
    }
</script>

2.1 基本数据类型

与java一致

所有的变量都是var

对象使用大括号定义

var person = {
    name:"czt", 
    age: 21
}

取对象里面的值

person.age
21

2.2 严格检查模式

<script>
    'use strict' //严格检查模式，必须写在第一行

    let i = 1;//局部变量建议使用let定义
</script>

2.3 字符串

1.多行字符串的编写

<script>
    'use strict'
    var msg=`hello
    ffd
    sadf
    sdf`
</script>

在这里插入图片描述

2.模板字符串

let name = 'czt';
let age = 22;
let msg2 = `你好呀,${name}`

在这里插入图片描述

3.字符串长度

在这里插入图片描述

返回字符串的长度，算空格。

4.indexOf

在这里插入图片描述

返回对应字符的下标索引

5.substring

在这里插入图片描述

2.4 数组

Array可以包含任何元素

在这里插入图片描述

1.长度

arr.lenght

在这里插入图片描述

可以通过给arr.lenght赋值来改变数组的长度

在这里插入图片描述

2.indexOf

通过元素获得下标索引，当数组里有相同的元素时放回第一个查找到的元素的下标

在这里插入图片描述

3.slice

放回一个新数组，截取原数组的一部分

在这里插入图片描述

当下标越界的时候也不会报错，而是取这个数组的最大值，当参数是有一个数时表示，取这个下标到数组最后，越界则会返回空数组。

4.push（），pop（）

1.push（） 压入尾部
2.pop() 从尾部弹出

5.unshuift（），shift（）

1.unshuift() 压入头部
2.shift() 从头部弹出

2.5 对象

对象就是若干个键值对，类似于c的结构体

1.删除对象属性delete

在这里插入图片描述

2.增加属性，就直接写，真就这么简单

在这里插入图片描述

2.6 Map

map：类似于python的字典

var map = new Map([['czt',100],['jack',88]]);
var name = map.get('czt');//通过key获得value
console.log(name);
map.set('lq',99);
console.log(map.get('lq'));
map.delete('lq');

3.函数

3.1 定义函数

绝对值函数

<script>
    function abs(x) {
        if (x>0){
            return x;
        }else {
            return -x;
        }
    }
</script>

调用

在这里插入图片描述

定义方式二

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

4.内部对象

4.1 Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
now.toLocaleString()//电脑时间
console.log(new Date(now.getTime()))//时间戳转化为时间

4.2 JSON

var person={
    name:'czt',
    age:22,
    sex:'nan'
}
// 该方法可以将任何对象转化为json字符串
let j = JSON.stringify(person);//"{"name":"czt","age":22,"sex":"nan"}"
// 将json字符串转化为对象
JSON.parse('{"name":"czt","age":22,"sex":"nan"}');

4.3 Ajax

异步请求

5.操作BOM对象（重点）

screen

代表屏幕的尺寸

screen.width
1536
screen.height
864

location

代表当前页面的url信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=78000241_9_hao_pg"
location.reload()//刷新页面
location.assign('url')//重新定位页面

document

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

更改网页标题

document.title='czt'
"czt"

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>czt
    </dd>
</dl>
<script>
    let dl = document.getElementById('app');
</script>

获取cookie

document.cookie
"BAIDUID=9C7C379E87075619A0EB42063AE53D9B:FG=1; BIDUPSID=9C7C379E87075619A0EB42063AE53D9B; PSTM=1590497294; BD_UPN=12314753; BDRCVFR[Y1-7gJ950Fn]=OjjlczwSj8nXy4Grjf8mvqV; BD_HOME=1; H_PS_PSSID=; BDRCVFR[Qs-Y_7gNldt]=OjjlczwSj8nXy4Grjf8mvqV; BDRCVFR[HaZoM-yKXvb]=OjjlczwSj8nXy4Grjf8mvqV"

history

代表浏览器的历史记录

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

6.操作DOM对象

DOM：文档对象模型

核心

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

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个DOM节点

要操作DOM节点就要先获得节点

获得DOM节点

<div id="father">
    <h1>标题1</h1>
    <p class="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementsByClassName('p1');
    var p2 = document.getElementById('p2');
    var father = document.getElementById('father');
    var childrens = father.children;
</script>

更新节点

id1.innerText=123 修改文本的值

操作js

id1.style.color=‘red’ // 属性使用字符串

通过js修改对象的css属性

删除节点

步骤，先找到父节点，调用父节点删除

father.removeChild(p2)

插入节点

// 插入新节点
var newp = document.createElement('p');
newp.id='pp';
newp.innerText = 'hello';
father.append(newp);

//移动节点
var p3 = document.getElementById('p3');
father.appendChild(P3);

7.操作表单

获取和修改表单数据

<form action="#">
    <p>
        <span>姓名</span><input type="text" id="user_name">
    </p>
    <p>

        <input type="radio" name="sex" value="nan" id="boy">男
        <input type="radio" name="sex" value="nv" id="girl">女
    </p>
    <script>
        let name = document.getElementById('user_name');
        name.value='sad';//设置表单的值
        name.value//获取表单的值

        let boy = document.getElementById('boy');
        boy.checked = true;//设置单选框的值
        girl.checked = false;

    </script>
</form>

网页常用的前端密码加密

使用md5来对数据进行加密

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

<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名</span>
        <input type="text" id="username" name="name">
    </p>
    <p>
        <span>密码</span>
        <input type="password" id="pwd" name="pwd">
    </p>
    <p>
        <input type="submit">
    </p>
</form>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
    function aaa() {
        var name = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        pwd.value = md5(pwd.value);//通过提交的时候修改pwd的value值使得抓包无法获取密码值
         return true;//用于验证，通过这返回true，否则返回false
    }
</script>

在这里插入图片描述

但是如果使用这种方式加密在点击提交的一瞬间密码框的值就会变化，影响用户体验。一般采取以下操作，

使用隐藏框来显示密码，加密后的值返回到隐藏框，这样输入界面的密码框内的密码不会改变。

<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名</span>
        <input type="text" id="username" name="name">
    </p>
    <p>
        <span>密码</span>
        <input type="password" id="pwd">
    </p>
    <input type="hidden" id="md5_input" name="pwd">
    <p>
        <input type="submit">
    </p>
</form>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
    function aaa() {
        var name = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        var md5_input = document.getElementById('md5_input');
        md5_input.value = md5(pwd.value);//通过提交的时候修改pwd的value值使得抓包无法获取密码值
         return true;//用于验证，通过这返回true，否则返回false
    }
</script>

8.JQuery

JQuery：是一个库存在大量的js方法

cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<body>
<!--JQuery格式 $(selectory).action()-->
<a href="" id="test">点我</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $('#test').click(function () {
        alert('hello');
    })
</script>
</body>

在这里插入图片描述

选择器：与css选择器一致

文档工具站https://jquery.cuishifeng.cn/

事件

鼠标事件

//代表页面元素加载完毕之后

$(function () {

}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #move{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
鼠标<span id="mouseMove"></span>
<div id="move">
    滑动鼠标
</div>

<script>
    $(function () {//代表页面元素加载完毕之后
        $('#move').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+',y:'+e.pageY)
        })
    })

</script>
</body>