当前位置: 首页 > 工具软件 > jQuery Douban > 使用案例 >

读《精通JavaScript+jQuery》笔记三

汝岳
2023-12-01
 //对于IE浏览器下处理textarea直接用maxlength无效果的方法
    function less(obj){
        return obj.value.length  < obj.getAttribute("maxlength");
    }
    //动态添加表格,在第一行之后添加一行数据。
    var ot=document.getElementById("member").insertRow(1);
    var aText=new Array();
    aText[0]=document.createTextNode("bbb");
    aText[1]=document.createTextNode("bbb");
    aText[2]=document.createTextNode("bbb");
    aText[3]=document.createTextNode("bbb");
    for(var i=0;i<aText.length;i++){
        var otd=ot.insertCell(i);
        otd.appendChild(aText[i]);
    }
    //修改单元格内容
    var table=document.getElementById("member");
    table.rows[1].cells[2].innerHTML="heihiehie";
    function add(text){
        var div=document.getElementById("display");
        div.innerHTML+=text;
    }
//    IE浏览器不支持捕获型事件,其他浏览器都有冒泡事件和捕获型事件
//    IE中的监听事件用attachEvent方法添加监听函数,detachEvent将监听函数删除
//    标准DOM的监听方法有两个addEventListener和removeEventListener,他们接受3个参数,
//    即事件的名称、要分配的函数名和用于冒泡阶段还是捕获阶段。第三个参数是捕获阶段则为true否则为false(一般为false);
    function getX(oEvent){
        if(window.event){
            oEvent=window.event;
        }
        var clientX=oEvent.clientX;
        alert(clientX);
    }
    window.onload=function(){
        var div=document.getElementById("display");
        div.onmouseover=getX;
    }
    //事件类型:常用的有鼠标事件、键盘和浏览器
    //click、dbclick、mousedown、mouseout、mouseover、mouseup、mousemove
    //对于鼠标事件的触发,如果编程时涉及双击事件应尽量避免使用它的触发过程,原因在于两类浏览器的不同
    function handle(oEvent){
        if(window.event){
            oEvent=window.event;
        }
        var odiv=document.getElementById("display");
        odiv.innerHTML+=oEvent.type+"<br>";
    }
    window.onload=function(){
        var o=document.getElementById("display");
        o.onclick=handle;
        o.onmousedown=handle;
        o.ondblclick=handle;
        o.onmouseup=handle;
        o.onmouseout=handle;
        o.onmouseover=handle;
    }
    function handle(oEvent){
        if(window.event){
            oEvent=window.event;
        }
        var odiv=document.getElementById("display");
        odiv.innerHTML+=oEvent.type+"<br>";
    }
    window.onload=function(){
        var o=document.getElementById("input");
        o.onkeydown=handle;
        o.onkeyup=handle;
        o.onkeypress=handle;
    }
    //IE没有charCode所以要处理兼容
    oEvent.charCode=(oEvent.type=="keypress")?oEvent:0;
    //JavaScript屏蔽鼠标右键的方法
    function block(oEvent){
        if(window.event){
            oEvent=window.event;
            oEvent.returnValue=false;//取消默认事件
        }else{
            oEvent.preventDefault();//取消默认事件
        }

    }
    document.oncontextmenu=block;
    //访问表单中的元素
    var oForm=document.forms["myForm"];
    var oTextName=oForm.elements[0];//获取第一个元素
    var oPassword=oForm.elements["password"];//获取name属性为password的元素
    var oPassword1=oForm.elements.password;//获取name属性为password的元素
    document.write(oTextName.value+"-"+oPassword.value+"-"+oPassword1.value)
    //用户在提交表单时往往会由于网速过慢而反复点击提交按钮,这对于服务器而言是很大的负担,通常可以使用disabled属性来禁止这种行为
    <input type="button" value="submit" onclick="this.disabled=true;this.form.submit();">
//JavaScript的优化:
//    1、减缓代码下载时间:对于源码中包含的长变量名、注释、空格和换行等多余字符要将其删除或变短
//       将true改为1false改为0等,减少代码体积的工具有很多
//    2、合理声明变量尽量少声明全局变量
//    3、使用内置函数缩短编译时间
//    4、合理书写if语句,把最有可能的情况放在第一位
//    5、最小化语句数量:比如都是var就可以合起来写
//    6、节约使用DOM
    //ajax好处
//    1、减轻服务器的负担
//    2、带来更好的用户体验
//    3、基于标准化并被广泛支持的技术
//    4、进一步促进页面呈现与数据分离
    var xmlHttp;
    function createXMLHttpRequest(){
        if(window.ActiveXObject)
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        else if(window.XMLHttpRequest)
        xmlHttp=new XMLHttpRequest();
    }
function startRequest(){
    createXMLHttpRequest();
    xmlHttp.open("GET","response.aspx",true);
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            alert("服务器返回:"+xmlHttp.responseText);
        }
    }
    xmlHttp.send(null);
}
//解决异步连接服务器时IE的缓存问题
//在真实访问地址的末尾加一个与时间的毫秒数相关的参数来欺骗IE浏览器
//  对GET方式来说  如果要发送数据,不放到send里放到URL后面
    var queryString="firstName=isadsa&birthday=0212";
    var url="re.aspx?"+queryString;
    xmlHttp.open("GET",url);
    xmlHttp.send(null);
//  对POST方式来说  如果要发送数据,放到send里
var queryString="firstName=isadsa&birthday=0212";
xmlHttp.send(queryString);
//通常在数据量不多的时候采用GET,数据量大的时候采用POST,用POST还要注意编码问题中文的要用encodeURI和decodeURIne

 类似资料: