Diary23-Javascript学习(下）

2023-12-13 23:16:18

8.操作DOM对象(重点)

核心

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

  • 更新：更新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; //获取父节点下的所有子节点
// father.firstchild
// father. lastchild

这是原生代码，之后尽量用jQuery()

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<div id="id1">
?
</div>
?
<script>
 ? ?var id1=document.getElementById('id1')
</script>
?
</body>
</html>

操作文本

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

  • id1.innerHTML='sxc'

操作JS

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

删除节点

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

<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;
 ? ?father.removechild(self)
</script>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<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>
 ? ?var js=document.getElementById('js');
 ? ?var list=document.getElementById('list');
 ? ?list.appendChild(js);//追加到后面
</script>
?
</body>
</html>

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

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

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9.操作表单(验证)

获取要提交的信息

<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>
 ? ?var input_text = document.getElementById('username');
 ? ?var boy_radio = document.getElementById('boy');
 ? ?var girl_radio = document.getElementById('girl');
?
 ? ?// 得到输入框的值
 ? ?input_text.value
 ? ?// 修改输入框的值
 ? ?input_text. value = '123'
?
 ? ?// 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
 ? ?boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~
 ? ?girl_radio.checked = true; //赋值
?
</script>

提交表单

<!--
?
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true, false
将这个结果返回给表单,使用 onsubmit 接收!
οnsubmit="return aaa()"
-->
?
<form action="https://www.baidu.com/" method="post" οnsubmit="return I
aaa ()">
?
 ? ?<p>
 ? ?<span>用户名 :< /span> <input type="text" id="username"
 ? ?name="username">
 ? ?</p>
 ? ?<p>
 ? ?<span>密码 :< /span> <input type="password" id="input-password">
 ? ?</p>
?
 ? ?<input type="hidden" id="md5-password" name="password">
?
 ? ?<!-- 绑定事件 onclick 被点击 -- >
 ? ?<button type="submit">提交</button>
</form>
?
<script>
function aaa() {
 ? ? ? ?alert(1);
 ? ?var uname = document.getElementById('username');
 ? ?var pwd = document.getElementById('input-password');
 ? ?var md5pwd = document.getElementById('md5-password');
?
 ? ?md5pwd.value = md5(pwd.value);
 ? ?// 可以校验判断表单内容,true就是通过提交,false,阻止提交
 ? ?return true;
 ?  }
</script>

10.jQuery

<! DOCTYPE html>
<html lang="en">
<head>
<meta charset=['UTF-8">
<title>Title</title>
<!-- cdn引入 -- >
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
?
</body>
</htm1>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--< script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -- >
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
?
<a href="" id="test-jquery">点我</a>
?
script>
?
//选择器就是css的选贼器
$('#test-jquery'). click(function () {
alert('hello, jQuery');
})
</script>
?
</body>
</html>

选择器

//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName ();
//id
document.getElementById();
//类
document.getElementsByclassName ();
?
//jQuery css 中的选择器它全部都能用!
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click() //class选择器

文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

事件

<!-- 要求:获取鼠标当前的一个坐标 -- >
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=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值’);//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css的操作

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

元素的显示和隐藏

$('#test-ul li [name=python]').show()
$('#test-ul li [name=python]').hide()

文章来源:https://blog.csdn.net/sxc010701/article/details/134982772
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。