js知识点总结

最新推荐文章于 2022-09-10 18:43:48 发布

lelong2002huyao

最新推荐文章于 2022-09-10 18:43:48 发布

阅读量1.5k

点赞数

分类专栏： js&jquery 文章标签： jquery

本文链接：https://blog.csdn.net/lelong2002huyao/article/details/12574267

版权

js&jquery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

*.手动添加事件,删除事件

	1.function startEvent(eventTarget,eventName,eventHandle){
			if(eventTarget.addEventListener){
				eventTarget.addEventListener(eventName,eventHandle,false);
			}else if(eventTarget.attachEvent){
				eventTarget.attachEvent("on"+eventName,eventHandle);
			}else{
				eventTarget["on"+eventName]=eventHandle;
			}
		}
	2.startEvent(document.getElementById("b"),"click",function(){createNewMsg("fuck   you")});//这里可以用这种方法调用带参数的函数

**背景色淡出效果

<style type="text/css">
	div{
		width:200px;
		height:30px;
	}
</style>
<script type="text/javascript">
Function.prototype.bind=function(){ //绑定方法调用的还是当前的那个对象
	var fn=this,objs=Array.prototype.slice.call(arguments),object=objs.shift();
	return function(){
		return fn.call(object,objs.concat(Array.prototype.slice.call(arguments)));
	};
}
var fadingObject={
	yellowColor:function(b){
		var r="ff";
		var g="ff";
		var b=b.toString(16);
		var newRGB="#"+r+g+b;
		return newRGB;
	},
	fade:function(id,start,finish){
		this.start=start;
		this.count=start;
		this.finish=finish;
		this.id=id;
		this.countDown=function(){
			this.count+=30;
			if(this.count>=finish){
				document.getElementById(this.id).style.backgroundColor="red";
				this.countDown=null;
			}
			document.getElementById(this.id).style.backgroundColor=this.yellowColor(this.count);
			setTimeout(this.countDown.bind(this),1000);
		}
	}
};


window.οnlοad=function(){
	fadingObject.fade("one",0,255);
	fadingObject.countDown();
}


</script>
</head>


<body>
	<div id="one" />
</body>
</html>

*checkbox

1.判断checkbox是不是disabled
	for(var i=0;i<boxes.length;i++){
			if(boxes[i].disabled==false){//判断的时候判断是不是用true和false
										//boxes[i].checked==true或者false判断是否选中
				boxes[i].checked=obj;
			}
		}
	
2.设置checkbox为不可用
	<td><input type="checkbox" name="" value="" disabled="disabled"/></td>

*clonenode()

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function clone(){
			var s=$("s");
			var c=s.childNodes[(s.childNodes.length-1)].cloneNode(true);//[]中表示的哪个子节点被复制,注意:如果你取的s是table上的话,table有个默认的子节点<tbody>
																		//这里取的是当前节点的最后一个节点
			s.appendChild(c);
		}
		
	</script>
</head>


<body>
	<table  border="1">
    	<tbody id="s">
            <tr >
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr >
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
            </tr>
        </tbody>
    </table>
    <button name="点我" οnclick="clone()">点我</button>
</body>
</html>

*Date

	1.
	var d=new Date();
	function test(){
		document.write(d+"<br/>");
		document.write(d.toDateString()+"<br/>");
		document.write(d.toLocaleDateString()+"<br/>");
		document.write(d.toLocaleString()+"<br/>");
		document.write(d.toLocaleTimeString()+"<br/>");
	}
	
	显示:Thu Nov 15 13:55:31 UTC+0800 2012
		Thu Nov 15 2012
		2012年11月15日
		2012年11月15日 13:55:31
		13:55:31


	2.
	var time=new Date("july 15,2012,13:2:33");
	time.getDate();--返回几号
	time.getDay();--星期几,星期天是0
	time.getHours();
	time.getMinutes();
	time.getSeconds();
	time.getFullYear();
	time.getTime();--返回自一个时刻起的毫秒数(1970年1月1日)
	time.getMonth();--返回月份,注意1月份是0,2月份是1以此类推

*disabled和readonly

	<input type="text" name="a" value="123" disabled="disabled"/>
	<input type="text" name="b" value="123" disabled="true/false"/>
	//用来设置标签是否可用,设置了true或者disabled后表示不可以修改
	//readonly只能与type="text" 一起使用.disabled可以和其他一起用

*event.srcElement和event.target

1.event.srcElement 设置或获取触发事件的对象。 
常用的有： 
event.srcElement.tagName     //事件对象的html标记 
event.srcElement.innerText   //事件对象的内文本 
event.srcElement.value    	 //表单事件对象的值
event.srcElement.parentNode.tagName //父节点的tag
event.srcElement.options[event.srcElement.selectedIndex].value //获取select里面option的value


2.event.target是非ie环境下的,event.srcElement是ie的

*iframe

1.
	1.jsp
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
		function a(){
			alert(2);
			p.location="2.html"; //注意这里不能使用document.getElementById的方法
		}
		function c(){
			alert("c");
		}
	</script>
	</head>


	<body>
	<iframe id="p" src="1.jpg"></iframe>
	<button οnclick="a()">点我</button>
	</body>
	</html>


	2.jsp
	<body>
		<img src="2.jpg"  />
	</body>
	</html>
2.iframe中调用父页面的方法,直接用parent.方法名()
	2.jsp
	<script type="text/javascript">
		function b(){
		parent.c();
	}
	</script>

*indexof()

	<script type="text/javascript">   
	 	var str="Hello world!";  
		document.write(str.indexOf("Hello") + "<br />"); 
	 	document.write(str.indexOf("World") + "<br />"); 
		document.write(str.indexOf("world"));   
	</script>
		以上代码的输出：
	0  -1  6

*input

1.maxlength
	<input type="text" maxlength="10"/>


2.重新填写的时候用
	<input type="reset"/>
	
3.input中只能输入数字
	onkeyup = "this.value=this.value.replace(/\D/g,'')"

*offsetParent

1.代码1
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<script type="text/javascript" language="JavaScript">
		function offset_init() {
		var pElement = document.getElementByIdx_x("sonObj");
		parentObj = pElement.offsetParent;
		alert(parentObj.tagName);
		}
		</script>
		</head>
		<body οnlοad="offset_init()">
		<div id="parent">
		<p id="sonObj">测试OffsetParent属性</p>
		</div>
		</body>
		</html>


		测试结果:
		Firefox3:"BODY"
		Internet Explorer 7:"BODY"
		Opera 9.51:"BODY"
		Chrome 0.2:"BODY"
		Safari 3:"BODY


		结论:	当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)


2.代码2
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<style type="text/css">
		#parent {
		position: absolute; <!-- position:relative; -->
		left: 25px;
		top: 188px;
		border: 1px solid black;
		}
		</style>
		<script type="text/javascript" language="JavaScript">
		function offset_init() {
		var pElement = document.getElementByIdx_x("sonObj");
		parentObj = pElement.offsetParent;
		alert(parentObj.tagName);
		}
		</script>
		</head>
		<body οnlοad="offset_init()">
		<div id="parent">div测试代码
		<p id="sonObj">测试OffsetParent属性</p>
		</div>
		</body>
		</html>


		测试结果:
		Firefox3:"DIV"
		Internet Explorer 7:"DIV"
		Opera 9.51:"DIV"
		Chrome 0.2:"DIV"
		Safari 3:"DIV"


		结论:	当某个元素的父元素进行了CSS定位时(absolute或者relative)，则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素






3.代码3
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<style type="text/css">
		#Grandfather {
		position: relative;
		left: 25px;
		top: 188px;
		border: 1px solid black;
		}
		</style>
		<script type="text/javascript" language="JavaScript">
		function offset_init() {
		var pElement = document.getElementByIdx_x("sonObj");
		parentObj = pElement.offsetParent;
		alert(parentObj.tagName);
		}
		</script>
		</head>
		<body οnlοad="offset_init()">
		<h1 id="Grandfather">
		<div id="parent">
		<p id="sonObj">测试OffsetParent属性</p>
		</div>
		</h1>
		</body>
		</html>
		
		测试结果:
		Firefox3:"H1"
		Internet Explorer 7:"H1"
		Opera 9.51:"H1"
		Chrome 0.2:"H1"
		Safari 3:"H1"
		
		结论:	当某个元素及其父元素都未进行CSS定位时(absolute或者relative)，则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。




		
		
		**onmouseover
		<style type="text/css">
.red{
	background-color:red;
}
.blue{
	background-color:blue;
}
</style>
</head>


<body>
	<input type="button"  class="red" name="123" οnmοuseοver="className='blue'" οnmοuseοut="className='red'"value="123" />
</body>

*<body>
<div>
<select>
<optgroup label="山东">
<option value ="青岛">青岛</option>
<option value ="济南">济南</option>
</optgroup>

<optgroup label="江苏">
<option value ="苏州">苏州</option>
<option value ="无锡">无锡</option>
</optgroup>
</select>
</div>
</body>
</html>

*关于parseInt()

	parseInt(-5)-- -5
	parseInt(+5)-- 5
	parseInt(5+5)-- 10//这里注意会进行运算
	parseInt(5.5)-- 5 //这里截掉小数点后面的数字

function people(name){
	this.name=name;
}


people.prototype.say=function(){
	alert(this.name+"hellow");
}
var p=new people("张三");
p.say();
var p2=new people("zbj");
p2.say();

*问题说明

	function checkInput(){
		var a=1;
		var reg=/^[a-zA-Z0-9]$/g;
		
			alert("1:"+reg.test(a));	//return true;
			alert("2:"+reg.test(a));	//return false;
			alert("3:"+reg.test(a));	//return true;
			alert("4:"+reg.test(a));	//return false;
		
	}
	//因为定义了g全局模式就是要继续向下搜索,会有一个reg.lastIndex=1;从1位置开始下次搜索所以第二次就为false,lastIndex重置为0,解决办法:每次test完把
	lastIndex=0或者直接去掉全局模式

*级联option

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function selectCity(){
			var province=$("province").value; //注意这里是value
			var city=$("city");
			city.options.length=0; //清除原有的option
			switch(province){
				case "江苏":
					city.add(new Option("南京","南京")); //city.options.add(new Option("",""),null),前面是文本,后面是value
					city.add(new Option("苏州","苏州"));
					break;
				case "山东":
					city.add(new Option("青岛","青岛"));
					city.add(new Option("烟台","烟台"));
					break;
			}
		}
	</script>
	</head>


	<body>
		<div>
			<select id="province" οnchange="selectCity()">
				<option value="江苏">江苏</option>
				<option value="山东">山东</option>
			</select>
			<select id="city">
				<option>请选择</option>
			</select>
		</div>
	</body>
	</html>

*select

	<select style="width:100%;" multiple name="list1" size="12"> //multiple是里面的值可以多选,size是显示几个,默认的是1个
	var options=a.options; //可以选择select里面所有的option
	a.remove(i);//直接用remove就可以,不需要removeChild,remove后面直接加index
	var value=options[obj.selectedIndex].value; //获取选中的值
	var text=options[obj.selectedIndex].text;	//获取文本
	a.length=0;//清除所有的option

*setinterval和setTimeout的区别

	var interval=window.setinterval("t()",1000);//注意参数要加一个括号
	window.clearInterval(interval);
	
	var timeout=window.setTimeout("t()",1000);
	window.clearTimeout(timeout);
	//interval会一直执行下去,直到clear了以后,timeout只执行一次

*showModalDialog()的基本用法?(js中打开新窗口的问题)

	父窗口:
	var a=showModalDialog("url","arguments","style");
	"arguments"参数的作用
	"arguments"可以是字符串"abc"也可以说是对象{"Name":"香烟","Price":12}
	用于打开新窗口后把参数"arguments"的值传递给新打开的页面
	
	如:新窗口
	window.οnlοad=function(){
	//获取传入的值
	var v=window.dialogArguments;
	alert(v.Name);
	//显示香烟
	}
	//返回值
	window.returnValue="";

*通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值.

currentStyle,runtimeStyle,getComputedStyle
1.runtimeStyle //运行时的样式,如果与style的属性重叠，将覆盖style的属性
2.currentStyle //通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE）如：document.getElementById("test").currentStyle.top
3.getComputedStyle //getComputedStyle是firefox中的， currentStyle是ie中的.

比如说 #mydiv { width : 300px; } 则: var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle)
{ var width = mydiv.currentStyle['width'];
alert('ie:' + width); }
else if(window.getComputedStyle)
{ var width = window.getComputedStyle(mydiv , null)['width'];
alert('firefox:' + width); }

*js中substring和substr的用法

1.substring(start,end)
	substring(start,end)
	开始和结束的位置，从零开始的索引




2.substr 方法
	substr(start [, length ])
	开始位置一样,后面是长度




举例：
var str = "0123456789";


alert(str.substring(0));------------"0123456789"
alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
alert(str.substring(2,12));---------"23456789"
alert(str.substring(2,-2));---------"01"
alert(str.substring(-1,5));---------"01234"
alert(str.substring(-1,-5));--------""


alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"0123456789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
alert(str.substr(2,2));-------------"23"
alert(str.substr(2,5));-------------"23456"
alert(str.substr(2,12));------------"23456789"
alert(str.substr(2,-2));------------""
alert(str.substr(-1,5));------------"01234"
alert(str.substr(-1,-5));-----------""

 <tr>
    <td nowrap="nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>

*关于typeof()

	显示数据类型
	var time=new Date();
	typeof(time)---这里是object类型
	var num=123;
	typeof(num)--这里是number类型
	var nums=[1,2,3]
	typeof(nums)--这里是object类型
	typeof一共返回几种类型:undefined,null,string,boolean,number,object,function

*共同点和不同点
共同点：在 JavaScript 中，toString()方法和valueOf()方法，在输出对象时会自动调用。
不同点：二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。

*例子1:
<script>
var obj={};
obj.valueOf=function(){
return 10; //这里的对象的方法的写法
}
obj.toString=function(){
return "helloworld";
}
var result=obj+1;
alert(result);//+1的时候优先调用的是valueOf所以这里是alert(11);
alert(obj); //这里调用的时候优先调用toString,这里是:alert("helloworld");
</script>

*例子2:
<script>
function obj(){
}
obj.prototype.valueOf=function(){
return "aaa";
}
obj.prototype.toString=function(){
return "bbb";
}
var a=new obj();
var b=new obj();
alert(a); //alert(obj.toString());
alert(a+b); //alert(obj.valueOf()+obj.valueOf());
</script>

*with()的使用

1.简要说明 
with 语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。 


2.语法格式 
	with(object instance) 
	{ 
	//代码块 
	} 
	有时候，我在一个程序代码中，多次需要使用某对象的属性或方法，照以前的写法，都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法，着实有点麻烦，学习了with语句后，可以通过类似如下的方式来实现： 
	with(objInstance) 
	{ 
	var str = 属性1; 
	..... 
	} 去除了多次写对象名的麻烦。 


3.举例 
	<script language="javascript"> 


	function Lakers() { 
	this.name = "kobe bryant"; 
	this.age = "28"; 
	this.gender = "boy"; 
	} 
	var people=new Lakers(); 
	with(people) 
	{ 
	var str = "姓名: " + name + "<br>"; 
	str += "年龄：" + age + "<br>"; 
	str += "性别：" + gender; 
	document.write(str); 
	} 


	</script> 
	代码执行效果如下: 
	姓名: kobe bryant 
	年龄：28 
	性别：boy

4.举例,创建类.
	<script type="text/javascript">


	function Player(name,age,gender){
		this.name=name;
		this.age=age;
		this.gender=gender;
	}
	window.οnlοad=function(){
		var p=new Player("猪八戒",19,"男");
		var p2=new Player("孙悟空",20,"女");
		with(p){
			alert(name+"\n"+age+"\n"+gender);
		}
		with(p2){
			alert(name+"\n"+age+"\n"+gender);
		}
	}
	</script>
	
*创建类,创建类的方法
1.
	function Stu(name,age){
		this._name=name;
		this._age=age;
	}
	Stu.prototype={//原型模式
		"show":function(){...
		}
	}
	var s=new Stu("Joey",12){
		s.show();
	}
	
2.Stu.prototype.trim=function(){
	...
}

*关于Xml dom解析

	1)首先新建loadxmldoc.js,里面的一个函数loadXMLDoc(dname)
	
	function loadXMLDoc(dname) 
	{
	try //Internet Explorer
	  {
	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	  }
	catch(e)
	  {
	  try //Firefox, Mozilla, Opera, etc.
		{
		xmlDoc=document.implementation.createDocument("","",null);
		}
	  catch(e) {alert(e.message)}
	  }
	try 
	  {
	  xmlDoc.async=false;//异步
	  xmlDoc.load(dname);
	  return(xmlDoc);
	  }
	catch(e) {alert(e.message)}
	return(null);
	}


	2)新建xml文件 books.xml
		<?xml version="1.0" encoding="UTF-8"?>
		<bookstore>
		<book category="children">
		  <title lang="en">Harry Potter</title> 
		  <author>J K. Rowling</author> 
		  <year>2005</year> 
		  <price>29.99</price> 
		</book>
		</bookstore>


	3)新建html用来解析xml文件test.htm
		<html>
		<head>
		<script type="text/javascript" src="loadxmldoc.js"> 
		</script>
		</head>
		<body>
		<script type="text/javascript">
		xmlDoc=loadXMLDoc("books.xml");
		document.write(xmlDoc.getElementsByTagName("book")[0].attributes[0].nodeValue);
		</script>
		</body>
		</html>

*关于表单的onsubmit

<form οnsubmit="return check(this)"/>
	function check(obj){
 		if((obj.loginName.value=="")||(obj.loginPwd.value=="")){
		return false;
		}
		return true;
		//loginName和loginPwd是 input 的name属性值

*&& ||的使用

	在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true
	
	var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
	
	&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。 
	js也遵循上述原则。但是比较有意思的是它们返回的值。 
	代码：var attr = true && 4 && “aaa”; 
	那么运行的结果attr就不是简单的true或这false，而是”aaa”

<script type="text/javascript">
	var txt='{employee:[{"name":"孙悟空","age":12},{"name":"猪八戒","age":18}]}';
	var obj=eval("("+txt+")");		//这里要用()以避免语法错误
	alert(obj.employee[0].name);	
</script>

*关于Xml dom解析

	1)首先新建loadxmldoc.js,里面的一个函数loadXMLDoc(dname)
	
	function loadXMLDoc(dname) 
	{
	try //Internet Explorer
	  {
	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	  }
	catch(e)
	  {
	  try //Firefox, Mozilla, Opera, etc.
		{
		xmlDoc=document.implementation.createDocument("","",null);
		}
	  catch(e) {alert(e.message)}
	  }
	try 
	  {
	  xmlDoc.async=false;//异步
	  xmlDoc.load(dname);
	  return(xmlDoc);
	  }
	catch(e) {alert(e.message)}
	return(null);
	}


	2)新建xml文件 books.xml
		<?xml version="1.0" encoding="UTF-8"?>
		<bookstore>
		<book category="children">
		  <title lang="en">Harry Potter</title> 
		  <author>J K. Rowling</author> 
		  <year>2005</year> 
		  <price>29.99</price> 
		</book>
		</bookstore>


	3)新建html用来解析xml文件test.htm
		<html>
		<head>
		<script type="text/javascript" src="loadxmldoc.js"> 
		</script>
		</head>
		<body>
		<script type="text/javascript">
		xmlDoc=loadXMLDoc("books.xml");
		document.write(xmlDoc.getElementsByTagName("book")[0].attributes[0].nodeValue);
		</script>
		</body>
		</html>

***.手动添加事件,删除事件
1.function startEvent(eventTarget,eventName,eventHandle){
if(eventTarget.addEventListener){
eventTarget.addEventListener(eventName,eventHandle,false);
}else if(eventTarget.attachEvent){
eventTarget.attachEvent("on"+eventName,eventHandle);
}else{
eventTarget["on"+eventName]=eventHandle;
}
}
2.startEvent(document.getElementById("b"),"click",function(){createNewMsg("fuck you")});//这里可以用这种方法调用带参数的函数

**Function.bind();
Function.prototype.bind=function(){
var fn=this,objs=Array.prototype.slice.call(arguments),object=objs.shift();
return function(){
return fn.call(object,objs.concat(Array.prototype.slice.call(arguments)));
};
}

**String.trim()
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,"");

}

**<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

var k=0;
function hSort(hTableId,hCol,hDataType){
var hTable=document.getElementById(hTableId);
var hTbody=hTable.tBodies[0];
var hRows=hTbody.rows;

var hArray=new Array();

for(var i=0;i<hRows.length;i++){
hArray.push(hRows[i]);
}

if(hTable.sortCol==hCol){ //非首次排序只要对数组进行反转即可
hArray.reverse();
}else{
if(k%2==0){
hArray.sort(compareUp(hCol,hDataType))
}
else if(k%2==1){
hArray.sort(compareDown(hCol,hDataType))
}
}
var hFragment=document.createDocumentFragment(); //创建文档碎片
for(var i=0;i<hArray.length;i++){ //把排序过的数组成员依次添加到文档碎片
hFragment.appendChild(hArray[i]);
}
hTbody.appendChild(hFragment); //把文档碎片添加到tbody,完成排序后的显示更新
hTable.sortCol=hCol; //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1

}
//升序
function compareUp(hCol,hDataType){
return function up(r1,r2){
var value1=convert(r1.cells[hCol].firstChild.nodeValue,hDataType);
var value2=convert(r2.cells[hCol].firstChild.nodeValue,hDataType);
if(value1>value2){
return 1;
}
else if(value1<value2){
return -1;
}else{
return 0;
}
}
}

//降序
function compareDown(hCol,hDataType){
return function down(r1,r2){
var value1=convert(r1.cells[hCol].firstChild.nodeValue,hDataType);//这里的r1,r2指的是序列的里面的元素,这里是TR
var value2=convert(r2.cells[hCol].firstChild.nodeValue,hDataType);
if(value1>value2){
return -1;
}else if(value1<value2){
return 1;
}else{
return 0;
}
}
}

//转换数据类型
function convert(value,type){
switch(type){
case "int":return parseInt(value);
case "float":return parseFloat(value);
case "date":return new Date(Date.parse(value));
default:return value.toString();
}
}

</script>
</head>

<body>
<table border="1" style="border-collapse:collapse;" id="hTable" sortCol="-1">
<thead>
<tr>
<td οnclick="hSort('hTable',0)">班级</td>
<td οnclick="hSort('hTable',1)">姓名</td>
<td οnclick="hSort('hTable',2)">学号</td>
<td οnclick="hSort('hTable',3,'float')">成绩</td>
</tr>
</thead>

<tr>
<td>1</td>
<td>孙悟空</td>
<td>01</td>
<td>98</td>
</tr>
<tr>
<td>1</td>
<td>猪八戒</td>
<td>02</td>
<td>89</td>
</tr>
<tr>
<td>1</td>
<td>沙和尚</td>
<td>03</td>
<td>77</td>
</tr>
<tr>
<td>1</td>
<td>唐僧</td>
<td>04</td>
<td>100</td>
</tr>
<tr>
<td>1</td>
<td>白龙马</td>
<td>05</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>白晶晶</td>
<td>01</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>春三十娘</td>
<td>02</td>
<td>95</td>
</tr>
</table>
</body>
</html>

***关于飘动广告

一、在浏览器中漂浮的广告图片，当图片漂浮至浏览器边界时，自动向相反方向继续漂浮，如页面效果。
二、实现思路
1、在页面上放入一个层，并在层中插入一张图片。
2、在JavaScript代码中，分别定义图片所在层在X轴、Y轴方向移动的距离，在X轴、Y轴移动的方向，以及图片移动的速度。
3、在图片漂浮函数中，使用clientWidth和clientHeight计算出浏览器的宽度和高度，使用图片的width和height计算图片的宽度和高度，然后使用层的left和top属性设置图片所在层在页面中的坐标。
4、图片在移运的过程中需要判断当前图片的移动方向，如果图片是在X轴、Y轴的正方向移动则坐标要加上移动的距离，如果在负方向移动则坐标要减去移动的距离。
5、图片在移动的过程中需要判断图片是否移动到浏览器的边界，根据当前图片在X轴、Y轴的坐标分别加上图片的宽度和高度是否大于浏览器的宽度和高度，如果大于则图片向相反的方向移动。
三、实现漂浮文告的JavaScript源代码
//定义全局变量
var moveX = 0; //X轴方向移动的距离
var moveY = 0; //Y轴方向移动的距离
var step = 1; //图片移动的速度
var directionY = 0; //设置图片在Y轴的移动方向
var directionX = 0; //设置图片在X轴的移动方向

function changePos(){
var img = document.getElementById("float"); //图片所在层ID
var width = document.documentElement.clientWidth; //浏览器宽度
var height = document.documentElement.clientHeight; //浏览器高度
var imgHeight=document.getElementById("floatImg").height; //漂浮图片高度
var imgWidth=document.getElementById("floatImg").width; //漂浮图片宽度
img.style.left =parseInt(moveX + document.documentElement.scrollLeft)+"px"; //漂浮图片距浏览器左侧位置
img.style.top = parseInt(moveY + document.documentElement.scrollTop)+"px"; //漂浮图片距浏览器顶端位置
if (directionY==0){
moveY = moveY + step; //漂浮图片在Y轴方向上向下移动
}
else{
moveY = moveY - step; //漂浮图片在Y轴方向上向上移动
}
if (moveY < 0) { //如果漂浮图片漂到浏览器顶端时，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY >= (height - imgHeight)) { //如果漂浮图片漂到浏览器底端时，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
if (directionX==0){
moveX = moveX + step; //漂浮图片在X轴方向上向右移动
}
else {
moveX = moveX - step; //漂浮图片在X轴方向上向左移动
}
if (moveX < 0) { //如果漂浮图片漂到浏览器左侧时，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX >= (width - imgWidth)) { //如果漂浮图片漂到浏览器右侧时，设置图片在X轴方向上向左移动
directionX = 1;
moveX = (width - imgWidth);
}
}
setInterval("changePos()",30);

**<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function check(obj){
var boxes=document.getElementsByName("s");
for(var i=0;i<boxes.length;i++){
boxes[i].checked=obj;
}
}
</script>
</head>
<body>
<div>
<input type="checkbox" onClick="check(this.checked)"/>--这个是全选按钮
<input type="checkbox" name="s" checked="checked"/>
<input type="checkbox" name="s"/>
<input type="checkbox" name="s"/>
<input type="checkbox" name="s"/>
<input type="checkbox" name="s"/>
</div>
</body>
</html>

**1.可以直接取用form的name来获取下面表单的值
<form name="huyao" action="" method="post">
<input type="checkbox" name="cidss" value="1"/>
<input type="checkbox" name="cidss" value="3"/>
<input type="checkbox" name="cidss" value="2"/>
<input type="checkbox" name="cidss" value="4"/>
<input type="checkbox" name="cidss" value="5"/>
<input type="checkbox" name="cidss" value="7"/>
<input type="checkbox" name="cidss" value="6"/>
<button οnclick="a()">点我</button>
</form>

var values=huyao.cidss;
for(var i=0;i<values.length;i++){
alert(values[i].value);
}

***如何删除一行?(js)
if (confirm("DELETE ?")) {
var tr = this.parentNode.parentNode;//先根据父节点td找到父节点tr
tr.parentNode.removeChild(tr);//tr的父节点再移除tr
//或者找到table的对象,用table.deleterow(0);
}

***如何设置时间倒数5秒然后页面跳转
var time=4;
function changeTime(){
time=time-1;
document.getElementById("second").innerHTML=time;
if(time==0){
document.location.href="login.jsp";
}
}
window.setInterval(changeTime, 1000);
window.οnlοad=changeTime;

**

*marquee标签?并且实现无间隙滚动,用两个div上面一个滚动完毕,立刻滚动下一个
<marquee direction ="up" >
<img>
<img>

*如何实现无缝滚动的主要代码?
if ($("express2").offsetTop - $("divExpress").scrollTop <= 0) {
$("divExpress").scrollTop = $("divExpress").scrollTop
- $("express1").offsetHeight;
}
else {
$("divExpress").scrollTop++;
}
//首先设置大的div套在外面,里面分别为两个div1和div2,设置div的overflow
为hidden.先判断下面的那个div2减去已经滚动的div.scrollTop是否小于0,
小于0表示下面那个div2已经滚动到最顶端,如果到最顶端则大div的滚动
距离scrollTop重置为总的div的scrollTop减去上面已经滚动走的div1的
offsetHeight,否则div.scrollTop++

*关于offsetHeight和height的区别
offsetHeight包含了边框和padding的在内的一共的高度不包括margin
height单指的是内容的高度

***设置图片鼠标移动到上面改变图像的问题?
<img src="..." name="pic1" οnmοuseοver=".." οnmοuseοut=""/>
function mouseover{
document.pic1.src="..."//这里可以用documen.name的方式取值
}

**1.关于鼠标移动,改变颜色的问题
<a οnmοuseοver="red(this)"..></a>
function red(obj){
obj.style.color="red";//这里不需要在获取子节点直接用这个控件本身的style就可以
}

2.鼠标移动改变样式
<input type="button" class="box80" οnmοuseοver="className='box81'" οnmοuseοut="className='box80'" />

***array的增加等问题
var a=new Array();
var a=[1,2,3,4];
a.push(5);//加在最后一个
a.pop();//删除并返回数组最后一个元素
a.shift();//删除并返回数组的第一个元素
a.unshift(0);//加在最前面
var b=a.concat(5);//在数组的最后加入一个元素并形成新的数组原数组不变
a.splice(1,2);//删除位置1 的后面 2个元素,包括位置1的
a.splice(1,0,4);//删除位置1后面的0个元素,并插入4
var b=a.slice(1,3);//截取数组的其中一个部分,不包含3这个位置的元素,如果3
省略则表示截取1后面的所有
a.reverse();//倒过来,比如1234 变成4321
a.sort();//排序

*forEach
var a=new Array();
var a=[1,2,3,4];
function replacement(element,index,array){
if(element=="1") array[index]="*"; //不需要返回forEach是指修改原数组
}
a.forEach(replacement);
alert(a);//打印出来是*,2,3,4

*map
//ie8不支持map和forEach,需要自己写
if(!Array.protoType.map){
Array.protoType.map=function(fun/*,thisp*/){
var len=this.length>>>0;
if(typeof fun!="function")
throw new TypeError();
var res=new Array(len);
var thisp=arguments[1];
for(var i=0;i<len;i++){
if(i in this)
res[i]=fun.call(thisp,this[i],i,this);
}
return res;
}
}

function buildNew(element,index,array){
return element.toString(16);
}
a.map(buildNew);

*filter
function filterEle(element,index,array){
return (element!=="*");//不等于*把添加到新的数组中
}

a.map(filterEle);

***关于四舍五入
var num=21.3243243;
num=num.toFixed(2);//后面跟个参数可以小数点后面几位

**实例1

<body>
<span οnclick=alert("你好")>点我 <span onClick=alert("hello")>再点我</span></span><br><br>
<span οnclick=alert("你好")>点我 <span οnclick=event.cancelBubble=true;>再点我</span></span>
</body>

</html>
//点击上面的时候回触发本身的onclick事件,还会触发父节点的onclick事件
//下面不再冒泡的时候不会触发父节点的事件

实例2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo　</title>
<style type="text/css" media="screen">
div * {display:block; margin:4px; padding:4px; border:1px solid white;}
textarea {width:20em; height:2em;}
</style>
<script type="text/javascript">
//<![CDATA[
function init(){

var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i < n; ++i){
all[i].onmouseover = function(e){
this.style.border = '1px solid red';
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
}

var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i < n; ++i){

all2[i].onmouseover = function(e){ //e指的是event事件
this.style.border = '1px solid red';
if (e) //停止事件冒泡
{
e.stopPropagation();
}
else
window.event.cancelBubble = true;
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all2[i].onmouseout = function(e){
this.style.border = '1px solid white';};
}
}
window.onload = init;
//]]>
</script>
</head>
<body>
<h1>Bubble in JavaScript DOM</h1>
<p>DOM树的结构是：</p>
<pre><code>
UL
- LI
- A
- SPAN
</code></pre>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<textarea></textarea>
<p> 鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>
</body>

</html>

示例3:
<html>
<body>
<table border="1" width="26%" id="tableA" οnclick="alert('tableA')">
<tr οnclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr οnclick="tableA_rowB_click()">
<td width="106">阻止消息上传</td>
</tr>
</table>
</body>
</html>

<script language="javascript">
function tableA_rowA_click(){
alert('tableA_rowA');
}
function tableA_rowB_click(){
alert('tableA_rowB');
event.cancelBubble=true;
}
</script>

**<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function a(){
document.location.href="test2.html";
}
</script>
</head>
<body>
<div>
<input type="image" src="1.png" οnclick="a()"/>
</div>
</body>
</html>

**
1.html关于页面镶嵌广告,点击关闭,则图片不显示的实例?
<div id="ad">
<img style="width:160px;height:180px" src="src/11.jpg" title="" alt="" />
<br />
<a href="javascript:CloseAd()">close</a>//通过点击链接关闭
</div>
#ad{
position:absolute;//绝对位置可以用户在页面之上显示
left
right
bottom
top//设置绝对路径后可以有4个属性
z-index:1//该属性用户设置堆栈路径,正的表示显示的层面在上,
负数表示层数在下

2.图片始终在一个位置
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#ad{
position:absolute;
left:20px;
top:10px;
z-index:20;
}
body{
height:10000px;
}
</style>
<script type="text/javascript">
var iniTop;
function close(){
document.getElementById("ad").style.display="none";
}
function ini(){
iniTop = document.getElementById("ad").currentStyle.top; //style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
//currentStyle可以弥补style的不足，但是只适用于IE。

}
function move(){
var divad = document.getElementById("ad");
divad.style.top = parseInt(iniTop) + parseInt(document.documentElement.scrollTop) + "px";
// var top = document .documentElement.scrollTop || document . body.scrollTop;
//在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
//例：
//var top = document .documentElement.scrollTop ? document .documentElement.scrollTop : document .body.scrollTop;
//这么写可以得到很好的兼容性。
}
window.οnscrοll=move;
window.οnlοad=ini;
</script>
</head>
<body>
<div id="ad">
<img src="1.png" title="" alt="" />
<br/>
<a href="javascript:close()" >关闭</a>
</div>
</body>
</html>

**
*外部引用js文件的方法
<script src="" type="text/javascript"></script>

***document.getElementsByName()无法获取动态创建的对象的问题
//新增金额
var c=newRow.insertCell();
newRow.appendChild(c);
var input=document.createElement("<input name='voucherDetail.account'>");//创建的时候指明name
input.type="text";
input.value="";
input.οnchange=sum;
c.appendChild(input);

}
window.οnlοad=function(){
var a=" abc";
alert(a);
a=a.trim();
alert(a);

}

***js中如何手动添加一列新列?
//创建函数
var $=function(id){return document.getElementById(id)}
//button 按钮中的方法
function open(){
var o=window.showModalDialog();
//返回值应该为object,是新打开的窗口的window.returnValue的返
//回值,这个返回值可以是一个字符串或者是对象
if(o){
add(o);//执行add()方法
}else{
}
}
function add(o){
var b=$("tbody");//找到tbody的节点
var r=b.insertRow();//新插入一行
b.appendChild(r);//把新插入的这行加入到元素中

var c=r.insertCell();//新插入单元格
r.appendChild(c);//把新插入的单元格加入元素中
r.className="...";//注意这里设置class属性时候比较特殊
r.setAttribute("id","...")//其他属性可以用setAttribute来设置
c.innerHTML="...";//设置单元格内容

var c=r.insertCell();
r.appdenChild(c);
var imgProduct=document.createElement("img")
imgProduct.src="images.png";//在单元格中插入图片
c.appendChild(imgProduct);

c = r.insertCell();
r.appendChild(c);
var btnDel = document.createElement("input");
btnDel.type = "button";
btnDel.value = "DELETE";
btnDel.onclick = processDeleteProduct;//这里注意用指针的形式而不是
c.appendChild(btnDel);
}

2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}

function insert(){
var t=$("t");
var newRow=t.insertRow();
t.appendChild(newRow);

var newCell=newRow.insertCell();
newCell.innerHTML="hellow";
newRow.appendChild(newCell);

var newCell2=newRow.insertCell();
newRow.appendChild(newCell2);
var input=document.createElement("<input type='button' name='b' value='点我'/>");
input.οnclick=test;
newCell2.appendChild(input);

var newRow2=t.insertRow();
t.appendChild(newRow2);

var newCell3=newRow2.insertCell();
newRow2.appendChild(newCell3);
var img=document.createElement("<img src='1.png'/>")
newCell3.appendChild(img);
}

function test(){
alert("nihao a ");
}
window.οnlοad=insert;
</script>
</head>
<body>
<div>
<table id="t" border="1">

</table>
</div>
</body>
</html>

***如何在浏览器的状态栏放入一条消息？
window.status = "put your message here"

lelong2002huyao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js知识点总结

*.手动添加事件,删除事件 1.function startEvent(eventTarget,eventName,eventHandle){ if(eventTarget.addEventListener){ eventTarget.addEventListener(eventName,eventHandle,false); }else if(eventTarget.at
复制链接

扫一扫

专栏目录