当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 JS基础(三)JS入门

荐 JS基础(三)JS入门

2020年07月14日  | 移动技术网IT编程  | 我要评论
文章目录JS入门JS内部的一些对象Date对象JSON对象操作BOM操作DOM（超级重点）定位查看DOM节点使用document获取节点：使用DOM节点对象获取DOM节点修改DOM节点修改已有DOM节点（setAttribute重点）用新DOM节点替换掉旧DOM节点添加DOM节点创建DOM节点将DOM节点插到某DOM节点的子层最后将DOM节点插到某DOM节点前面删除DOM节点操作表单获取表单中内容对于单选框、多选框要判断是否被选中使用按钮绑定事件（重点：事件的绑定）使用表单绑定事件使用MD5加密jQuery

文章目录

JS入门

JS内部的一些对象

Date对象

var now = new Date();
//年
now.getFullYear();
//月，这里的月是0-11月。外国人真奇怪
now.getMouth();
//日
now.getDate();
//星期几
now.getDay();
//时
now.getHours();
//分
now.getMinutes();
//秒
now.getSeconds();
//时间戳
now.getTime();

对于年月日这个时间电脑上可以人为设置，但是时间戳是不可以设置的。时间戳是最准确的时间，是从1970.1.1 0:00:00开始计时的，是全世界统一的毫秒数。将时间戳转换成时间可以使用Date类转换回去。

例如：

console.log(new Date(now.getTime()))
//将时间戳作为参数实例化新的时间对象，得到的就是一个时间

JSON对象

JSON是什么？JSON是一种轻量级的数据交换格式，有简介清晰的层次结构，易于阅读与编写，易于机器解析与生成，并且能有效的提高网络传输的效率。（数据交换格式就是，你使用JS存储的数据python是不可以读取的，但是将JSON作为中间格式：先将JS数据转成JSON数据，python再将JSON数据转换成python数据是可行的。）

使用方法：

  • JSON.stringify（对象）：将对象转换成JSON数据，其实就是字符串但是字符串内容是JSON格式的。
  • JSON.prase（JSON字符串）：将JSON字符串文本转换成。

例如：

var obj = {
    name:"ling",
    age:11
}
var x = JSON.stringify(obj);
console.log(x);
console.log(typeof x);

var y = JSON.parse(x);
console.log(y)
console.log(typeof y);

结果为：

在这里插入图片描述

可以看出JSON就是一种字符串格式。JS数据类型对应的具体格式如下：

  • 对象、MAP对象使用 { } 括起数据。
  • 数组、list对象使用（）括起数据。
  • 所有的键值对都用 key:value 这个格式。

操作BOM

BOM是浏览器对象模型。也就是说对浏览器对象模型进形操作就是对浏览器进行一些操作。浏览器对象模型有：

  • IE
  • Chrome
  • safari
  • Firefox
  • Oprea

注意上面的都是内核，像360这些浏览器都是第三方浏览器，它们的内核使用的都是上面的那些。

在JS中BOM对象有window对象（浏览器窗口对象），也是全局变量对象。

有属性：

  • alert（）：弹窗

  • innerHeight：浏览器内高

  • outterHeight：浏览器外高

  • 等等，用的时候查文档即可

navigator对象。封装了一些浏览器信息。

有属性：

  • appName
  • appVersion
  • userAgent
  • platform

screen对象。有着屏幕信息

有属性：

  • width：屏宽
  • height：屏高

location对象。封装着当前页面的URL信息。

有属性：

  • host
  • href
  • protocal

有方法：

  • assign（）：重定向

document对象。封装着当前页面文档信息。可获取具体的文档节点（也就是DOM节点。每一个id、class、标签。。。等等都是一个或几个节点）、可拿到网页的cookie。

操作DOM（超级重点）

整个网页是由一个个DOM节点组成的树形结构。

DOM节点就是文档中的一个个小部分，就是你使用HTML写的每一个可以在网页上显示的标签就是一个DOM节点。

对树可有以下操作（增删改查）：

  • 定位查看DOM节点
  • 修改DOM节点
  • 添加DOM节点
  • 删除DOM节点

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

定位查看DOM节点

要获取DOM节点就必须先知道DOM节点在哪，而位置可以根据HTML中节点的属性：id、class与标签就可以获取一个节点（id）或一组节点（class、标签）。但是没有整个的文档怎么使用属性获取呢？所以使用document对象（文档对象，就是整个HTML中的元素节点都在这个对象中）。获取的DOM节点每一个节点都是一个对象，也就是将文档每一个节点的所有属性封装起来作为一个DOM节点。

使用document获取节点：

  • 使用id定位：document.getElementById（”标签id“）。

得到的是一个DOM节点。

  • 使用class定位：document.getElementByClassName（“class名”）。

得到的是一个DOM节点数组。要访问其中的某个DOM节点需要使用索引 [x]。

  • 使用标签定位：document.getElementByTagName（“标签”）。

得到的是一个DOM节点数组。要访问其中的某个DOM节点需要使用索引 [x]。

<body>
    <p id="b">1233</p>
    <div id="a">
        <p>123455</p>
        <dl>
            <li id="o">1</li>
            <li>2</li>
            <li>3</li>
        </dl>
    </div>
    <p>11111</p>

    <script>
        var p = document.getElementsByTagName("p");
        var b = document.getElementById("b");
        var a = document.getElementById("a");
        var body = document.getElementsByTagName('body');
        var li = document.getElementById('o');
        console.log(p);
        console.log(b);
        console.log(a);
        console.log(p[1]);
        //可以手动审查这些变量看看是不是符合上面的标准
    </script>
</body>

使用DOM节点对象获取DOM节点

  • 获取所有子节点：DOM节点 . children

  • 获取第一个子节点：DOM节点 . firstChild

  • 获取最后一个子节点：DOM节点 . lastChild

==注意：==对于获取到的节点是null的情况：因为网页是从上到下生成的，将JS写在了HTML中的头部就会先遍历一遍JS代码。在JS代码执行的时候HTML代码还没有执行，所以得到的就是null。==解决方法：==还记得script标签既可以写在head中也可以写在body中吗？，在body的最后引入JS代码即可。或者使用函数，具体实现是：当网页加载完毕后再加载JS代码。

修改DOM节点

步骤是：先定位该节点，再进行修改。

修改已有DOM节点（setAttribute重点）

  • 修改节点文本内容：DOM节点 . innerText = “。。。”

  • 修改节点HTML代码：DOM节点 . innerHTML = ”<strong>123</strong>“

不清楚博客里会不会显示反义字符，在typro中不适用反义字符会代码化，如果博客中有反义字符在实验时请删除。

在这里修改HTML代码不是修改的静态代码，而是修改的进程中动态运行的代码。换句话说就是你在编译器中写的代码不会改变。

  • 修改节点CSS某个属性：DOM节点 . style . color = “red”

修改节点CSS整个代码：DOM节点 . cssText = “color：red”。这是覆盖整个CSS代码的修改。

追加节点CSS代码　　　DOM节点 . cssText += “color：red”。这样这段颜色代码就追加在节点css代码里了。

  • 修改节点属性：DOM节点 . setAttribute（“DOM节点属性”，“值”）

上面三种也是使用DOM节点属性修改的，所以也可以使用这个函数修改属性。例如：DOM节点 . setAttribute（“innerHTML”，“<strong>123</strong>“”）。

这个修改属性的方法是万能方法，因为JS中可能会没有一些HEML中有的属性比如type，这时候就可以用这个函数修改DOM节点。

用新DOM节点替换掉旧DOM节点

在树的数据结构中，要替换一个节点要修改父节点的指针。文档是由DOM节点构成的一颗树，所以也遵循这个规则。

使用：父亲DOM对象 . replaceChild（newNOde，oldNode）

newNode、oldNode也是DOM节点。

添加DOM节点

创建DOM节点

var newp = document.creatElement('p');
newp.id = "aaa";
newp.innerText = "Hello";
newp.style.color = "red";

p是标签类型，也可以用a、script、div等待。

将DOM节点插到某DOM节点的子层最后

父亲DOM节点 . appendChild（添加节点），或 父亲DOM节点 . append（添加节点）

var newp = document.creatElement('p');
var b = 父亲节点;
b.appendChild(newp);

在树的数据结构中也是直接父节点新子指针指向新节点。

将DOM节点插到某DOM节点前面

父亲DOM节点 . insertBefore（newNode，targetNode）。

父亲DOM节点是targetNode的父亲。知道了父亲节点后，将newNode插入到targetNode之前。

删除DOM节点

先获取父亲DOM节点，再通过父节点删除自己。树也是这么干的。

var self = document.getElementById("one");
//使用parentElement获取父节点
var father = self.parentElement;
//使用父节点删除自己
father.removeChild(self);

或者也可以使用father.removeChild(father.children[x])，使用这个要先知道你要删的节点在它的父节点中的哪个子节点。

操作表单

获取表单中内容

表单是由input、select、button等组件构成，所以要获取表单的内容实际上就是获取这些组件的内容。

  • 获取input的值：inputDOM节点 . value
  • 获取input的类型：inputDOM节点 . getAttribute（“type”）
  • 等等其他一些HTML代码写的内容都可以获得

对于单选框、多选框要判断是否被选中

对于单选框查看是否被选中，使用同一组单选框中的任意一个单选框DOM节点查看其属性chcked（布尔类型）。对于多选框直接查看其DOM节点的chcked就可以了。

<input type="radio" name="sex" id="man">男<br>
<input type="radio" name="sex" id="woman">女<br>
<script>
    man = document.getElementById("man");
    woman = document.getElementById("woman");
    //这时选中女
    console.log(man.chcked);//false
    console.log(woman.chcked);//true
</script>

如果单选框特别多，那么可以将它们归为一个类。使用getElementByClassName将其全部获取迭代查看即可。

使用按钮绑定事件（重点：事件的绑定）

**在HTML中使用状态属性绑定JS函数就可以实现事件的绑定。**例如，点击按钮出现弹窗。

<button type="submit" onclick="aaa()">提交</button>
<script>
    function aaa(){
        alert("点击了！");
    }
</script>

其他元素使用其他状态属性也可以，任意搭配，有需求查文档。

使用表单绑定事件

<!--这里的onsubmit可以使用return拦截表单发送，如果return false则表单发送不出去，也就不会跳转-->
<form action="#" method="post" onsubmit="return aaa()">
    <!--.......-->
</form>

<script>
    function aaa(){
        alert("准备发送");
        //这里与上面return同向，返回false则拦截表单
        return flase;
    }
</script>

使用MD5加密

在导入MD5时可以使用CDN

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

导入后直接在JS中使用md5函数就会但会该数的md5加密后的信息。

<form action="#" onsubmit="return aaa()">
    用户名：<input type="text" id="username" name="username"><br>
    密码：<input type="password" id="userpsw" name="userpsw"><br>
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        var psw = getEmementById("userpsw");
        //在这里使用了md5加密
        psw.value = md5(psw.value);
        return true;
    }
</script>

在这里说一个很重要的概念：在表单提交后会向action发送一个网络包，在其中包含了所有表单的填写后的value，但是只有有name的元素才会被发送。加入我上面的密码不写name那么密码就不会发送，在包中只有一个username：你填写的用户名。

在使用了上面的代码你会发现在提交的一瞬间页面上显示的密码长度会突然变长。这是因为你修改了密码的值且加密后的长度比原密码长，所以会变长。要解决这个问题，使用一个hidden作为转发器，由此元素转发。如下：

<form action="#" onsubmit="return aaa()">
    用户名：<input type="text" id="username" name="username"><br>
    密码：<input type="password" id="userpsw"><br>
    <input type="hidden" id="md5psw" name="userpsw">
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        var psw = getEmementById("userpsw");
        var md5psw = getElementById("md5psw");
        //在这里使用了md5加密
        md5psw.value = md5(psw.value);
        return true;
    }
</script>

在这里，因为hidden的name为userpsw，所以在包中发送的userpsw是加密后的，且原密码不会变长。变长的是hidden的value，但是hidden不会显示在页面上所以实现了美观。

jQuery

jQuery也是一个外部的JS库，其中封装了很多函数。可以简化对DOM节点的定位与操作。jQuery下载到本地引用或者使用CDN引用都可以。

jQuery公式

$( selector ) . action ( function )

  • selector 是选择器，定位DOM的。其内容与CSS选择器是相同的。
  • action 是动作函数，如click点击等
  • function是事件函数，就是你点击后要的操作就写在这个函数中
<p id="text">111</p>
<button id="button">点击</button>

<script>
    //在css中id选择器使用#
    $("#button").click(function(){
        $("#text").value = "123";
    })
</script>

之前使用的操作DOM未将HTML与JS完全分离，因为HTML中还有JS的函数。使用jQuery在HTML中不用理会JS代码怎么写，实现了分离。这反过来也提供了一种思路：提前在库中写在函数，在HTML中导用时直接使用其库中使用的id或class名作为id、class名就可以直接使用了。

jQuery绑定事件

绑定事件使用CSS中的选择器作为定位。例如基本选择器有：

  • $(“a”).click(function)
  • $("#id1").click(function)
  • $(".class1").click(function)

高级选择器也可以使用，查看文档学即可。

jQuery事件

事件函数的参数可以作为操作物对象，例如鼠标事件的函数参数e（一般使用e代表）可以作为鼠标对象，可以从其中获取一些鼠标的参数（如：坐标等）。与JavaGUI类似。

$("#id1").mouseMove(function(e){
    //鼠标x坐标
    console.log(e.pageX);
    //鼠标y坐标
    console.log(e.pageY);
})

鼠标事件：

  • $（“id1”）.mousedown（）：按下
  • $（“id1”）.mouseleave（）：离开
  • $（“id1”）.mousemove（）：移动
  • $（“id1”）.mouseover（）：点击结束

键盘事件与鼠标事件类似，查文档即可。

其他事件中的特殊事件：

当网页加载完毕后响应事件。

$(document).ready(function(){
    //。。。
})

//上述代码可简化为
$(function(){
    //。。。
})

jQuery操作DOM

设置DOM值：

获取值与设置值

$("某文本DOM").text();//返回文本DOM的值
$("某文本DOM").text("123");//设置文本DOM的值

设置DOM的HTML代码：

获取HTML与设置HTML

$("某DOM").html();//获取其HTML
$("某DOM").html("<strong>222</strong>");//设置其HTML

设置DOM的CSS代码：

设置CSS代码

$("某DOM").css({"color":"red", "weight":"128px"});
//多个属性使用键值对，单个属性直接使用函数即可
$("某DOM").css("color", "red");

元素的显示与隐藏：

$("某DOM").show();
$("某DOM").hide();

其实它就是修改了该DOM的css代码。$(“某DOM”).css(“display”, “none”)。可以试一下效果是一样的。

“某文本DOM”).text(“123”);//设置文本DOM的值




**设置DOM的HTML代码：**

获取HTML与设置HTML

```javascript
$("某DOM").html();//获取其HTML
$("某DOM").html("<strong>222</strong>");//设置其HTML

设置DOM的CSS代码：

设置CSS代码

$("某DOM").css({"color":"red", "weight":"128px"});
//多个属性使用键值对，单个属性直接使用函数即可
$("某DOM").css("color", "red");

元素的显示与隐藏：

$("某DOM").show();
$("某DOM").hide();

其实它就是修改了该DOM的css代码。$(“某DOM”).css(“display”, “none”)。可以试一下效果是一样的。

本文地址：https://blog.csdn.net/qq_43477218/article/details/107297504

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网