• 正则表达式-获取JavaScript中$表达式

    源文本

    a.click(jQuery('#slide06 > .btn.btn2')[0]);
    a = jQuery("li[style^='opacity: 1;']").find('.fl.pic1 > a > img, .fr.pic2 > a');
    console.log(2);
    a = jQuery('.fl.lt > a > img, .fl.rt > a > img');
    a = jQuery('.pics > li > a > img');
    console.log(5);
    a = jQuery('.pics > li > a > img')[0];
    console.log(8);
    a = $(".pics > li > a > img")[0];
    console.log('success');
    

    正则表达式

    (\()*(jQuery|\$)\(.*
    

    结果

    (jQuery('#slide06 > .btn.btn2')[0]);
    jQuery("li[style^='opacity: 1;']").find('.fl.pic1 > a > img, .fr.pic2 > a');
    jQuery('.fl.lt > a > img, .fl.rt > a > img');
    jQuery('.pics > li > a > img');
    jQuery('.pics > li > a > img')[0];
    $(".pics > li > a > img")[0];
    
  • 检查iframe被嵌套的三种方式

    采用window对象方式

    if (window.top != window.self) {
    	alert("window对象-被嵌套一层或多层");	
    }
    if (window.top != window.parent) {
    	alert("window对象-被嵌套两层");
    }
    

    采用self对象方式

    if (self.top != self.self) {
    	alert("self对象-被嵌套一层或多层");
    }
    if (self.top != self.parent) {
    	alert("self对象-被嵌套两层");
    }
    

    采用逻辑表达式之短路计算方式

    (t = window.top) && t == window.self || alert("短路计算-被嵌套一层或多层");
    (t = window.top) && t == window.parent || alert("短路计算-被嵌套两层");
    

    逻辑表达式说明

  • 给div绑定点击事件三个方法

    基础代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <style>
            div {
                font-size: 2em;
                width: 250px;
                cursor: pointer /*变成手型*/
            }
    
            .clickme {
                background-color: #2aabd2;
            }
        </style>
        <script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
    <!--代码位置-->
    </body>
    </html>
    

    [Read More…]

  • jsonp学习汇总

    为什么要使用jsonp?
    为了解决在不同域名下,即跨域(参考JavaScript同源策略)获取数据的问题。

    这是同域请求

    <script src='//libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
    <script type="text/javascript">
        $.ajax({
            url: 'http://127.0.0.1/a.json',
            dataType: "json",
            success: function (data) {
                console.log(data);
            }
        });
    </script>
    

    a.json

    {
        "name": "sun",
        "age": 10
    }
    

    2015-07-11_143704

    如果换成跨域?

    <script src='//libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
    <script type="text/javascript">
        $.ajax({
            url: 'http://www.sun.cn/a.json',
            dataType: "json",
            success: function (data) {
                console.log(data);
            }
        });
    </script>
    

    2015-07-11_144552
    提示跨域了,现在就需要jsonp出马。
    [Read More…]

  • CSS学习笔记之长度单位(七)

    长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
    1、像素
    像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
    2、em
    就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

    p{font-size:12px;text-indent:2em;}
    

    上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
    下面注意一个特殊情况:
    但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
    html:

    <p>以这个<span>例子</span>为例。</p>
    

    css:

    p{font-size:14px}
    span{font-size:0.8em;}
    

    结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
    3、百分比

    p{font-size:12px;line-height:130%}
    

    设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

  • CSS学习笔记之代码简写(六)

    盒模型代码简写

    还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:

    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
    

    通常有下面三种缩写方法:
    1、如果top、right、bottom、left的值相同,如下面代码:

    margin:10px 10px 10px 10px;
    

    可缩写为:

    margin:10px;
    

    [Read More…]

  • CSS学习笔记之布局模型(五)

    清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
    CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
    在网页中,元素有三种布局模型:
    1、流动模型(Flow)
    2、浮动模型 (Float)
    3、层模型(Layer)
    [Read More…]

  • CSS学习笔记之盒模型(四)

    盒模型–边框

    盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
    如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

    div{
        border:2px  solid  red;
    }
    

    上面是 border 代码的缩写形式,可以分开写:

    div{
        border-width:2px;
        border-style:solid;
        border-color:red;
    }
    

    [Read More…]

  • CSS学习笔记之元素分类(三)

    在介绍CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
    常用的块状元素有:

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    

    常用的内联元素有:

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    

    常用的内联块状元素有:

    <img>、<input>
    

    [Read More…]

  • CSS学习笔记之文字排版(二)

    文字排版

    font-weight:bold; 粗体
    font-style:italic; 斜体
    text-decoration:underline;下划线
    text-decoration:line-through;删除线
    

    [Read More…]