02_JavaScript入门_JS特性

2021-10-19

字数统计: 1.3k字 | 阅读时长≈ 6分

获取元素的方法
操作元素
事件属性及匿名函数
条件语句

1、获取元素的方法

可以使用内置对象document的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后讲它赋值给一个变量。（JS特性——可以通过元素id来获取/操作特定标签，操作标签的api）

1
2
3

<script type="text/javascript">
  var oDiv=document.getElementById('div1');
</script>

1	<div id="div1">这是一个div元素</div>

2、操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

01、操作元素属性

1	var 变量=元素.属性名 //读取属性

1	元素.属性名=新属性值 //改写属性

02、属性名在js中的写法

html的属性和 js里面属性写法基本一样
- “class” 属性 js写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取页面元素</title>
    <script> <!--注意执行顺序-->
        //等页面加载完成之后，再执行大括号里面的语句
        window.onload=function (){
            // document.getElementById('div01').style.color='blue';
            // document.getElementById('div01').style.width='300px';
            // document.getElementById('div01').style.height='300px';
            // document.getElementById('div01').style.background='gold';
            var oDiv=document.getElementById('div01');   // 读取属性，获取元素
            oDiv.style.color='blue';                     // 写入属性，操作元素
            oDiv.style.width='300px';
            oDiv.style.height='300px';
            oDiv.style.background='gold';
        }
    </script>
</head>
<body>
    <div id="div01">这是一个div元素</div>
</body>
</html>

03、innerHTML

innerHTML可以读取或者写入标签包裹的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素属性操作</title>
    <style>
        .sty01{
            color: teal;
            font-size: 20px;
        }
        .sty01{
            color: pink;
            font-size: 40px;
            text-decoration: none;
        }
    </style>
    <script>
        window.onload=function (){
            var oDiv = document.getElementById('div01');
            //读取属性值
            var sId=oDiv.id;
            alert(sId);

            //写属性值
            oDiv.style.color='red';
            oDiv.style.fontSize='30px';
            oDiv.style.background='black';


            // var oA = document.getElementById('link01');
            // oA.style.color='blue';
            var oA02 = document.getElementById('link01');
            oA02.className='sty02';

            //操作元素包裹的内容
            //读取包裹的内容
            var oDiv02 = document.getElementById('div02');
            var sTr = oDiv02.innerHTML;
            alert(sTr);
            //往包裹里的写入内容
            oDiv02.innerHTML="改变了文字哦哦哦"
            oDiv02.innerHTML='<div style="color: teal;background: yellow;font-size: 40px" >这是第三个div</div>';
        }
    </script>
</head>
<body>
    <div id="div01">这是第一个div</div>
    <a href="#" class="sty01" id="link01">这是一个链接</a>
    <div id="div02">这是第二个div</div>
</body>
</html>

3、事件属性及匿名函数

1、事件属性

元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性（onclick），鼠标移入事件属性（onmouseover)，鼠标移出事件属性（onmouseout）,将函数名称赋值给元素事件属性，可以将事件和函数关联起来。

<script type="text/javascript">
window.onload=function(){
  var oBtn=document.getElementById('btn01');
  oBtn.onclick=myalert;
  function myalert(){
    alert('ok!');
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件属性</title>
    <script>
        window.onload=function (){
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('div01');

            //为onclick事件属性赋值
            // 第一种写法：定义个普通方法进行传值
            /*
                oBtn.onclick=fnChange;  //  fnChange():函数直接调用，获取到的返回值再进行传值。undefined进行传值的

                                        //  fuChange:  将方法作为参数进行传值的。
                function fnChange(){
                    oDiv.style.width='200px';
                    oDiv.style.height='200px';
                    oDiv.style.background='gold';
                }
            */
            // 第二种写法：定义个匿名方法进行传值
            oBtn.onclick=function (){
                oDiv.style.width='200px';
                oDiv.style.height='200px';
                oDiv.style.background='gold';
            }
        }

    </script>
</head>
<body>
    <!-- 点击按钮 改变元素样式 -->
    <input type="button" value="点击，改变样式，触发事件" id="btn">
    <div id="div01">这是一个div01</div>
</body>
</html>

4、条件语句

通过条件语句来控制程序走向，就需要用到条件语句。

01、条件运算符

==
- 默认会将符号两边的变量进行隐式转换对比。
**=== **
- 进行严谨比较。
>
>=
<
<=
!=
&&
||
!

双等和三等

var iNum01=12;
var sNum02='12';
if(iNum01==sNum02){
  alert("相等！！！")
}else{
  alert("不相相等！！！")
}

结果：相等！！！

var iNum01=12;
var sNum02='12';
if(iNum01===sNum02){
  alert("相等！！！")
}else{
  alert("不相相等！！！")
}

结果：不相等！！！

本文作者： 梁俊可
本文链接： http://ljk3d.com/2021/10/19/webNote/JavaScriptNote/02_JavaScript入门_JS特性/
版权声明： 梁俊可工作室