Day23 2021.4.9 javascript 下

最新推荐文章于 2021-12-23 14:31:18 发布

hc1235

最新推荐文章于 2021-12-23 14:31:18 发布

阅读量133

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/hc1235/article/details/115552599

版权

java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Day23 2021.4.9

javascript

面向对象编程

面向对象原型继承：

// "use strict"
var student = {
    name: "hong",
    age: 3,
    run: function (){
        console.log(this.name + " run...");
    }
};

var xiaoming = {
    name: "xiaoming"
};

//小明的原型是student
xiaoming.__proto__= student;

面向对象class继承：

'use strict'
//ES6之后
//定义一个学生的类   2
class  Student {
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}
class xiaoxues extends Student{
    constructor(name,grade) {
        super(name);
        this.grade;
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

原型链

在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

原型链指向为：f1.proto---->Fn.prototype.proto----->Object.prototype.prototype---->null

从一开始的f1的prototype一直向上指直到Object结束，Object的__proto__指向null

操作BOM对象

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

BOM：浏览器对象模型

Window

window代表浏览器窗口

window.alert(1)  //弹窗
undefined
window.innerHeight //内部高度
392
window.innerWidth  //内部宽度
1044
window.outerHeight  //外部高度
812
window.outerWidth  //外部宽度
1059

Navigator(封装了浏览器的信息)

Navigator封装了浏览器的信息

navigator.appName //当前app名字
"Netscape"
navigator.appVersion  //当前app信息
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36"
navigator.userAgent  //当前用户信息
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36"
navigator.platform  //当前系统版本
"Win32"

不建议使用这些属性判断和编写代码

Screen

screen.width  //屏幕宽度
1536px
screen.height  //屏幕高度
864px

location(当前页面的URL信息)

location代表定位当前页面的URL信息

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: ƒ ()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location
location.assign('链接')  //跳转

dociment(当前页面)

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

document.title  //获得当前页面的title  并且可以修改
"Title"

获取具体的文档树节点

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

<dl id ="app">
    <dt>JAVA</dt>
    <dd>JAVASE</dd>
    <dd>JAVAEE</dd>
</dl>
<script>
    var Dl = document.getElementById('app');
</script>

</body>
</html>

获取cookie

document.cookie

劫持cookie原理

服务器端可以设置cookie：httpOnly

history

代表浏览器的历史记录

history.back() //后跳

history.forward()  //前跳

操作DOM对象

DOM：文档对象模型

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

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

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

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h = document.getElementsByTagName('h1');
    var h2 = document.getElementById('p1');
    var h3 = document.getElementsByClassName('p2');
    var h4 = document.getElementById('father');
    //father.children 获取子节点信息
    //father.firstChild
    //father.lastChild
</script>

</body>
</html>

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<strong></strong>
<div id="id1"></div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText='123'//修改文本的值
    id1.innerHTML='<strong>123</strong>'//超文本语言 可以解析html语言
    id1.style.color='red';//设置成红色
    id1.style.fontSize='200px'//设置字体大小
    id1.style.padding='2em'//修改内距大小
</script>
</body>
</html>

删除节点

步骤：

先获取父节点，在通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1);    
</script>

</body>
</html>

删除节点的时候children是动态变化的

插入节点

获得了某个dom节点，通过innerHTML就可以增加一个元素，但是已经有元素了，我们就不能这么干了会覆盖，这就要使用追加：

添加已存在的节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JAVAScript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var js = document.getElementById('js'),//已存在的节点
        list = document.getElementById('list');
    list.appendChild(js);//追加到后面
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSraaAwo-1617954761148)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210409140759898.png)]

添加一个新的节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JAVAScript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var js = document.getElementById('js'),//已存在的节点
        list = document.getElementById('list'),
        new1 = document.createElement('p');//创建一个新标签
    list.appendChild(js);//追加到后面
    new1.id = 'new1';
    new1.innerText = 'hello';
    list.appendChild(new1);
</script>
</body>
</html>

通过标签插入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>
</head>
<body>

<p id="js">JAVAScript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var js = document.getElementById('js'),//已存在的节点
        list = document.getElementById('list'),
        new1 = document.createElement('p');//创建一个新标签
    list.appendChild(js);//追加到后面
    new1.id = 'new1';
    new1.innerText = 'hello';
    list.appendChild(new1);
    //创建一个标签节点 可以设置任意的值
    var MyScript = document.createElement('script');
    MyScript.setAttribute('type','text/javascript');
    list.appendChild(MyScript);
    //可以创建一个style标签节点
    var Mystyle = document.createElement('style');
    Mystyle.setAttribute('type','text/css');
    Mystyle.innerHTML = 'body{background-color: chartreuse}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(Mystyle);
</script>
</body>
</html>

将一个新的节点插入到一个节点前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>
</head>
<body>

<p id="js">JAVAScript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //将一个新的节点插入目标节点前
    list.insertBefore(js,ee);
</script>
</body>
</html>

操作表单(验证)

form DOM树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

目的：提交信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="post">
    <p><span>用户名: </span><input type="text" id="usename"></p>
    <!--多选框的值,就是定义好的value值-->
    <p>
        <span>性别: </span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="gril">女
    </p>
</form>
<script>
    var input_text = document.getElementById('usename');
    var boy_radio = document.getElementById('boy');
    var gril_radio = document.getElementById('gril');
    //得到输入框的值
    input_text
    //修改输入框的值
    input_text = '123';
    //对于单选框多选框 .value 只能拿到设定的值
    boy_radio.checked //查看返回的结果是否为true
</script>
</body>
</html>

提交表单(md5加密)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
</head>
<body>
<!--表单绑定提交事件
onsubmit 绑定一个提交检测的函数  true false
将这个结果返回给表单，使用onsubmit 接受
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p><span>用户名: </span><input type="text" id="usename" name="username"></p>
    <p><span>密码: </span><input type="text" id="in-password"></p>
    <input type="hidden" id="md5-password" name="password">
    <!--<input type="submit">-->
    <!--绑定事件 onclick 被点击的时候-->
    <button type="button">提交</button>
</form>
<script>
    function aaa(){
        var umane = document.getElementById('usename');
        var pwd = document.getElementById('in-password');
        var md5pwd = document.getElementById('md5-password');
        console.log(umane.value);
        //MD5算法
        md5pwd.value = md5(pwd.value);
        //true就是提交通过 false就是阻止提交
        return true;
    }
</script>
</body>
</html>

jQuery

JAVAScript和

jQuery库：里面存在大量的JAVAScript函数

获取jQuery

下载或者使用在线CDN

$(选择器).事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<!--
公式: $(selector).action()
-->
<a href="" id="text-jquery">点我</a>
<script>
    document.getElementById('text-jquery');
    //选择器就是css选择器
    $('#text-jquery').click(function (){
        alert(1);
    })
</script>

</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //原生js
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery css中的选择器都能使用
    $('p').click()//标签选择器
    $('#id1').click()//id选择器
    $('.class1').click()//class选择器
</script>
</body>
</html>

事件

鼠标事件、键盘事件、陀螺仪事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brWgpdN8-1617954761150)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210409152229479.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕后，响应事件
    // $(document).read(function (){
    //
    // })
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+' y'+e.pageY);
        })
    });
</script>

</body>
</html>

操作DOM元素

$('#text-ul li[name="python"]').text();//获得值
$('#text-ul li[name="python"]').text('');//设置值
$('#text-ul).html();//获得值
$('#text-ul).html('');//设置值

css操作

$('#text-ul li[name="python"]').css({"color","red"});

元素的显示和隐藏：本质display：none

$('#text-ul li[name="python"]').show();//显示
$('#text-ul li[name="python"]').hide();//隐藏

娱乐测试

$(window).width();//宽度
$(window).heigth();//高度

未来ajax()

$('form').ajax();

#mouseMove’).text(‘x:’+e.pageX+’ y’+e.pageY);
})
});

```

操作DOM元素

$('#text-ul li[name="python"]').text();//获得值
$('#text-ul li[name="python"]').text('');//设置值
$('#text-ul).html();//获得值
$('#text-ul).html('');//设置值

css操作

$('#text-ul li[name="python"]').css({"color","red"});

元素的显示和隐藏：本质display：none

$('#text-ul li[name="python"]').show();//显示
$('#text-ul li[name="python"]').hide();//隐藏

娱乐测试

$(window).width();//宽度
$(window).heigth();//高度

未来ajax()

$('form').ajax();

hc1235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录