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代码
<head>
<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>
</head>
<body>
<button type="button" id="loadButton">Load</button>
</body>
上面的只能动态加载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 + "></" + tag + ">");
}
}
});
//e.g.
$.include(['hdivbox.js', 'pop_win.css']);
操作DOM元素
获取单个元素
var obj=document.querySelector("li");
获取多个元素
var obj=document.querySelectorAll("li");
for(var i=0; i<obj.length; i++) {
console.log(obj[i].innerText);
}
类名操作
//获取页面中元素
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'));
}
自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav {
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="nav" data-name-test="zs" data-age="123">123</div>
<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>
</body>
</html>
多媒体标签
<!-- 多媒体设置 -->
<!-- <video src="code/多媒体标签/trailer.mp4" controls autoplay loop></video> -->
<!--
trailer.mp4
trailer.ogg
trailer.WebM
-->
<!--
<video src="trailer.mp4"></video>
<video src="trailer.ogg"></video>
<video src="trailer.WebM"></video>
-->
<!--
<video>
<source src="code/多媒体标签/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>
-->
<video src="code/多媒体标签/trailer.mp4" controls autoplay="autoplay"></video>
文件读取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="">
<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>
</body>
</html>
获取地理位置
//只能获取一次当前地理位置信息
// 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);