JavaScript_day02

最新推荐文章于 2024-10-10 10:50:43 发布

尒忸姺泩

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量71

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46106562/article/details/119740195

版权

1.DOM: 文档对象模型

文档树:

文档	一个网页
节点	网页中的所有内容都是节点(标签,属性,文本,注释等)
元素	网页中的标签
属性	每个标签的属性

DOM操作:

a.获取元素(标签):

<body>
    <div id="box1">
        <span>hello</span>
        <input type="text" name="username">
        <p class="p">HTML</p>
        <p class="p">HTML</p>
        <p class="p">HTML</p>
    </div>
</body>

<script>
    // 通过id属性获取div标签
    var div = document.getElementById("box1");

    // 通过标签名获取元素
    var div2s = document.getElementsByTagName("div");// div2s是伪数组,调用该对象:div2[下标]

    // 通过name属性获取元素
    var inputs = document.getElementsByName('username');// inputs是伪数组
    
    // 通过类名(class)获取元素
    var ps = document.getElementsByClassName('p');// ps是伪数组

    // 通过选择器获取元素    
    // querySelector 和 querySelectorAll:前者返回一个匹配的元素,后者返回匹配到所有的元素

    var results=document.querySelectorAll('div p');//返回div标签下所有的p标签

    var results=document.querySelector('div p');//返回div标签下第一个p标签
    
</script>

b.事件: 触发-响应机制

三要素:

事件源:触发事件的元素(标签)

事件类型:事件的触发方式(点击,移入等)

事件的处理程序:事件触发后要执行的代码(函数)

事件触发的三种写法:

    <!-- 第一种写法,所有JS代码都写在HTML中,不方便后期维护和更改 -->
    <input type="button" value="弹窗" onclick="alert('======')">

<body>
    <!-- 第二种写法,js代码分离,通过HTML绑定函数 -->
    <input type="button" value="通过HTML绑定函数" onclick="fn()">
</body>
    <script>
        function fn(){
            alert("通过HTML绑定函数");
        }
    </script>

<body>
    <!-- 第三种写法,看上去和js无关,其实是通过js代码绑定 -->
    <input type="button" value="JS弹窗" id="bn">
</body>
    <script>
        var btn = document.getElementById("bn");
        
        btn.onclick = function(){
            alert("js代码绑定");
        }
    </script>

常见的事件:

onclick	当用户点击某个对象时调用的
onmouseover(onmouseenter)	鼠标移到某元素之上
onmouseout(onmouseleave)	鼠标从某元素移开
onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发 <input>,<keygen>,<select>,<textarea>
onfocus	元素获取焦点时触发
oninput	元素获取用户输入时触发
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开

注:Event事件的绑定请看下一章

非表单元素的属性操作: href、title、id、src、className width height

<body>
    <p id="text">我爱中国</p>
    <img src="images/tv.jpg" alt="" id="img">
    <button id="btn">点我</button>
</body>
    <script>
        //获取img标签
        var imgObj=document.getElementById('img');
        
        document.getElementById('btn').onclick=function(){
            // 给p标签添加class属性
            document.getElementById('text').className='text';
            // 更改img的图片地址
            imgObj.src='images/tv04.jpg';

            // 更改img的宽高,width,height 不加px
            // imgObj.width='200';
            // imgObj.height='200';
        };
    </script>

表单元素属性:value、type、disabled(表单元素属性的禁用)、selected、checked

<body>
    <input type="text" id="text">

    //<input type="text" id="text" disabled> //禁用该输入框
</body>

<script>
    var input=document.getElementsByTagName("input");
    //通过js设置禁用
    input[0].disabled=true;
</script>

InnerText和InnerHTML:

innerText:主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML:主要的作用是在标签中设置新的html标签内容,是有标签效果的,也可以设置文本内容

<body>
    <p id="text">
        <span>一段文本</span>
    </p>

    <button id="getText">获取文本</button>
    <button id="setText">设置文本</button>
</body>

<script>
    //获取标签对象
    var text=document.getElementById('text');
    var getText=document.getElementById('getText');
    var setText=document.getElementById('setText');
    
    //获取文本内容
    text.onclick=function(){
        //alert(text.innerText);//一段文本
        alert(text.innerHTML);//<span>一段文本</span>
    }

    //设置文本内容
    setText.onclick=function(){
        var str=prompt('请输入文本');
        text.innerText=str;
    }
</script>

this:事件中表示当前元素的时候,使用this

<body>
   <p>1111</p>
   <p>2222</p>
   <p>3333</p>
   <p>4444</p>
   <p>5555</p> 
</body>
    <script>
        var p=document.getElementsByTagName("p");
        for(i=0;i<p.length;i++){
            p[i].onclick=function(){
                console.log(this.innerText)
            }
        }
    </script>

阻止a链接跳转: 阻止超链接的默认的跳转return false

<a href="www.baidu.com" id="a">百度</a>

<script>
    var a=document.getElementById("a");
    a.onclick=function(){
        return false;
    }
</script>

自定义属性:

<body>
    <div id="box1">
        <span>hello</span>
        <input type="text" name="username" id="input">
        <p class="p">HTML1</p>
    </div>
</body>
<script>
    
    var int = document.getElementById('input');

    // 设置属性
    int.setAttribute("属性的名字","属性的值");

    // 获取属性
    int.getAttribute("自定义属性的名字");

    // 移除属性
    int.removeAttribute("属性名称");

</script>