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