zoukankan      html  css  js  c++  java
  • js学习(1)

    1.li在ie6下面高度变大,css: vertical-align:bottom;
    2.outerWidth(true):包含margin
    outerWidth(false):不包含margin
    参数不写默认是false
    3. 创建元素
    function createSpan(){
    var span = document.createElement("span");
    span.innerHTML = "显哥哥你大爷";
    document.getElementById("main").appendChild(span);//此处span是变量,不需要加引号""
    }
    删除元素
    function deleteSpan(){
    var main = document.getElementById("main");
    var childs = main.getElementsByTagName("span");
    if(childs!==null){
    main.removeChild(childs[0]);
    }
    }

    4.阻止默认
    var link = document.getElementById("link");
    link.onclick = function(event){
    event.preventDefault();
    }
    5.替换字符串,截取字符串,字符串索引
    var str="www.baidu.com/?page";
    str=str.replace('?page',"");
    alert(str);
    str=str.substring(0,str.indexOf("/"));//subString()=slice(起始位置,结束位置)——注意不包含最后一位
    alert(str);
    6.replace(A:替换字符串;B:正则替换)
    var text = "bat,cat,sat,fat";
    var result = text.replace("at","ont");//replace只能替换一个
    alert(result);//bont,cat,sat,fat
    var result2 = text.replace(/at/g,"ont");
    alert(result2);//bont,cont,sont,font

    var str="www.baidu.com/?page";
    var str1 = str.replace(/\?page/," ");//replace生成一个新的字符串,必须赋给另外一个值;注意?必须转义
    //str=str.substring(0,str.indexOf("?page"));//subtring是在原字符串上面操作
    str=str.split("?page").join("");//新字符串
    alert(str);
    7.
    var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
    8. var num=10;
    isFinite(num);//检测是否超出范围
    true
    isFinite(Infinity);
    false
    NaN == NaN;//NaN不等于任何值,包括他自身
    9.字符串一旦创建,他们的值就不能改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个新值的字符串填充该变量
    10. + :数字+“字符串”= “字符串”
    - : "字符串" - 0 = 数字
    11.如果使用Instanceof操作符检测基本类型的值,则始终返回false;因为基本类型不是对象
    var a ="1010";//基本类型
    a instanceof String;//false

    var a = new String("1010");//引用类型
    a instanceof String;//true
    12.数组操作delete:只是变成undefined————————删除数组可以用splice()
    var a = ["Nick","Demon","Stephan"];
    delete(a[1]);
    a;
    ["Nick", undefined × 1, "Stephan"]
    a.length;
    3
    for(var i in a){console.log("a[" + i + "]: " + a[i]);}
    a[0]: Nick
    a[2]: Stephan
    undefined
    alert(a);//Nick,,Stephan
    13.数组操作
    push() unshift() concat()——添加项
    pop() shift()——删除项
    splice() ——三种(删除、插入,替换)
    14.超时调用(调用setTimeout()之后会返回一个数值ID,这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用)
    超时调用代码都是在全局中执行的
    var timeoutId = setTimeout(function(){
    alert("Hello world!");
    },1000);
    clearTimeout(timeoutId);
    15.
    split():把字符串分成字符串数组
    join():把数组连成字符串
    16.Math.max():只能有两个参数
    Math.max(2,5);——5
    求一个数组num的最大值:
    Math.max.apply(null,num);
    17.event在IE里面是window的一个属性,下载阻止了默认回车
    document.getElementsByTagName("textarea")[0].onkeypress = function(e){
    e = e || window.event;
    return e.keyCode != 13;
    }
    18. //阻止冒泡(阻止事件函数需考虑非IE跟IE,再应用)
    function stopBubble(e){
    if(e&&e.stopPropagation){
    e.stopPropagation();
    }else{
    window.event.cancelBubble=true;//IE下面
    }
    }
    var all = document.getElementsByTagName("*");
    for(var i = 0;i<all.length;i++){
    all[i].onmouseover = function(e){
    this.style.border="1px solid red";
    stopBubble(e);//阻止冒泡
    };
    all[i].onmouseout = function(e){
    this.style.border = "none";
    stopBubble(e);//阻止冒泡
    };
    }
    19.
    //阻止默认事件(同样需要考虑IE跟非IE)
    function stopDefault(e){
    if(e&&e.preventDefault){
    e.preventDefault();
    }else{
    window.event.returnValue = false;
    }
    }
    var iframe = document.getElementById("iframe");
    var a = document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
    a[i].onclick = function(e){
    iframe.src = this.href;//改变iframe的src
    return stopDefault(e);//阻止默认事件
    }
    }
    20.
    var sty = document.getElementById("sty");
    console.log(sty.style.height);//height取不到(只有是行内样式的时候可以取到)

    console.log(sty.currentStyle.height);//只有IE可以取到

    (function(){
    if(!window.pan){
    window['pan']={};
    }
    //pan库中其它函数的定义,略
    //
    function getStyle(elem,styleName){
    if(elem.style[styleName]){//内联样式
    return elem.style[styleName];
    }
    else if(elem.currentStyle){//IE
    return elem.currentStyle[styleName];
    }
    else if(document.defaultView && document.defaultView.getComputedStyle){//DOM
    styleName = styleName.replace(/([A-Z])/g,'-$1').toLowerCase();
    var s = document.defaultView.getComputedStyle(elem,'');
    return s&&s.getPropertyValue(styleName);
    }
    else{//other,for example, Safari
    return null;
    }
    }
    window['pan']['getStyle'] = getStyle;
    })();
    21.
    .判断一个字符串中出现次数最多的字符,统计这个次数
    7.IE与FF脚本兼容性问题


    22.数组求和
    A.eval
    var a = [1,2,3,4,5];
    alert(eval(a.join("+")));
    B.
    var a = [1,2,3,4,5],sum = 0;
    for(var i = 0;i<a.length;i++){
    sum+=a[i];
    }
    alert(sum);
    C.prototype
    Array.prototype.sum = function(){
    for(var sum = i = 0;i<this.length;i++){
    sum += this[i];
    }
    return sum;
    }
    var attr = [1,2,3,4,5];
    alert(attr.sum());
    D.
    var values = [1,2,3,4,5];
    var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
    });
    alert(sum);

    23.图片异步加载
    <div id="box">
    <input type="submit" value="异步加载图片" id="submitBtn" />
    <div class="picBox">
    <img data-src="logo.png" alt="" class="logo" width="270" height="60" />
    </div>
    </div>
    //图片异步加载jq
    // $("#submitBtn").click(function(){
    // //取得src
    // var img = $(this).next().children("img")
    // var imgSrc = img.attr("data-src");
    // //console.log(imgSrc);
    // img.attr("src",imgSrc);
    // });
    //图片异步加载js
    window.onload = function(){
    var btn = document.getElementById("submitBtn");
    btn.onclick = layout;
    }
    var layout = function(){
    var img = document.getElementById("box").getElementsByTagName("img");
    var imgSrc = img[0].getAttribute("data-src");
    img[0].setAttribute("src",imgSrc);
    };
    24.一个div设置的width,height,overflow:hidden;但是还是不能隐藏。给他加上position:relative;
    25.domReady跟onload的区别:
    domReady是加载除了图片之外的媒体文件
    onload是加载所有的元素
    26.让一个字符串反转:
    var a = ["s","d","f","g"];
    var b = a.reverse();
    console.log(b);//["g", "f", "d", "s"]
    27.attr()跟prop()的区别
    大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",
    checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,
    值为"checked"但没选中获取值就是undefined。
    jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性
    时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
    28.获取input的value
    $("input").val();
    改变input的value
    $("#yu").val("回报太少");

    29.
    $("#ff")[0].className//$("#ff")是jq对象,$("#ff")[0]才是dom对象,方可用.className
    $("#ff").attr("class");
    30
    document.body.onmousedown = function(event) {
    event = event || window.event;
    alert("event.clientX:" + event.clientX +",event.clientY:" + event.clientY);
    }
    31.offset
    parentNode 不会是空节点
    innerHTML可能是空节点
    parentNode 不一定就是offsetParent
    offsetParent 必须是相对定位了的第一个父元素
    offsetLeft、offsetTop、offsetWidth,offsetHeight//左、右、宽、高

  • 相关阅读:
    Lucene in action 笔记 case study
    关于Restful Web Service的一些理解
    Lucene in action 笔记 analysis篇
    Lucene in action 笔记 index篇
    Lucene in action 笔记 term vector
    Lucene in action 笔记 search篇
    博客园开博记录
    数论(算法概述)
    DIV, IFRAME, Select, Span标签入门
    记一个较困难的SharePoint性能问题的分析和解决
  • 原文地址:https://www.cnblogs.com/chuyu/p/js.html
Copyright © 2011-2022 走看看