自学JavaScript重点笔记

最新推荐文章于 2024-08-12 22:28:07 发布

CQIPC_yyy

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量248

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/CQIPC_yyy/article/details/125801287

版权

这篇博客主要介绍了JavaScript操作BOM对象，如Navigator、Screen、Location和Document，特别是Location对象的重要特性。接着深入DOM操作，包括获取和更新DOM节点、删除与添加节点的方法，并强调了遍历和操作DOM时的注意事项。此外，还提到了JQuery库的使用，如何快速便捷地进行DOM操作和事件处理。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

JavaScript重点笔记

操作BOM对象

Navigator

navigator：封装了浏览器的信息

navigator.appName
  'Netscape'

navigator.appVersion (查询电脑的版本信息，可以判断是电脑端还是手机端)
  '5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Mobile Safari/537.36 Edg/103.0.1264.49'

navigator.platform		
  'Win32'

大多数时候不会使用navigator对象，因为会被人为修改

不建议使用属性来判断

Screen

页面屏幕的宽高

 screen.width
  1880
screen.height
  469

Location (⭐)

代表当前页面的URL信息

host: "www.baidu.com"  (主机)
href: "https://www.baidu.com/"   (当前指向的位置)
protocol: "https:"	(协议)
reload: ƒ reload() 	(刷新页面)
location.assign('https://www.baidu.com/')  //设置新的地址

Document

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

docment.title
'百度一下，就知道'
document.title='yyy'
"yyy"

// 获取具体的文档树节点示例
<body>
    <dl id="app">
        <dt>JAVA</dt>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>

<script>
    var dl = document.getElementById('app');
</script>
</body>
// 控制台显示
dl
<dl id="app">
        <dt>JAVA</dt>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
</dl>

document.cookie （获取本地信息）

服务端可以设置cookie：httponly

history

代表浏览器的历史记录

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

操作DOM对象

核心

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

更新Dom节点
遍历dom节点，得到dom节点
删除一个Dom节点
添加一个新的节点

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

获得dom节点

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

<script>
    // getElementById 对应css选择器
    let childs = document.getElementById("father"); // 获取父节点下所有子节点
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    
    childs.firstChild // 第一个
    childs.lastChild  // 最后一个
</script>
</body>

这是原生代码，后面使用JQuery

更新节点

<body>
      <div id="app">
      </div>

      <script>
          let div = document.getElementById('app');
      </script>
</body>

操作文本

div.innerText=‘123’;

div.innerHTML=‘234’;

操作CSS

div.style.fontSize=‘100px’;

div.style.color=‘red’;

删除节点

删除节点的步骤：线获取父节点，在通过父节点删除自己

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

<script>
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');

    let father = p1.parentElement; // 获取p1的父节点
    father.removeChild(p1);

    // 删除是一个动态的过程，删除了第一个，原来的第二个就是删除后的第一个
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>
</body>

删除多个节点时，children实在时刻变化的！

插入节点

我们获取了某个Dom节点，若这个节点是空的，我们可以通过innerHTML就可以增加一个元素，但若这个Dom已经存在元素了，我们就不能这么做了，会产生覆盖！

追加

<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>
        let list = document.getElementById('list');
        let js = document.getElementById('js'); //已经存在的节点
        list.appendChild(js);
    </script>
</body>

创建一个新的标签插入

// 使用JS创建一个新的节点
        let newP = document.createElement('p');// 创建一个p标签
        newP.id = "newP";
        newP.innerText='hello,kuanshen';
        list.appendChild(newP);

<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>
        let list = document.getElementById('list');
        let js = document.getElementById('js'); // 已经存在的节点
        list.appendChild(js);

        // 使用JS创建一个新的节点
        let newP = document.createElement('p');// 创建一个p标签
        newP.id = "newP";
        newP.innerText='hello,kuanshen';
        list.appendChild(newP);
        // 创建一个标签节点
        let myScript = document.createElement('script');
        myScript.setAttribute('type','tetx/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);
    </script>
</body>

操作表单

<body>
<!--表单级提交-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aa()">

  <p>
    用户名:<input type="text" id="username" name="username">
  </p>

    <p>
        密码：<input type="password" id="pwd" name="input_password">
    </p>

<!--    <input type="submit">-->
<!--    <button type="submit" onclick="aa()">提交</button>-->

    <input type="hidden" id="md5_password" name="password">

    <button type="submit">提交</button>

</form>


<script>
    function aa() {
        alert(1);
        let name = document.getElementById('username');
        let pwd = document.getElementById('input_password');
        let md5_pwd = document.getElementById('md5_password');

        /*MD5 加密算法*/
        // console.log(name.value);
        md5_pwd.value = md5(pwd.value);
        // console.log(pwd.value);
        return true;
    }
</script>
</body>

JQuery

jQuery库，里面存在大量的javascript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引入cdn-->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>
</head>
<body>
        
</body>
</html>

jQuery 公式

$(selector).action()

selector：选择器
action：事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--引入jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<a href="" id="test_jquery">点这里</a>
<div>虽然长得丑，但是想得美。</div>
<button type="button" id="btn">按钮</button>
<script>
    'use strict'

    /*$('test_jquery').click(function () {
        alert("hello");
    })*/

    $(function () {
            $("div").css("color","red");
        })

    $(document).ready(function(){
        $('#test_jquery').click(function(){
            alert('弹出链接对话框.');
        });
        $('#btn').click(function(){
            alert('弹出按钮对话框.');
        });
    });
</script>
</body>
</html>

 $(document).ready(function(){
        $('#test_jquery').click(function(){
            alert('弹出链接对话框.');
        });
        $('#btn').click(function(){
            alert('弹出按钮对话框.');
        });
    });

选择器

文档工具站：

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 400px;
            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>

</body>
</html>

操作DOM

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

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

CSS的操作

$('#test-ul li[name=python]').css('color','red');

元素的隐藏与显示，本质：display:none

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

CQIPC_yyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学JavaScript重点笔记

javascript学习笔记
复制链接

扫一扫