jquery动态加载js/css文件方法
先来看jquery自带的getSrcript文件
方法
$.getScript(url,callback)
实例
var testVar = 'New JS loaded!';
alert(testVar);
function newFun(dynParam) {
alert('You just passed '+ dynParam + ' as parameter.');
}
动态调用方法
HTML代码
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数
});
});
});
</script>
上面的只能动态加载js代码，但不能加载css，后来自己写了一个可加载js与css的程序。
代码如下
$.extend({
includePath: '',
include: function(file) {
var files = typeof file == "string" ? [file] : file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^s|s$/g, "");
var att = name.split('.');
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";
var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + ">");
}
}
});
//e.g.
$.include(['hdivbox.js', 'pop_win.css']);
操作DOM元素
获取单个元素
var obj=document.querySelector("li");
获取多个元素
var obj=document.querySelectorAll("li");
for(var i=0; i类名操作
//获取页面中元素
var div_obj=document.querySelector("div");
var add_btn=document.querySelector(".add");
var remove_btn=document.querySelector(".remove");
var toolge_btn=document.querySelector(".toggle");
var contains_btn=document.querySelector(".contains");
//添加类名
add_btn.onclick=function() {
div_obj.classList.add("bg");
}
//移除类名
remove_btn.onclick=function () {
div_obj.classList.remove("bg");
}
//切换类名
toolge_btn.onclick=function() {
div_obj.classList.toggle("bg");
}
//是否包含类名
contains_btn.onclick=function() {
console.log(div_obj.classList.contains('bg'));
}
自定义属性
Document
<script type="text/javascript">
var data=document.querySelector(".nav").dataset;
console.log(data);// => DOMStringMap {nameTest: 'zs', age: '123', test: 'abc', TestAbc: '123', hh: '呵呵'}
// var test=document.querySelector("div").getAttribute("class");
//设置
var nav=document.querySelector(".nav");
nav.dataset.test="abc";
nav.dataset.TestAbc="123";
nav.dataset["hh"]="呵呵";
</script>
多媒体标签
文件读取
Document
<script type="text/javascript">
var input=document.querySelector("input");
input.onchange=function(){
//获取到文件
var file=this.files[0];
//开始读取，创建读取器
var reader=new FileReader();
//开始读取
reader.readAsText(file);
//获取读取的结果
//当文件读取完成后，才可以获取文件信息内容
reader.onload=function() {
console.log(reader.result);
}
}
</script>
获取地理位置
//只能获取一次当前地理位置信息
// window.navigator.geolocation.getCurrentPosition(success,error);
// function success (msg) {
// console.log(msg);
// }
// function error (msg) {
// console.log(msg);
// }
//
//实时获取地理位置:
window.navigator.geolocation.watchPosition(success,error);
function success (msg,position) {
console.log(msg);
console.dir(position);
}
function error (msg) {
console.log(msg);
}
canvas
//获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");
//先落笔
ctx.moveTo(100, 100);
// 连线
ctx.lineTo(300, 100);
//描边
ctx.stroke();
ctx.beginPath();
//带颜色的横线
ctx.moveTo(100, 150);
ctx.lineTo(300, 150);
ctx.strokeStyle="red"; //红色的线
ctx.lineWidth="20"; //设置线宽
ctx.stroke();
闭合路径
//获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200, 200);
// ctx.lineTo(100,100);
//闭合路径
ctx.closePath();
// ctx.stroke();
ctx.fillStyle="red";
ctx.fill();
绘制矩形
//获取canvas画布对象
var canvas =document.querySelector("canvas");
//获取绘图上下文
var ctx=canvas.getContext("2d");
ctx.rect(100, 100, 200, 200);
ctx.stroke();
ctx.clearRect(0, 0, 600, 400);