• 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//左、右、宽、高

  • 相关阅读:
    运行期优化
    虚拟机字节码执行引擎
    虚拟机类加载机制
    类文件结构
    垃圾收集机制
    浅析Spring MVC工作机制
    TomCat系统架构
    docker安装mongo初体验
    微服务笔记--概念
    使用maven构建多模块项目_记录
  • 原文地址:https://www.cnblogs.com/chuyu/p/js.html
Copyright © 2020-2023  润新知