js第二次亲密接触

最新推荐文章于 2024-08-07 13:30:36 发布

QM_姚丹

最新推荐文章于 2024-08-07 13:30:36 发布

阅读量148

点赞数

分类专栏： # html+css+js

本文链接：https://blog.csdn.net/qq_34475058/article/details/79715878

版权

html+css+js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定义js方法：
1.用function 方法名(){}；里面的参数不需要指定数据类型(var);返回值可以有也可以没有

<script type="text/javascript">
        function sum (a,b) {
            var sum=a+b;
            return sum;
        }
        alert(sum(1,2));
    </script>

2.匿名函数，var testDemo=function(){};调用直接用testDemo();

<script type="text/javascript">
        var testMethod=function(a,b){
            return a+b;
        }
        testMethod(1,2);
</script>

3.var 变量名=new Function(“参数列表”,”方法体”);调用的话直接变量名(参数列表);

<script type="text/javascript">
        var textMethod=new Function("a,b","var sum;sum=a+b;return sum;");
        alert(textMethod(3,2));
</script>

4.js不像java一样有重载方法，js使用的是就近原则，但是js可以通过arguments来在方法内获取参数，来达到和java类似的效果，arguments可以获取function内所有传到的参数。

<script type="text/javascript">
        function mSum () {
            var sum=0;
            for (var i = 0; i < arguments.length; i++) {
                sum+=arguments[i];
            }
            return sum;
        }
        alert(mSum(1));
        alert(mSum(1,2));
        alert(mSum(1,2,3));
    </script>

5.html调用js函数的三种方法

<body>
    <!--调用js函数的第一种方式-->
    <input type="button" name="btFirst" id="btFirst" value="第一种方式" onclick="firstMethod();" />
    <br/>

    <!--调用js函数的第二种方式-->
    <input type="button" name="btSeconed" id="btSeconed" value="第二种方式" />
    <br/>

    <!--调用js函数的第三种方式-->
    <input type="button" id="btThird" value="第三种方式" />
</body>
    <script type="text/javascript">
        function firstMethod(){
            alert("第一种方式");
        }
        function seconedMethod(){
            alert("第二种方式");
        }
        document.getElementById("btSeconed").onclick=seconedMethod;         //注意方法名后面不带括号

        document.getElementById("btThird").onclick=function(){              //注意没有new
            alert("第三种方式");
        }
    </script>

js常用的事件
1. onclick: 点击事件
2. onload: html界面在加载时触发的事件，调用响应的js方法
3. onfocus: 获取焦点事件
4. onblur: 失去焦点事件
5. onkeypress :点击键盘上的某个键，调用的方法，传入event获取

<body onload="firstMethod()">
    <input type="text" name="" id="" value="" onkeypress="mKeypress(event)"/>
</body>
    <script type="text/javascript">
        function mKeypress(obj){
            alert(obj.keyCode);
        }
    </script>

dom : 文档对象模型（document object model），使用dom里面提供的属性和方法，对标记型文档进行操作
1. 文档：指的时标记型文档(html,xml)
2. 对象：在对象中有属性和方法
dom解析html
解析过程：根据Html的层级结构在内存中分配一个树形结构
1. document对象，代表整个文档
2. element对象，代表标签
3. 属性对象
4. 文本对象
5. Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找
document对象代表整个文档
1. 像页面输出内容，也可以输出htmldocument.write("<hr/>");
2. 通过id获取html的标签对象

<!--html代码-->
<input type="text" name="name1" id="nameid1" value="" />
<!--js代码-->
var nameId=document.getElementById("nameid1");

3.通过name获取html的标签对象

<body onload="firstMethod()">
    <input type="text" name="name1" id="nameid1" value="" />
    <br />
    <input type="text" name="name1" id="nameid2" value="" />
    <br />
    <input type="text" name="name1" id="nameid3" value="" />
    <br />
    <input type="button" name="" id="" value="获取" onclick="getValues()" />
</body>
    <script type="text/javascript">
        function getValues(){
            var values=document.getElementsByName("name1");     //注意，获取的是一个数组
            for (var i = 0; i < values.length; i++) {
                alert(values[i].value);                         //注意,用value属性获取值
                Element
            }
        }
    </script>

4.getElementsByTagName(), 根据标签来获取标签对象，返回的结果也是一个数组

<body onload="firstMethod()">
    <input type="text" name="name1" id="nameid1" value="" />
    <br />
    <input type="text" name="name1" id="nameid2" value="" />
    <br />
    <input type="text" name="name1" id="nameid3" value="" />
    <br />
    <input type="button" name="" id="" value="获取" onclick="getValues()" />
</body>
    <script type="text/javascript">
        function getValues(){
            var values=document.getElementsByTagName("input");      //注意，获取的是一个集合
            for (var i = 0; i < values.length; i++) {
                alert(values[i].value);
            }
        }
    </script>

innerHTML的作用：获取html标签的内容和给html标签内写入html代码

<body onload="firstMethod()">
    <span id="spanId">哈哈</span>
    <hr />
    <input type="button" name="btnClick" id="btnId" value="点击生成横向和百度链接" onclick="btnClick()"/>
    <div id="divDemo"></div>
</body>
    <script type="text/javascript">
        var spanDemo=document.getElementById("spanId");
        //第一种使用方法，获取span标签内的内容 哈哈
        alert(spanDemo.innerHTML);          
        function btnClick () {
            var divDemo=document.getElementById("divDemo");
            //第二种使用方法，在div标签内写入html代码
            divDemo.innerHTML="<br/><hr /><a href='http://www.baidu.com'>百度链接</a>";
        }
    </script>

form表单提交的三种方式：
1.使用Input指定为submit，直接点击可以提交
2.使用button的点击调用js方法，调用form的submit方法

<form id="formId" method="get">
        账号：<input type="text" name="name" id="name"/>         <!--必须指定name的值-->
        <br/>
        密码: <input type="text" name="pwd" id="pwd"/>           <!--必须指定name的值-->
        <br/>
        <input type="button" value="提交" onclick="btSubmit()">
    </form>
</body>
    <script type="text/javascript">
       function btSubmit() {
           var formSub=document.getElementById("formId");   //获取表单标签对象
           formSub.submit();                                //调用表单的提交方法
       }
    </script>

3.使用超链接<a href="链接URL?key值=value值&key值=value值">点击提交</a>

<a href="http://www.baidu.com?name=123&pwd=123">点击提交</a>

form表单的校验方式，比如需要校验账号和密码是否为空
第一种，通过在fom表单的onsubmit属性来校验

<body>
        <form action="" method="get" onsubmit="onCheck()">      <!--onsubmit指定一个方法，通国方法校验-->
            账号:<input type="text" name="name" id="name" value="" />
            <br /> 
            密码:<input type="password" name="pwd" id="pwd" value="" />
            <br />
            <input type="submit" value="提交" />
        </form>
    </body>
    <script type="text/javascript">
        function onCheck() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            if(name == "" || pwd == "") {
                alert("账号或密码不能为空");
                return false;               //返回false不能提交
            } else {    
                return true;                //返回true就提交成功
            }
        }
    </script>

第二种方式，通国button的onclick（）调用js方法，来判断账户和密码是否为空,如果为空就不掉用form的submit()方法

<body>
        <form id="formSub" action="" method="get" >     <!--onsubmit指定一个方法，通国方法校验-->
            账号:<input type="text" name="name" id="name" value="" />
            <br /> 
            密码:<input type="password" name="pwd" id="pwd" value="" />
            <br />
            <input type="button" value="提交" onclick="onCheck()"/>
        </form>
    </body>
    <script type="text/javascript">
        function onCheck() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            var sub=document.getElementById("formSub");
            if(name == "" || pwd == "") {
                alert("账号或密码不能为空");
            } else {    
                sub.submit();
            }
        }
    </script>

js解析json数据格式
1.js解析json对象数据格式,通过json对象获取key,然后得到值

        var jsonDemo={"name":"张三","age":20,"sex":"男"};
        var name=jsonDemo.name;
        //结果 name为张三

2.js解析json数组的数据格式，通过获取数组，然后指定数组下标，指定key，然后得到值

        var jsonDemo=[{"name":"张三","age":20,"sex":"男"},
                      {"name":"李四","age":13,"sex":"男"},
                      {"name":"小丽","age":18,"sex":"女"}];
        var name=jsonDemo[2].name;
        //结果 name为小丽