JavaScript第二天学习笔记

最新推荐文章于 2024-07-19 12:58:53 发布

lingzhisen

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量230

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/lingzhisen/article/details/81349753

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript第二天学习笔记

主要是学习函数，返回值，算术运算符，条件语句，焦点事件，thi是，属性和方法，for循环等

1.1 函数(function)

1.11 函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1.12 函数声明函数使用跟变量一样，需要声明
1.13 自定义函数

<script>
function fun(){
    alert("我是自定义函数");
};
fun();//函数不调用，自己不执行
</script>

1.14 函数直接量声明

<script>
var fun1 = function(){
    alert("直接量声明");
};
fun1();//也需要调用
</script>

1.15 利用Function 关键字声明

<script>
var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();
</script>

1.16 变量声明提升

<script>
function fun(){
    console.log(num);
    var num = 10;
};
</script>

相当于

<script>
function fun(){
    var num;
    console.log(num);
    num = 10;
};
</script>

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。( 只提升变量声明，不赋值。)

var a = 18;
function f1(){
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
};

1.17 函数参数

<script>
function fn(a,b){
    console.log(a+b);
};
fu(1,2);
</script>

arguments是存储了函数传送过过来实参
Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
arguments对象的长度是由实参个数而不是形参个数决定的

<script>
    function fn(a,b){
        console.log(fn.length);//得到的是函数形参的个数
        console.log(arguments);
        console.log(arguments.length);//得到的是实参的个数
        if(fn.length == arguments.length){
            console.log(a+b);
        }else{
            console.error("对不起，你测参数不匹配，正确的参数个数为：" + fn.length);
        };
        console.log(a+b);
    };
    fn(1,2);
    fn(1,2,3);
</script>

1.18 鼠标展示
图1显示的效果：
小图1：
小图2：
小图3：
小图4：
小图5：
大图1：
大图2：
大图3：
大图4：
大图5：

<!DOCTYPE html>
<html>
<head lang="en">
    <meat charset="UTF-8">
    <title>鼠标展示 <title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        height: 70px;
        width: 360px;
        padding-top: 360px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
        background: url(images/01big.jpg) no-repeat;
    }
    #box ul{
        overflow: hidden;
        border-top: 1px solid #ccc;
    }
    #box li{
        float: left;
    }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="images/01.jpg" alt=""/></li>
        <li id="li02"><img src="images/02.jpg" alt=""/></li>
        <li id="li03"><img src="images/03.jpg" alt=""/></li>
        <li id="li04"><img src="images/04.jpg" alt=""/></li>
        <li id="li05"><img src="images/05.jpg" alt=""/></li>
    </ul>
</div>

<script>
//根据鼠标移到不同的小图显示不同的图片
window.onload = function(){
           /*  一共有五组   这些有哪些相同的部分：
              鼠标经过   背景更换图片    我们可以吧这两个放到一个函数里面 重复使用就可以*/
            //事件源    li   事件  鼠标经过   事件处理程序   box 更换背景
          /*  var li02 = document.getElementById("li02");
            var box = document.getElementById("box");
            li02.onmouseover = function(){
                box.style.backgroundImage = "url(images/02big.jpg)";
            }
            var li01 = document.getElementById("li01");
            var box = document.getElementById("box");
            li01.onmouseover = function(){
                box.style.backgroundImage = "url(images/01big.jpg)";
            }*/
            var box = document.getElementById("box");
            function fn(liid,bg){  // 封装函数  参数的传递
                var obj = document.getElementById(liid);
                obj.onmouseover = function(){
                    box.style.backgroundImage = bg;
                }
            }
            fn("li01","url(images/01big.jpg)"); // 实参  调用函数
            fn("li02","url(images/02big.jpg)");
            fn("li03","url(images/03big.jpg)");
            fn("li04","url(images/04big.jpg)");
            fn("li05","url(images/05big.jpg)");

        }
</script>
</body>
</html>

1.19 返回值 return
定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。

<script>
function $(id){
    return document.getElementById(id);
};
$("test1").style.backgroundColor = 'purple';
$("test2").style.backgroundColor = "blue";
</script>

试分析一下代码的结果？

<script>
var total = 10;
var number = square(5);
alert(number);
function square(n){
    total = n*n;
    return total;
};
结果是： 25
</script>

1.2 算术运算符

- - / % ^
    1+1 = 2
    5%2 == 1
    2%5 == 2
    2^3
    A++ ++后置每次自加1 先运算后自加
++a ++前置每次自加1 先自加后运算

分析以下代码：

<script>
var a = 10,b = 20, c = 30;
++a;
a++;
e = ++a+(++b)+(c++)+a++;
alert(e);
</script>

结果是： 77

1.3 条件语句(if)

if(条件表达式) { 语句;};
if() {}else {}
if() else if(){} else if(){} else{}

<script>
    for(var i=0; i<=100; i++)
    {
        if(i == 0)
        {
            document.write("他出生了<br/>");
        }
        else if(i == 25)
        {
            document.write("他结婚了<br/>");
        }
        else if(i ==45)
        {
            document.write("他有孙子了<br/>");
        }
        else if(i ==100)
        {
            document.write("他死了<br/>");
        }
        else
        {
            document.write("他"+ i+" 岁了<br/>");
        }
    }

</script>

1.4 获得焦点失去焦点事件

获得焦点 onfocus
失去焦点 onblur
例1：表单自动获取焦点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>

鼠标经过选择表单:
<input type="text" id="select"/>

<script>
    window.onload = function(){
        var txt = document.getElementById("txt");
        var sele = document.getElementById("select");
        txt.focus(); //自动获得焦点
        sele.onmouseover = function(){
            this.select(); //选择
        }
    }
</script>
</body>
</html>

例2：
图1 这里写图片描述
图2
图3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input,button {
            border:0 none;
            padding:0;
        }
        .search {
            width:258px;
            height:40px;
            margin: 100px auto;
            background-color: pink;
        }
        .search input {
            width:208px;
            height: 40px;
            background: url(images/left.jpg) no-repeat;
            outline-style: none;
            padding-left: 8px;
            color: #ccc;
            float: left;
        }
        .search button {
            height: 40px;
            width: 42px;
            background: url(images/right.jpg) no-repeat;
            float: left;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){

            var txt = document.getElementById("txt");
            txt.onfocus = function(){ //得到焦点
                //alert("得到了焦点");
                //什么时候该清空呢
                //用户没有输入的时候，用户第一次使用的时候
               // 如果 这里input 里面的文字 是 请输入...  说明用户没有用过，就应该清空
                if(txt.value == "请输入..."  )
                {
                    txt.value = "";
                    txt.style.color = "#333";
                }
            }
            txt.onblur = function(){ //失去焦点
                //alert("失去了焦点");
                //什么时候再还原呢？
                //input的值是 空的时候，我们再复原
                if(txt.value == "")
                {
                    txt.value = "请输入...";
                    txt.style.color = "#ccc";
                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" value="请输入..." id="txt"/>
    <button></button>
</div>
</body>
</html>

1.5 this (自己的)

指的是本身
This 主要是指事件的调用者。
（在此不扩展）

1.6 For 循环

例：金字塔

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    for(var i=1;i<=100;i+=3)
    {
        document.write("<hr width=  "+i+"%/>");
    }
</script>
</body>
</html>

1.7 getElementsByTagName() 获取某类标签

getElementById() 只得到一个盒子
我们想要获取某类标签比如说所有的div li span
getElementsByTagName(); 很多个所以是复数很多个
得到的是一个伪数组。
Lis 数组
Lis[索引号] 一个

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

        window.onload = function(){
            var lis = document.getElementsByTagName("li");
           // lis[1].innerHTML = "abc";
            //alert(lis.length);
            for(var i=0; i<lis.length;i++)
            {
                lis[i].innerHTML = "abc";
            }

        }
    </script>
</head>
<body>
<ul id="btn">
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

lingzhisen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript第二天学习笔记

JavaScript第二天学习笔记主要是学习函数，返回值，算术运算符，条件语句，焦点事件，thi是，属性和方法，for循环等1.1 函数(function)1.11 函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。1.12 函数声明函数使用跟变量一样，需要声明1.13 自定义函数&lt;script&gt;function fun(){...
复制链接

扫一扫