JS与CSS基础-优快云博客

第三章 JS概述及CSS相关补充

CSS优先级

选择器优先级：

！important>id>class>element>伪类>*(星号)**

定位属性

内容超出容器：

overflow:scroll：出现滚动条
overflow:hidden：超出内容隐藏
word-break:break-all:文字超出容器自动换行

JS语言

概念：JavaScript客户端脚本（插件的意思）语言，是嵌入在网页中的程序段，是解释型语言，被浏览器解释执行。借用了JAVA的名字却与JAVA没有关系。

javascript加入网页中的方式：

内嵌式：在网页中加入<script>标识，标识中间的内容为JS代码。只能用于本网页<script></script>
外联式：将JS代码独立成*.js文件。通过<script>的src属性导入。可以用于多个网页。
在元素事件中，加入js代码
<input type="button" onclick="alert('ddd')">
超链接伪URL方式
<a href="javaScript:alert('dd')">跳转</a>

javaScript变量

弱类型，不一定要初始化。
弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。
正因为javascript是弱类型的语言，所以形参不能指定变量的类型。

javascript保留关键字

用户自定义的变量名和函数名不能和标签同名。
函数名也不能和元素的ID同名。

JavaScript数据类型

原始类型：

undefined：当声明的变量未初始化时，值为undefined;当函数无明确返回值时，其调用结果也是undefined.
null：值为null，null是从undefined派生出来的，因此null==undefined；null表示不存在的对象。
boolean:true/false
number:即可表示32位整数（包含长整形），也可以表示64位浮点数（包含double型）。
NaN型：表示非数字，它与自身不相等。一般发生在类型转换失败时，isNaN()校验是否为非数字。
String：可以用单引号或双引号声明。

JS的代码示例：

<script>
        function answer(){
            <!--document作用是全文档中寻找,此为按照标签的ID号，得到标签对象-->
            var spanObj = document.getElementById("infoSpan")
            //改变元素中间的内容
            spanObj.innerHTML = "两头牛";
            //改变元素的颜色样式为红色
            spanObj.style.color = "red";
            //利用驼峰法找属性修改背景颜色（在样式中有-的，需要去掉-，采用驼峰命名法）
            spanObj.style.backgroundColor = "yellow";
            spanObj.style.fontSize = "21px";

        }
        //js是若类型语言。定义变量用var，该变量可以接受任何数据，可以是整形、字符串、引用等。
        //由于js是弱类型语言。所以形参数只需要写变量名，而无需加类型
        function season(selectObj){
            //弹出对话框测试，用于调试
            //alert("调用onchange");
            //得到对象
            /*var selectObj = document.getElementById("seasonChange");
            var imgObj = document.getElementById("imgChg");
            if(selectObj.value=='1'){
                imgObj.src="../image/Blue%20hills.jpg";
            }
            if(selectObj.value=='2'){
                imgObj.src="../image/Water%20lilies.jpg";
            }
            if(selectObj.value=='3'){
                imgObj.src="../image/Sunset.jpg";
            }
            if(selectObj.value=='4'){
                imgObj.src="../image/Winter.jpg";
            }*/
            document.getElementById("imgChg").src = selectObj.value;
            document.body.style.backgroundImage = "url("+selectObj.value+")";

        }
    </script>