代码改变世界

/****************** 收集常用-重要 *********************/

2012-04-03 00:33  臭小子1983  阅读(330)  评论(0编辑  收藏  举报

一、获取窗口

1 $(window).height()           //浏览器时下窗口可视区域高度
2 $(document).height()          //浏览器时下窗口文档的高度
3 $(document.body).height()      //浏览器时下窗口文档body的高度
4 $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
5 $(window).width()           //浏览器时下窗口可视区域宽度
6 $(document).width()          //浏览器时下窗口文档对于象宽度
7 $(document.body).width()       //浏览器时下窗口文档body的高度
8 $(document.body).outerWidth(true)  //浏览器时下窗口文档body的总宽度 包括border padding margin

 

二、JQ获取页面节点的方法

1、获取指定节点或id或class

匹配节点名称:$("div")   匹配ID名:$("#cur")    匹配class名:$(".className")

 

2、获取和修改属性的值

通过id来属性值:$("#idName").attr("src");    // 获取id为idName中的src的值

通过id来替换属性值:$("#idName").attr("src","http://sss.com");    // 修改属性值

 

3、节点的内容

$("#idName").text(); // 获取节点的内容    $("#idName").text("aaaaa");  //改变节点的内容

$("#idName).html(); // 获取节点的html内容  $("#idName).html("<div>aaa</div>")  //改变节点的内容

 

4、获取父元素对象

$("#idName").parent();

 

5、获取是否有子元素

$("#idName option").length();    如果返回0表示idName下没有option元素

 

 

三、获得地址栏中完整的地址

thisURL = document.URL; 

thisHREF = document.location.href; 

thisSLoc = self.location.href; 

thisDLoc = document.location; 

href = document.referrer;

 

显示主机名:

thisTLoc = top.location.href;     // top表示主窗口,location表示当前窗口,如果你的文件只有一个框架,没有iframe和frmaeset,那么是完全一致的,没有区别。 

thisPLoc = parent.document.location; 

thisTHost = top.location.hostname; 

thisHost = location.hostname;     // 显示域名

tmpHPage = thisHREF.split( "/" ); 

thisHPage = tmpHPage[ tmpHPage.length-1 ]; 

tmpUPage = thisURL.split( "/" ); 

thisUPage = tmpUPage[ tmpUPage.length-1 ]; 

 

四、收藏本站

function ss(){
  window.external.addFavorite('http://www.gouwulian.com/', '哈哈哈公司')
}


设置首页
function aa(){
  document.getElementById("setIndex").style.behavior='url(#default#homepage)';document.getElementById("setIndex").setHomePage('http://www.www.com/');
}

 

四、jquery中获取键盘按键

测试浏览器:IE6/IE7/IE8,FireFox,Chrome,Opera

$(document).keyup(function(e){
        var key =  e.which;
        if(key == 27){

             alert('按下了ESC键,关闭弹出层');
        }
});

或者(这个只在:IE8,FireFox,Chrome测试过)

$(document).keyup(function(e){

    if (e.keyCode == 27) 
    {
        alert('按下了ESC键,关闭弹出层');
    }

})

 

 

五、JS事件

document.onkeypress = function (e) {
    var code;
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode) {
        code = e.keyCode;
    }
    else if (e.which) {
        code = e.which;
    }
    if (code == 13) {
        document.getElementById("searchButton").click();
        return false;
    }
}

jquery:

$(function(){ 
    $('#seach').keypress(function(e) {
         var key = window.event ? e.keyCode : e.which;
        if(e.keyCode == 13){
            alert('a');
         }
    });
});

  

 

六、获取一个元素下的其它元素

var $ul = $(".z_neir ul");

$ul.find("li:last").prependTo($ul);      // 获取ul下第一个li

 

 

七、选择器的另一种写法

下面意思是查找sd的子元素里面找ul

var sd = $("#boxs");
var ul = $("ul", sd);
alert(ul.html);

 

与$("#boxs ul")的意思相同,可能执行的效率不同。

 

 

八、选择器的另一种写法

 获取指定元素要写成:
  var ws = $(".focusmenu")[0].offsetWidth; alert(ws);    // 注意[0],因为$(".focusmenu)返回是的一个数组

alert($("#question")[0].selectedIndex);       // 因为$("#question")返回的是一个数组,这样写才能取到
if($("#question")[0].selectedIndex == 0){
     return false;
}

 

九、动态添加的元素,click时不能获取的到

例:

<div id="box"></div>

添加:

$("#box).html("<span>aaaa</span><span>bbbb</span>");

 

获取不到:

$("#box span").click(functino(){

  $(this).html();

})

 

通过live()来获取方法

$("#box span").live('click', functino(){

  $(this).html();

})

 

十、JS浮点运算精度问题

var num=0.4;

for(var i=0; i<4; i++){

  alert(num*i);

}

输出:

0
0.4
0.8
1.2000000000000002  出现问题

解决方法:alert((num*i).toFixed(2));    // 获取小数点后两位;

 

 

十一、BackgroundPosition animate 背景动画的问题

BackgroundPosition animate实现背景动画效果却发现实现不了

jquery animate本身不支持背景图片的动画

使用条件:

1、jquery必须1.4.2版本

2、需要使用jquery.backgroundPosition.js插件

$(".recommend").mouseover(function(){

  $(this).animate({"backgroundPosition": "100px 0"}, 300);    // 这样就可以获取到了

});

 

可以在js文件中加入

(function(t) {
  if (!document.defaultView || !document.defaultView.getComputedStyle) {
    var v = t.curCSS;
    t.curCSS = function(y, w, z) {
      if (w === "background-position") {
        w = "backgroundPosition"
      }
      if (w !== "backgroundPosition" || !y.currentStyle || y.currentStyle[w]) {
        return v.apply(this, arguments)
      }
      var x = y.style;
      if (!z && x && x[w]) {
        return x[w]
      }
      return v(y, "backgroundPositionX", z) + " " + v(y, "backgroundPositionY", z)
    }
  }


  var u = t.fn.animate;
  t.fn.animate = function(w) {
    if ("background-position" in w) {
      w.backgroundPosition = w["background-position"];
      delete w["background-position"]
    }
    if ("backgroundPosition" in w) {
      w.backgroundPosition = "(" + w.backgroundPosition
    }
    return u.apply(this, arguments)
  };


  function s(x) {
    x = x.replace(/left|top/g, "0px");
    x = x.replace(/right|bottom/g, "100%");
    x = x.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
    var w = x.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
    return [parseFloat(w[1], 10), w[2], parseFloat(w[3], 10), w[4]]
  }
  t.fx.step.backgroundPosition = function(x) {
    if (!x.bgPosReady) {
      var z = t.curCSS(x.elem, "backgroundPosition");
      if (!z) {
        z = "0px 0px"
      }
      z = s(z);
      x.start = [z[0], z[2]];
      var w = s(x.end);
      x.end = [w[0], w[2]];
      x.unit = [w[1], w[3]];
      x.bgPosReady = true
    }
    var y = [];
    y[0] = ((x.end[0] - x.start[0]) * x.pos) + x.start[0] + x.unit[0];
    y[1] = ((x.end[1] - x.start[1]) * x.pos) + x.start[1] + x.unit[1];
    x.elem.style.backgroundPosition = y[0] + " " + y[1]
  }
})(jQuery);

 

十二、fadeIn的ie6/7/8中的失效

一、这种方式是没有问题的

<div class="fadein" style="display:none;">
  <div class="relative">
    <div>I am going to fade in ;</div>
    <div>I am going to fade in ;</div>
  </div>
</div>
<input type="button" id="btn" value="开始">

<script>
$(function(){
  $("#btn").click(function(){
    $('.fadein').fadeIn("slow");
  })
});
</script>

 

二、如果给relative加一个定位ie6、7、8下就会有问题

<style>
.fadein .relative { position:relative; }
</style>

 

十三、sildeDown()的失效

使用sildeDown()方法需要将指定元素为定位元素,否则就会失效

<style>

  .box { position:relative; }

</style>

<div class= "box">box</div>

$("box").sildeDown("slow");