2020-07-30 JavaScript补充部分、

最新推荐文章于 2022-07-12 09:00:00 发布

Accumulate_

最新推荐文章于 2022-07-12 09:00:00 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/qq_42442365/article/details/107700265

版权

----------------------方法--------------------

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

var wang={
	name:'111'
	age:getAge
}

调用的时候，必须wang.age() 才能输出
但是直接getAge()是只会输出NaN的，因为windows没有this.birth属性

---------------特殊对象------------------

【标准对象】NaN也是一个number

一、Date，代表日期和时间

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳

//console.log(new Date(1596113491144))  时间戳转换时间

-------------Json的使用基础----------

-轻量级的数据交换格式
-javascript中，一切都是对象，任何JS支持的类型都可以json表示

格式：对象都用{}，数组都用[]，键值对都用key:value

<script>
    var aaa = {
        name:"111",
        age:3,
        sex:'男'
    }
    var bbb = JSON.stringify(aaa);//对象转为JSON
    var ccc = JSON.parse('{"name":"111","age":3,"sex":"男"}');//把JSON转换为对象
</script>

-----------------Ajax-----------------

jquey封装好的方法 $("#name").ajax("")
axios 请求

------------面向对象编程-----------

javascript、java、c#
javascript中的面向对象有些区别，
类是模板、对象是具体实例

name.proto=name1--------------形成继承关系

class继承

ES6新特性–直接定义一个类

<script>
    class Student{
        constructor(name){//这个关键字是构造方法的意思
            this.name=name;
        }

         run(){

        }
    }
 var laowang=new Student("老王");
 laowang.run();

class xiaowang extends Student{
	constructor(name.grade){
		super(name);
		this.grade = grade;
	}
	mygrade(){
		alert('小学生');
	}
}
</script>

本质上，查看对象原型，还是一个Student对象
原型链，最终还是指向object

----------=操作BOM对象=---------

JavaScript和浏览器

BOM：浏览器对象模型
IE 6-11 chrome safari FireFox opera

window对象：代表浏览器窗口，多种属性可以调试

Navigator，封装了浏览器信息，大多数时候不会使用它，因为会被人为修改
screen代表了屏幕

location:代表当前页面的URL信息
host:“www.baidu.com”
href:“http://www.baidu.com/”
protocal:“https”-------------协议
reload: f reload -----------刷新页面
location.assign(‘www.jd.com’) 页面跳转

document代表当前页面
document.title
document.title=‘老王’
它就可以获取具体的文档树节点，可以动态的修改网页
它还可以直接拿到网页的cookie

history属性-----------代表浏览器的历史记录
history.back()后退
history.forward()前进

-------------操作DOM对象-------------

整个浏览器网页就是一个DOM树形结构
更新：更新DOM节点，
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得DOM节点
DOM节点的意思：网页端的元素

获得DOM节点：

var h1 = document.getElementsByTagName('h1');
var h1 = document.getElementById("p1");
var h2 = document.getElementsByClassName("p2");
var father = document.getElementById("father");
var children = father.children;

更新节点

<div id="id1">
</div>
<script>
    var id1=document.getElementById("id1");
    id1.innerText="123"
	id1.style.color='red'
	id1.style.fontSize='150px'
</script>

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

father.removeChild(p1);
一定要通过父节点才能删除，直接操作自身节点是不可行的
如何获取父节点：

<script>
    var h1 = document.getElementsByTagName('h1');
     var father =h1.parentElement;
</script>

只有使用ID选择器的，才可以删除

创建插入节点
获得某DOM节点，假设这个DOM节点是空的，通过innerHTML可以增加一个节点，但是原来就有，就不能再加了，这样会导致覆盖。那么解决方案就是往里面进行节点追加操作。

<body>
    <p id="js11">11</p>
    <div id="list">
        <p id="js22">22</p>
        <p id="js33">33</p>
        <p id="js44">44</p>
    </div>
    <script>
        var js11 = document.getElementById('11');
        var list = document.getElementById('list');
        list.append(js11);//这是已经存在的节点
        var p = document.createElement('p');
        p.id = 'newP' ;
        p.innerText = '新文字';
        list.append(p);//这个是自己创建的节点
    </script>
</body>

-------------------操作表单----------------

表单也是DOM节点的一部分

文本框、下拉框、单选框复选框、隐藏域、密码框
表单的目的就是提交信息

变量名.value可取表单内容中的值

提交表单

<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <span>用户名：</span><input type="text" id="username" name="username">
    <span>密码：</span><input type="password" id="psw" >
    <input type="hidden" id="md5-password" name="password">
    <button type="submit" >提交</button>
</form>

<script>
    function aaa(){
        var name = document.getElementById("username");
        var psw = document.getElementById("psw");
        var md5pwd = document.getElementById('md5-password');
        //console.log(name.value);
        //console.log(psw.value);
        // psw.value = "****************";
       // md5pwd.value = md5(pwd.value);
        md5pwd.value = "抱歉，你看不到这个密码";
        //console.log(psw.value);
        //在浏览器端对密码输入进行加密校验，这里可以查一下MD5如何进行加密
        return ture;
    }
</script>

密码最好使用隐藏域

Accumulate_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-07-30 JavaScript补充部分、

----------------------方法--------------------function getAge(){ var now=new Date().getFullYear(); return now=this.birth;}var wang={ name:'111' age:getAge}调用的时候，必须wang.age() 才能输出但是直接getAge()是只会输出NaN的，因为windows没有this.birth属性---------------特殊对象--
复制链接

扫一扫