第三章 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>