美文网首页
HTML5学习小记八

HTML5学习小记八

作者: 涛涛灬灬 | 来源:发表于2017-03-08 19:40 被阅读0次

关于一些小知识点的总结

  1. GET 和 POST 的区别?
    1、 get是从服务器获取数据 -----"取"; post是向服务器提交数据 -----“发”
    2、 form表单默认的method为"GET"
    3、 get将数据按照variable = value 的形式,加上URL的后面,中间用"?"连接,各个变量之间用"&"连接; post将数据不像get方式那样
    4、 参数上面3的数据传输方式,可以得出:post安全性比get方式要高
    5、
    URL不存在参数上限的问题,HTTP协议没有对URL长度进行限制,限制的是部分浏览器和服务器的限制。
    IE对URL长度的限制为2083KB
    get方式是通过URL传输的数据的,数据量一般在2KB左右,但是执行效率比post高
    理论上post方式没有大小限制,HTTP协议规范也没进行大小限制。post数据没有限制,限制的是服务器处理程序的能力
    2.socket和http的区别:
    socket是网络传输层的一种技术,跟http有本质的区别,http是应用层的一个网络协议。使用socket技术理论上来讲,按照http的规范,完全可以使用socket来达到发送http请求的目的,只要发送的数据包按照http协议来即可

Socket和http的区别:
Socket是长连接,http是短连接
Socket是双向通信,http是单向的,只能客户端向服务器发送数据
Socket的数据完全由自己组织,http必须按照http协议来发送
3.display有哪些值?说明他们的作用。position的值relative和absolute定位原点是?absolute与fixed共同点与不同点?

1、display
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。

2、position
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其正常位置进行定位。
static 默认值。没有定位,元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值。
*(忽略 top, bottom, left, right z-index 声明)

absolute与fixed共同点与不同点
A、共同点:
1.改变行内元素的呈现方式,display被置为block;
2.让元素脱离普通流,不占据空间;
3.默认会覆盖到非定位元素上;
B、不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

display:none和visibility:hidden的区别?
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
3.事件委托---- 优点消耗内存大,处理速度快

document.onclick,这个示例把事件委托放到了document上,即点击document就直接触发我们相应的事件。
    document.onclick = function(event){             
        var event = event || window.event;         //IE doesn't pass in the event object  
        var target = event.target || event.srcElement; //IE uses srcElement as the target 
        switch(target.id){         
            case "help-btn":                 
                openHelp();                 
            break; 

            case "save-btn":                 
                saveDocument();                
            break;   

            case "undo-btn":                 
                undoChanges();                
            break;         
            //如果有其元素需要处理点击事件, 只需要在这里添加不同的case分支就行。     
        } 
    };

4.模拟http请求--JavaScript请求一个HTML文件, test.html, 文件的文本内容为"I'm a test.",

<script type="text/javascript" language="javascript">
              var http_request = false; 

              function makeRequest(url) {          
                http_request = false;          
                if (window.XMLHttpRequest) { // Mozilla, Safari,...            
                    http_request = new XMLHttpRequest();             
                    if (http_request.overrideMimeType) {                
                     http_request.overrideMimeType('text/xml');             
                    }         
                 } else if (window.ActiveXObject) { // IE            
                    try {                 
                        http_request = new ActiveXObject("Msxml2.XMLHTTP");             
                    } 
                    catch (e) {                 
                        try {                     
                            http_request = new ActiveXObject("Microsoft.XMLHTTP");                 
                        }catch(e){}             
                    }         
                }          
                if (!http_request) {             
                    alert('Giving up :( Cannot create an XMLHTTP instance');             
                    return false;         
                }         
                http_request.onreadystatechange = alertContents;         
                http_request.open('GET', url, true);         
                http_request.send(null);      
            }      
            function alertContents() {          
                if (http_request.readyState == 4) {             
                    if (http_request.status == 200) {                 
                        alert(http_request.responseText);             
                    }else{                 
                        alert('There was a problem with the request.');             
                    }         
                }      
            }
</script>
<style>
                .testbtn{ cursor: pointer; text-decoration: underline;}
</style>
<span class='testbtn' onclick="makeRequest('test.html')">Make a request</span>

5.对于js中的数组去重的几种方式

//方法一
Array.prototype.unique1 = function () {
  var n = []; //一个新的临时数组
  for (var i = 0; i < this.length; i++) //遍历当前数组
  {
    //如果当前数组的第i已经保存进了临时数组,那么跳过,
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}
-------------------------------------------------------------------------------
//方法二
Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n为hash表,r为临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}
-------------------------------------------------------------------------------
//方法三
Array.prototype.unique3 = function()
{
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
        //那么表示第i项是重复的,忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

相关文章

  • HTML5学习小记八

    关于一些小知识点的总结 GET 和 POST 的区别?1、 get是从服务器获取数据 -----"取"; post...

  • HTML5学习小记十

    1.将多个div水平方向上等高居中显示:height:50%;2.关于swiper的图片展示方向问题://Slid...

  • HTML5学习小记九

    1.关于ajax的一些优缺点优点1 通过异步模式,提升了用户体验2优化了浏览器和服务器之间的传输,减少不必要的数据...

  • HTML5学习小记七

    1.动画效果的第三方框架 animate.min.css(1)将animate.min.css导入到当前工程中,选...

  • HTML5学习小记一

    1.overflow : 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代...

  • HTML5学习小记三

    1.document.querySelector document.querySelector(container...

  • HTML5学习小记四

    1.图片在div中居中显示 CSS样式如下: div{width:300px; height:150px; bac...

  • HTML5学习小记五

    1.将ul-li的展示图片横排显示,使用float:left;2.几个常用数字验证的正则表达式 3.删除前后空格 ...

  • HTML5学习小记十二

    关于运算符合=== 它的判断流程:如果两个值不是相同类型,它们不相等如果两个值都是null或者都是undefine...

  • HTML5学习小记十三

    appendChild()方法的使用:作用是向节点末尾添加最后的一个子节点(或从一个元素移动到另外一个元素中); ...

网友评论

      本文标题:HTML5学习小记八

      本文链接:https://www.haomeiwen.com/subject/zgbbgttx.html