js基本操作

Posted 2020-12-28 爱河

一、    js获取网页中的标签，js通过系统对象document的3个get方法

方法                                          返回值

 

                                                   document.getElementById("btn")             该标签只有一个

                                                   document.getElementsByName()                     name值相同的一组标签

                                                   document.getElementsByTagName(“a”)             拿到页面上所有的超链接标签

 

二、    层上面显示内容

$("div").innerhtml("设置打印内容");

应用场景：通过条件判断显示把不同的提示（用户登录、信息注册等等）

三、js事件加载方式

<script type="text/javascript">

    <!--绑定单击事件-->
    document.getElementById("btn").onclick=事件处理器； */
     /*function listinit() {
        alert("11");
    }
  /*  window.document.onload=function () { 无法实现加载
        alert("11");
    }*/
    //第一种写法
    /*window.onload=function () {
        alert(3232);
       listinit();
        alert(3232);
    }*/
    //第二种方法
  /*  window.onload=listinit();*/

    function $(id) {
        return document.getElementById(id);
    }
    //先加载网页，后加载按钮监听事件
    window.onload=function () {
        alert("提交信息");
       $("btnSubmit").onclick=function () {
           alert("提交成功");
       }
    }

</script>

四、获取指定标签、获取标签内容

<!--根据id获取标签-->
function $(id) {
    return document.getElementById(id);
}
<!-- 根据类选择器获取标签-->
function $$(name) {
    return document.getElementsByName(name);
}
$("btn").onclick=function () {
    document.forms[0].submit();
}

<!--根据id获取标签-->
 function $(id) {
     return document.getElementById(id);
 }
 <!-- 根据类选择器获取标签-->
 function $$(name) {
     return document.getElementsByName(name);
 }
 $("btn").onclick=function () {
     document.forms[0].submit();
 }
/* 获取id为div标签的内容*/
 $("div1").value();
 /*设置id为div1的值*/
 $("div1").innerHTML("填入所设值得值");
 /*根据类选择器选取元素数组，一般是复选框*/
 var str="";
 var varm = $$(".class");
 for ( var  i=0;i<varm.length;i++){
     if($$(".class")[i].checked){
         str+=$$(".class")[i].value();
     }
 }