Html+Jquery on 菜鸟程序员

jquery插件开发

Mon, 01 Jan 0001 00:00:00 +0000

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="utf-8" />
 <title>HTML5 时钟</title>
 <link href="css/main.css" rel="stylesheet" type="text/css" />
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
 .clocks {
 height: 500px;
 margin: 25px auto;
 position: relative;
 width: 500px;
 }
 </style>
</head>
<body>
 <ul>
 <li>
 <a href="http://www.webo.com/liuwayong">我的微博</a>
 </li>
 <li>
 <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
 </li>
 <li>
 <a href="http://wayouliu.duapp.com/">我的小站</a>
 </li>
</ul>
<div>
 这是div标签
</div>
</body>
<script>
/*
1.直接扩展jquery 添加方法 sayHello();
*/
// $.extend({
// sayHello: function(name) {
// alert('Hello,' + (name ? name : 'Dude'));
// }
// });
// $.sayHello(); //调用
// $.sayHello('Wayou'); //带参调用


/*
2.在全局空间定义myPlugin
*/
// $.fn.myPlugin = function(options) {
// var defaults = {//定义默认参数
// 'color': 'red',
// 'fontSize': '12px'
// };
// var settings = $.extend({}, defaults, options);//合并用户的options 和默认的defaults到插件空间
// return this.css({//返回方法,利于链式操作
// 'color': settings.color,
// 'fontSize': settings.fontSize
// });
// }
// $(function(){
// $('a').myPlugin({
// 'color': '#2C9929',
// 'fontSize': '36px'
// });
// $('div').myPlugin();
// })


/*
3.在全局空间中定义匿名函数,中定义一个插件
在匿名函数前面加一个";"是一个好的习惯
($, window, document, undefined)匿名函数的参数是为了防止其他人全局屏蔽这几个参数
*/
;(function($, window, document, undefined){
 //定义Beautifier的构造函数
 var Beautifier = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 'color': 'red',
 'fontSize': '12px',
 'textDecoration':'none'
 },
 this.options = $.extend({}, this.defaults, opt)
 }
 //定义Beautifier的方法
 Beautifier.prototype = {
 beautify: function() {
 return this.$element.css({
 'color': this.options.color,
 'fontSize': this.options.fontSize,
 'textDecoration': this.options.textDecoration
 });
 }
 }
 //在插件中使用Beautifier对象
 $.fn.myPlugin = function(options) {
 //创建Beautifier的实体
 var beautifier = new Beautifier(this, options);
 //调用其方法
 //return beautifier;//用于3.1调用
 return beautifier.beautify();//用于3.2调用
 }
})(jQuery, window, document);
//3.1调用
// $(function() {
// $('a').myPlugin({
// 'color': '#2C9929',
// 'fontSize': '12px'
// }).beautify();
// })
//3.2调用
$(function(){
 $('a').myPlugin({
 'color': '#2C9929',
 'fontSize': '20px',
 'textDecoration': 'underline'
 });
});
</script>
</html>

js获取各种节点的方法

Mon, 01 Jan 0001 00:00:00 +0000

如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）：
1. 通过顶层document节点获取：
 （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
 如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
 （2）document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
 例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
 （3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。
2、通过父节点获取：
 （1）parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
 （2）parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
 在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...
 （3）parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
 注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
 （4）parentObj.children：获取已知节点的直接子节点数组。
 注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
 （5）parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取：
 （1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
 （2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
4、通过子节点获取：
 （1）childNode.parentNode：获取已知节点的父节点。

上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序

reset.css

Mon, 01 Jan 0001 00:00:00 +0000

@charset "utf-8";

/*css reset*/
body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{margin:0;padding:0}
body{font:16px/1.5 'Microsoft Yahei','Simsun'; color:#333;background:#fff;-webkit-text-size-adjust: none; min-width:320px;}
h1,h2,h3,h4,h5,h6{font-size:100%}
form{display:inline}
ul,ol{list-style:none}
a{text-decoration:none;color:#1a1a1a}
a:hover, a:active, a:focus{color:#1a1a1a;text-decoration: none;}
a:active{color:#1a1a1a;}
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button,input,select,textarea{font-size:100%; vertical-align:middle;outline:none;}
textarea{resize:none}
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button}
input:focus:-moz-placeholder,input:focus::-webkit-input-placeholder {color:transparent}
button::-moz-focus-inner,input::-moz-focus-inner { padding:0; border:0}
table { border-collapse:collapse; border-spacing:0}
.fl{float:left;}.fr{float:right;}.hide{display:none;}.show{display: block;}
.ellipsis { white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.break { word-break:break-all; word-wrap:break-word}
header, footer, article, section, nav, menu, hgroup {display: block;clear:all;}
.clear {zoom:1;}
.clear:after {content:'';display:block;clear:both;height:0;}

.main{width: 100%;font-size: 62.5%;}

曾经的纯JavaScript基础

Mon, 01 Jan 0001 00:00:00 +0000

控制台输出内容 console.log("content");

数据类型:
 Number(整数,浮点数,NaN, Infinity)
 Boolean
 null表示一个"空"的值
 undefined表示"未定义"
 NaN === NaN; // false
 isNaN(NaN); // true

一定要使用静态模式
 在文件或者脚本的最上面写上'use strict'
 之后定义变量必须使用var关键字,如果忘记写var则会在控制台报ReferenceError错误
 创建对象的构造函数,在strict模式下，this.name = name将报错，因为this绑定为undefined，在非strict模式下，this.name = name不报错，因为this绑定为window，于是无意间创建了全局变量name，并且返回undefined，这个结果更糟糕。
字符串可以用 `` 支持多行模式
 alert(`多行
 字符串
 测试`);
字符串常用
 s.length;
 s.toUpperCase();//大写
 s.toLowerCase();//小写
 s.indexOf("..");搜索指定字符串出现的位置
 s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
 s.substring(7); // 从索引7开始到结束，返回'world'
数组常用
 arr.length;
 arr.indexOf(value);元素 value 的索引位置
 arr.slice();//对应string的substring函数
 push('A', 'B')向Array的末尾添加若干元素
 arr.pop();//删除数组最后的元素并返回它
 arr.unshift('A', 'B');//往Array的头部添加若干元素
 arr.shift();//删除数组第一个元素并返回
 arr.sort();//数组排序,具体在函数部分
 arr.reverse();//反转数组
 arr.concat(arr2);//连接两个数组
 arr.join('-');//用-将数组连接起来成字符串

对象常用
obj.属性key = 属性value;
delete obj.属性key
'属性key' in ojb;//属性key是否在obj中,继承的也算
obj.hasOwnProperty('属性key');只判断属性key是否在当前对象中

for (var i in 可迭代集合)
for...of//可以循环数组,map,set)
 for(var x of a)
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, 被迭代对象) {
 // element: 指向当前元素的值
 // index: 指向当前索引
 // 被迭代对象: 被迭代对象本身
 alert(element);
});


map--键值存储
m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//初始化一个map
m.set('Adam', 67);
m.has('Adam');
m.get('Adam');
m.delete('Adam');

set--不重复集合
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
s.add(4)
s.delete(3);

函数
 arguments关键字,收集函数的所有参数到数组(这是隐藏的可以直接使用)
 rest关键字定义变量可以 function foo(a,b, ...rest)
 除了前两个参数,后面的存在rest数组中
 apply
 函数名.apply(被绑定对象, 函数参数)//这样使用时在函数体内的this关键字都是指向"被绑定对象"
 call -- 与apply区别
 apply()把参数打包成Array再传入
 call()把参数按顺序传入
 Math.max.apply(null, [3, 5, 4]); // 5
 Math.max.call(null, 3, 5, 4); // 5
 map() reduce()
 filter(匿名函数)//过滤,根据匿名函数返回Boolean值决定是否保留
 排序函数sort(),原则是按照(规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。),并且会修改原数组
 数字从小到大排序//从大到小
 arr.sort(function (x, y) {
 if (x < y) {
 return -1;//return 1
 }
 if (x > y) {
 return 1;//return -1
 }
 return 0;
 });
 //对字符串数组排序(按照ASCII的小到大)
 arr.sort(function (s1, s2) {
 x1 = s1.toUpperCase();
 x2 = s2.toUpperCase();
 if (x1 < x2) {
 return -1;
 }
 if (x1 > x2) {
 return 1;
 }
 return 0;
 });
 闭包
 箭头函数(相当于匿名函数)//还是用匿名函数吧

作用域
使用一个全局变量推荐 window.变量
自己写代码推荐使用一个名字空间(就是建立一个对象,自己的变量都当做对象属性操作)
申明一个块级变量用let
申请一个常量const PI = 3.14;//不可修改

生成器function* fib(参数) {}
 js引擎遇到yield就会停止并返回yield后值,并保持函数执行的所有状态,下次调用从上次yield的后面接着执行
调用生成器
 一
 var f = fib(5);
 f.next(); 
 f.next(); 
 f.next(); 
 f.next(); 
 f.next(); 
 二
 for (var x of fib(5)) {
 console.log(x); // 依次输出0, 1, 1, 2, 3
 }

js标准对象
typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'
总结一下，有这么几条规则需要遵守：

 不要使用new Number()、new Boolean()、new String()创建包装对象；
 用parseInt()或parseFloat()来转换任意类型到number；
 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
 typeof操作符可以判断出number、boolean、string、function和undefined；
 判断Array要使用Array.isArray(arr)；
 判断null请使用myVar === null；
 判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
 函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
 null和undefined没有toString()方法
 number使用toString()要(123).toString();


JSON
var xiaoming = {
 name: '小明',
 age: 14,
 gender: true,
 height: 1.65,
 grade: null,
 'middle-school': '\"W3C\" Middle School',
 skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'
JSON.stringify(xiaoming, null, ' ');
{
 "name": "小明",
 "age": 14,
 "gender": true,
 "height": 1.65,
 "grade": null,
 "middle-school": "\"W3C\" Middle School",
 "skills": [
 "JavaScript",
 "Java",
 "Python",
 "Lisp"
 ]
}
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
{
 "name": "小明",
 "skills": [
 "JavaScript",
 "Java",
 "Python",
 "Lisp"
 ]
}
JSON.stringify(xiaoming, convert, ' ');//每个键值都会被convert函数处理
function convert(key, value) {
 if (typeof value === 'string') {
 return value.toUpperCase();
 }
 return value;
}
在对象中重写toJSON
var xiaoming = {
 name: '小明',
 age: 14,
 gender: true,
 height: 1.65,
 grade: null,
 'middle-school': '\"W3C\" Middle School',
 skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
 toJSON: function () {
 return { // 只输出name和age，并且改变了key：
 'Name': this.name,
 'Age': this.age
 };
 }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化json
JSON.parse('json字符串')
JSON.parse('json字符串', function(key, value){
 //pass
});


js使用classs构建对象
class Student extends 父类{
 //构造函数
 constructor(name) {
 super(name); // 记得用super调用父类的构造方法!
 this.name = name;
 }

 hello() {
 alert('Hello, ' + this.name + '!');
 }
}

常用函数整理

Mon, 01 Jan 0001 00:00:00 +0000

/**
 * --------------------------------------------------------------------------
 * 小安整理的js函数
 * --------------------------------------------------------------------------
 * @package JavaScript_function
 * @author azhw
 * @since Version 1.0
 */


/*-------------------------------------
 js获取当前url参数的两种方法 
 -------------------------------------*/
//方法一
function getQueryString(name) {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]); return null;
}
//调用
// alert(GetQueryString("参数名1"));
// alert(GetQueryString("参数名2"));
// alert(GetQueryString("参数名3"));

//方法二
function GetRequest() {
 var url = location.search; //获取url中"?"符后的字串
 var theRequest = new Object();
 if (url.indexOf("?") != -1) {
 var str = url.substr(1);
 strs = str.split("&");
 for(var i = 0; i < strs.length; i ++) {
 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
 }
 }
 return theRequest;
}
//调用
// <Script language="javascript">
// var Request = new Object();
// Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
// </Script>
/*
---------------------------------------
*/



/*-------------------------------------
 js获取屏幕大小
 -------------------------------------*/
function a(){
document.write(
"屏幕分辨率为："+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽："+document.body.clientWidth
+"<br />"+
"网页可见区域高："+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽)："+document.body.offsetHeight
+"<br />"+
"网页正文全文宽："+document.body.scrollWidth
+"<br />"+
"网页正文全文高："+document.body.scrollHeight
+"<br />"+
"网页被卷去的高："+document.body.scrollTop
+"<br />"+
"网页被卷去的左："+document.body.scrollLeft
+"<br />"+
"网页正文部分上："+window.screenTop
+"<br />"+
"网页正文部分左："+window.screenLeft
+"<br />"+
"屏幕分辨率的高："+window.screen.height
+"<br />"+
"屏幕分辨率的宽："+window.screen.width
+"<br />"+
"屏幕可用工作区高度："+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度："+window.screen.availWidth
);
}
/*
------------------------------------------------
*/


/*-------------------------------------
 js模拟鼠标除法点击
 -------------------------------------*/
document.getElementById("target").onclick(); 
document.getElementById("target").click();
//btnObj.click()是真正地用程序去点击按钮，触发了按钮的onclick()事件
//btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法，只是调用方法而已，并未触发事件



/*-------------------------------------
 js控制option
 -------------------------------------*/
//循环一个一个移除,可控
/*
<select name="mySelect" id="selectID">
 <option value=1>1</option>
 <option value=2>2</option>
</select>
*/
var theSelect=document.all.mySelect;
for(var i=theSelect.options.length-1;i>=0;i--)
theSelect.options.remove(i);

//删除内容
document.getElementById("selectID").innerHTML = "";

//令长度为0
document.getElementById("selectID").options.length=0; 

//删除制定位置的选项,在第一种里用过
document.getElementById("selectID").options.remove(index);

//添加内容
var selectObj=document.getElementById("selectID");
selectObj.options[selectObj.length] = new Option("mytest", "2");
//selectObj.options[index] = new Option("mytest", "2");
/*
---------------------------------------------------------
*/


/*-------------------------------------
 js日期格式转换成时间戳
 -------------------------------------*/
/**
 2 0 1 5 - 0 4 - 0 5 _ 1 0 : 1 0 : 1 0
 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

 注: 下划线(_) 代表空格
*/
function transdate(endTime){
 var date=new Date();
 date.setFullYear(endTime.substring(0,4));
 date.setMonth(endTime.substring(5,7)-1);
 date.setDate(endTime.substring(8,10));
 date.setHours(endTime.substring(11,13));
 date.setMinutes(endTime.substring(14,16));
 date.setSeconds(endTime.substring(17,19));
 return Date.parse(date)/1000;
}
/*
------------------------------------------
*/

/*-------------------------------------
 JavaScript 获取当前时间戳：
 -------------------------------------*/

var timestamp = Date.parse(new Date());
//结果：1280977330000 获取的时间戳是把毫秒改成000显示，

var timestamp = (new Date()).valueOf();
var timestamp=new Date().getTime();
//获取了当前毫秒的时间戳

/*-------------------------------------
 js删除字符串最后一个字符
 -------------------------------------*/
//字符串：string s = "1,2,3,4,5,"
//目标：删除最后一个 "," ---> "1,2,3,4,5"
var s = "1,2,3,4,5,";
s=s.substring(0,s.length-1);
alert(s);



/*-------------------------------------
 js DOM树加载完成后加载或执行
 -------------------------------------*/
// 1 === 2
 $(function(){
　　$("#a").click(function(){
　　　　//adding your code here
　　});
});
//2 === 1
$(document).ready(function(){
　　$("#a").click(function(){
　　　　//adding your code here　　
　　});
});
/*-------------------------------------
 js 页面加载完成后加载或执行
 整个页面的document全部加载完成以后执行,
 而且要求所有的外部图片和资源全部加载完成,
 如果外部资源，例如图片需要很长时间来加载，那么这个js效果就会让用户感觉失效了。
 js里的DOM加载完成后不知,待查
 -------------------------------------*/
//1.
window.onload = function(){
　　$("#a").click(function(){
　　　　//adding your code here
　　});
} 

//2. 
function myfun(){
 alert("this window.onload");
}
window.onload=myfun;//不要括号


/*-------------------------------------
 js在页面输出日期和星期,时间
 -------------------------------------*/
var Today = new Date();
var DateName = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var MonthName = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
document.write("<span class=\"date\">" + Today.getFullYear() + "年" + MonthName[Today.getMonth()] +
Today.getDate() + "日" + "&nbsp; " + DateName[Today.getDay()] + "</span>");


/*-------------------------------------
 js控制input[type=text]获取失去焦点
 -------------------------------------*/
<input type="text" value="xiaoan" name="nick_name" onfocus="if(this.value == 'xiaoan') this.value = 'xiao'" onblur="if(this.value =='') this.value = 'xiaoa'">

<pre>
onfocus="if(this.value == 'xiaoan') this.value = 'xiao'"
</pre>
<p>当输入框获得焦点时（onfocus） 如果当前值为xiaoan,那么把输入框的值写成xiao</p>
<pre>
onblur="if(this.value =='') this.value = 'xiaoa'"
</pre>
<p>当输入框失去焦点时（onblur） 如果当前值为'',那么把输入框的值写成xiaoa</p>
<p>反正最后达到一个效果让输入框不为空</p>


/*-------------------------------------
 改变url参数并可以把不存在的参数添加进url最后
 -------------------------------------*/
function changeURLPar(destiny, par, par_value){
 var pattern = par+'=([^&]*)';
 var replaceText = par+'='+par_value;
 if (destiny.match(pattern)){
 var tmp = '/\\'+par+'=[^&]*/';
 tmp = destiny.replace(eval(tmp), replaceText);
 return (tmp);
 }
 else{
 if (destiny.match('[\?]')){
 return destiny+'&'+ replaceText;
 }
 else{
 return destiny+'?'+replaceText;
 }
 }
 return destiny+'\n'+par+'\n'+par_value;
} 

//destiny是目标字符串，比如是http://www.huistd.com/?id=3&ttt=3
//par是参数名，par_value是参数要更改的值，调用结果如下：
//changeURLPar(test, 'id', 99); // http://www.huistd.com/?id=99&ttt=3
//添加一个不存在的参数haha
//changeURLPar(test, 'haha', 33); // http://www.huistd.com/?id=99&ttt=3&haha=33 
/*
--------------------------------------------------------------------------
*/

/**
 * 生成一个自定义范围的随机数
 * 
 * @returns {int}
 */
function GetRandomNum(Min, Max){
 var Range = Max - Min;
 var Rand = Math.random();
 return(Min + Math.round(Rand * Range));
}



/*-------------------------------------
 js获取各种节点的方法
 -------------------------------------*/
1. 通过顶层document节点获取：
 (1) document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
 如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
 (2)document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
 例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
 (3)document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。
2、通过父节点获取：
 (1)parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
 (2)parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
 在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...
 (3)parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
 注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
 (4)parentObj.children：获取已知节点的直接子节点数组。
 注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
 (5)parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取：
 (1)neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
 (2)neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
4、通过子节点获取：
 (1)childNode.parentNode：获取已知节点的父节点。


/*-------------------------------------
 js获取各种时间
 -------------------------------------*/
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

要获取当前时间戳，可以用：

if (Date.now) {
 alert(Date.now()); // 老版本IE没有now()方法
} else {
 alert(new Date().getTime());
}



function setCookie(name, value, day, path) {
 var str = name + "=" + escape(value);
 if (day != 0) {
 var date = new Date();
 var ms = day * 3600 * 1000 * 24;
 date.setTime(date.getTime() + ms);
 str += ';expires=' + date.toGMTString();
 }//undefined
 if (typeof (path) != 'undefined') {
 str += ';path=' + path
 }
 document.cookie = str;
}
//获取cookie
function getCookie(c_name)
{
 if (document.cookie.length > 0)
 {
 c_start = document.cookie.indexOf(c_name + "=")
 if (c_start != -1)
 {
 c_start = c_start + c_name.length + 1
 c_end = document.cookie.indexOf(";", c_start)
 if (c_end == -1)
 c_end = document.cookie.length
 return unescape(document.cookie.substring(c_start, c_end))
 }
 }
 return ""
}




//这两个函数可以与asp（Server.UrlEncode）、php（urlencode()）很好的解码
var test1="http://www.wljcz.com/My first/"; 
var bb=encodeURIComponent(test1); 
var nnow=decodeURIComponent(bb); 
document.write(bb+ "<br />"); 
document.write(nnow);

分享到新浪等

Mon, 01 Jan 0001 00:00:00 +0000


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!--分享到--> 
 <div class="arthdshare">
 <!-- Baidu Button BEGIN -->
 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
 <span class="bds_more">分享到：</span>
 <a class="bds_qzone"></a>
 <a class="bds_tsina"></a>
 <a class="bds_tqq"></a>
 <a class="bds_renren"></a>
 <a class="bds_t163"></a>
 <a class="shareCount"></a>
 </div>
 <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6835930" ></script>
 <script type="text/javascript" id="bdshell_js"></script>
 <script type="text/javascript">
 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
 </script>
 <!-- Baidu Button END --> 
 </div>
<!--分享到--> 
</body>
</html>

改变url参数并可以把不存在的参数添加进url最后

Mon, 01 Jan 0001 00:00:00 +0000

function changeURLPar(destiny, par, par_value)
{
var pattern = par+'=([^&]*)';
var replaceText = par+'='+par_value;
if (destiny.match(pattern))
{
var tmp = '/\\'+par+'=[^&]*/';
tmp = destiny.replace(eval(tmp), replaceText);
return (tmp);
}
else
{
if (destiny.match('[\?]'))
{
return destiny+'&'+ replaceText;
}
else
{
return destiny+'?'+replaceText;
}
}
return destiny+'\n'+par+'\n'+par_value;
} 


destiny是目标字符串，比如是http://www.huistd.com/?id=3&ttt=3
par是参数名，par_value是参数要更改的值，调用结果如下：
changeURLPar(test, 'id', 99); // http://www.huistd.com/?id=99&ttt=3
添加一个不存在的参数haha
changeURLPar(test, 'haha', 33); // http://www.huistd.com/?id=99&ttt=3&haha=33

判断浏览器及版本

Mon, 01 Jan 0001 00:00:00 +0000

<!DOCTYPE HTML>
<html>
 <head>
 <title>JavaScript获取浏览器类型与版本</title>
 <meta charset="utf-8"/>
 <script type="text/javascript">
 var Sys = {};
 var ua = navigator.userAgent.toLowerCase();
 var s;
 (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
 (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
 (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
 (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
 (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

 //以下进行测试
 if (Sys.ie) document.write('IE: ' + Sys.ie);
 if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
 if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
 if (Sys.opera) document.write('Opera: ' + Sys.opera);
 if (Sys.safari) document.write('Safari: ' + Sys.safari);
 </script>
 <script type="text/javascript">
 function getBrowserInfo(){
 var Sys = {};
 var ua = navigator.userAgent.toLowerCase();
 var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
 var m = ua.match(re);
 Sys.browser = m[1].replace(/version/, "'safari");
 Sys.ver = m[2];
 return Sys;
 }
 document.write('<hr/>');
 //获取当前的浏览器信息
 var sys = getBrowserInfo();
 //sys.browser得到浏览器的类型，sys.ver得到浏览器的版本
 document.write(sys.browser + "的版本是：" + sys.ver);
 </script>
 </head>
 
 <body>
 
 </body>
</html>

瀑布流

Mon, 01 Jan 0001 00:00:00 +0000

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 ul li {height: 50px; border: 1px solid red;}
 </style>
 <script type="text/javascript" src="jquery1.8.2.js"></script>
</head>
<body>
 <ul>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 <li>1</li>
 </ul>
</body>
<script type="text/javascript">
$(window).load(function(){
 ;(function($){
 var is_do = true;
 var range = 50; //距下边界长度/单位px
 var maxnum = parseInt(10); //设置加载最多次数-页数
 var num = 1; //当前页数
 var totalheight = 0;

 $(window).scroll(function(){
 var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
 var window_height = $(window).height();//浏览器窗体高度
 var document_height = $(document).height();//文档高度
 //浏览器窗体高度 + 滚动条距顶部距离 = 文档高度
 console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 
 console.log("页面的文档高度 ："+$(document).height()); 
 console.log('浏览器的高度：'+$(window).height()); 

 totalheight = parseFloat(window_height) + parseFloat(srollPos);

 if ((document_height-range <= totalheight) && (num < maxnum) && is_do) {
 is_do = false;
 alert(1);
 }
 });
 })(jQuery);
});

</script>
</html>

手机屏幕触摸

Mon, 01 Jan 0001 00:00:00 +0000

<!-- HTML5 -->
<!DOCTYPE html>
<html>
 <head>
 <title>TouchEvent测试</title>
 <meta charset="gbk">
 </head>
 <body>
 <h2>TouchEvent测试</h2>
 <br />
 <div id="version" style="border:2px solid black;background-color:yellow"></div>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
 <div id="test" style="border:2px solid red">
 <ul>
 <li id="li1">测试条目1</li>
 <li id="li2">测试条目2</li>
 <li id="li3">测试条目3</li>
 <li id="li4">测试条目4</li>
 <li id="li5">测试条目5</li>
 <li id="li6">测试条目6</li>
 <li id="li7">测试条目7</li>
 <li id="li8">测试条目8</li>
 <li id="li9">测试条目9</li>
 <li id="li10">测试条目10</li>
 <li id="li11">测试条目11</li>
 <li id="li12">测试条目12</li>
 <li id="li13">测试条目13</li>
 <li id="li14">测试条目14</li>
 <li id="li15">测试条目15</li>
 <li id="li16">测试条目16</li>
 <li id="li17">测试条目17</li>
 <li id="li18">测试条目18</li>
 <li id="li19">测试条目19</li>
 <li id="li20">测试条目20</li>
 </ul>
 </div>
 
 <script type="text/javascript">
 //全局变量，触摸开始位置
 var startX = 0, startY = 0;
 
 //touchstart事件
 function touchSatrtFunc(evt) {
 try
 {
 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

 var touch = evt.touches[0]; //获取第一个触点
 var x = Number(touch.pageX); //页面触点X坐标
 var y = Number(touch.pageY); //页面触点Y坐标
 //记录触点初始位置
 startX = x;
 startY = y;

 var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
 document.getElementById("result").innerHTML = text;
 }
 catch (e) {
 alert('touchSatrtFunc：' + e.message);
 }
 }

 //touchmove事件，这个事件无法获取坐标
 function touchMoveFunc(evt) {
 try
 {
 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 var touch = evt.touches[0]; //获取第一个触点
 var x = Number(touch.pageX); //页面触点X坐标
 var y = Number(touch.pageY); //页面触点Y坐标

 var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

 //判断滑动方向
 if (x - startX != 0) {
 text += '<br/>左右滑动';
 }
 if (y - startY != 0) {
 text += '<br/>上下滑动';
 }

 document.getElementById("result").innerHTML = text;
 }
 catch (e) {
 alert('touchMoveFunc：' + e.message);
 }
 }

 //touchend事件
 function touchEndFunc(evt) {
 try {
 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

 var text = 'TouchEnd事件触发';
 document.getElementById("result").innerHTML = text;
 }
 catch (e) {
 alert('touchEndFunc：' + e.message);
 }
 }

 //绑定事件
 function bindEvent() {
 document.addEventListener('touchstart', touchSatrtFunc, false);
 document.addEventListener('touchMoveFunc', touchMoveFunc, false);
 document.addEventListener('touchend', touchEndFunc, false);
 }

 //判断是否支持触摸事件
 function isTouchDevice() {
 document.getElementById("version").innerHTML = navigator.appVersion;

 try {
 document.createEvent("TouchEvent");
 alert("支持TouchEvent事件！");

 bindEvent(); //绑定事件
 }
 catch (e) {
 alert("不支持TouchEvent事件！" + e.message);
 }
 }

 window.onload = isTouchDevice;
 </script>
 </body>
</html>

一些案例

Mon, 01 Jan 0001 00:00:00 +0000

源码地址

js验证身份证号有效性预览：
单选按钮单击一下选中再次单击取消选中预览：
模拟js弹出框预览alert 预览confirm 预览prompt
使用js加载器动态加载外部Javascript文件无预览
html时钟预览