js基础篇

最新推荐文章于 2024-11-04 10:13:26 发布

Windstormm

最新推荐文章于 2024-11-04 10:13:26 发布

阅读量70

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_58833537/article/details/119115091

版权

JavaScript

同步先吃饭再去看电视解析到js的时候是同步
异步边吃饭边看电视解析css或者是图片

js书写两种语法：强调的是html的解析过程，从上至下的进行解析
1>引用js文件，或引用其他的库、插件，应写在head中
2>写自己的js文件，应写在body的最下面

js获取元素的四种方式：
id
class
标签
选择器

代码实操如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/index.js"></script>

</head>
<body>
        <div id="div1" onclick="btn()" style="width: 100px;height: 100px;background: green">
            <span>222</span>
        </div>
        <div id="div0">
              <div class="div1" >zixuan</div>
        </div>
<!--              <div class="div1" >zixuan</div>-->
        <form action="" name="">
            <button id="btn">表单重置</button>   <!--放在表单里面,否则不会触发-->
            <input type="text" name="gg">
        </form>
    <script>
         //id
                            // document  文档对象 <==dom
         let div=document.getElementById("div0")
         console.log(div)   //是js对象 （ 文档对象的一部分 ）（ dom对象）

         //class
         let div1=div.getElementsByClassName("div1")
        console.log(document,div1)

        //标签
        let div2=document.getElementsByTagName("div")
        console.log(div2[0])

        //选择器
        //  let div3=document.querySelector("div：nth-of-type(1)"/"div") //只能获取一个元素
        let div3=document.querySelectorAll("div") //可以获取多个元素
        console.log(div3)

        //name
        let input =document.getElementsByName("gg")
        console.log(input[0])

         //js简单事件
         input[0].onfocus=founction(){
             alert("滚")
         }
         input[0].onclick=founction(){
             alert("我没钱，渣男")
         }

         //onblur:失去焦点时触发  onclick：点击  onfocus：触发焦点  onmouseover：鼠标移入
         // onmouseout：鼠标移开  onmousedown：按下鼠标时  onmouseup：鼠标抬起时
         //onchange：状态改变时触发   onselect：文本选中时触发  onkeyup：键按住时，键抬起时  onreset：表单重置
         document.getElementById("btn").onreset =function () {
            alert("表单重置")
        }
        function btn() {
            console.log("分手吃饭")

        }

        //JavaScript 修改
        // getAttribute("属性名")
        // setAttribute("属性名","属性值")
        // removeAttribute("属性名")

       console.log(div.getAttribute("class"))
        div.setAttribute("class","Big_biv")
         console.log(div.getAttribute("class"))
        div.removeAttribute("class")
         console.log(div.getAttribute("class"))

         // div.style["background"] = "red"
         div.onclick=function(){
              div.style["background"]= "red"  //----引用单个样式
         }

        //js数据类型
        // number  整形
        // string  字符串
        //boolean  布尔值
        //null     空值 ---js不是强类型，js会自动识别，无需刻意“声明某个变量的时候指定其为什么数据类型”
        //undefined未被定义
        //object   对象
      console.log(typeof(div))  //返回变量数据类型  另一种写法：console.log(typeof div)
    </script>
</body>
</html>