/****************** 收集常用-重要 *********************/
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);
}
输出:
解决方法: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");