- BOM浏览器对象模型:window浏览器窗口,location地址栏,History历史记录,screen屏幕,Navigator浏览器的信息。
- window是BOM,是顶级对象,可以省略,
window.alert(1);window.docment.getElementById('id')
var a=1;
与a=2;
,后者系统默认a属于window对象。全局js对象、函数、变量自动成为window的成员var a=1;function ab(){};window.a;window.ab();
,变量和函数都属于window。而let a=2;window.a;
无返回,故不属于window。- window是全局的,谁都能用。
- 查看window对象所有内容
console.log(window)
页面加载: onload
页面关闭: onbeforeunload → onunload
页面刷新: onbeforeunload → onunload → onload
window.on事件,或<body on=事件>
console.log("浏览器中内容的宽度"+window.innerwidth);
console.log("浏览器中内容的高度"+window.innerHeight);
console.log("浏览器中外层的宽度"+window.outerwidth);
console.log("浏览器中内容的高度"+window.outerHeight);
console.log("浏览器中内容的高度"+document.documentElement.clientHeight);
console.log("浏览器中内容的宽度"+document.body.clientwidth);
var a=false || 0 || 2;//输出2(从左到右,哪个true返回哪个值)
函数三种定义方式:自定义、函数表达式(匿名函数)、new Function
function abc(){
}
var abc=function(){//变量存的是函数,可以类似变量一样传递
}
new Function('function hh(){}')();//字符串动态创建函数,Function创造的函数都是顶层函数。直接就是window的函数
-
函数外变量和内没
var
直接赋值的变量都是全局变量。 -
全局变量仅在浏览器关闭时才销毁,占用内存。局部变量,执行后就会销毁。
-
let
是ES6推出的变量关键字,解决var弊端。let必须先声明后使用;只在声明所在的块级作用域内有效;不可以重复声明;不存在存在变量提升;在全局作用域声明变量时,不会挂到window对象上。
作用域链 -
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
-
根据在内部函数可以访问外部函数变量的这种机制,用链式查找(内访问外部变量(该变量有多个同名),就近原则取值)决定哪些数据能被内部函数访问,就称作作用域链。
-
预解析:预先解析函数和变量。就是解析器把变量和函数声明提升到作用域最前面,不提升赋值操作。
-
var a=b=c=9;
相当于var a=9;b=9;c=9;
应该写成var a=9,b=9,c=9;
对象,本质上是数组(var arr=[{…},{…}];)。三类对象:自定义对象、内置对象(Math/Date/String/Array)、浏览器对象。 -
1.定义对象
//自定义一个对象
var obj ={
name:'tome',
age:12,
sayHi:function(){console.log('hi');},
}
//两种调用方式
obj.name; //或 obj['name']
//不同对象放到数组
{
var obj1= JSON.parse(JSON.stringify(obj));
obj.name='lily';
var obj2=JSON.parse(JSON.stringify(obj));
var arr=[obj1,obj2];
}
- 方法和函数:对象的函数叫方法,js的方法叫函数。
- 2.利用
new Object
创建对象。
var obj=new Object();
obj.name='lily';
obj.age=12;
obj.sayHi=function(){console.log('hi');};
- 3.利用构造函数创建对象。场景:一个集合对象不同(属性相同)。js面向对象,获得类对象
new 方法名()
这里方法看成类。new
时会创建一个空对象。
//构造函数(类似C#实体类):函数里的方法初始化并返回一个新的对象的方法。构造函数首字母大写。
function People(uname,uage,usex){
this.name=uname;
this.age=uage;
this.sex=usex;
this.sing=function(s){console.log(s);};
}
//调用构造函数
var p1= new People('刘德华',12,'男');
var p2= new People('黎明',22,'男');
var arr=[p1,p2]//不同对象放到数组
p1.sing('冰雨');
- 构造函数和对象区别就是C#类与对象的区别。
- 遍历对象,
for(var item in p1){}
,输出属性和方法。Object.keys(p1)
仅输出属性。 - 变量是否数组
let isArr =arr instanceof Array; 或 Array.isArray(arr);
- 简单数据类型(值类型:string/number/boolean/undefined/null)放到栈里。复杂数据类型放到堆里(new得到的类型都是复杂类型)
- 程序内存地址为啥十六进制?二进制数太长,十六进制更简短
Web APIs
是DOM和BOM对外提供的接口,方便你用js调用实现页面特效。是W3C标准。学习ES的JS基本语法。
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
var htmlEle = document.documentElement;//网页html对象
document.addEventListener("keydown", js方法名);
,事件侦听为页面注册事件(可以注册多个,按顺序依次执行) ,也可以是给按钮注册事件。docment.removeEventListener("keydown", 必须是方法名)
,移除事件- 事件对象:
div.onclick=function(event){}
其中event是事件对象。只有发生事件时才存在,包含事件本身信息,如鼠标、按键等。 - 事件对象常用属性和方法:
e.target 返回触发事件的对象
e.type 事件类型(click、mouseover)
e.preventDefault() 阻止冒泡
e.stopPropagation() 阻止冒泡
- window对象是浏览器的顶级对象,它具有双重角色(它是js访问浏览器的接口;是全局对象,全局作用域的变量和函数属于window)。
- window一部分是BOM(api),一部分是Dom,还有一部分是Object这样属于es自身。
- BOM比 DOM更大,它包含DOM。
- JavaScript语言的一大特点就是单线程。所有任务都需要排队。为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是JS中出现了同步和异步。
- 同步任务在主线程执行(打印1和2两行代码),异步任务放在任务队列中(子线程)执行。
console.log(1);
setTimeout( function (){
console.log(3);
},0);
console.log(2);
- JS的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:
1、普通事件,如click、resize等
2、资源加载,如load、error等
3、定时器,包括setInterval、setTimeout等
- js执行顺序:1.先执行执行栈中的同步任务。2.异步任务(回调函数)放入任务队列中。3.执行栈同步任务完成,在找任务队列的异步任务,执行完毕后在到执行栈同步任务中。
- 事件循环:由于主线程不断的重复获得任务(同步和异步任务)、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(eventloop)。
- Html5 学习系列(一)认识HTML5
- HTML5元素周期表
- 前端编写代码原则:
- 以组件为单位组织代码段。
- 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。
- KISS原则的精髓——仅做一件事,做好一件事。
- GUI设计,设计原则和禁忌见百度百科
UI(用户界面)
包含软硬件设计,囊括了GUI 、ID、UED。
GUI(用户图形界面)
就是界面美工,只管软件视觉界面。目前国内大部分的UI设计师其实做的是GUI。
ID(交互设计)
一般是软件工程师在做。
UED(用户体验)
关注的是用户的行为习惯和心理感受,就是琢磨人会怎么用软件或者硬件才觉得顺心就手的。现在会做这个的设计师不太多。
- jQuery和javascript混搭是没问题的,因为jQuery只是一个Javascript的框架,它封装了Javascript API
- 混用时要注意:
jquery -> js :var jsObject=$("#id").get(0);
,这样就可以调用js的方法了
js -> jquery :var $object=$(document.getElementById("id"));
,这个就可以调用jquery的方法了
var obj=$('<a>a</a>');
,转jQuery对象
- 获得控件种类,用
$("#"+控件id)[0].type
- 一直想知道HTML中都有哪些表单控件,办法就是vs工具箱拖放控件一目了然。 见下图
- http协议不支持中文。url中出现乱码就是浏览器对文本编码造成的。
- 不和URL有半毛钱关系,用escape(对
/
不编码),解码unescape函数,已经废弃,不推荐!- 编码整个URL,用encodeURI(对
/
不编码),解密“decodeURI”- 编码URL参数,用encodeURIComponent(对
:、/
编码),解码decodeURIComponent。推荐,jQuery序列化用此编码。$.param({ name : 'Lee',age : 100 })
,序列化。将对象键值对转换为URL格式的键值对,加上后可以避免一些莫名其妙错误。用上函数进行编码解码。- encodeURIComponent比encodeURI编码的范围更大。
- 在css代码后面加
!important
表明此种css优先级是最高的。 伪选择器
(如“a:hover”)——目的是让标签在不同状态时有不同样式。只是个别元素有,并且不同浏览器还不一样。- 文档流
position
,设置元素位置。默认文档元素是从左到右,从上到下,依次布局显示在页面上的。 - div水平居中,
<div style='border:1px solid red;width:200px;margin:0 auto'>1</div>
- 《css禅意花园》图书,介绍div+css的使用。
- js只有六种数据类型:number、string、boolean、null(只有一个值,是它本身)、undefined(只有一个值,是它本身)、object(对象、数组、function等)——数、串、真假、空;undefined、对象
null与undefined、NaN
- 声明了变量未赋值或function没return语句,但是用这函数给变量赋值都返回undefined。可用
if(typeof(a) =='undefined'){}
检查。- null转为数字是0,undefined转数字是NaN。(null==undefined)——true
- NaN,即Not a Number,用isNaN()函数,判断值是不是NaN
- 判断一个变量是否数字(技巧:在Chrome的Console中,试你所想,确保万无一失)
Number('0a');//返回:NaN
parseInt('0a');//返回:0
Number('');//返回:0
parseInt('');//返回:NaN
Number('a1');//返回:NaN
parseInt('a1');//返回:NaN
isNaN('a1');//true
isNaN('');//false
isNaN('1');//false
- 在页面方法体外直接声明变量是“全局变量”或方法体内不写var的变量也是“全局变量”。函数体内变量,访问范围是函数内部。js无块级作用域。
//会弹两次“11” function f1() { var x=10; if(x>5) { var y=11; alert(y); } alert(y);//js无块级作用域。故在方法内任意一个地方的变量,在这个方法都有效。 }
- 函数体内通过arguments对象接收传来的参数
alert(box(1,2,3,4,5,6)); //弹窗:1 | 2 function box() { return arguments[0]+' | '+arguments[1];//得到对应索引位置值 }
匿名函数
,类似C#委托。
//没参没返回值 var f=function(){ console.log('222')}; function test(myFun) { myFun(); } test(f); //有参有返回值 f=function (x,y){return x+y}; var r=f(1,2);//通过alert(r),可见结果3 document.getElementById('btn2').onclick=function(){//注册 匿名函数 f(1,2); } function myFun0000(n,a){ alert('name:'+n+" ,age:"+a); } //按钮注册事件,但是方法有多个参数 document.getElementById('a2').onclick=(function(x,y){//注册 匿名函数,有两个参数 return function(){myFun0000(x,y)};//必须有return function(){} })('ali',1); document.getElementById('btn1').onclick=fun;//fun函数,注册给按钮 //jQuery为a4添加事件 $("#a4").attr("onclick", "return myFun0000('Lily',20)");
- js没命名空间,有可能发生命名冲突。可借用把代码封装到对象中来规避。例子:
var num=1000;//引用的js里也有num变量
//----js文件↓---
var myNameSpace={
net:{//net这一层{}可以省去!
num:1,
sayHi:function(){
alert(this.num);
}
}
};
//----js文件↑---
alert(num);//页面自己的变量
myNameSpace.net.sayHi();//调js文件中方法
alert(myNameSpace.net.num);//调js文件中变量
$('#btn').click(myNameSpace.net.sayHi);//会出现异常
$('#btn').click($.proxy(myNameSpace.net, 'sayHi'));//解决外部事件调对象方法时this的指向问题。
//去掉net层
var obj = {
name: 'aj',
test: function () {
alert(this.name);
}
}
$('#btn').click($.proxy(obj, 'test'));
- 函数也是对象。
- 数组当Dictionary用
var dic=new Array();
dic['a']="A";
alert(dic['a']);
- 对象:
{}
包裹起来的内容。
var obj={'a':'Hi','b':'Hello'};
alert(obj.a);//Hi
a.split(/@|!|#/);
,按@或!或#分隔,正则表达式实现。- 对象(类似C#的实体类)
var obj=new Object();
obj.name='zs';
obj.age=1;
alert(obj.age);//1
- 可用for-in遍历数组或对象获得里面k-v。
- js中的Dictionary、匿名对象
/*====获得jsonList去重后的集合====*/
var jsonList=[...];//类似C#的Dictionary<string,实体对象>。如:[60201877: {部门: "运营管理部", 处室: "海口客户服务中心"},...]
var r = [];//结果有去重
for (var j in jsonList) {
var colValue = {"empNo":0, "dep": 0, "office": 0};//js 的匿名对象
colValue["empNo"] = 1;//为empNo字段赋值
colValue["dep"] = 12;
colValue["office"] = 13;
var key =j;//工号
if (typeof key != "undefined") {
var dicValByKey = r[key];
if (typeof dicValByKey != "undefined") {
//r存在
} else {
r[key] = colValue;//往r中加item
}
}
}
/*====类似C#的dynamic用法====*/
var trItem = {};
trItem.部门 = "a";
trItem.处室 = "b";
trItem["分数"]=120;
- 全局变量或方法都会注册成window对象的成员(可在F12控制台通过
window.
找到);浏览器关闭才释放资源。 - 屏幕是地图,浏览器就是那栋楼,控件是楼里房间。
screenX/Y
——鼠标相对地图中“原点”的坐标
clientX/Y
——鼠标相对楼中“原点”的坐标
offsetX/Y
——鼠标相对房间中“原点”的坐标
prototype
(原型对象)、__proto__
、原型链
啥关系?
- 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成为
原型链
。
1.每个对象都具有一个名为__proto__的属性;
2.每个构造函数都具有一个prototype方法(js中函数同样是对象),所以prototype同样带有__proto__属性
3.每个对象的__proto__属性指向自身构造函数的prototype;
闭包
:简单说就是改善一个变量的作用域范围,让一个方法访问“父类”中方法和属性。就是一系列作用域组合在一起,作用域链。更多
- 通过使用闭包,可以模拟面向对象的代码风格。
- object对象(本质是键值对集合),key-value的value可是一个匿名方法。——☆ ☆ ☆
var f={
'a':function(){alert('a')},
'b':function(){alert('b');}
};
f.a();//调用方法
f.c=function(){alert('c');};//往对象里加入一个匿名函数
f.c();
- js面向对象——☆ ☆ ☆
//通过构造函数创建person对象
function Person(name,age){
this.user_name=name;//this表示new创建的那个对象
this.user_age=age;
this.sayHello=function(){
alert(this.user_name+' '+this.user_age);
}
}
var p1=new Person('tome',22);
alert(p1.user_name);
alert(p1['user_name']);
p1.sayHello();
- 正则表达式在任何语言里都通用的,js和C#正则表达式串都是一样的。
- 工具
Emmet-前端开发神器
WebStorm——中国JS开发者誉为“Web前端开发神器”
【jQuery】
- jQuery是用js写成的,是对js的二次封装,好比
SQLHelper.cs
与ADO.NET
关系。 - 在代码中写
jQuery
与$
等价的,后者是简写。 - 一直想找
jQuery-vsdoc.js
(jQuery智能提示版),原来它是在你创建网站时,vs工具自动给你生成到项目中。 - jQuery
1.9+
不支持ie8。2.0+
不支持IE6、7、8。注意版本问题,如toggle()
在1.8被废弃(jquery-migrate-1.2.1.js
——可兼容被遗弃的方法)。 - 一个js文件中可多个下面代码,后者不会覆盖前者,会依次执行。
下面写法是jQuery的ready事件(标签下载完即可),执行里面代码。不是window.onload事件(页面本身和引用资源都加载完毕)
//三种写法是一个意思,在一个js文件中可有多个
$(document).ready(function(){
alert('111');
});
jQuery(function(){
alert('222');
});
$(function(){
alert('333');
});
- jQuery快速API参考(类似元素周期表)
包装集
指的是通过$()
方法返回的一个集合。- 几个jQuery特有概念:
链式编程
(通过‘点’连接不同函数实现多个操作),隐式迭代
(不用遍历集合就可一次性操作所有对象)、选择器
(与css选择器一样) - jquery中“function(…){}”——当参数不知道有没有都有是啥值,可以看arguments.length,然后alert出来。
$.each
循环体内不能用break
,使用return false
跳出循环,return true
实现continue功能。而js的for循环有break、continue
功能。- 选择器类似SQL的select作用,而过滤器(必‘:’开头)与选择器配合,类似SQL的where作用。
- 设置属性:
$('#div1').attr({"title":"测试",'align':'right'});
,添加样式:$('#txt1').css({'border':'1px','width':'20px'});
- 一次获得多个样式信息:
$('#d').css(['color','width']);
- width(height也有一套)
$(window).width()//不含padding和border
$(window).innerWidth()//含padding
$(window).outerWidth()//含padding和border
- DOM节点操作,对节点的
增、删、改、查、clone
。
- 卡片A,放在选择的卡片B“前、上、后”。——在B“前,上(替),后”用:
before、replaceWith、after
。如$('#id').before("<a>hhh</a>");
。- 卡片A,放到选择的卡片C内的“前、上、后”用
prepend、append
。- 为多个控件‘套’或"移除"一个容器,用“wrapAll、wrap、unwrap”。
$('#div1').empty();
删除选定容器内元素(保留标签)$('#txt1').remove();
移除选定对象
- 为控件绑定(bind)事件
$('#d').bind('click或mouseover',function(){
alert('提示');
})
/*可同时绑定多个事件 */
$('#d').bind({
click:function(){alert('点击')} ,
blue:function(){alert('失去焦点')}
});
$("p").unbind('click')//仅删除click事件
- 事件绑定和解绑的方法有三组共六个。有一点混乱,
1.7+
推出了on
和off
方法摒弃前面三组,one
方法,实现事件仅触发一次。
//替代bind
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代unbind方式,移除事件
$('.button').off('click');
- 自己实现toggle功能(
toggle()
在1.8被废弃)
var flag = 1;
$('div').click(function () {
if (flag == 1) {
$(this).css('background', 'red');
flag = 2;
} else if (flag == 2) {
$(this).css('background', 'blue');
flag = 3;
} else if (flag == 3) {
$(this).css('background', 'green');
flag = 1;
}
})
- [Ajax] 【ajax】
- jquery进行了三层封装:
最底层为$.ajax() → $('#d').load()(唯一的局部方法,其他是全局方法)、$.get()、$.post() → $.getScript()和$.getJSON()(最高层,后面各层基于$.ajax进行二次封装)
。其中“load只适合在指定div内加载静态文件如html、txt等”。getScript
在需要时才加载相应js。- Chrome、ff、IE7+有XMLHttpRequest,jQuery简称XHR,而IE5/6是通过ActiveX实现
var url='a.ashx?'+Date.parse(new Date());
(解决缓存干扰),结果:a.ashx?1280977330000
- js和C#往http头写东西
/*js*/ var xhr=new XMLHttpRequest(); xhr.setRequestHeader(“a”,1);//js往http头写东西:(没试验成功!) xhr.setRequestHeader(“b”,2); var result=xhr.getResponseHeader('sum');//取得指定http头信息。getAllResponseHeader是获得所有头信息。 /*C#*/ //ashx文件ProcessRequest方法 int a=content.Request.Headers["a"];//取得header中a值 content.Response.AddHeader("sum",(a+b).ToString());//通过头输出到前台。
- ajax前端传参方式:get(URL)、post(推荐使用)、header、cookie;服务器端返回值方式:content.Response.Write(支持text、xml、json,推荐使用)、header、cookie
<script type="text/javascript">
function a() {
var url = "test.aspx?ajax=1?" + new Date();
$.ajax({//ajax的经典四个参数
type: 'post',//请求的类型:get、post
url: url,
success: function (r, s, xhr)//返回值
{
$('#area').val(r);
},
headers: { "Cookie": "anjjun" },
timeout: 3000
})
}
</script>
<input type="button" id="btn1" onclick="a()" value="abc"/>
【C#代码】
//判断是否异步请求
if (Request.QueryString["ajax"] == "1")
{
Response.Write("{\"error\":0}");
Response.End();
}
- js语言从IE8+以后出现JSON对象,低版本可以通过
json2.js
插件实现支持。
str→obj:JSON.parse(json必须是双引号)
;obj→str :JSON.stringify(obj)
- json使用方式,数组结合对象形式:
[
{'title':'abc','num':12},
{'title':'cc','num':22}
]
var a = '[{"title":"abc","num":12},{"title":"cc","num":22}]';
var b = JSON.parse(a);//【必须是双引号,单引号有异常】
var aa = [{"title":"abc","num":12,toJSON:function(){return this.title;}},
{"title":"cc","num":22,toJSON:function(){return this.title;}}];
alert(JSON.stringify(aa));//返回:["abc","cc"] 注意:其中一个字段必须是toJSON匿名方法
var box = [{title : 'a',num : 1,height : 177}];
var json = JSON.stringify(box, function (key, value) {
if (key == 'title') {
return 'Mr.' + value;
} else
return value;
});
alert(json);//提示:[{"title":"Mr.a","num":1,"height":177}]
var json2 = JSON.stringify(box, ['num', 'height']);
alert(json2);//提示:[{"num":1,"height":177}]
- JSONP,跨域传值
- 假设客户想访问
http://www.b.com?jsoncallback=callbackFunction
。期望服务器返回JSON["a","b"]
,而服务器实际返回callbackFunction(["a","b"])
(函数名由客户端传)<body> <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script> <script type="text/javascript" src="http://www.b.com?jsoncallback=callbackFunction"></script> </body>
-
jquery用
http://www.b.com?callback=?
格式后可以不用传函数名,所以C#代码返回内容简写成(["a","b"])
即可。 -
雪碧图
,一张图上有规律的放置很多小图标,可以通过定位来显示需要的图片部分。 -
jQuery序列化form表单注意事项——表单转JSON
var a = $("#form1").serialize();//序列化为url格式“a=1&b=2”,中文会被编码
var a = $("#form1").serializeArray();//序列化为json格式,不会编码
- 各种UI,近几年比较火的是
LayUI
及其Layer
插件。 - 常见UI组件名称:
栅格 、导航/面包屑 、选项卡/标签页 、标签 、面板 、徽章 、时间轴 、辅助元素 、弹出层 、颜色选择器 、滑块(滑动输入条,滑动设置数值) 、滑动开关 、评分 、轮播 、流加载 、代码修饰器 、折叠面板 、自动完成 、提示框/气泡(title,文字提示) 、步骤条 、公告栏 、级联选择 、树选择 、树控件 、穿梭框(把左框选中的项移到右框) 、卡片
- cookie插件:
var cookie = $.cookie('name', 'Tome');//写入cookie
alert($.cookie('name')); // 获得cookie
$.cookie(); //读取所有cookie(返回是[object]),“$.cookie().name”也可以取到值
$.cookie('name', null); //清空cookie
- 浏览器支持cookie个数在20~50.超过后会覆盖旧的cookie。最好不要超过4095字节。重要敏感数据不要保存在cookie中。
- 其他类cookie技术:H5本地持久化用“session Strorage和local Strorage”
- cookie不设置失效时间默认是在会话结束(即关闭浏览器)
- C#“增、删、查”cookie
HttpContext.Current.Response.SetCookie(new HttpCookie("account", this.txbUserName.Text));//Name设置到cookie
HttpContext.Current.Request.Cookies["account"].Value//读取
---
Response.Cookies.Add(new HttpCookie("fromEmail", "123321"));
if (Request.Cookies["fromEmail"] != null){
string strFromEmail = Request.Cookies["fromEmail"].Value
}
//asp.net 删除cookie
HttpCookie aCookie;
string cookieName;
int limit = Request.Cookies.Count;
for (int i = 0; i < limit; i++)
{
cookieName = Request.Cookies[i].Name;
aCookie = new HttpCookie(cookieName);
aCookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(aCookie);
}
- 根据url传参加载不同css和js文件
<script type="text/javascript"> var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link);//往头部追加元素 }, js: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //根据url参数加载不同css和js文件 if(location.href.indexOf('?type=mobile')>=0) { dynamicLoading.css("a.css");//动态加载 CSS 文件 dynamicLoading.js("a.js");//动态加载 JS 文件 }else if(location.href.indexOf('?type=pc')>=0){ dynamicLoading.css("b.css"); dynamicLoading.js("b.js"); } </script> <div class='title' id="divTitle">演示用文本 演示用文本 演示用文本 </div>
- 其中“
a.js
和a.css
”以及“b.js
和b.css
”代码简单如下:alert('a');//a.js .title{color:gray}//a.css alert('b');//b.js .title{color:red}//b.css
- 动态加载js、css插件:把下面放在a.js中,然后在需要的html引入a.js即可。
document.writeln('<script src="/style/jquery.min.js" type="text/javascript"><\/script>'); document.writeln('<script type="text/javascript" src="/style/jsl.parser.js"><\/script>'); document.writeln('<link rel="stylesheet" href="/style/screen.css" type="text/css" media="screen, projection" \/>');