JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式
Posted 渡劫的机器猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式相关的知识，希望对你有一定的参考价值。
| 一、JS的三种使用方式 |
1、html标签中内嵌JS(不提倡使用。)
<button onclick="javascript:alert(‘你真点啊。‘)" > 有本事点我呀！！！！</button>
2、HTML页面中直接使用JS：
<script type="text/javascript">
//js代码
</script>
3、引用外部JS文件：
<script language="javascript" src="Js文件路径">
</script>
<button onclick="javascript:alert(‘你真点啊。‘)" > 有本事点我呀！！！！</button>
2、HTML页面中直接使用JS：
<script type="text/javascript">
//js代码
</script>
3、引用外部JS文件：
<script language="javascript" src="Js文件路径">
</script>
| 二、CSS的三种使用方式 |
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
| 三、JS中的DOM事件模型 |
【JS中的DOM0事件模型】
1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
eg: <button onclick="func()">按钮</button>
缺点：违反W3C关于Html与JavaScript分离的基本原则；
2、脚本模型：在JS脚本中通过事件属性进行绑定；
eg: document.getElementsByTagName(‘input’)[0].onclick = func1(){}
局限性：同一节点，只能绑定一个同类型事件；
【JS中的DOM2事件模型】
1、添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("click",函数,true/false);
参数三：false(默认)，表示事件冒泡，true，表示事件捕获
兼容写法：if(btn1.attachEvent){
btn1.attachEvent();
}else{
btn1.addEventListener();
}
优点：同一节点，可以添加多个同类型事件的监听器；
2、取消事件绑定：
注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
.removeEventListener("click",函数名);
.detachEvent("onclick",函数名);
1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
eg: <button onclick="func()">按钮</button>
缺点：违反W3C关于Html与JavaScript分离的基本原则；
2、脚本模型：在JS脚本中通过事件属性进行绑定；
eg: document.getElementsByTagName(‘input’)[0].onclick = func1(){}
局限性：同一节点，只能绑定一个同类型事件；
【JS中的DOM2事件模型】
1、添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("click",函数,true/false);
参数三：false(默认)，表示事件冒泡，true，表示事件捕获
兼容写法：if(btn1.attachEvent){
btn1.attachEvent();
}else{
btn1.addEventListener();
}
优点：同一节点，可以添加多个同类型事件的监听器；
2、取消事件绑定：
注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
.removeEventListener("click",函数名);
.detachEvent("onclick",函数名);
| 四、JS中匿名函数的书写及调用 |
1、声明一个匿名函数，直接赋给某个事件；
window.onload=function(){}
2、使用函数表达式，声明匿名函数；
声明函数表达式：var func = function(){}
调用函数表达式：func()
>>> 使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错(对比常规函数声明与调用区别!)
3、使用自执行函数，声明并直接调用匿名函数；
!function(){}(); //使用任意运算符开头，一般使用！
(function(){}()); //使用()将匿名函数及之后的括号包裹
(function(){})(); //使用()只包裹匿名函数表达式
>>>>>三种写法特点：
① 结构清晰，开头加！，结尾加().不容易乱，推荐使用；
② 可以表明匿名函数与之后的()为一个整体，推荐使用；
③ 无法表明函数与之后()为一个整体，不推荐使用。
window.onload=function(){}
2、使用函数表达式，声明匿名函数；
声明函数表达式：var func = function(){}
调用函数表达式：func()
>>> 使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错(对比常规函数声明与调用区别!)
3、使用自执行函数，声明并直接调用匿名函数；
!function(){}(); //使用任意运算符开头，一般使用！
(function(){}()); //使用()将匿名函数及之后的括号包裹
(function(){})(); //使用()只包裹匿名函数表达式
>>>>>三种写法特点：
① 结构清晰，开头加！，结尾加().不容易乱，推荐使用；
② 可以表明匿名函数与之后的()为一个整体，推荐使用；
③ 无法表明函数与之后()为一个整体，不推荐使用。
| 五、媒体查询@media/@import的使用方式 |
1、直接在CSS文件中使用
@media 类型and（条件1）and（条件2）{
标签 {css样式}
}
2、使用import导入
@import url（"css/02-css.css"） all and (max-width:980px)
3.使用link链接，media属性用于设置查询方式：
<link rel="stylesheet" href="css/02-css.css" media="all and （max-width：980px）"/>
@media 类型and（条件1）and（条件2）{
标签 {css样式}
}
2、使用import导入
@import url（"css/02-css.css"） all and (max-width:980px)
3.使用link链接，media属性用于设置查询方式：
<link rel="stylesheet" href="css/02-css.css" media="all and （max-width：980px）"/>
以上是关于JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式的主要内容，如果未能解决你的问题，请参考以下文章