一、新的属性操作方式
(1).
(2)[ ]
(3)getAttribute(属性名)-----获取自定义属性
(4)setAttribute(属性名,属性值)----设置属性
(5)setAttribute配合getAttribute使用
oBtn.setAttribute('index','2');
alert(oBtn.getAttribute('index'));
二、offsetParent
获取定位的父级
offsetTop:元素距离其offsetParent上边框的距离
#div1{width:500px; height:400px; background:#ccc; margin:10px; padding:10px;}
#div2{width:400px; height:300px; background:yellow; margin:10px;padding:10px; position:absolute; top:40px; left:40px;}
#div3{width:300px; height:200px; background:red; margin:10px;}
</style>
var oDiv3 = document.getElementById('div3');
var oDiv2 = oDiv3.offsetParent;
var j3 = oDiv3.offsetTop; //oDiv3有10px的margin,其有定位的父级oDiv2有10px的padding,所以是20px
var j2= oDiv2.offsetTop; //为啥是50px呢?因为oDiv2是绝对定位,所以位置和oDiv1没有关系,所以offsetTop是top的10px加上margin的10px
alert(j2+j3);
三、scrollBottom=scrollTop+clientHeight
if(top<scrollBottom){
显示
}
例:图片延时加载
function getPos(obj){
}
window.onload=function(){
var aImg = document.getElementsByTagName('img');
window.onscroll=window.onresize=loadImgs;
for(var i=0;i<aImg.length;i++){
var top = getPos(aImg[i]).top;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollBottom = scrollTop+document.documentElement.clientHeight;
aImg[i].src=aImg[i].getAttribute('_src');
四、获取元素
getElementsByTagName
getElementsByName
getElementsByClassName
children(不是真正的数组,用不了数组的函数)
五、scrollHeight---获取内容的高度
var oDiv = document.getElementById('box');
alert(oDiv.scrollHeight);
alert(document.body.scrollHeight);
例子:瀑布流
function rnd(n,m){
return parseInt(n+Math.random()*(m-n));
}
function createLi(){
var oLi=document.createElement('li');
oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
oLi.style.height=rnd(120,350)+'px';
return oLi;
}
window.onload=function(){
var aUl=document.getElementsByTagName('ul');
create();
function create(){
for(var i=0;i<20;i++){
var oLi=createLi();
var arr=[];
for(var j=0;j<aUl.length;j++){
arr.push(aUl[j]);
}
arr.sort(function(oUl1,oUl2){
return oUl1.offsetHeight-oUl2.offsetHeight;
});
arr[0].appendChild(oLi);
}
}
window.onscroll=function(){
var height=document.body.scrollHeight; //内容高度
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>=height-document.documentElement.clientHeight-500){
setTimeout(function(){
create();
},300);
}
}
}
六、焦点事件
1. onfocus 获取焦点事件
onblur 失去焦点
2. focus() 设置焦点
blur() 取消焦点
输入框自动获取焦点
window.onload=function(){
var oInp=document.getElementsByTagName('input')[0];
var oS=document.getElementsByTagName('span')[0];
oInp.onfocus=function(){
oS.style.display='none';
}
oInp.onblur=function(){
if(oInp.value==''){
oS.style.display='block';
}
}
oS.onclick=function(){
oS.style.display='none';
oInp.focus();
}
}
七、tofixed 保留几位小数
alert(0.55555555.toFixed(0));
八、image对象
new Image();
onload---当图片加载完成时
onerror---当加载失败时
例子:进度条
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var count=0;
for(var i=0;i<77;i++){
var oImg=new Image();
oImg.onerror=function(){
alert(this.src+'加载失败');
}
oImg.onload=function(){
count++;
var scale=count/77;
oDiv2.innerHTML=(scale*100).toFixed(2)+'%';
oDiv2.style.width=oDIv1.offsetWidth*scale+'px';
if(count==77){
alert('加载完成');
}
}
}
}
<div id="div1">
</div id="div2"></div>
</div。
九、表单
1. 把数据提交给服务器
action 地址 name 名字 submit 提交
id是给前台用的。name给后台用的。 name可以重复
getElementsByName 通过name获取一组元素
2. method----提交方式
(1)get 数据在url中(适合分享) 默认的 容量很小 32k 不安全
https security---安全http协议 (花钱)
相关推荐
JS: 代码如下: //—————————tooltip效果 start———————————– //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=...
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根...
JavaScript offsetParent案例详解 1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元 ...
你应该看到过或用过以下这些命令或方法 getElementById getElementsByTagName offsetParent appendChild getAttribute 不过至今仍有人认为这些都是JavaScript中的东西,其实不然,这些全是Dom中很重要的方法!...
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性,这个属性在 ...
offsetparent计算 offsetparent区分以下几种情况: 内部div不是relative/absolute,外部div是relative/absolute
GooFunc.js文件 //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { ...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相...
JavaScript offset实现鼠标坐标获取和窗口内模块拖动 offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移)、大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度...
第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a ...
<script type="text/javascript"> //实现框选放大缩小功能 function DragZoomControl(opts_boxStyle, opts_other, opts_callbacks) { this.globals = { draggingOn: false, cornerTopDiv: null, ...
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() ...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素。所以,要得到元素到文档区域的...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流...
10.过滤(filter)至查找(offsetParent) 11.查找(offsetParent)至文档处理(外部插入) 12.文档处理(外部插入)至文档处理(克隆) 13.CSS(css)至CSS(尺寸) 14.CSS(尺寸)至事件(事件处理) 15.事件(事件处理)至事件(事件委派...