其他分享
首页 > 其他分享> > JS新挑战

JS新挑战

作者:互联网

        一个月的HTML,不论是pc端还是移动端都逃不开固定的结构和语法,接受程度还ok,紧接着开始步入第二阶段JavaScript的学习,就四天的内容足以望洋兴叹。课程本身的难度,老师上课的节奏,一周前一两天可以比喻成坐飞机,后面三四天堪称坐火箭,唆~~一愣一愣滴。本周主要学习了:

        一、JavaScript概述

JavaScrip 简称JS,是运行在【javascript解释器 或者 特定引擎中】的【解释型】【弱类型】【面向对象】脚本语言

    1、javascript解释器:
        1、浏览器自带js解释器
        2、独立安装一个js解释器 - node.js时

    2、编译型:运行程序之前,需要检查语法是否正确,如果不正确直接不允许运行,比如:java、c、c++、c# - 更加严格
       解释器:运行程序之前,不要检查语法是否正确,直接运行,碰到错误就会停止运行,比如:javascript、php、node.js... - 更自由

    3、js特点:
        1、代码可用任何文本编辑器编写:vscode hbuilder 记事本...
        2、解释型语言,无需编译
        3、弱类型语言:不需要进行规定,你想放什么就放什么 - 爱自由
            变量的数据类型是由值来决定的

    4、js作用:
        1、客户端的数据的计算:购物车
        2、表单的数据验证:(手机号、身份证、邮箱、密码)
        3、提供了事件(点击、鼠标移入移除、键盘...)
        4、网页中一切css做不了的特效,都由js完成
        5、和服务器端进行交互 ajax

        二、JavaScript的使用

1、使用方式:2个
        1、在HTML页面写上一个标签: 
            <script>
                js代码
            </script>

        2、创建一个xx.js文件,在里面书写js代码,最后在HTML页面引入
            <script src="xx.js文件路径"></script>

 2、JS的调试语句:代码运行期间,如果碰到错误,会报错,但是后续代码就不会执行了,甚至如果只是逻辑错误不是语法错误,那并不会报错,我们需要一个方式去帮助我们找到错误何在
           *1、在控制台输出日志:console.log(想要输出的东西);//打桩输出,疯狂打桩
            2、在页面上进行输出:document.write(想要输出的东西); - 要不得,如果绑定上了事件,会将页面上所有的内容全都替换掉
           3、弹出框显示:alert(想要输出的东西); - 会卡主整个页面,必须关闭后用户才能看到HTML和CSS

 3、js的语法规范:是严格要求区分大小写的,不能乱写
        比如:
            console.log();//正确
            console.Log();//错误

        三、JavaScript的语句

1、while循环:
    语法:
    var 循环变量=几;
    while(循环条件){
        循环体;
        循环变量的变化;
    }

2、for循环:和while能做的事是一模一样的,只不过语法比while更简单,看上去也更加的舒服
    语法:
    for(var 循环变量=几;循环条件;循环变量的变化){
        循环体;
    }

3、if结构:
    1、一个条件一件事,满足就做不满足就不做
        if(条件){
            操作
        }

    2、一个条件2件事,满足就做1不满足2
        if(条件){
            1
        }else{
            2
        }

    3、多个条件多件事,满足谁就做谁
        if(条件1){
            1
        }else if(条件2){
            2
        }else{
            3
        }

4、*****数组:

        1、创建数组:2种方式
           *1、直接量方式:var arr=[];//空数组
                   var arr=[元素,元素,...];

             2、构造函数方式:var arr=new Array();//空数组
                 var arr=new Array(元素,元素,...);

        三、JavaScript的组成

1、DOM树:DOM将HTML看做了是一个倒挂的树状结构,但是树根不是你们理解的HTML标签
      *树根:是一个document对象,document对象不需要我们程序员创建,由浏览器的JS解释器创建,一个页面只有一个document
       作用:提供了一些属性和方法,可以让我们程序员去操作整个DOM树(增删改查每一个DOM节点)
       DOM节点:一个标签、文本、属性、元素

2、查找元素:

           1、通过HTML的特点去查找元素

                1、id查找:var elem=document.getElementById("id值");  //单个元素

                2、标签名查找:var elems=document/已经找到的父元素.getElementsByTagName("标签名");    //群组

               *3、class查找:var elems=document/已经找到的父素.getElementsByClassName("标签名");    //群组

        2、节点之间的关系进行查找:前提:必须先要找到一个人,才能使用关系
    父:elem.parentNode;//单个元素
    子:elem.children;//集合
    第一个儿子:elem.firstElementChild;//单个元素
    最后一个儿子:elem.lastElementChild;//单个元素
    前一个兄弟:elem.previousElementSibling;//单个元素
    后一个兄弟:elem.nextElementSibling;//单个元素

3、操作元素:        

        1、内容:
              *1、innerHTML属性:获取 或 设置 某个元素的内容,并且可以识别标签
                        获取内容:elem.innerHTML;
                        设置内容:elem.innerHTML="新内容";

               2、innerText属性:获取 或 设置 某个元素的文本,不能可以识别标签
                        获取内容:elem.innerText;
                        设置内容:elem.innerText="新内容";

              3、value属性:专门为单标签(input)操作内容准备的
                       获取内容:input.value;
                       设置内容:input.value="新内容";

        2、属性:

                1、获取属性值:elem.getAttribute("属性名");
                2、设置属性值:elem.setAttribute("属性名","属性值");

               简化:
                    1、获取:elem.属性名;
                    2、设置:elem.属性名="属性值";

               缺陷:1、不能操作自定义属性,只能操作标准属性
                  2、class在ES6升级为了一个关键字,所以想要写class换为了className

        3、样式:

                语法:
                        获取:elem.style.css属性名;
                        设置:elem.style.css属性名="css属性值";

                特殊:1、css属性名,要把有横线地方,换成小驼峰命名法
                      2、获取的时候,代老湿只交了大家获取内联样式,不能获取样式表中的样式

        

        4、元素绑定事件:
            单个元素:elem.οnclick=function(){
                    操作;
                    this->单个元素绑定事件,this->elem绑定事件的这个元素
                  }

            多个元素:for(var i=0;i<elems.length;i++){
                    elems[i].οnclick=function(){
                            操作
                            this->多个元素绑定事件,this->当前触发事件的元素
                    }
                  }


***总结:
   1、一切的获取都是为了判断
   2、一切的设置都是为了修改
   3、千万不要对着一个集合做操作,要么遍历拿全部,要么下标拿一个

标签:挑战,元素,elem,js,HTML,var,JS,属性
来源: https://blog.csdn.net/weixin_62790207/article/details/122799933