js的简单介绍、选择器、相对于窗口的定位、transform的用法注意事项、设置元素HTML的内容

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/109404495

一、初识 JS：

引入js三部曲：
        1.找元素
        通过id的名称找元素
        document.getElementById("id的名称")
        get Element Id驼峰式写法（首字母大写）
        2、添加事件
        元素：on事件
        点击事件：元素.onclick
        3、发生了什么
        =function(){//代码---处理事件}
//双斜杠代表在JS里面的注释；

点击事件

元素.onclick =  function(){
	//要执行的代码-接下来要处理的事
}

鼠标悬停事件:

元素.onmouseover =  function(){
	//要执行的代码-接下来要处理的事
}

操作元素

读取和设置，input的值

元素.value 
元素.value = "要设置的值"

设置元素的HTML内容

元素.innerHTML = "要设置的内容"

设置元素的行间样式

元素.style.css属性名称 = “属性值”

属性名称两个或以上单词组成，转换成驼峰
```
obox.style.backgroundColor = "red"
```

条件语句

if(条件){ //真或假
	条件成立（为真）时执行的代码
}else{
	条件不成立（为假时）时执行的代码
}

for循环

for(var i=0;i<5;i++){
	//代码块
}

执行的顺序
- var i = 0;
- i<5; 成立
- {代码块}
- i++

》案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <!-- 
        引入js三部曲
        1.找元素
        通过id的名称找元素
        document.getElementId("id的名称")
        get Element Id驼峰式写法（首字母大写）
        2、添加事件
        元素：on事件
        点击事件：元素.onclick
        3、发生了什么
        =function(){//代码---处理事件}
     -->

     <!-- <script>
         var xiaohong=document.getElementById("box");
             xiaohong.οnclick=function(){
                 //控制台输出
            console.log("HELLOW WORD");
        }
        xiaohong.οnmοuseοver=function(){
            console.log("别摸我");
        }

     </script> -->
     <script>
          document.getElementById("box").onclick=function(){
                 //弹出警告框
            alert("HELLOW WORD");
        }
        document.getElementById("box").onclick=function(){
        alert("别摸我");
        }
     </script>
</body>
</html>

》案例展示（点击右侧出现列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu{
            width:200px;
            height:100%;
            background-color:#7f7f7f;
            /* 相对于窗口的定位*/
            position:fixed;
            top:0px;
            right:-200px;
            transition:0.5s;
        }
        .wenzikuang{
            margin-top:16px;
            margin-left:20px;
        }
        .text{
            font-size:15px;
            color:white;
            line-height: 29px;
            text-indent: 20px;
            background-image: url("小点.png");
            background-repeat:no-repeat;
           /* 背景图片的位置 */
           background-position:left center;

        }
    </style>
</head>
<body>
    <!-- 按钮 -->
    <input type="button" value="展开侧边栏" id="yu">
    <div class="menu"  id="yan">
        <div class="wenzikuang">
            <div class="text">首页</div>
            <div class="text">关于我们</div>
            <div class="text">在线客服</div>
            <div class="text">人才招聘</div>
        </div>
    </div>
    <script>
        //1.找元素
        //找box
        var box=document.getElementById("yu");
        //找boxa
        var boxa=document.getElementById("yan");
       //6.创建一个条件作为开关  为真
        var onoff=true;
        //2.点击事件
        box.onclick=function(){
        //3.发生了什么
        //4.如果onoff为true 
        if(onoff)
        {   //打开时
            box.value="关闭侧边栏";
            boxa.style.right="0px";
           onoff=false;
        }
        //5.否则
        else{
            //关闭时
            box.value="展开侧边栏";
            boxa.style.right="-200px";
            onoff=true;
        }
        }
    </script>
</body>
</html>

二、类型中的第几个

e:nth-of-tyle(1)  类型中的第一个；
box:nth-child(1)     先要符合结构关系，再进行查询；
box:nth-child(odd)   表示询问奇数；
box:nth-child(even)  表示询问偶数；

三、transform的用法注意点：

transform同一属性不同值，则后面会将前面的覆盖；
transform为复合属性，有多个属性需要写在一起，用空格隔开；

四、相对于窗口的定位

position:fixed;
top:10px;/bottom
left:0px;/right

五、按钮

<input type="button" value="展开" id="yu">
button为按钮   通过value设置文字；
placeholder  输入提示占位符；

六、选择器

.box    class="box";
#box    id="box";

七、设置元素的html内容

元素：innerHTML;

八、在JS中通过标签寻找元素

通过标签找元素 document.getElementsByTagName(“标签名”)

找到的是一组集合
获取集合中元素的个数: 集合.length
获取其中一个元素
- 集合[下标值]
- 下标从0开始

》案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"  placeholder="输入内容">
    <input type="button" value="确定" >
    <div id="c">请输入内容</div>
    <script>
        //通过标签找元素 document.getElementsByTagName("标签名")
        var a=document.getElementsByTagName("input");
        var b=document.getElementsByTagName("div");
        console.log(a);
        console.log(a[0]);
        console.log(a[1]);
        a[1].onclick=function()
        {
         b[0].innerHTML=a[0].value;
        }
    </script>
</body>
</html>

九、HTML

单行文本输入框

<input type="text">

按钮

<input type="button">

输入提示占位符，HTML的表单属性

<input type="text" placeholder="提示内容">

ID属性—具有唯一性

<div id="id名">