前端基础——JavaScript部分（三）DOM对象，表单，jQuery

最新推荐文章于 2024-08-27 13:38:21 发布

饺子0778

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量133

点赞数

分类专栏： # JavaScript基础跟狂神75天速成Java

本文链接：https://blog.csdn.net/wjr0258/article/details/107746457

版权

跟狂神75天速成Java 同时被 2 个专栏收录

37 篇文章 4 订阅

订阅专栏

JavaScript基础

7 篇文章 0 订阅

订阅专栏

操作DOM对象

DOM：文档对象模型
核心：浏览器网页就是一个Dom树形结构!

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

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

- 获得Dom节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应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
</script>

这是原生代码，之后都用jQuery（）；

- 更新Dom节点

<div id="father">
</div>
<script>
    var father=document.getElementById('father')
</script>

操作文本：

father.innerText=‘123’ 修改文本的值
father.innerHTML=‘123’ 可以解析html文本标签

操作css：

father.style.color='red'   //属性使用字符串
father.style.fontSize='50px'  //-转驼峰命名
father.style.padding='50px'

- 删除Dom节点

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

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
var self=document.getElementById('p1')
var father=p1.parentElement;
father.removeChild(p1)
//删除是一个动态的过程，下标动态更新
father.removeChild(father.children[0])
father.removeChild(father.children[0])
father.removeChild(father.children[0])       //这样三个就都删掉了
</script>

- 插入Dom节点

innerHTML
appendChild();

 //获取父节点
    let father=document.getElementsByTagName('div');
    father=father[0];
    //方法一：设置父元素的HTML代码
    //会覆盖原有HTML内容，空元素中添加可以使用
    father.innerHTML="<p>hello!</p>";
    //方法二：appendChild()方法
    father.parentNode.appendChild(father.firstChild);
    //创建一个新的标签
    let p=document.createElement('p');
    p.style.color='red';//设置样式
    //标签的属性（比如a的href script的src）都是节点的属性，可以设置
    p.setAttribute('id','id1');//也可以使用.xxx=的形式，但更推荐这种
    p.innerText="新朋友";
    father.appendChild(p);

操作表单

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

表单的目的：提交信息

<form action="post">
    <span>用户名：</span><input type="text" id="username">
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="woman" id="girl">女
</form>

<script>
    let input_text=document.getElementById('username');
    console.log(input_text.value);//获得输入框的值
    //对于多选或者单选框，value对应的只是在表单提交时，key对应的value值
    //想要获取单选框或者多选框中对应选项是否被选中，应该访问.checked属性
    document.getElementById('boy').checked=true;//设置为选中状态
</script>

提交表单

<form method="post" action="index.html" onsubmit="return submit();">
    <span>用户名：</span><input type="text" id="username" name="username">
    <span>密码：</span><input type="password" id="password" name="password">
<!--    绑定事件 onclick被点击-->
    <button type="submit"></button>
</form>

<script>
    function submit() {
        let input_username=document.getElementById('username');
        let input_password=document.getElementById('password');
        //md5加密
        input_password.value=md5(input_password.value);
        //可以在此进行输入格式验证 比如密码是否同时用数字字母符号
        //由于表单在onsubmit设置为return submit();
        //可以在函数中设置返回值来控制表单是否提交 return false则不提交
        return false;
    }
</script>

jQuery

初识

公式：$(selector).action()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    两种引入jQuery的方法-->
    <script src="lib/jquery-3.5.1.min.js"></script>
<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>  -->

</head>
<body>


<a href="" id="test_jquery">点我</a>
<script>
    document.getElementById('id');
    //selector就是css的选择器
    $('#test_jquery' ).click(function () {
     alert('hello,jQuery');
    })
</script>
</body>

选择器

 //原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();
    //jQuery：css中所有选择器都能用
    $('p').click();  //标签
    $('#id1').click();  //id
    $('.class1').click();   //类

jQuery事件

$('p').mousedown();//鼠标按下
$('p').mouseenter(function () {alert("爬");});//鼠标进入

jQuery操作DOM对象

let text;
    text =$('body').text();//获得值
    $('body').text("设置值");//设置值
    text =$('body').html();//获得值
    $('body').html("设置值");//设置值
    //添加css样式：不会覆盖
    $('body').css('color','red');
    $('body').css('background','black');

    //隐藏和显示
    $('body').hide();
    $('body').show();