精华内容
下载资源
问答
  • 5、水平线颜色color 6、水平线排列 align 水平线默认是居中对齐,要想左对齐或右对齐,用align语法,该语法有3种:center:居中 left:左对齐 right:右对齐 六、其它标记 以&开头,以;结束。 1、插入空格 2、插入...

    HTML基础

    一、基本概念

    1、简介

    HTML:网页超文本标记语言,不是编程语言,是描述性的标记语言。

    2、基本结构

    3、标记

    :html开头,表示网页文档的开始

    二、编写方法文档工具,如:记事本

    IDE

    三、浏览html文件

    1、运行效果

    如果用pycharm编写,不要直接运行,直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来,比较慢。

    2、看源文件

    鼠标右键-->查看源文件

    HTML基本标记

    一、

    标记head头部元素包括标题、基础信息和元信息等;

    作用范围:整篇文档;

    头信息中可以有:元信息、文档样式表和脚本等;

    头部信息一般不会再网页上直接显示。

    二、

    标记用来说明页面的用途,显示在浏览器的标题栏中。

    位置:

    ……之间

    三、元信息

    用来定义页面信息的说明、关键字和刷新等,它不用结束标记。属性有name和http-equiv。

    1、设置页面关键字

    供搜索引擎使用

    2、设置页面说明

    详细说明网页的内容

    3、定义编辑工具

    设置网页编辑工具名称

    4、设置作者信息

    5、设置网页文字及语言

    6、设置网页定时跳转

    7、icon

    8、css文件

    ?9、js文件

    四、主体标记

    1、背景色 bgcolor

    默认颜色是白色或灰白色,bgcolor自定义背景颜色。

    2、背景图片 backgroud

    3、文字颜色 text

    4、链接文字属性 link

    超链接的颜色默认是蓝色,访问后变成暗红色。可以通过link修改:

    5、边距 margin

    设置页面和浏览器边框的距离

    五、注释标记

    文字与段落标记

    一、标题

    1、h标记

    ~

    ,级别从最高到最低。

    2、对齐方式 align

    默认是左对齐,如更改,用align属性。left:左对齐

    center:居中

    right:右对齐

    二、文本基本标记

    标记用来控制字体、字号和颜色等属性。

    1、字体属性 face

    2、字号属性 size

    3、字体颜色 color

    三、文本格式化标记

    1、字体加粗

    2、斜体

    3、上标 sup

    如:平方、立方

    sup是superscript的缩写,在数学公式、日常计算应用、书记文章注解等有广泛应用。可在文字的任何地方使用,允许嵌套。

    结果:

    bf5c2c79fc414463a3245fd4704aee60.jpg

    4、下标sub

    如:化学方程式

    sub是subscript的缩写,在数学公式、化学方程式有广泛应用。

    结果:

    0e84b59da6574157a619772671e43368.jpg

    5、增大一级字号

    6、小字号标记

    7、下划线

    四、段落标记

    1、段落p

    它没有结束标记

    ,下一个

    开始意味着上一个段落结束。

    2、换行br

    相当于windows的“\r\n”和linux的"\n"换行

    3、不换行nobr

    五、水平线

    1、插入水平线hr

    2、水平线宽度width

    3、水平线高度size

    4、水平线去阴影noshade

    布尔值,加上它,不会显示例题形状的水平线。浏览器默认是显示一条立体形状带阴影的水平线。

    5、水平线颜色color

    6、水平线排列 align

    水平线默认是居中对齐,要想左对齐或右对齐,用align语法,该语法有3种:center:居中

    left:左对齐

    right:右对齐

    六、其它标记

    以&开头,以;结束。

    1、插入空格

    2、插入特殊符号“"

    &&

    >>

    ××

    §&sect

    使用列表

    展开全文
  • 『总结』web前端开发代码

    千次阅读 2018-05-18 11:04:40
    『总结』web前端开发代码块 HTTPStatusCode 常见的状态码: HTTP: Status 200 – 服务器成功返回网页 HTTP: Status 404 – 请求的网页不存在 HTTP: Status 503 – 服务不可用 详解: 说明: HTTP Status 1xx ...

    『总结』web前端开发代码块

    HTTP Status Code

    常见的状态码:

    HTTP: Status 200 – 服务器成功返回网页

    HTTP: Status 404 – 请求的网页不存在

    HTTP: Status 503 – 服务不可用

    详解:

    说明:

    HTTP Status 1xx (临时响应)

    ->表示临时响应并需要请求者继续执行操作的状态代码。

    详细代码及说明:

    HTTP: Status 100 (继续)

    -> 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。

    HTTP: Status 101 (切换协议)

    -> 请求者已要求服务器切换协议,服务器已确认并准备切换。

    说明:

    HTTP Status 2xx (成功)

    ->表示成功处理了请求的状态代码;

    详细代码及说明:

    HTTP Status 200 (成功)

    -> 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。

    HTTP Status 201 (已创建)

    -> 请求成功并且服务器创建了新的资源。

    HTTP Status 202 (已接受)

    -> 服务器已接受请求,但尚未处理。

    HTTP Status 203 (非授权信息)

    -> 服务器已成功处理了请求,但返回的信息可能来自另一来源。

    HTTP Status 204 (无内容)

    -> 服务器成功处理了请求,但没有返回任何内容。

    HTTP Status 205 (重置内容)

    -> 服务器成功处理了请求,但没有返回任何内容。

    HTTP Status 206 (部分内容)

    -> 服务器成功处理了部分 GET 请求。

    HTTP Status 3xx (资源不存在重定向)

    ->301是说访问的资源已经永久删除啦,客户端要根据新的URI访问重定向;

    ->302的意思就是说访问的资源可能暂时先用location的URI访问,但旧资源还在的,下次你再来访问的时候可能就不用重定向了。

    常用应用场景:

    场景一 :

    想换个域名,旧的域名不用啦,这样用户访问旧域名时用301就重定向到新的域名。其实也是告诉搜索引擎收录的域名需要对新的域名进行收录。

    场景二 : 登录后重定向到指定的页面,这种场景比较常见就是登录成功跳转到具体的系统页面。

    场景三 : 有时候需要自动刷新页面,比如5秒后回到订单详细页面之类。

    场景四 : 有时系统进行升级或者切换某些功能时,需要临时更换地址。

    场景五 : 像微博之类的使用短域名,用户浏览后需要重定向到真实的地址之类。

    HTTP Status 4xx (请求错误)

    ->这些状态代码表示请求可能出错,妨碍了服务器的处理。

    详细代码说明:

    HTTP Status 400 (错误请求)

    ->服务器不理解请求的语法。

    HTTP Status 401 (未授权)

    ->请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。

    HTTP Status 403 (禁止)

    -> 服务器拒绝请求。

    HTTP Status 404 (未找到)

    ->服务器找不到请求的网页。

    HTTP Status 405 (方法禁用)

    ->禁用请求中指定的方法。

    HTTP Status 406 (不接受)

    ->无法使用请求的内容特性响应请求的网页。

    HTTP Status 407 (需要代理授权)

    ->此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。

    HTTP Status 408 (请求超时)

    ->服务器等候请求时发生超时。

    HTTP Status 409 (冲突)

    ->服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

    HTTP Status 410 (已删除)

    -> 如果请求的资源已永久删除,服务器就会返回此响应。

    HTTP Status 411 (需要有效长度)

    ->服务器不接受不含有效内容长度标头字段的请求。

    HTTP Status 412 (未满足前提条件)

    ->服务器未满足请求者在请求中设置的其中一个前提条件。

    HTTP Status 413 (请求实体过大)

    ->服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。

    HTTP Status 414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法

    处理。

    HTTP Status 415 (不支持的媒体类型)

    ->请求的格式不受请求页面的支持。

    HTTP Status 416 (请求范围不符合要求)

    ->如果页面无法提供请求的范围,则服务器会返回此状态代码。

    HTTP Status 417 (未满足期望值)

    ->服务器未满足”期望”请求标头字段的要求。

    说明

    HTTP Status 5xx(服务器错误)

    ->这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。

    代码详细及说明:

    HTTP Status 500 (服务器内部错误)

    ->服务器遇到错误,无法完成请求。

    HTTP Status 501 (尚未实施)

    ->服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。

    HTTP Status 502 (错误网关)

    ->服务器作为网关或代理,从上游服务器收到无效响应。

    HTTP Status 503 (服务不可用)

    -> 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。

    HTTP Status 504 (网关超时)

    ->服务器作为网关或代理,但是没有及时从上游服务器收到请求。

    HTTP Status 505 (HTTP 版本不受支持)

    -> 服务器不支持请求中所用的 HTTP 协议版本。

     

     

     

    浏览器相关&兼容性问题:

     

    1. IE条件注释

    条件注释简介

    1. IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
    条件注释只能用于IE5以上,IE10以上不支持。

    2. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准。

    3. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

    4. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

    条件注释使用方法示例

    <!–-[if IE 5]>仅IE5.5可见<![endif]–->
    <!–-[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–->
    <!–-[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–->
    <!–-[if gte IE 5.5]>IE 5.5及以上可见<![endif]–->
    <!–-[if lte IE 5.5]>IE 5.5及以下可见<![endif]–->
    <!–-[if !IE 5.5]>非IE 5.5的IE可见<![endif]–->

    2. js判断用户访问的是PC还是mobile

    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            var sUserAgent = navigator.userAgent;
    
            return {
                trident: u.indexOf('Trident') > -1,
                presto: u.indexOf('Presto') > -1,
                isChrome: u.indexOf("chrome") > -1,
                isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
                isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
                webKit: u.indexOf('AppleWebKit') > -1,
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                iPhone: u.indexOf('iPhone') > -1,
                iPad: u.indexOf('iPad') > -1,
                iWinPhone: u.indexOf('Windows Phone') > -1
            };
        }()
    }
    
    if(browser.versions.mobile || browser.versions.iWinPhone){
        window.location = "http:/www.baidu.com/m/";
    }

    3. js如何判断用户是否是用微信浏览器

    根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下:

    function isWeiXin(){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

    4. 判断浏览器的简单有效方法

    function getInternet(){    
        if(navigator.userAgent.indexOf("MSIE")>0) {    
          return "MSIE";       //IE浏览器  
        }  
    
        if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){    
          return "Firefox";     //Firefox浏览器  
        }  
    
        if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    
          return "Safari";      //Safan浏览器  
        }  
    
        if(isCamino=navigator.userAgent.indexOf("Camino")>0){    
          return "Camino";   //Camino浏览器  
        }  
    
        if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){    
          return "Gecko";    //Gecko浏览器  
        }    
    }

    5. 如何在手机上禁止浏览器的网页滚动

    方法一:

    <body ontouchmove="event.preventDefault()" ></body>

    方法二:

     <script type="text/javascript">
     document.addEventListener('touchmove', function(event) {
        event.preventDefault();
     });
     </script>

    6. 针对IE6,7的hack,该怎么写

    你可能会这么回答:使用 “>”,“_”,“*”等各种各样的符号来写hack。是的,这样做没错,但是需要记住每个符号分别被哪些浏览器识别,并且如果写的太乱将造成代码 阅读起来十分困难。学习CSS必须抱有一种质疑精神,有没有一种hack方法可以不写这些乱七八糟的符号,并且代码易维护易读呢?我们可以看看好搜首页是怎么做的:在页面顶端有这样一句话:

    <!DOCTYPE html>
    <!--[if lt IE 7 ]><html class="ie6"><![endif]-->
    <!--[if IE 7 ]><html class="ie7"><![endif]-->
    <!--[if IE 8 ]><html class="ie8"><![endif]-->
    <!--[if IE 9 ]><html class="ie9"><![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]-->
    <head>
    <meta charset="utf-8"/>     
    </head>
    <body>
    </body>
    </html>

    在页面的CSS中,会看到这样的规则:

    .ie7 #hd_usernav:before, .ie8 #hd_usernav:before {
        display: none
    }
    
    .ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {
        border-right-color: #c5c5c5
    }
    
    .ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {
        color: #c5c5c5
    }

    7. js 加入收藏代码

    function addFavorite(title, url) {
        url = encodeURI(url);
        try {
            window.external.addFavorite(url, title);
        }
        catch (e) {
            try {
                window.sidebar.addPanel(title, url, "");
            }
            catch (e) {
                alert("加入收藏失败,Ctrl+D进行添加");
            }
        }
    }
    
    addFavorite(document.title,window.location);

     

    打印方法:(整个页面 window.print())

    //id-str 内容中的id
    function Printpart(id_str){
        var el = document.getElementById(id_str);
        var iframe = document.createElement('IFRAME');
        var doc = null;
          
    iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
        document.body.appendChild(iframe);
    
        doc = iframe.contentWindow.document;
        doc.write('<div>' + el.innerHTML + '</div>');
        doc.close();
    
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
    
        if (navigator.userAgent.indexOf("MSIE") > 0){
            document.body.removeChild(iframe);
        }
    }

    参考地址:
    http://www.cnblogs.com/yeming...
    http://www.cnblogs.com/jikey/...

    8. 跨浏览器添加事件

    //跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){//IE
            obj.attchEvent('on'+type,fn);
        }
    }

    9. 跨浏览器移除事件

    //跨浏览器移除事件
    function removeEvent(obj,type,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(type,fn,false);
        }else if(obj.detachEvent){//兼容IE
            obj.detachEvent('on'+type,fn);
        }
    }

    10. 跨浏览器阻止默认行为

    //跨浏览器阻止默认行为
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue =false;
        }
    }

    跨浏览器获取目标对象

    //跨浏览器获取目标对象
    function getTarget(ev){
        if(ev.target){//w3c
            return ev.target;
        }else if(window.event.srcElement){//IE
            return window.event.srcElement;
        }
    }

    跨浏览器获取滚动条位置

    //跨浏览器获取滚动条位置,sp == scroll position
    function getSP(){
        return{
            top: document.documentElement.scrollTop || document.body.scrollTop,
            left : document.documentElement.scrollLeft || document.body.scrollLeft;
        }
    }

    跨浏览器获取可视窗口大小

    //跨浏览器获取可视窗口大小
    function getWindow () {
        if(typeof window.innerWidth !='undefined') {
            return{
                width : window.innerWidth,
                height : window.innerHeight
            }
        } else {
            return {
                width : document.documentElement.clientWidth,
                height : document.documentElement.clientHeight
            }
        }
    }

    11. js获取屏幕坐标

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
            <meta name="auther" content="fq" />
            <title>获取鼠标坐标</title>
        </head>
        <body>
            X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
    
            <script type="text/javascript">
                function mousePosition(ev){
                    if(ev.pageX || ev.pageY){
                        return {x:ev.pageX, y:ev.pageY};
                    }
                    return {
                        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                        y:ev.clientY + document.body.scrollTop - document.body.clientTop
                    };
                }
    
                function mouseMove(ev){
                    ev = ev || window.event;
                    var mousePos = mousePosition(ev);
                    document.getElementById('xxx').value = mousePos.x;
                    document.getElementById('yyy').value = mousePos.y;
                }
    
                document.onmousemove = mouseMove;
            </script>
        </body>
    </html>  

    注释:
    1.documentElement 属性可返回文档的根节点。
    2.scrollTop() 为滚动条向下移动的距离
    3.document.documentElement.scrollTop 指的是滚动条的垂直坐标
    4.document.documentElement.clientHeight 指的是浏览器可见区域高度

    DTD已声明的情况下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    如果在页面中添加这行标记的话

    IE

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

    Firefox

    document.documentElement.scrollHeight ==> 浏览器所有内容高度
    document.body.scrollHeight ==> 浏览器所有内容高度
    document.documentElement.scrollTop ==> 浏览器滚动部分高度
    document.body.scrollTop ==>始终为0
    document.documentElement.clientHeight ==>浏览器可视部分高度
    document.body.clientHeight ==> 浏览器所有内容高度

    Chrome

    document.documentElement.scrollHeight ==> 浏览器所有内容高度
    document.body.scrollHeight ==> 浏览器所有内容高度
    document.documentElement.scrollTop==> 始终为0
    document.body.scrollTop==>浏览器滚动部分高度
    document.documentElement.clientHeight ==> 浏览器可视部分高度
    document.body.clientHeight ==> 浏览器所有内容高度

    浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

    浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

    综上:

    1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

    2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

    clientHeight在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

     

    12. PageX和clientX

    PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

    clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

    可是悲剧的是,PageX只有FF特有,IE则没有这个,所以在IE下使用这个:

    PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

    scrollTop代表的是被浏览器滑动条滚过的长度

    offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

    只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.
    最给力的是,chrome和safari一条龙通杀!完全支持所有属性 

    13. js拖拽效果

    <!doctype html>
    <html lang="zn-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style type="text/css">
            #login{
                height: 100px;
                width: 100px;
                border: 1px solid black;
                position: relative;
                top:200px;
                left: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="login"></div>
    
        <script type="text/javascript">
            var oDiv = document.getElementById("login");
            oDiv.onmousedown = function(e){
                var e = e || window.event;//window.event兼容IE,当事件发生时有效
                var diffX = e.clientX - oDiv.offsetLeft;  //获取鼠标点击的位置到所选对象的边框的水平距离
                var diffY = e.clientY - oDiv.offsetTop;
    
                document.onmousemove = function(e){  //需设为document对象才能作用于整个文档
                    var e = e||window.event;
                    oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所选对象的边框到浏览器左侧距离
                    oDiv.style.top = e.clientY -diffY + 'px';
                };
    
                document.onmouseup = function(){
                    document.onmousemove = null;//清除鼠标释放时的对象移动方法
                    document.onmouseup = null;
                }
            }
        </script>
    </body>
    </html>

    offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px

    14. 新窗口居中打开

    Js代码:

    function getNewWin(openUrl,iWidth,iHeight){
        //var openUrl ="messageAdvisory.html";//弹出窗口的url
        //var iWidth=510; //弹出窗口的宽度;
        //var iHeight=650; //弹出窗口的高度;
        var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
        var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
      window.open(openUrl,'newwindow','width='+iWidth+',height='+iHeight+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=yes,  resizable=no,location=no, status=no');  
    }
    
    $('#sa3').on('click', function(e){
        e.preventDefault();
        getNewWin('serviceInstall.html',510,650);
            //window.open('serviceInstall.html','newwindow','height=650,width=510,top=0,left=400,toolbar=no,menubar=no,scrollbars=yes,  resizable=no,location=no, status=no');  
    });

     

    15. Div窗口居中打开

    Html代码:

    //拖拽窗口--在线维修与安装
    var oDrag = document.getElementById("InstallationBox");
    var oTitle = get.byClass("title", oDrag)[0];
    drag(oDrag, oTitle);

     

    Js代码:

    //窗口拖拽
    function drag(oDrag,oTitle){
        var posX=0;
        var posY=0;
        oTitle.onmousedown=function(event){
            oTitle.style.cursor = "move";
            var event = event || window.event;
            var disX=event.clientX-oDrag.offsetLeft;
            var disY=event.clientY-oDrag.offsetTop;
    
            //鼠标移动,窗口随之移动onmousemove在有物体移动是才执行alert事件;
            document.onmousemove=function(event){
                var event = event || window.event;
                maxW=document.documentElement.clientWidth-oDrag.offsetWidth;
                maxH=document.documentElement.clientHeight-oDrag.offsetHeight;
                posX=event.clientX-disX;
                posY=event.clientY-disY;
    
                if(posX<0){
                    posX=0;
                }else if(posX>maxW){
                    posX=maxW;
                }
    
                if(posY<0){
                    posY=0;
                }
    
                /*if(posY<0){
                    posY=0;
                }else if(posY>maxH){
                    posY=maxH;
                }*/
                oDrag.style.left=posX+'px';
                oDrag.style.top=posY+'px';
            };
    
            //鼠标松开,窗口将不再移动
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    }
    
    
    // 获取id, class, tagName
    var get = {
        byId: function(id) {
            return typeof id === "string" ? document.getElementById(id) : id;
        },
    
        byClass: function(sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) {
                reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            }
            return aClass;
        },
    
        byTagName: function(elem, obj) {
            return (obj || document).getElementsByTagName(elem);
        }
    }
    
    

    16. div可拖曳

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>简单实用的可拖曳窗口</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    </head>
    <body>
        <div id="drag"></div>
    
    <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        //样式
        $("#drag").css({"position":"absolute","top":"100px","left":"100px","border":"1px solid #789","width":"150px","height":"90px","background":"#988f82","cursor":"move"})
    
        /*+++++ 拖曳效果 ++++++
        *原理:标记拖曳状态dragging,坐标位置iX、iY
        *   mousedown:fn(){dragging = true:记录起始坐标位置,设置鼠标捕获}
        *   mouseover:fn(){判断如果dragging = true,则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值}
        *   mouseup:fn(){dragging = false:释放鼠标捕获,防止冒泡}
        */
        var dragging = false;
        var iX, iY;
        $("#drag").mousedown(function(e) {
            dragging = true;
            iX = e.clientX - this.offsetLeft;
            iY = e.clientY - this.offsetTop;
            this.setCapture && this.setCapture();  //拖拽捕获开始
            return false;
        });
    
        document.onmousemove = function(e) {
            if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
            }
        };
    
        $(document).mouseup(function(e) {
            dragging = false;
            $("#drag")[0].releaseCapture(); //拖拽捕获结束
            e.cancelBubble = true;
        });
    })
    </script>
    </body>
    </html>

     

    17. JS,Jquery获取各种屏幕的宽度和高度

    javascript:

    文档可视区域宽: document.documentElement.clientWidth
    文档可视区域高: document.documentElement.clientHeight
    
    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth

    JQuery:

    $(document).ready(function(){
    alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
    alert($(window).width()); //浏览器当前窗口可视区域宽度
    alert($(document).width());//浏览器当前窗口文档对象宽度
    alert($(document.body).width());//浏览器当前窗口文档body的宽度
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
    })

     

    Form表单:

    18. jquery对文本框只读状态与可读状态的相互转化

      $('input').removeAttr('Readonly');
      $('input').attr('Readonly','true');

     

    19. js/jquery实现密码框输入聚焦,失焦问题

    js实现方法:
    html代码:

    <input id="i_input" type="text" value='会员卡号/手机号'  />

    js代码:

    window.onload = function(){
    var oIpt = document.getElementById("i_input");
      if(oIpt.value == "会员卡号/手机号"){
       oIpt.style.color = "#888";
      }else{
       oIpt.style.color = "#000";
      }
    
      oIpt.onfocus = function(){
       if(this.value == "会员卡号/手机号"){
        this.value="";
        this.style.color = "#000";
        this.type = "password";
       }else{
        this.style.color = "#000";
       }
      };
    
      oIpt.onblur = function(){
       if(this.value == ""){
        this.value="会员卡号/手机号";
        this.style.color = "#888";
        this.type = "text";
       }
      };
    }

    jquery实现方法:
    html代码:

    <input type="text"  class="oldpsw" id="showPwd" value="请输入您的注册密码"/>
    <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>

    jquery代码:

    $("#showPwd").focus(function() {
        var text_value=$(this).val();
        if (text_value =='请输入您的注册密码') {
            $("#showPwd").hide();
            $("#password").show().focus();
        }
    });
    
    $("#password").blur(function() {
        var text_value = $(this).val();
        if (text_value == "") {
            $("#showPwd").show();
            $("#password").hide();
        }
    });

    20. 改变type=file默认样式,"浏览"等字体

    <input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value">
    <input type="button" id="filebutton" value="" onclick="browsefile.click()">
    <input type="textfield" id="filepath">

    21. jquery获得select中option的索引

    html代码:

    <select class="select-green">
        <option value="0">高级客户经理</option>
        <option value="1">中级客户经理</option>
    </select>

    jquery代码:

    $(".select-green").change(function(){
        var _indx = $(this).get(0).selectedIndex;
        $(".selectall .selectCon").hide();
        $(".selectall .selectCon").eq(_indx).fadeIn();
    });

    注:其中(this).get(0)与(this)[0]等价

    22. form表单提交时设置编码格式

    <form name="form" method="post" action="XXXX" accept-charset="utf-8"  onsubmit="document.charset='utf-8';">  
     //内容
    </form>

    23. jQuery中radio和checkbox的选中的另一种方式

    $("input[name=sports]").val(["足球", "篮球"]);
    $("input[name=gender]").val(["男"]);
    
    $('input:radio:first').attr('checked', 'checked');
    
    $('input:checkbox:first').prop('checked', true);
    $('input[type="checkbox"]').eq(1).prop('checked', true);
    $('input:checkbox:eq(2)').attr('checked', 'true');
    $('input:checkbox').eq(4).attr('checked', true);

     

    日期时间相关功能代码块:

    24. 获取当前日期

    var calculateDate = function(){
        var date = new Date();
        var weeks = ["日","一","二","三","四","五","六"];
        return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 星期"+weeks[date.getDay()];
    }
    
    $(function(){
        $("#dateSpan").html(calculateDate());
    })

    25. 时间倒计时(固定倒计时的结束时间)

    function countdown() {
        var endtime = new Date("Jan 18, 2015 23:50:00");
        var nowtime = new Date();
        if (nowtime >= endtime) {
            document.getElementById("_lefttime").innerHTML = "倒计时间结束";
            return;
        }
    
        var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
        if (leftsecond < 0) {
            leftsecond = 0;
        }
    
        __d = parseInt(leftsecond / 3600 / 24);
        __h = parseInt((leftsecond / 3600) % 24);
        __m = parseInt((leftsecond / 60) % 60);
        __s = parseInt(leftsecond % 60);
        document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒";
    }
    
    countdown();
    setInterval(countdown, 1000);

     

    26. 10秒倒计时跳转

    html代码:

    <div id="showtimes"></div>

    js代码:

    //设定倒数秒数  
    var t = 10;  
    
    //显示倒数秒数  
    function showTime(){  
        t -= 1;  
        document.getElementById('showtimes').innerHTML= t;  
        if(t==0){  
            location.href='error404.asp';  
        }  
    
        //每秒执行一次,showTime()  
        setTimeout("showTime()",1000);  
    }  
    
    //执行showTime()  
    showTime();

     

    27. 每隔0.1s改变图片的路径

    <div id="tt"><img src="images/1.jpg" alt=""/></div>

    js代码:

    (function(){
        function chagesimagesrc(t){
            document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
        }
    
        setInterval(function(){
            for(var i=0;i<2;i++){
                setTimeout((function(t){
                    return function(){
                        chagesimagesrc(t);
                    }
                })(i+1),i*100)
            }
        },1000);
    })()

    28. js获取某年某月的哪些天是周六和周日

     <p id="text"></p>
     <script type="text/javascript">
     function time(y,m){
        var tempTime = new Date(y,m,0);
        var time = new Date();
        var saturday = new Array();
        var sunday = new Array();
        for(var i=1;i<=tempTime.getDate();i++){
            time.setFullYear(y,m-1,i);
            var day = time.getDay();
            if(day == 6){
                saturday.push(i);
            }else if(day == 0){
                sunday.push(i);
            }
        }
    
        var text = y+"年"+m+"月份"+"<br />"
                    +"周六:"+saturday.toString()+"<br />"
                    +"周日:"+sunday.toString();
        document.getElementById("text").innerHTML = text;
    }
    
    time(2014,7);
    </script>

     

    29. Date 对象

    启用基本存储器并取得日期和时间。

    dateObj = new Date()
    dateObj = new Date(dateVal)
    dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

    说明:

    Date 对象保存以毫秒为单位表示特定时间段。如果某个参数的值大于其范围或为负数,则存储的其他值将做相应的调整。例如,如果指定 150 秒,JScript 将该数字重新定义为 2 分 30 秒。

    如果数字为 NaN,则表示该对象不代表特定的时间段。如果未向 Date 对象传递参数,它将被初始化为当前时间 (UTC)。在能够使用该对象前必须为其赋值。

    Date 对象能够表示的日期范围约等于 1970 年 1 月 1 日前后各 285,616 年。

    Date 对象具有两个不创建 Date 对象就可以调用的静态方法。它们是 parse 和 UTC

    Date.UTC(year, month, day[, hours[, minutes[, seconds[,ms]]]])

    返回全球标准时间 (UTC) (或 GMT) 的 1970 年 1 月 1 日到所指定日期之间所间隔的毫秒数。

    new Date("2015") //Thu Jan 01 2015 08:00:00 GMT+0800 (中国标准时间)
    new Date(2015) //Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)
    new Date("2015-2-1") //Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
    new Date("2015/2/1") //Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
    new Date("20150201") //Invalid Date
    new Date(2015,1,2) //Mon Feb 02 2015 00:00:00 GMT+0800 (中国标准时间)
    new Date("2015","1","2") //Mon Feb 02 2015 00:00:00 GMT+0800 (中国标准时间)
    new Date(2015,1,2,25,2) //Tue Feb 03 2015 01:02:00 GMT+0800 (中国标准时间)
    new Date(2015,13,2,25,2) //Wed Feb 03 2016 01:02:00 GMT+0800 (中国标准时间)

    方法:

    getDate 方法(日期) | getDay 方法(星期) | getFullYear 方法(年份) | getHours 方法(时) | getMilliseconds 方法(本地时间毫秒数) | getMinutes 方法(分钟) | getMonth 方法(月份) | getSeconds 方法(秒) | getTime 方法(返回1970年开始的毫秒数) | getTimezoneOffset 方法 | getUTCDate 方法 | getUTCDay 方法 | getUTCFullYear 方法 | getUTCHours 方法 | getUTCMilliSeconds 方法 | getUTCMinutes 方法 | getUTCMonth 方法 | getUTCSeconds 方法 | getVarDate 方法 | getYear 方法 | setDate 方法 | setFullYear 方法 | setHours 方法 | setMilliSeconds 方法 | setMinutes 方法 | setMonth 方法 | setSeconds 方法 | setTime 方法 | setUTCDate 方法 | setUTCFullYear 方法 | setUTCHours 方法 | setUTCMilliseconds 方法 | setUTCMinutes 方法 | setUTCMonth 方法 | setUTCSeconds 方法 | setYear 方法 | toGMTString 方法 | toLocaleString 方法 | toUTCString 方法 | toString 方法 | valueOf 方法 | parse 方法 | UTC 方法

     

    字符串相关功能代码块:

    30. js实现Java的endWith方法:以某字符串结尾

    在操作字符串(String)类型的时候,startsWith(anotherString)和endsWith(anotherString)是非常好用的方法。其中startsWith判断当前字符串是否以anotherString作为开头,而endsWith则是判断是否作为结尾。举例:

    "abcd".startsWith("ab"); // true
    "abcd".startsWith("bc"); // false
    "abcd".endsWith("cd");  // true
    "abcd".endsWith("e");  // false
    "a".startsWith("a");   // true
    "a".endsWith("a");    // true

     

    但不幸的是,Javascript中没有自带这两个方法,需要的话只能自己写。当然写起来也不难就是了。

    if (typeof String.prototype.startsWith != 'function') {
     String.prototype.startsWith = function (prefix){
      return this.slice(0, prefix.length) === prefix;
     };
    }

    String.slice()和String.substring()类似,都是获得一段子串,但有评测说slice的效率更高。这里不使用indexOf()的原因是,indexOf会扫描整个字符串,如果字符串很长,indexOf的效率就会很差。

    if (typeof String.prototype.endsWith != 'function') {
     String.prototype.endsWith = function(suffix) {
      return this.indexOf(suffix, this.length - suffix.length) !== -1;
     };
    }

    和startsWith不一样,endsWith中可以使用indexOf。原因是它只扫描了最后的一段字符串,而比起slice的优势是它不用复制字符串,直接扫描即可,所以效率更高。

     

    采用正则表达式实现startWith、endWith效果函数

    String.prototype.startWith=function(str){

    var reg=new RegExp("^"+str);return reg.test(this);

    }

    //测试ok,直接使用str.endWith("abc")方式调用即可

    String.prototype.endWith=function(str){

    var reg=new RegExp(str+"$");

    return reg.test(this);

    }

     

    Ajax-相关功能代码块:

    31. 保留后端传递到前端页面的空格

    var objt = {
       name:' aaaa    这是一个空格多的标签   这是一个空格多的标签'
    }
    objt.name = objt.name.replace(/\s/g,' ');
    console.log(objt.name);

     

    32. js 异步加载和同步加载

    异步加载也叫非阻塞模式加载,浏览器在下载js的同时,同时还会执行后续的页面处理。
    在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了:

    (function() {     
        var s = document.createElement('script');    
        s.type = 'text/javascript';     
        s.async = true;    
        s.src = 'http://yourdomain.com/script.js';    
        var x = document.getElementsByTagName('script')[0];    
         x.parentNode.insertBefore(s, x);
    })();

    同步加载

    平常默认用的都是同步加载。如:

    <script src="http://yourdomain.com/script.js"></script>

    同步模式又称阻塞模式,会阻止流览器的后续处理。停止了后续的文件的解析,执行,如图像的渲染。浏览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。

    通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

    同步加载流程是瀑布模型,异步加载流程是并发模型。

     

    json相关功能代码块:

    33. JSON.stringify()

    异常--解析数据

    JSON 不能存储 Date 对象。

    JSON.stringify() 会将所有日期转换为字符串

    var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;

    之后你可以再将字符串转换为 Date 对象。

     

    异常--解析函数

    JSON 不允许包含函数,JSON.stringify() 会删除 JavaScript 对象的函数,包括 key 和 value

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;

    我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生:

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
    obj.alexa = obj.alexa.toString(); 
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;

    不建议在 JSON 中使用函数。

    34. 将对象转成字符串赋值给节点属性,如果值中有空格,则会从这个地方开始被截断,出现未知问题,报错

     

     

    文件上传&图片音频相关功能代码块:

    35. 获取上传文件的大小

    html代码:

    <input type="file" id="filePath" onchange="getFileSize(this)"/>

    js代码:

    //兼容IE9低版本获取文件的大小
    function getFileSize(obj){
        var filesize;
        if(obj.files){
            filesize = obj.files[0].size;
        }else{
            try{
                var path,fso;
                path = document.getElementById('filePath').value;
                fso = new ActiveXObject("Scripting.FileSystemObject");
                filesize = fso.GetFile(path).size;
            }
            catch(e){
                //在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size
                console.log(e.message); //Automation 服务器不能创建对象
                filesize = 'error'; //无法获取
            }
        }
    
        return filesize;
    }

    36. 限制上传文件的类型

    如果是高版本浏览器,一般在HTML代码中写就能实现,如:

    <input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">

    如果限制上传文件为图片类型,如下:

    <input type="file" class="file" value="上传" accept="image/*"/>

    但是在其它低版本浏览器就不管用了,需要js来判断。

    html代码:

    <input type="file" id="filePath" onchange="limitTypes()"/>

    js代码:

    /* 通过扩展名,检验文件格式。
     *@parma filePath{string} 文件路径
     *@parma acceptFormat{Array} 允许的文件类型
     *@result 返回值{Boolen}:true or false
     */
    function checkFormat(filePath,acceptFormat){
        var resultBool= false,
            ex = filePath.substring(filePath.lastIndexOf('.') + 1);
            ex = ex.toLowerCase();
        for(var i = 0; i < acceptFormat.length; i++){
            if(acceptFormat[i] == ex){
                resultBool = true;
                break;
            }
        }
        return resultBool;
    };
    
    function limitTypes(){
        var obj = document.getElementById('filePath');
        var path = obj.value;
        var result = checkFormat(path,['bmp','jpg','jpeg','png']);
        if(!result){
            alert('上传类型错误,请重新上传');
            obj.value = '';
        }
    }

    37. 预加载音频

    //预加载声音
    var shakeAudio = new Audio();
        shakeAudio.src = 'http://img-q1.taikang.com/christmas/music/2.mp3';
        shakeAudio.loop = true;
        shakeAudio.play();
    
    var shake_options = {
      preload  : 'auto'
    };
    
    $(".music").on('touchstart', function(event) {
      if ($(this).hasClass('off')) {
        shakeAudio.play();
        $(this).removeClass('off').addClass('on');
      }else{
        shakeAudio.pause();
        $(this).removeClass('on').addClass('off');
      };
    });

    38. 预加载图片

    //预加载图片
    var imgobj=new Image();
    var _this=$(this);
    var src=path+imglistObj[index];
    
    imgobj.onload=function(){
        var ih=imgobj.height;
        var iw=imgobj.width;
        console.log("ih="+ih+"&iw="+iw);
        if(ih<iw){
            _this.css({"background-size":"auto 100%"});
        }else{
            _this.css({"background-size":"100% auto"});
        }
    };
    
    imgobj.onerror=function(){
        alert("预加载失败");
    };
    
    imgobj.src=src;

    39. 图片加载错误时显示默认图片

    //加载图片错误时显示默认图片
    function checkImgLoad(){
        var imgs = document.images;
        for(var i = 0;i < imgs.length;i++){
            imgs[i].onerror = function(){
                this.src = "<%=request.getContextPath()%>/resource/newui/images/loading.jpg";
            };
        }
    }

    40. 为什么Image对象的src属性要写在onload事件后面?

    var image = new Image();
    image.onload = funtion(){
      var imgwidth = this.width;  //图片实际宽度
      var imgheight = this.height; //图片实际高度
    };
    image.src = '图片路径';

    js内部是按顺序逐行执行的,可以认为是同步的
    给image赋值src时,去加载图片这个过程是异步的,这个异步过程完成后,如果有onload,则执行onload

    如果先赋值src,那么这个异步过程可能在你赋值onload之前就完成了(比如图片缓存,或者是js由于某些原因被阻塞了),那么onload就不会执行
    反之,js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行,也就保证了onload一定会被执行到

     

    功能代码块:

    41. html代码用js动态加载进页面

    <script type="text/html" id="T-pcList">
     //这里面是你要放的html代码,例如放一个div的内容
    </script>

    把上面的js动态加入到页面中

    $(function(){
        var s=$("#T-pcList").html();  //获得js的html内容
        $(".picScroll-left .bd").html(s);  //把s的内容放到class为bd内
        thisstyle();  //执行某个函数
    });

     

    42. 点击某个div区域之外,隐藏该div

    一般写法:

    $(document).on("click",function(e){
        var target = $(e.target);
        if(target.closest(".city_box,#city_select a.selected").length == 0){
          $(".city_box").hide();
        }
    })

    更全的方式:

    $(document).click(function(e){
      var _con = $(' 目标区域 ');   // 设置目标区域
      if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
        some code...   // 功能代码
      }
    });

    /* Mark 1 的原理:

    判断点击事件发生在区域外的条件是:

    1. 点击事件的对象不是目标区域本身

    2. 事件对象同时也不是目标区域的子元素

    */

    43. js判断变量是否未定义的代码

    一般如果变量通过var声明,但是并未初始化的时候,变量的值为undefined,而未定义的变量则需要通过 "typeof 变量"的形式来判断,否则会发生错误。
    实际应用:
    variable有的页面我们不定义,但有的页面定义了,就可以需要这样的判断方法,没有定义的就不执行。

    if("undefined" != typeof variable){
        if(variable=="abc"){
            console.log('成功');
        }
    }

    44. 行内级元素可以设置宽高吗?有哪些?

    在面试时,当被问到行内级元素可否设置宽高时,根据我们的经验往往会回答不能。但是这样往往着了面试官的道,因为有一些特殊的行内元素,比如img,input,select等等,是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。比如img是一个置换元素,当不对它设置宽高时,它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以,非置换元素不可以

    45. js动态创建css样式添加到head内

    function addCSS(cssText){
        var style = document.createElement('style');
        var head = document.head || document.getElementsByTagName('head')[0];
        style.type = 'text/css';
        if(style.styleSheet){ //IE
            var func = function(){
                try{
                    //防止IE中stylesheet数量超过限制而发生错误
                    style.styleSheet.cssText = cssText;
                }catch(e){
    
                }
            }
    
            //如果当前styleSheet还不能用,则放到异步中则行
            if(style.styleSheet.disabled){
                setTimeout(func,10);
            }else{
                func();
            }
        }else{ //w3c
            //w3c浏览器中只要创建文本节点插入到style元素中就行了
            var textNode = document.createTextNode(cssText);
            style.appendChild(textNode);
        }
    
        //把创建的style元素插入到head中
        head.appendChild(style);     
    }
    
    //使用
    addCSS('#demo{ height: 30px; background:#f00;}');

    在IE8以及其低版本浏览器下,IE独有属性styleSheet.cssText。所以一般的兼容简单写法:

    var style = document.createElement('style');
    style.type = "text/css";
    if (style.styleSheet) { //IE
        style.styleSheet.cssText = '/*..css content here..*/';
    } else { //w3c
        style.innerHTML = '/*..css content here..*/';
    }
    
    document.getElementsByTagName('head')[0].appendChild(style);

    46. js强制手机页面横屏显示

    $( window ).on( "orientationchange", function( event ) {
        if (event.orientation=='portrait') {
            $('body').css('transform', 'rotate(90deg)');
        } else {
            $('body').css('transform', 'rotate(0deg)');
        }
    });
    
    $( window ).orientationchange();

    47. 随机产生lowwer - upper之间的随机数

    function selectFrom(lower, upper) {
       var sum = upper - lower + 1; //总数-第一个数+1
       return Math.floor(Math.random() * sum + lower);
    }

    48. js 对象冒充

    <script type = 'text/javascript'>
        function Person(name , age){
            this.name = name ;
            this.age = age ;
            this.say = function (){
                return "name : "+ this.name + " age: "+this.age ;
            } ;
        }
    
        var o = new Object() ;//可以简化为Object()
        Person.call(o , "zhangsan" , 20) ;
        console.log(o.say() );//name : zhangsan age: 20
     </script>

    49. 简单的文本弹出提示框,适用移动web

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>简单的文本弹出提示框,适用移动web</title>
    </head>
    <body>
    <script>
    //调用代码:
    //msgText.init(text,timer)
    //text:提示框显示文本,类型String
    //timer:提示框显示时间,不设置为永久显示 单位为毫秒ms
    var msgText={
        init:function(text,timer){
            var _cssText="position: fixed;top: 50%;margin: 0 auto;background: rgba(0, 0, 0, 0.63);color: #fff;padding: 2px 15px;left: 50%;margin:-16px 0 0 -85px;line-height: 2;border-radius: 5px;width: 170px;-webkit-transition:all 0.3s linear;transition:all 0.3s linear";
    
            this.oP=document.createElement("p");
            this.oP.innerHTML=text;
            this.setCss(_cssText);
            this.show();
    
            timer&&(this.hide(timer));
        },
        show:function(){
            document.body.appendChild(this.oP);
        },
        hide:function(timer){
            var _this=this;
            setTimeout(function(){
                _this.oP.style.opacity="0";
                setTimeout(function(){
                    document.body.removeChild(_this.oP);
                },300)
            },timer)
        },
        setCss:function(csstext){
            this.oP.style.cssText=csstext;
        }
    }
    
    //调用代码
    msgText.init("主题不存在或已被删除",3000)
    </script>
    </body>
    </html>
    
    

    50. Js&jquery阻止默认行为,阻止事件冒泡

    jquery中,return false等效于同时调用e.preventDefault()和e.stopPropagation()

    return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:

    if (ret===false){
        event.preventDefault();   //阻止默认行为
        event.stopPropagation();    //阻止事件冒泡
    }

     

    51. jQuery中的gt和lt

    /*gt,lt计数都是下标从0开始,而且不论大小于,都不包括它自己本身

    要注意的是,tr:gt(0):lt(3)=======gt(0)以后,索引为0的已经被排除了,那么剩下的有重新计数,下标又从0开始。*/

    $("#tabletest tr:lt(3)").css("backgroundColor", "#f00");
    $("#tabletest tr:gt(0):lt(3)").css("backgroundColor", "#0f0");

    52. jQuery内置函数map和each的用法

    $.map的运用

    var arr1 = [0, 3, 5];
    var arr2 = $.map(arr1, function (item) { return item * 2 });
    alert(arr2);  //结果:0 6 10

    $.each的运用

    普通数组

    var arr1 = [0, 3, 5];
    $.each(arr1,function (i) {
        alert(arr1[i]);  //结果:0,3,5
    });

    json对象

    var jsonData = {"tom": 20, "jerry": 21 };
    $.each(jsonData,function (key, value) {
        alert(key + "_" + value);  //结果:tom_20, jerry_21
    });
    
    $.each(jsonData,function (i) {
        alert(jsonData[i]);  //结果:20,21
    });
    
    

    53. 列表选项置顶,置底,上移,下移

    <ul class="demo">
        <li>001 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
        <li>002 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
        <li>003 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
        <li>004 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
    </ul>
    <script>
    $(".demo").on('click', 'a', function(event) {
      event.preventDefault;
      var parent=$(this).parent();
      var parents=$(this).parents(".demo");
      var len=parents.children().length;
      if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){
          alert("已经置顶!");
          return false;
      }else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){
          alert("已经置底!");
          return false;
      }
    
      switch (true) {
          case $(this).is(".up"):
              var prev = parent.prev();
              parent.insertBefore(prev);
              break;
          case $(this).is(".down"):
              var next = parent.next();
              parent.insertAfter(next);
              break;
          case $(this).is(".top"):
              parents.prepend(parent);
              break;
          case $(this).is(".bottom"):
              parents.append(parent);
      }
    }
    </script>

    54. jQuery在HTML中动态插入节点的常用方法

    方法

    描述

    示例

    append()

    向每个匹配的元素内部追加内容

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("p").append("<b>你好</b>");

    结果:

    <p>我想说:<b>你好</b></p>

    appendTo()

    将所有匹配的元素追加到指定的元素中

    。实际上,使用该方法是颠倒了常规

    的$(A).append(B)的操作,是将A追加到B中。

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("<b>你好</b>").appendTo("p")

    结果:

    <p>我想说:<b>你好</b></p>

    prepend()

    向每个匹配的元素内部前置内容

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("p").prepend("<b>你好</b>")

    结果:

    <p><b>你好</b>我想说:</p>

    prependTo()

    将所有匹配的元素前置到指定的元素中

    。实际上,使用该方法是颠倒了

    常规$(A).prepend(B)操作。

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("<b>你好</b>").prependTo("p")

    结果:

    <p><b>你好</b>我想说:</p>

    after()

    在每个匹配的元素后插入内容

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("p").after("<b>你好</b>")

    结果:

    <p>我想说:</p><b>你好</b>

    insertAfter()

    将所有匹配的元素插入到指定元

    素的后面,实际上,使用该方法

    是颠倒了常规的$(A).after(B)操作

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("<b>你好</b>").insertAfter("p")

    结果:

    <p>我想说:</p><b>你好</b>

    before()

    在每个匹配的元素之前插入内容

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("p").before("<b>你好</b>")

    结果:

    <b>你好</b><p>我想说:</p>

    insertBefore()

    将所匹配的元素插入到指

    定的元素的前面。实际上,

    使用该方法是颠倒了常规

    的$(A).before(B)的操作。

    HTML代码:<p>我想说:</p>

    jQuery代码:

    $("<b>你好</b>").insertBefore("p")

    结果:

    <b>你好</b><p>我想说:</p>

    55. 添加动画结束监听

    //捕捉webkitAnimationEnd事件
    element.addEventListener('webkitAnimationEnd', end, false);
    
    //捕捉webkitTransitionEnd事件
    element.addEventListener('webkitTransitionEnd', end, false);

    56. js滚动到底部

    /*滚动加载处理*/
    function setScroll(elem,callback){
        document.addEventListener("scroll",function(){
            var listElem = elem,
            clientHeight = document.documentElement.clientHeight,
            scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            scrollHeight = listElem.scrollHeight,
            offsetTop = listElem.offsetTop;
    
            if ((clientHeight+scrollTop) >= (scrollHeight+offsetTop)) {
                console.log("滚动到底部");
                callback();
            }
        },false);
    }

    57. jQuery的load方法:

    ========load方法的成功回调函数里,只能获取到静态页面内容,如果source.html中含有需要执行的js,则不适用

    $("目标节点").load("source.html"[ "节点选择器"],function(){
        //成功回调
    })

    58. null & undefined

    当要声明一个变量并进行初始化,但又不想指定任何特殊值,可以赋值为 JScript 值 null

    如果声明了一个变量但没有对其赋值,该变量存在,其值为Jscript 值 undefined

    注意在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN (不是一个数字)。对 null 值和 undefined 值作比较总是相等的。

    任何值为0、null、未定义或空字符串的表达式被解释为 false。其他任意值的表达式解释为 true。

    Null 数据类型

    在 Jscript 中数据类型 null 只有一个值:null。关键字 null 不能用作函数或变量的名称。

    包含 null 的变量包含“无值”或“无对象”。换句话说,该变量没有保存有效的数、字符串、boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容。

    请注意,在 Jscript 中,null 与 0 不相等(与在 C 和 C++ 中不同)。同时应该指出的是,Jscript中 typeof 运算符将报告 null 值为 Object 类型,而非类型 null。这点潜在的混淆是为了向下兼容。

    Undefined 数据类型

    如下情况使返回 undefined 值:

    对象属性不存在,

    声明了变量但从未赋值。

    注意不能通过与 undefined 做比较来测试一个变量是否存在,虽然可以检查它的类型是否为“undefined”。在以下的代码范例中,假设程序员想测试是否已经声明变量 x :

    if (x == undefined) // 这种方法不起作用
    if (typeof(x) == undefined) // 这个方法同样不起作用- 必须检查// 字符串 "undefined"
    if (typeof(x) == "undefined")  // 这个方法有效
    

    59. 条件运算符

    写 OR 表达式时,先写最有可能为 true 的条件。写 AND 表达式时,先写最有可能为 false 的条件。

     

    60. Break|continue|return

    在 Microsoft Jscript 中当某些条件得到满足时,break; 语句来中断一个循环的运行。(请注意,也用 break; 语句退出一个 switch 块。)。

    如果是一个 for 或者 for...in 循环,在更新计数器变量时使用 continue; 语句越过余下的代码块而直接跳到下一个循环中。

    方法中,进行表单等校验功能时,使用return;终止退出该方法。

    如果是在ajax请求回调函数中,则使用return false;终止执行后面的语句。

     

    61. 构造函数

    要创建自己的对象实例,必须首先为其定义一个构造函数。构造函数创建一个新对象,赋予对象属性,并在合适的时候赋予方法。例如,下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用,它指向当前对象。

    // pasta 是有四个参数的构造器。
    function pasta(grain, width, shape, hasEgg){        
        this.grain = grain; // 是用什么粮食做的?
        this.width = width;     // 多宽?(数值)
        this.shape = shape;   // 横截面形状?(字符串)
        this.hasEgg = hasEgg; // 是否加蛋黄?(boolean)
    }
    
    pasta.prototype.foodgroup = "carbohydrates"

    定义了对象构造器后,用 new 运算符创建对象实例。

    var spaghetti = new pasta("wheat", 0.2, "circle", true);

    62. Number 对象

    Number.NaN 是一个特殊的属性,被定义为“不是数值”。例如被 0 除返回 NaN。试图解析一个无法被解析为数字的字符串同样返回 Number.NaN。把 NaN 与任何数值或本身作比较的结果都是不相等。不能通过与 Number.NaN 比较来测试 NaN 结果,而应该使用 isNaN() 函数。

    63. 按值和按引用的比较

    Numbers 和 Boolean 类型的值 (true 和 false) 是按值来复制、传递和比较的。当按值复制或传递时,将在计算机内存中分配一块空间并将原值复制到其中。然后,即使更改原来的值,也不会影响所复制的值(反过来也一样),因为这两个值是独立的实体。

     

    对象、数组以及函数是按引用来复制、传递和比较的。 当按地址复制或传递时,实际是创建一个指向原始项的指针,然后就像拷贝一样来使用该指针。如果随后更改原始项,则将同时更改原始项和复制项(反过来也一样)。实际上只有一个实体;“复本”并不是一个真正的复本,而只是该数据的又一个引用。

     

    当按引用比较时,要想比较成功,两个变量必须参照完全相同的实体。例如,两个不同的 Array 对象即使包含相同的元素也将比较为不相等。要想比较成功,其中一个变量必须为另一个的参考。要想检查两个数组是否包含了相同的元素,比较 toString() 方法的结果。

     

    最后,字符串是按引用复制和传递的,但是是按值来比较的。请注意,假如有两个 String 对象(用 new String("something") 创建的),按引用比较它们,但是,如果其中一个或者两者都是字符串值的话,按值比较它们。

     

    注意   鉴于 ASCII和 ANSI 字符集的构造方法,按序列顺序大写字母位于小写字母的前面。例如 "Zoo" 小于 "aardvark"。如果想执行不区分大小写的匹配,可以对两个字符串调用 toUpperCase() 或 toLowerCase()。

     

    检验数据

    当按值进行检验时,是比较两个截然不同的项以查看它们是否相等。通常,该比较是逐字节进行的。当按引用进行检验时,是看这两项是否是指向同一个原始项的指针。如果是,则比较结果是相等;如果不是,即使它们每个字节都包含完全一样的值,比较结果也为不相等。

    var arr1 = ["a1","b1","c1"];
    var arr2 = arr1;
    arr1[3] = "d1";
    console.log(arr1,arr2); //["a1", "b1", "c1", "d1"] ["a1", "b1", "c1", "d1"]
    
    arr2[3] = "d2";
    console.log(arr1,arr2); //["a1", "b1", "c1", "d2"] ["a1", "b1", "c1", "d2"]
    
    var obj1 = {"name":"小明","grade":"1"};
    var obj2 = obj1;
    obj2.age = 14;
    console.log(obj1,obj2); //Object {name: "小明", grade: "1", age: 14} Object {name: "小明", grade: "1", age: 14}
    
    arr1 == arr2; //true
    obj1 == obj2; //true
    
    var testArr1 = ["a1","b1"];
    var testArr2 = ["a1","b1"];
    testArr1 == testArr2; //false
    testArr1.toString() == testArr2.toString(); //true
    
    var testArr3 = ["a1b","b1"];
    var testArr4 = ["a1","bb1"];
    testArr3.toString() == testArr4.toString(); //false

    64.  length 属性 (Function)

    返回函数定义的参数数目。

    functionName.length

    所必须的functionName 参数是被讨论的函数的名称。

    说明:

    函数的 length 属性是在创建函数实例时由 Scripting 引擎初始化的,值是函数定义中参数的数目。

    如果调用函数时参数的数目和它的 length 属性值不同,那么这时发生的情况将依赖于函数本身。

    下面的例子说明了 length 属性的用法:

    function ArgTest(a, b){
        var numargs = ArgTest.arguments.length;    //调用函数时实际入参个数
        var expargs = ArgTest.length;  //函数需要入参个数
    }
    
    ArgTest(2,3,4);   //函数调用

    65. 正则表达式语法

    一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

    这里有一些可能会遇到的正则表达式示例:

    JScript

    VBScript

    匹配

    /^\[ \t]*$/

    "^\[ \t]*$"

    匹配一个空白行。

    /\d{2}-\d{5}/

    "\d{2}-\d{5}"

    验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。

    /<(.*)>.*<\/\1>/

    "<(.*)>.*<\/\1>"

    匹配一个 HTML 标记。

     

    下表是元字符及其在正则表达式上下文中的行为的一个完整列表:

    字符

    描述

    \

    将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。

    ^

    匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。

    $

    匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 之前的位置。

    *

    匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}

    +

    匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}

    ?

    匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}

    {n}

    n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。

    {n,}

    n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。

    {n,m}

    m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格

    ?

    当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。

    .

    匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符,请使用象 '[.\n]' 的模式。

    (pattern)

    匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0$9 属性。要匹配圆括号字符,请使用 '\(' 或 '\)'。

    (?:pattern)

    匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

    (?=pattern)

    正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

    (?!pattern)

    负向预查,在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows",但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始

    x|y

    匹配 x 或 y。例如,'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

    [xyz]

    字符集合。匹配所包含的任意一个字符。例如, '[abc]' 可以匹配 "plain" 中的 'a'。

    [^xyz]

    负值字符集合。匹配未包含的任意字符。例如, '[^abc]' 可以匹配 "plain" 中的'p'。

    [a-z]

    字符范围。匹配指定范围内的任意字符。例如,'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。

    [^a-z]

    负值字符范围。匹配任何不在指定范围内的任意字符。例如,'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。

    \b

    匹配一个单词边界,也就是指单词和空格间的位置。例如, 'er\b' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。

    \B

    匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er',但不能匹配 "never" 中的 'er'。

    \cx

    匹配由x指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。

    \d

    匹配一个数字字符。等价于 [0-9]

    \D

    匹配一个非数字字符。等价于 [^0-9]。

    \f

    匹配一个换页符。等价于 \x0c 和 \cL。

    \n

    匹配一个换行符。等价于 \x0a 和 \cJ。

    \r

    匹配一个回车符。等价于 \x0d 和 \cM。

    \s

    匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

    \S

    匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。

    \t

    匹配一个制表符。等价于 \x09 和 \cI。

    \v

    匹配一个垂直制表符。等价于 \x0b 和 \cK。

    \w

    匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。

    \W

    匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。

    \xn

    匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如, '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。.

    \num

    匹配 num,其中 num 是一个正整数。对所获取的匹配的引用。例如,'(.)\1' 匹配两个连续的相同字符。

    \n

    标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为后向引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。

    \nm

    标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式,则 nm 为后向引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足,若  n 和 m 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm

    \nml

    如果 n 为八进制数字 (0-3),且 m 和 l 均为八进制数字 (0-7),则匹配八进制转义值 nml。

    \un

    匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (?)。

     

    66. js计算小数乘法除法会出现错误。

    bug问题描述:js计算10.2*100=1019.999999999

    解决方案:将小数的小数部分,化成整数再进行乘除计算

     

    67. ajax问题:

    aysnc设置为false异步后,loading动画很快消失甚至不显示

     

    68. jQuery1.4.2中关于:not(:first)一个问题

    问题:$(".afuge:not(:first)").hide();悲剧发生了,所有.afuge类都被隐藏了

    解决方法1:$(".afuge:not(.afuge:first)").hide();

    解决方法2:$(".afuge").not(":first").hide();

    就是这么简单,但是就是让人很纠结的,据说是jQuery1.3.2也存在这个问题,各位多注意;

     

    展开全文
  • Web前端:自适应居中方法总结

    千次阅读 2017-10-15 16:33:14
    最近看到了一位大牛写的一个小的前端动画的代码,body中出现了一种最新的网页自适应居中的方法,结合以前在公众号中看到的一篇文章,在这里对网页自适应居中方法做个小小的总结:1、这是一种简单的方法,但是稍有...

        最近看到了一位大牛写的一个小的前端动画的代码,body中出现了一种最新的网页自适应居中的方法,结合以前在公众号中看到的一篇文章,在这里对网页自适应居中方法做个小小的总结:

    1、这是一种简单的方法,但是稍有局限性,设定了盒子的宽高
    这里写图片描述

    2、这种方法不需要计算,盒子的宽高也不影响,但是IE7及以下的浏览器并不支持

    这里写图片描述

    3、table布局,display:table-cell,将整个界面模拟成一个表格单元格,表格的居中特性就可以很好利用了,但是IE7及以下的浏览器仍然是不支持的

    这里写图片描述

    4、这个方法是css3盒模型中的很好用的一种,但是兼容性并不好。其中justify-content代表主轴(横向)居中,align-items则是辅轴(竖向)居中

    这里写图片描述

    自适应居中的方法还有很多,以后再总结给大家啦!前端的每一种实现方法都比较灵活,要结合兼容性要求等情况,选择最适合的那种。

    展开全文
  • 居中问题,分为垂直居中和水平居中,实际中水平居中是很简单的,垂直居中的方式和方法就非常的多。深大云网络选取2种常用方案分享给大家。

           居中问题,分为垂直居中和水平居中,实际中水平居中是很简单的,垂直居中的方式和方法就非常的多。深大云网络选取2种常用方案分享给大家。


    一 内联元素的居中方案

    水平居中设置:

    1.行内元素 设置:text-align:center、

    2.Flex布局 设置:display:flex:justify-content:center

    垂直居中设置:

    1.父元素高度确定的单行文本(内联元素) 设置 height = line-height;

    2.父元素高度确定的多行文本(内联元素) a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle; b:先设置 display:table-cell 再设置 vertical-align:middle;

                  

    二 块级元素居中方案

    水平居中设置:

    1.定宽块状元素 设置 左右 margin 值为 auto;

    2.不定宽块状元素 a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto; b:给该元素设置 display:inine 方法; c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

    垂直居中设置:

    1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

    CSS代码:


    2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

    CSS代码:


    3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

    HTML代码:


    CSS代码:


    4.使用css3的新属性transform:translate(x,y)属性;

    CSS代码:


    5.最高大上的一种,使用before,after伪元素;

    HTML代码:


    CSS代码:

      


    6.Flex布局;

                   

         

    展开全文
  • Web前端开发-垂直居中

    千次阅读 2018-04-24 23:05:46
    Web前端开发,自学笔记整理 垂直居中 1.垂直居中问题-1 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
  • web前端---居中方式

    千次阅读 2017-02-25 20:49:16
    文本居中:text-align。此时只是水平居中。如果将line-height设置为和父元素相同的高度,那么就能实现垂直居中了 未完待续...
  • } jQuery实现水平和垂直居中 原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的...
  • 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多。 你也许能顺手写出好几种实现方法。但大部分人的写法不够规范,经不起千锤百炼...
  • web前端开发中的各种居中

    万次阅读 2017-11-20 19:21:45
    一,水平居中 方法① :行内元素 (父元素)text-align,(子元素)inline-block .parent{text-align: center;} .child{display: inline-block;} 总结: 优点:兼容性好,支持低版本浏览器 缺点:需要同时...
  • 今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有所帮助! 下面的居中示例中,统一使用了同一个div作为父元素和p作为子元素 设置一个div,并且设置了div的...
  • 如题,垂直水平居中确实是前端老掉牙的问题了。。所以,直接po下几种实现,以此为记录~ 以下全部实现都是基于css!!!!!!!js的以后另谈啦~ 简单布局<div class='one'><div class='two'></div><...
  • 哎,好久没接触前端,现在都要重新开始学习了,今天我们来讲如何对定位的盒子居中显示. 大家都知道对盒子居中显示有一个万金油的方法就是 margin: 0 auto;但对于那只适用于没有脱离文档流的元素,用过定位的元素是不适用...
  • Web前端编写高质量代码-高质量的HTML 标签(空格分隔): Web前端 文章目录Web前端编写高质量代码-高质量的HTML@[toc]标签的语义:div、spanh1-h6:表单:表格:为什么要使用语义化标签?如何确定你的标签是否语义...
  • 小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候,往往面临着方法的选择,而各种方法有的简单,有的困难,还有的有一些坑,在选择方法时我们应该怎么做才能不走弯路呢? 话不多说,现在就来分享...
  • 让五环居中网页,不管网页怎么变换,五环都在网页的中间,没有变化
  • 2018最新Web前端经典面试试题及答案

    万次阅读 多人点赞 2018-01-16 21:56:43
    马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教...
  • 网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS的垂直居中技巧当成面试题,其重要...
  • 1.内层需要居中的div宽度小于外层,这里的例子是内层宽度300px,外层500px; 2.内层需要居中的div宽度大于外层,这里的例子是内层宽度700px,外层500px,居中显示里层div,两侧超出部分隐藏; 把一个宽度小于父...
  • web前端

    2015-05-07 16:05:09
    1.动态增加div内容,且保持所添加的内容一直保持居中代码如下: 总资产8989 总资产8989 总资产8989 总资产8989 2.web页面为了较好的在手机上显示: 所有页面布局代码如下: ...
  • CSS垂直居中的四种方式
  • 对于一个web前端学习者来说一定要多做项目多动手,以下这个项目适合系统学过当然对于小白来说有一点难度,一定要仔细跟着我们做不要放弃。 第一节 项目准备http://iwenwiki.com/api /blueberrypai/我们制作 蓝莓派 ...
  • 不少人都会在后台给我留言,一些同学告诉我说想学Web前端,为了满足大家的要求,今天就给大家安利一波Web前端的学习资料。想学Web前端的筒子们看过来~ 因为很多筒子们都没有什么基础,那我就先带大家来认识一下Web...
  • Web前端面试指导 十四 如何居中一个元素(正常 绝对定位 浮动元素)
  • 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:...
  • 一些工作中的小问题的记录。 HTML端代码:插入一张图片 <div class="xiaoxun"> <img src=...width="1000" height="52" >...CSS端代码:控制居中 .xiaoxun{ height: 52px; backgro...
  • inline 或者 inline-* 的元素竖直居中 可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景: 单行竖直居中,如单行文本或者链接 这种情况,通过给元素上下添加相同大小的 padding 值即可...
  • 2021年最新Web前端面试题精选大全及答案

    万次阅读 多人点赞 2021-01-07 11:53:44
    标准模式:浏览器按照W3C标准解析执行代码 怪异模式:浏览器根据自己的方式解析执行代码,因为不同浏览器解析执行方式不一样,所以叫怪异模式 区别: 在怪异模式下,盒模型为怪异盒模型 而在标准模式下为标准盒子...
  • web前端入坑第二篇 web前端到底怎么学 干货资料
  • web前端开发规范

    2017-12-10 21:00:49
    web前端开发规范麦子学院何虎老师的开发web前端开发规范课程笔记web前端开发规范的意义1、提高团队的协作能力 2、提高代码的复用利用率 3、可以写出质量更高,效率更好的代码 4、为后期维护提供更好的支持规范1、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,908
精华内容 5,163
关键字:

web前端居中代码