狂神Java学习笔记————JavaScript（三）————DOM操作和jQuery

需要注意：

• 关于节点（Node）和元素（Element）
• getElement和getElements

DOM

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

• 对DOM节点进行增删改查

获取DOM节点

注意：Element是直接获取节点，即在接下来可以直接通过"."对节点进行操作，而Elements是获取一个节点数组，即使满足条件的节点只有一个，也需要取出数组中的第i个来真正取得节点。

        //标签选择器
        let h1=document.getElementsByTagName('h1');
        //ID选择器
        let p1=document.getElementById('p1');
        //class选择器
        let p2=document.getElementsByClassName('p2');
        let father= document.getElementById('father');
        //获得最后一个、第一个、所有子节点
        father.lastChild;
        father.firstChild;
        father.childNodes;//返回NodeList
        father.children;//返回HTMLCollection
        // 获得父节点
        father.parentNode;
        //以上都为原生代码，以后推荐使用jQuery；

更新节点

获取到目标节点之后，其实包括子节点、style样式和其中的html代码，都是节点内的子元素。因而可以很方便的对他们进行操作以更新节点。

    //先获取节点
    let div1=document.getElementById('div1');
    div1.innerText='hello';//改变文本内容
    div1.innerHTML='<a href="https://www.baidu.com">123</a>';//可以解析html
    div1.id='123';//更改id
    div1.className="hello";//更改class
    div1.style.background='red';//操作CSS

删除节点

通过父节点删除

	//获取要被删除节点的父节点
    let father=document.getElementById("div").parentNode;
    //删除，删除此节点后，此节点的所有子节点也会被删除
    father.removeChild(document.getElementById("div"));

插入节点

• 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 password
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 。。。

---

<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

需要导入jQuery.js包后使用，就是一些包装好的js函数

<a href="index.html" id="test">点我啊</a>
<script>
    //使用格式：
    //$('选择器').动作  其中选择器即css中选择器
    $('#test').click(function () {
        alert("你还真点？");
    });
</script>

jQuery选择器

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