- 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" \/>');
扫一扫
1762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
