day07-js入门

最新推荐文章于 2024-09-30 23:47:24 发布

泉水涓涓

最新推荐文章于 2024-09-30 23:47:24 发布

阅读量246

点赞数 1

分类专栏： HTML css javascript 前端文章标签：对象函数 javascript 标签特性

本文链接：https://blog.csdn.net/skyannesky/article/details/77997808

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

1、操作标签的属性

window.onload = function () {} # 是一个监听事件，当页面加载完毕后才开始执行代码
var oA1 = document.getElementById(“a1”); # 通过id获取元素对象
alert(oA1.id); #获取元素对象的id属性的值
oA1.id = “hehe”; # 给元素对象的id属性赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            // 获取a和img标签的对象
            var oA1 = document.getElementById("a1");
            var oPic = document.getElementById("pic1");

            oA1.id = "hehe";

            // 获取href的值 是一个字符串
            var sHref = oA1.href;

            alert(sHref);

            oA1.href = "http://www.baidu.com";

            alert(oA1.href);


            oPic.src = "./images/001.jpg";
            oPic.alt = "风景";
        }
    </script>
</head>

<body>

    <!--href=""  如果没有写内容 代表当前页面的地址-->
    <a href="" id="a1">哈哈</a>

    <img src="" alt="" id="pic1">


</body>

</html>

2、特殊的class属性和style属性

oDiv1.className = “box”; #如果是class属性，必须写成className；
oDiv1.style.color = “red”; # style是元素的属性，同时也是一个对象。能操作的事内联对象。

3、用变量操作属性

var sname = “className”;
oDiv1[sname] = “box”; # 用中括号操作属性，中括号支持写变量或者字符串
oDiv1[“className”] = “box”; # 等价于上一句代码

4、操作标签里的代码：

sHtml = oDiv1.innerHTML; # 获取标签里的代码
oDiv1.innerHTML = “呵呵” # 代码会被渲染成html代码
sText = oDiv1.innerText; # 获取标签里的文本，不兼容低版本浏览器
oDiv1.innerText = “呵呵” # 只是文本

<script>
        window.onload = function () {
            var oDiv1 = document.getElementById("div1");

            // 获取标签里的内容
            var sHtml = oDiv1.innerHTML;
            // alert(sHtml);

            // var sText = oDiv1.innerText;//不兼容低版本浏览器
            // alert(sText);

            // 会把字符串里的标签渲染
            oDiv1.innerHTML =   "<a href=''>呵呵呵呵</a>";



            // oDiv1.innerText =   "<a href=''>呵呵呵呵</a>";

        }
 </script>

5、方法函数

fnMyAlert(); # 调用方法
// 定义一个方法，关键字是function，方法的定义，可以放到后面
function fnMyAlert(){
alert(“haha”);
}
alert(iNum1); # undefined 注意一般变量是先写后调用的
var iNum1 = 123;

<script>
        // 调用方法
        fnMyAlert();


        // 定义一个方法 关键字是function  方法的定义 可以放到后面
        function fnMyAlert() {
            alert("haha");
        }



        alert(inum01);//undefined  注意一般变量 先写 后调用

        var inum01 = 123;

    </script>

6、匿名函数

oDiv1.onclick = function(){ # 设置点击事件的监听，点完后会执行function里的代码
alert(“点了一下”)
}

8、函数的参数

fnAdd(1, 2); # 实参
function fnAdd(add1, add2) {
alert(arguments); # arguments里有传入的全部参数，是数组，有length属性
var result = add1+add2;
alert(result);
return result; #可以把结果返回
return false; # 可以阻止标签的默认行为，比如a标签就不会跳转了
}

11、网页换皮肤

通过id获取到link对象，通过更改link的href属性的值，修改css的文件引用，起到换肤的作用。
var oLink = document.getElementById(“link01”); // 获取link标签
oBtn1.onclick = function () { // 设置点击事件监听
oLink.href = “./css/skin01.css”;
}

12、body

如果手动在style里设置了html的颜色，那么body的背景色就不会填充，如果没有设置html，背景色会充满显示器。

13、条件语句

if(1>3){
alert(“大于”);
} else if (1 == 3){
alert(“等于”);
} else {
alert(“不大于”);
}

14、简易计算器

var oNum1 = document.getElementById(“num1”); //获取参数
parseFloat(oNum1.value); # 输入的值不是数字是字符串，需要转换
+ // 多选框

15、条件语句

=== 会判断类型和值，==只判断值，如果是字符串和数字比较的时候会自动转换了比较

16、逻辑运算符

and or not
&& || ! 与或非

17、switch

switch(iNum) { # 条件，支持所有的类型
case 0: # 满足
xxxx; # 操作
break; # 结束，如果不写，语句继续向下执行。
case 1:
…
default:
break;
}

18、元素的显示和隐藏

oContent.style.display = “none”; // 隐藏元素 block inline

19、数组

var aList01 = new Array(); # 定义方式一
var aList02 = new Array(1,2,3,”haha”, true); # 定义方式二
var aList03 = new Array(3); # 定义长度为3的数组
var aList04 = []; # 创建一个空数组
var aList05 = [1,4, “hello”, true]; # 创建了一个数组
alert(aList.length); #获得长度
alert(aList[4]); # 取值
var str01 = aList01.join(“-“); # 用指定的字符拼接字符串
aList.push(“haha”); # 数组后面添加一个元素
aList.unshift(“heh”); #数组的前面添加一个元素
aList.pop() # 删除数组的最后一个元素
aList.shift() # 删除数组的第一个元素
aList.reverse()； # 反转数组
var index = aList.indexOf(2); #获取元素2在数组中第一次出现的位置
var index = aList.lastIndeOf(2) # 获取元素2在数组中最后一次出现的位置，其实就是从后往前找
var aList01 = aList.splice(2,3,”haha”,10); #把从下标2开始的3个元素换成后面的元素

23、多维数组的操作

aList[1][2];

<script>

        // 二维数组
        var aList01 = [ [1,3,"haha"],[true,false,"hehe","heihei"],[1,2,4,5,6,7]];

        alert(aList01[1][2]);//hehe
        alert(aList01[2][4]);//6

    </script>