知识点5

Posted 2020-08-20 zhangmin1314

display:inline //行内元素，没有宽高设置的，换句话说就是设置宽高是不起作用的，如果给它设置浮动的话就会变成块元素
display:block //块元素，独占一行

-------------------------------------------------------------------------------------------------------------------

ul,ol,li{
list-style-type:none //
}

---------------------------------------------------------------------------------------------------------------------

position:relative //相对定位，相对自身原来文档流的位置，可以以左上角为基准，设置top，left定位，脱离文档流
position:absolute //绝对定位，相对于相对定位的父元素

---------------------------------------------------------------------------------------------------------------------
<div style="background-color:green;">
<ul style="list-style-type:none;display:block;position:relative;left:20px;top:10px;">
<li style="float:left;position:relative;margin-left:20px">新闻</li>
<li style ="float:left;position:relative;margin-left:20px">市政</li>
<li style="float:left;position:relative;margin-left:20px">教育</li>
<li style="float:left;position:relative;margin-left:20px">体育</li>
</ul>
</div>
<div style="clear:both">
<ol>
<li>语文</li>
<li>数学</li>
</ol>
</div>

说明：外层div里面的ul元素列表脱离了文档流，是浮动起来的，所以说这个div没有被撑开，它的高度还是0，所以也就设置不上颜色，并且下面的div里的ol
列表元素会和上面的元素有重合。

----------------------------------------------------------------------------------------------------------------------

<div style="height:50px;width:200px;background-color:blue">
<div style="height:200px;width:100px;background-color:red">

</div>
</div>
<div style="height:50px;width:200px;background-color:green">

</div>

下面的div会跟着上面外层高度为50的div向下布局，不会因为它里面有200高度的div而在200高度下布局，这就出现了可能200高度的div里面的内容在下面div
的底下显示的情况。 因为外层div限制了高度，所以内层div不会撑开外层div。

------------------------------------------------------------------------------------------------------------------------

元素行内鼠标移动离开display显示与隐藏的变化，一般是show(),hide(),hover()事件引发的。

jQuery的hover事件只是针对单个html元素，例如：

$(‘#login‘).hover(fun2, fun2);

当鼠标进入#login元素时调用fun1函数，离开时则调用fun2函数，这种API已能够满足绝大部分需求。

--------------------------------------------------------------------------------------------------------------------------

/*html5动画过渡*/
.iRoteInit,.iRoteInits{transition:width 0.5s, height 0.5s;-moz-transition:width 0.5s, height 0.5s, -moz-transform 0.5s;-webkit-transition:width 0.5s, height 0.5s, -webkit-transform 0.5s;-o-transition:width 0.5s, height 0.5s, -o-transform 0.5s;}
/*html5 3d旋转*/
.iRote3d1{transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg); }
.iRote3d2{transform:rotateY(360deg);-moz-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-o-transform:rotateY(360deg); }
/*html5 2d旋转*/
.iRote2d1{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);}
.iRote2d2{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}

内核类型 写法
Webkit(Chrome/Safari) -webkit-transform
Gecko(Firefox) -moz-transform
Presto(Opera) -o-transform
Trident(IE) -ms-transform
W3C transform

----------------------------------------------------------------------------------------------------------------------------

javascript的数据类型都有哪些？
基本数据类型：string,boolean,number,undefind,null
引用数据类型（包装类型）：object（array,date,function,regexp）

JavaScript中检测对象的方法
1.typeof操作符
这种方法对于一些常用的类型来说那算是毫无压力，比如Function、String、Number、Undefined等，但是要是检测Array的对象就不起作用了。
复制代码 代码如下:

alert(typeof null); // "object"
alert(typeof function () {
return 1;
}); // "function"
alert(typeof ‘梦龙小站‘); // "string"
alert(typeof 1); // "number"
alert(typeof a); // "undefined"
alert(typeof undefined); // "undefined"
alert(typeof []); // "object"

2.instanceof操作符
这个操作符和JavaScript中面向对象有点关系，了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。
var arr = [1,2,3,1];
alert(arr instanceof Array); // true
3.对象的constructor属性
除了instanceof，每个对象还有constructor的属性，利用它似乎也能进行Array的判断。
复制代码 代码如下:

var arr = [1,2,3,1];
alert(arr.constructor === Array); // true

第2种和第3种方法貌似无懈可击，但是实际上还是有些漏洞的，当你在多个frame中来回穿梭的时候，这两种方法就亚历山大了。由于每个iframe都有一套自己的执行环境，跨frame实例化的对象彼此是不共享原型链的，因此导致上述检测代码失效!
复制代码 代码如下:

var iframe = document.createElement(‘iframe‘); //创建iframe
document.body.appendChild(iframe); //添加到body中
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // 声明数组[1,2,3]
alert(arr instanceof Array); // false
alert(arr.constructor === Array); // false

检测数组类型方法
以上那些方法看上去无懈可击，但是终究会有些问题，接下来向大家提供一些比较不错的方法，可以说是无懈可击了。
1.Object.prototype.toString
Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”)。利用这 个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
复制代码 代码如下:

function isArrayFn (o) {
return Object.prototype.toString.call(o) === ‘[object Array]‘;
}
var arr = [1,2,3,1];
alert(isArrayFn(arr));// true

call改变toString的this引用为待检测的对象，返回此对象的字符串表示，然后对比此字符串是否是‘[object Array]‘，以判断其是否是Array的实例。为什么不直接o.toString()?嗯，虽然Array继承自Object，也会有 toString方法，但是这个方法有可能会被改写而达不到我们的要求，而Object.prototype则是老虎的屁股，很少有人敢去碰它的，所以能一定程度保证其“纯洁性”：)

JavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个： Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.
这种方法在识别内置对象时往往十分有用，但对于自定义对象请不要使用这种方法。
2.Array.isArray()
ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。
3.较好参考
综合上面的几种方法，有一个当前的判断数组的最佳写法：
复制代码 代码如下:

var arr = [1,2,3,1];
var arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true

------------------------------------------------------------------------------------------------------------------------------

javascript事件流模型
“DOM2级事件流”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是讲一个函数赋值给一个事件处理程序属性。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常小写，例如onclick。将这种属性的值设置成一个函数，就可以指定事件处理程序。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此是在元素的作用域中运行，换句话说，程序中的this引用当前元素。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
};

可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流中的冒泡阶段被处理。
可以删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序属性的值设为null即可。
btn.onclick = null; //删除事件处理程序

DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

与DOM0级方法一样，DOM2级方法天际的事件处理程序也是在其依附的元素的作用域中进行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hello World!");
},false);

这里为按钮多添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此首先会显示元素ID，其次会显示“Hello World!”消息。
通过addEventListener()添加的事件处理程序只能使用removeEventListener来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除

event.stopPropagation(); // 阻止事件冒泡
event.preventDefault(); //阻止默认行为 ( 表单提交 )
return false; //阻止默认行为 ( 表单提交 )