JS学习总结

来源：互联网发布：手机架子鼓中文软件编辑：程序博客网时间：2024/06/05 20:43

一、下面代码屏蔽ie右键
<script language="JavaScript" id="clientEventHandlersJS">

</script>
<script language="Javascript" event="oncontextmenu" for="document">

</script>

二、获取页面的源码
<script language="JavaScript">
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlHttp.open("get","url",false);//url为要获取的网页的地址

xmlHttp.send();

document.write（xmlHttp.responseText);

</script>

三、清空下拉列表
   document.getElementById("select_Id").options.length = 1;
   document.getElementById("option_Id").innerHTML = " -----总共  0  人---- ";

四、javascript json 添加修改删除的操作
<html>
<script>
//下面的操作中可能需要这三个函数我先放到这
//转换为json
function $parseJson(str){
   try{
   eval('var obj='+str);
   return obj;
}catch(e){
   return null;
}
}
//数组转换为字符串
function $ArrayToString(arr)
{
    var separator = ",";//separator为分隔符
for(var i=0;i<arr.length;i++){
    arr[i]=$toJsonString(arr[i]);
   }
    return arr.join(separator);
}
//json转换为字符串
function $toJsonString(obj){
var isArray = obj instanceof Array;
var r = [];
for(var i in obj){
   var value = obj[i];
   if(typeof value == 'string'){
    value = '"' + value + '"';
   }else if(value != null && typeof value == 'object'){
    value = $toJsonString(value);
   }
   r.push((isArray?'':i+':')+value);
}
if(isArray){
   return '['+r.join(',')+']';
}else{
   return '{'+r.join(',')+'}';
}
}

////////////////////添加

////////////////////添加属性

//这是添加json元素的属性只适合这种格式的json var json={索引号:"蒋佳良",索引号:"蒋佳良"}可能会有用处因为我没看找到好得方法来添加属性，就是想了个笨方法，希望有人给予指点,其实就是把json转换为字符串来拼接。

var addjson1={"901":{}};

function addjson(jsonname,element,attribute){
var jsonString=$toJsonString(jsonname);
var jsonString = jsonString.substring(0,jsonString.length-1);
var jsonArr=","+element+":"+attribute+"}";
var jsonString=jsonString.concat(jsonArr);
alert(jsonString);
jsonname=$parseJson(jsonString);
alert(jsonname[element]);
}

//调用方法：大概有三种请注意
addjson(addjson1,902,"'蒋佳良'");//一定要注意这个单引号哟！
addjson(addjson1,903,"{name:'蒋佳良'}");//一定要注意这个单引号哟！
addjson(addjson1,904,"[{name:'蒋佳良'},{name:'蒋佳良'}]");//一定要注意这个单引号哟！

////////////////////添加属性end

////////////////////////添加节点
var addjson2=[{name:"蒋佳良"},{name:"蒋佳良"}];
///添加到指定节点
//splice(index,howmany,element1,.....,elementX)
//index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
//howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
//element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。
//elementX 可选。可向数组添加若干元素。
addjson2.splice(2,0,{name:"你把我推进去，并排在第3个"});//这是重点
alert(addjson2[2].name);

//添加到最后
addjson2.push({name:"你把我推进去，但是排在最后面的"});//这是重点
alert(addjson2[addjson2.length-1].name);
////////////////////////添加节点end

////////////////////添加end

//修改
//修改基本上我觉得没有什么特殊操作
var uptatejson=[{name:"蒋佳良"},{name:"蒋佳良"}];
uptatejson[0].name="你把我修改了";
alert(uptatejson[0].name);
////修改end

//这是json删除指定的元素
var json1={name:"蒋佳良"};
alert(json1.name);
delete json1.name;//删除指定的标识的
alert(json1.name);
//根据上面的类推的话
var json2=[{name:"蒋佳良"},{name:"蒋佳良"}];
alert(json2[1].name);
delete json2[1].name;//删除指定的标识的
alert(json2[1].name);
</script>
</html>

五、一个有关div隐藏的实例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript">
function init() {
        var div = document.createElement("<div style='margin-top: 200px; margin-left: 300px; width:120px; background:yellow;' onmousemove='div_init()' onmouseout='hide()'>");
        div.innerHTML = "onmouseoutMe";
        document.body.appendChild(div);
        div = document.createElement("<div id='show_id' style='display:none; margin-left: 300px; width:120px; background:red;' onmouseover='show()' onmouseout='hide()'>");
        document.body.appendChild(div);
}

function mylight(obj) {
        //alert(obj.style.backgroundColor);
        obj.style.backgroundColor="white";
}

function nolight(obj) {
        obj.style.backgroundColor = "green";
}

function show() {
        var show_id = document.getElementById("show_id");
        show_id.style.display = "block";
}

function div_init() {
        var div;
        var show_id = document.getElementById("show_id");

        show_id.innerHTML = "";
        show_id.style.display = "block";

        for(var i=0; i<5; i++) {
                div = document.createElement("<div id=" + i +　" style='background-color:green;' onmouseover='mylight(this)' onmouseout='nolight(this)'>");
                div.innerHTML = "huliang" + i;
                show_id.appendChild(div);
        }
}

function hide() {
        var show_id = document.getElementById("show_id");
        show_id.style.display = "none";
}

</script>

<title>无标题文档</title>
</head>

<body onload="init()">
</body>
</html>

六、键盘事件查询列表
if(document.addEventListener){//如果是Firefox
        document.addEventListener("keypress",keyHandler, true);
}else{
        document.attachEvent("onkeypress",keyHandler);
}

function keyHandler(evt){
     if(evt.keyCode==13){
         //你的代码
         queryList();
     }
}

七、js文件后面加了一些参数的意图
经常看到不少导航网站测样式或js文件后面加了一些参数，主要是一你为一些并不经常更新的页面重新加载新修改的文件。
经常遇到页面里加载的js与css文件带有参数，比如：
<script type="text/javascript" src="jb51.js?version=1.2.6"></script>
<link rel='stylesheet' href='base.css?version=2.3.3' type='text/css' />
使用参数有两种可能：
第一种情况：脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。
第二种情况：客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件

第二种情况最多，也可能两种同时存在。

版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如 20080727182553 就是精确到了生成脚本的秒，而2.3.3就是大版本小版本的方式。