JavaScriptDay3

7.操作BOM对象（重点）

7.1、浏览器介绍

JavaScript和浏览器的关系？

JavaScript的诞生就是为了能够让它在浏览器中运行！

BOM:浏览器对象模型

  • IE
  • Chorome
  • Safari
  • FireFox

7.2、window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
798
window.innerWidth
278

7.3、Navigator（不建议使用）

Navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.platform
'Win32'

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

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

7.4、screen

代表屏幕尺寸

screen.width
1920
screen.height
1080

7.5、location(重要)

location代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JavaScript/lesson02
protocol: "http:"
reload:f reload() //刷新网页 相当于F5
//设置新的地址
location.assign('https://home.cnblogs.com/u/Sunyn-blogs')

7.6、document

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

image

获取具体的文档树节点

<dl id="app">

  <dt>Java</dt>
  <dd>JavaSE</dd>
  <dd>JavaEE</dd>

</dl>

<script>
  var dl = document.getElementById('app')
</script>

获取cookie

image

劫持cookie原理：

恶意人员写一个非法网站 里面有非法js文件可能会获取你的cookie，再通过ajax上传到他的服务器

服务器端可以设置cookie：httpOnly

7.7、history（不建议使用）

history代表浏览器的历史记录

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

8.操作DOM对象（重点）

8.1、核心

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

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

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

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

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

这是原生代码，之后我们尽量都是用jQuery();

8.2、更新节点

<div id="id1">

</div>

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

操作文本

  • id1.innerText='456' 可以修改文本的值

    image

  • id1.innerHTML= '123'可以解析HMTL文本标签

    image

操作JavaScript

id1.style.color = 'red'
'red'
id1.style.fontSize = '20px'
'20px

image

8.3、删除节点

步骤：先获取父节点，再通过父节点删除

<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;
</script>

如果想删除p1：father.removeChild(self)

image

也可以这样删除

father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

但是要注意删除是一个动态的过程，如果第一个元素被删除了，那么原来的第二个元素就会成为第一个元素

8.4、插入节点

我们获得了某个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>

  var js = document.getElementById('js');
  var list = document.getElementById('list');

</script>

原：image

追加后：

image

image

8.5、创建新标签

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

  //通过JS，创建一个新的节点
  var newP = document.createElement('p');//创建一个p标签
  newP.id = 'newP';
  newP.innerText = 'Hello,sunyaning';
</script>

image

//创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript');

myScript.setAttribute('type','text/javascript');等价于

image

8.6、insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

image

9.操作表单

9.1、表单是什么 form

  1. 文本框 text
  2. 下拉框 select
  3. 单选框 radio
  4. 多选框 checkbox
  5. 隐藏域 hidden
  6. 密码框 password

表单的目的：提交信息

<form action="post">
  
    <span>用户名:</span> <input type="text" id="username">
    
</form>

<script>

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

image

<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="man" id="gril"> 女
    </p>

</form>

<script>

  var input_text = document.getElementById('username');
  var boy_radio = document.getElementById("boy");
  var gril_radio = document.getElementById("gril");

  // //得到输入框的值
  // input_text.value;
  // //修改输入框的值
  // input_text = '123';

  //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
  boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中
  gril_radio.checked = true; //用代码实现对表单的操作


</script>

9.2、提交表单

原始提交如下：

<form action="/login" method="post" id="form1">
      <span>用户</span>
     <input type="text" name="username" id="username"/><br/>
     <span>密码</span>
     <input type="password" name="password" id="passsword"/><br/>
     　　
      <input type="submit" value="提交">
 </form>
  • form是一个表单，用来发送http请求。直观的说，只要用form将需要提交到服务器的标签包围，当提交的时候，就会向服务器发送有name属性的数据。所以，input内容提交必须有name属性。
    • action：服务器接口路径；
    • method:选择发送请求的方式，默认是get，通常用post。get请求会在地址栏显示参数，并且有长度限制。post则没有。
    • id:标识标签元素
    • 当提交后，服务器就会得到：username=填的用户名 & password=填的密码
  • 当点击提交后，form数据就会发送。通常提交前要校验数据。比如长度规则等。所以需要js。

9.3、前端密码MD5加密

10.jQuery

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

10.1、获取jQuery

方式一：CDN在线引入

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

方式二：官网下载，放在项目里引入

<script src="lib/jquery-3.4.1.js"></script>

公式：$(selector).action() 选择器+事件

例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

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

<script>


    $('#test-jQuery').click(function (){
        alert('hello,jQuery')
    })
</script>

10.2、选择器

//JavaScript，选择器少，麻烦不好记
  //标签
  document.getElementsByTagName();
  //id
  document.getElementById();
  //类
  document.getElementsByClassName();

  //jQuery css中的选择器它全部都能用！
  $('p').click();//标签选择器
  $('#id1').click();id选择器
  $('.class').click();//class选择器

文档工具站：https://tool.oschina.net/apidocs/apidoc?api=jquery

10.3、事件

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <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>
</body>
</html>

10.4、操作DOM

节点文本操作

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

css的操作

image

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

image

posted @ 2025-10-17 17:01  齐天大圣951  阅读(6)  评论(0)    收藏  举报