JavaScript 学习(简单入个门, 个人笔记)基础的那种哦!!! 下篇

最新推荐文章于 2024-07-31 21:53:29 发布

weifc-wei

最新推荐文章于 2024-07-31 21:53:29 发布

阅读量83

点赞数 1

分类专栏： html + css + js 文章标签： js

本文链接：https://blog.csdn.net/m0_45867846/article/details/111017173

版权

html + css + js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript 学习贼基础的那种哦!!! 下篇

8.操作DOM对象(重点)

DOM: 文档对象模型,

核心

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

更新: 更新Dom 节点
遍历 dom 节点: 得到 Dom 节点
删除删除一个 Dom 节点
添加: 添加一个新的节点
要操作一个 Dom 节点, 就必须要先获得这个 Dom

获得 dom 节点

//对应 css 选择器
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByTagName('p2');
        var father = document.getElementById('father');

        var childrens = father.children; //获取父节点下的所有子节点
        // father.firstChild
        // father.lastChild

这是原生代码, 之后会我们尽量都是使用JQuery();

更新节点

<script>
        var id1 = document.getElementById('id1');

        id1.innerHTML='<strong>123</strong>'; //可以解析 HTML 文本标签
    </script>

操作文本

id1.innerText='456'; 修改文本的值
id1.innerHTML='<strong>123</strong>'; //可以解析 HTML 文本标签

操作JS

id1.style.color = "yellow";
"yellow"
id1.style.fontSize = "20px";
"20px"
id1.style.padding = '2em';
"2em"

删除节点

删除节点的步骤: 先获取父节点, 再通过父节点删除自己

<div id = "father">
        <h1>标题一</h1>
        <p id = "p1">p1</p>
        <p class="p2">p2</p>
    </div>

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

		// 删除是一个动态的过程
        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);
        father.removeChild(father.children[2]);
    </script>

注意 删除多个节点的时候,children 是时刻变化的, 删除节点的时候一定要注意:

插入节点

我们获得了某个 Dom 节点, 假设这个 dom 节点是空的, 我们通过 innerHTML 就可以增加一个元素了,
但是这个DOM 节点已经存在元素了, 我们就不能这么干了! 会产生覆盖~

追加

<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>
        let js = document.getElementById('js');
        let list = document.getElementById('list');

        list.appendChild(js); //追加到后面
    </script>

效果:
在这里插入图片描述

创建一个新的标签, 实现插入

<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>
        let js = document.getElementById('js'); //已经存在的节点
        let list = document.getElementById('list');
        //通过JS 创建一个新的节点
        let newP = document.createElement('p'); //创建一一个p标签
        newP.id = 'newP'; //相当于 <p id="newP"></p>
        newP.innerText = 'hello, js';
        list.appendChild(newP);

        list.appendChild(js); //追加元素
    </script>

let js = document.getElementById('js'); //已经存在的节点
        let list = document.getElementById('list');
        //通过JS 创建一个新的节点
        let newP = document.createElement('p'); //创建一一个p标签
        newP.id = 'newP'; //相当于 <p id="newP"></p>
        newP.innerText = 'hello, js';
        // list.appendChild(newP);
        // 创建一个标签节点,
        let myScript = document.createElement('script');
        myScript.setAttribute('type', 'text/javascript');
        // 可以创建一个 Style 标签
        let myStyle = document.createElement('style'); //创建一个空 style 标签
        myStyle.setAttribute('type', 'text/css');
        myStyle.innerHTML = 'body {background-color: chartreuse;}'; //设置标签内容
        document.getElementsByTagName('head')[0].appendChild(myStyle);

insert

let ee = document.getElementById('ee');
        let js = document.getElementById('js');
        let list = document.getElementById('list');
        // list 节点, insertBefore(newNode, targetNode):
        ee.insertBefore(js, ee);

9 操作表单(验证)

表单是什么 form DOM 树

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

…

表单的目的: 提交信息

获得要提交的信息

<form action="post">
        <p>
            <span>用户名: </span> <input type="text" id="username">
        </p>
        <!-- 多选框的值, 就是定义好的value -->
        <p>
            <span>性别: </span>
            <input type="radio" name="sex" value="man" id ="boy"> 男
            <input type="radio" name="sex" value="women" id ="girl"> 女
        </p>

    </form>

    <script>
        let input_text = document.getElementById('username');
        let boy_radio = document.getElementById('boy');
        let girl_radio = document.getElementById('girl');
        // 得到输入框的值
        input_text.value
        // 修改输入框的值
        input_text.value = '123';

        // 对于单选框, 多选框等等固定的值, boy_radio.value 只能取得当前的值
        // boy_radio.checked; // 查看返回的结果, 是否为true, 如果为true, 则被选中~
        // boy_radio.checked = true; // 赋值
    </script>

提交表单, md5 加密密码, 表单优化

<title>Title</title>
    <!-- MD5工具类 -->
    <script src="'https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>

    <form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
        <p>
            <span>用户名: </span> <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码: </span> <input type="password" id="password" name="input-password">
        </p>

        <input type="hidden" id="md5-password" name="password">

        <!-- 绑定事件 onclick 被点击 -->
        <button type="submit">提交</button>
    </form>

    <script>
        function aaa() {
            let uname = document.getElementById('username');
            let pwd = document.getElementById('input-password');
            let md5pwd = document.getElementById('md5-password');

            md5pwd.value = md5(pwd.value);
            // 可以校验判断表单内容, true 就是通过提交, false 阻止提交
            return true;
        }
    </script>

10 jQuery

JavaScript 和 jQuery;库
jQuery 库, 里面存在大量的JavaScript 函数

获取jQuery

在这里插入图片描述
初识 jQuery

<!-- cdn 引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 导入本地 -->
<!--    <script scr="./xxx/xxx"></script>-->


</head>
<body>

    <!--
    公式: $(selector).action();
    -->

    <a href="" id="test-jquery">点我</a>

    <script>
        document.getElementById('id');
        //选择器就是 css 的选择器
        $('#test-jquery').click(function () {
            alert('hello, jQuery');
        })
    </script>

选择器

<script>
        // 原生js, 选择器少, 麻烦不好记
        // 标签
        document.getElementsByTagName();
        // id
        document.getElementById();
        // 类
        document.getElementsByClassName();

        // jQuery
        $('p').click(); // 标签选择器
        $('#id1').click(); // id选择器
        $('.class1').click(); // 类选择器
    </script>

文档工具站

https://jquery.cuishifeng.cn/

公式

<!--
    公式: $(selector).action();
    -->

    <a href="" id="test-jquery">点我</a>

    <script>
        document.getElementById('id');
        //选择器就是 css 的选择器
        $('#test-jquery').click(function () {
            alert('hello, jQuery');
        })
    </script>

事件

鼠标事件, 键盘时间, 其他时间
在这里插入图片描述

<!-- cdn 引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <!-- 要求: 获取鼠标当前的一个坐标 -->
    mouse: <span id="mouseMove"></span>
    <div id="divMove">
        在这里移动鼠标试试
    </div>

    <script>
        //当网页元素加载完毕之后, 响应事件
        $(function () {
            $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:' + e.pageX + 'y:'+e.pageY);
            })
        });
    </script>

操作DOM

节点文本操作

$('#test-ul li[name=java]').text(); //获得值
$('#test-ul li[name=java]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css 的操作

$(’#test-ul li[name=java]’).css({“color” : “red”});

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

$('#test-ul li[name=java]').show(); //显示
$('#test-ul li[name=java]').hide();

未来ajax();

$(’#from’).ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

小技巧

如果巩固JS (看jQuery 源码, 看游戏源码!)
巩固HTML CSS (扒网站, 全部down下来, 然后对应修改效果~)

Layer 弹窗组件
Element-ui

weifc-wei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 学习(简单入个门, 个人笔记)基础的那种哦!!! 下篇

JavaScript 学习贼基础的那种哦!!! 下篇8.操作DOM对象(重点)DOM: 文档对象模型,核心浏览器网页就是一个Dom 树形结构!更新: 更新Dom 节点遍历 dom 节点: 得到 Dom 节点删除删除一个 Dom 节点添加: 添加一个新的节点要操作一个 Dom 节点, 就必须要先获得这个 Dom获得 dom 节点//对应 css 选择器 var h1 = document.getElementsByTagName('h1'); va
复制链接

扫一扫