• JS原型链回顾

    前两年在看JS原型链的时候花了挺久终于搞懂了,时间一久又渐渐生疏,趁机画个图总结下

     

    主要知识点:

    1. 在用构造函数F创建新的实例对象f时,会为f创建__proto__属性,指向Fprototype
    2. 假如现在要查找a属性,那么先看看f上有没有,没有的话再看看f.__proto__(即F.prototype)上有没有,没有的话再看f.__proto__.__proto__有没有,一步一步往上查

    另外关于Function和Object比较特殊的点:

    1. Object因为是构造函数,是函数,所以作为Function的实例,Object.__proto__ 指向其构造函数的prototype,即Function.prototype,Object.__proto__  === Function.prototype
    2. 同理,Function因为是构造函数,是函数,所以作为实例,Function.__proto__指向其构造函数的prototype,即Function.prototype,Function.__proto__ ===  Function.prototype
    3. Function.prototype因为是对象,是Object的实例,所以其__proto__指向 Object.prototype

    参考文章:

  • jQuery实现多浏览器兼容HTML5 placeholder

    大家都知道HTML5里面的input或者textarea里的placeholder吧,可以很轻松的在点击后隐藏提示文字,但是IE老版本的因为不支持HTML5所以必定无法用,啊啊啊!!!可是这个需求真的是很普遍,工作中已经遇到过好多次这样的了,为了以后偷懒今天下班搞了个通用的代码吧~~

    先说说思路吧:

    1. 用CSS将文本框(这里叫他 #ipt)和提示文字(这里叫他 #tips)这两个元素定位到一起,上下重叠,具体的实现方法我目前所知有a和b两种,a方法是将#ipt覆盖到#tips上,给#ipt设置透明度,b方法是将#tips覆盖到#ipt上。
    2. 在点击#tips或#ipt获得焦点时将#tips隐藏 / 修改#ipt透明度 / 将#tips移到到不影响#ipt输入的位置,对于方法a可以:将#tips隐藏 / 修改#ipt透明度,对于b可以将#tips隐藏 / 将#tips移到到不影响#ipt输入的位置。
    3. 在#ipt失去焦点时判断其值是否在trim后为空(可根据需要调整)来将#tips显示出。
    4. 在页面加载时同样需要判断#ipt是否在trim后为空(可根据需要调整),以防#ipt和#tips同时显示。
  • JQuery学习之JQ下拉菜单

    JQuery相信大家都接触过了,不过我这个JS菜鸟最近才开始学习。

    以前一直要搞个下拉菜单,现在学了点JQ,发现也挺简单的,上代码!(Demo页面)

    HTML代码

    <ul id="nav-categories">
    	<li><a href="../">首页</a>
    	</li>
    	<li>
    		<a href="#">链接</a>
    		<ul>
    			<li><a href="#">aaa</a></li>
    			<li><a href="#">bbb</a></li>
    			<li><a href="#">ccc</a></li>
    			<li><a href="#">ddd</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">相册</a>
    		<ul>
    			<li><a href="#">11</a></li>
    			<li><a href="#">22</a></li>
    			<li><a href="#">33</a></li>
    			<li><a href="#">44</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">博客</a>
    		<ul>
    			<li><a href="#">AA</a></li>
    			<li><a href="#">BB</a></li>
    			<li><a href="#">CC</a></li>
    			<li><a href="#">DD</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">关于</a>
    	</li>
    </ul>
    

    JQuery代码

    //两个参数,一个导航ul标签的id,一个是下拉菜单的显示速度,越小越快
    function zvMenu(ulElementId,speed){
    	//JQ一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
    	$("#"+ulElementId).children("li:has(ul)").hover(
    		function(){
    			$(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式,此处非必要
    			$(this).children("ul").slideDown(speed);//JQ的slideDown方法,显示下拉菜单
    		},
    		function(){
    			$(this).children("ul").hide();//隐藏下拉菜单
    		}
    	);
    	//JQ动画,可选
    	$("#"+ulElementId).find("li>ul>li>a").hover(
    		function(){
    			$(this).animate({paddingLeft:"30px"},speed);
    		},
    		function(){
    			$(this).animate({paddingLeft:"20px"},speed);
    		}
    	);
    
    }
    

    CSS代码

    #nav-categories{float:left;font-size:18px;height:50px;line-height:50px;}
    #nav-categories li{float:left;padding:0 20px 0 20px;background:#444;position:relative;}
    #nav-categories li ul{display:none;background:#444;color:#fff;position:absolute;left:0;top:50px;width:120px;border:1px solid #990;border-top:none;}
    #nav-categories li a{color:#FFF;}
    #nav-categories li a:hover{color:#9C0;}
    #nav-categories li ul li{height:40px;line-height:30px;background:#444;width:116px;padding:0;margin:0;border:2px solid #9C0;border-top:none;border-bottom:none;}
    #nav-categories li ul li.li-last-s1{border-bottom:2px solid #9C0;}
    #nav-categories li ul li a{display:block;padding:5px 5px 5px 20px;zoom:1;}
    #nav-categories li ul li a:hover{background:#575855;}
    
  • JS代码根据网页来源显示不同内容

    我的JS学了没多久,今天就拿这个问题来练练手,不过功能还很简单,只能判断是不是来源于一些搜索引擎,然后决定是否显示指定代码。

  • ASP.NET使用母版页后动态加载JS/CSS

    ASP.NET中使用母版页最大的好处就是当有许多相似的页面时只用加一个母版页,每个页面用这个母版页生成内容页,然后根据情况修改每个内容页中的内容,保持页面布局的统一,同时也减少了代码量。

    但另一个突出的问题是使用母版页后,每个内容页中没有了<head></head>标记,因为这都在母版页中有了,而这对修改标题、加载JS/CSS等文件都有影响,前面我已经说过在ASP.NET中使用母版页后统一网页标题,那这篇就来说说如何加载JS/CSS等文件。

    ASP.NET中使用母版页后统一网页标题中修改标题的原理一样,加载JS/CSS等文件可以在内容页中加,也可以在母版页中统一加载。

    1、在单个内容页中加载

    将下面两段段代码放入内容页的Page_Load中即可,很简单了,也不再多解释。

    • 加载JS文件
    #region 加载JS文件
    HtmlGenericControl JSControl = new HtmlGenericControl("script");
    JSControl.Attributes.Add("type", "text/javascript");
    JSControl.Attributes.Add("src", "JS/js.js");
    Page.Header.Controls.Add(JSControl);
    #endregion
    
    • 加载CSS文件
    HtmlLink CssControl = new HtmlLink();
    CssControl.Href = "/CSS/Style.css";
    CssControl.Attributes.Add("rel", "stylesheet");
    CssControl.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(CssControl);
    

    2、在母版页中统一加载

    string requestContentType = this.ContentPlaceHolder1.Page.GetType().ToString();
    if (requestContentType == "ASP.admin_c2c_user_management_aspx")//获取请求的内容页类型,格式如ASP.目录名_文件名_aspx(好像文件名中的“-”都会被转换成了“_”)
    {
        //加载JS文件
        HtmlGenericControl JSControl = new HtmlGenericControl("script");
        JSControl.Attributes.Add("type","text/javascript");
        JSControl.Attributes.Add("src", "JS/js.js");
        Page.Header.Controls.Add(JSControl);
        // 加载CSS文件
        HtmlLink CssControl = new HtmlLink();
        CssControl.Href = "/CSS/Style.css";
        CssControl.Attributes.Add("rel", "stylesheet");
        CssControl.Attributes.Add("type", "text/css");
        Page.Header.Controls.Add(CssControl);
    }
    
  • WordPress折腾记-精简CSS及JS在插件中的调用

    爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做。

    众所周知,减少HTTP请求次数的一个途径是将CSS JS文件合并在一块,减少HTTP请求次数可以在一定程度上加快网页访问速度。为了速度,我就更加爱折腾了,呵呵。废话不多,下面是我今天的记录。

    先提醒一下,在修改前一定做好备份,这是个绝对无害处的好习惯,下文不再提醒。

    1、修改PageNavi的CSS调用,将其合并在主题目录中的style.css中(PageNavi是个WP分页插件,使用的人数还是不少的)。

    首先打开wp-pagenavi.php,找到下面的代码

    ### Function: Enqueue PageNavi Stylesheets
    add_action(‘wp_print_styles’, ‘pagenavi_stylesheets’);
    function pagenavi_stylesheets() {
    if(@file_exists(TEMPLATEPATH.’/pagenavi-css.css’)) {
    wp_enqueue_style(‘wp-pagenavi’, get_stylesheet_directory_uri().’/pagenavi-css.css’, false, ‘2.50’, ‘all’);
    } else {
    wp_enqueue_style(‘wp-pagenavi’, plugins_url(‘wp-pagenavi/pagenavi-css.css’), false, ‘2.50’, ‘all’);
    }
    }

    删除之(这些就是加载pagenavi-css.css的代码)

    然后将pagenavi-css.css 中的内容,全部复制到你的主题目录中的style.css 中,保存即可。另外将其复制到style.css的时候,最好做好备份和注释

    2、修改wp-easyarchives的CSS及JS调用。 搜索下面代码

    // — head START

    将head START 和 head END中的代码都删除掉,即删除下面的代码

    function easyarchives_head() {
    $options = get_option(‘wp_easyarchives_options’);

    $script_html = ”;
    if($options[‘js_type’] == ‘normal’) {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives.js”></script>’;
    } else if($options[‘js_type’] == ‘custom_jquery’) {
    if($options[‘jquery_url’] == ”) {
    $script_html = ”;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . $options[‘jquery_url’] . ‘”></script>’;
    }
    $script_html .= ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    }

    echo “\n” . ‘<!– START of script generated by WP-EasyArchives –>’;
    echo “\n” . ‘<!– END of script generated by WP-EasyArchives –>’ . “\n”;
    }
    add_action(‘wp_head’, ‘easyarchives_head’);

    现在wp-easyarchives的CSS和JS调用都没有了,但是我们还需要啊,下面我们可以将wp-easyarchives的CSS文件及JS文件都嵌入到别的CSS和JS文件中。比如我的主题是iNove的,对于CSS文件我将wp-easyarchives.css中的内容全部复制到了sytle.css中,对于JS文件,由于wp-easyarchives 插件提供了不止一个JS,我们可以选择一个,将其复制到inove/js/base.js 中。

    现在经过我们这样做之后,其实wp-easyarchives.php的下面这部分代码已经没有作用了(我们在wp-easyarchives的后台设置中虽然可以看到设置,但是设置已经没有作用了,因为前面我们已经删过别的代码了),可以将其删除。

    <form action=”#” method=”post” enctype=”multipart/form-data” name=”wp_easyarchives_form”>
    <div>
    <h2><?php _e(‘WP-EasyArchives Options’, ‘wp-easyarchives’); ?></h2>

    <table>
    <tbody>
    <tr valign=”top”>
    <th scope=”row”><?php _e(‘JavaScript Library’, ‘wp-easyarchives’); ?></th>
    <td>
    <label style=”margin-right:20px;”>
    <input name=”js_type” type=”radio” value=”normal” <?php if($options[‘js_type’] != ‘custom_jquery’ && $options[‘js_type’] != ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use normal JavaScript library that is supported by this plugin.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”wp_jquery” <?php if($options[‘js_type’] == ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use jQuery library that is supported by WordPress.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”custom_jquery” <?php if($options[‘js_type’] == ‘custom_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Custom jQuery.’, ‘wp-easyarchives’); ?>
    </label>
    <label>
    <?php _e(‘Please input the URL of jQuery:’, ‘wp-easyarchives’); ?>
    <input type=”text” name=”jquery_url” size=”40″ value=”<?php echo($options[‘jquery_url’]); ?>” />
    </label>
    </td>
    </tr>
    </tbody>
    </table>

    <p>
    <input type=”submit” name=”wp_easyarchives_save” value=”<?php _e(‘Save Changes’, ‘wp-easyarchives’); ?>” />
    </p>
    </div>
    </form>

    OK,折腾到此结束。其实很多插件如果涉及到了在前台的显示,都会增加一些CSS和JS文件,我们的方法都是找到其调用的代码,然后删除之,接着将被调用到的那些代码添加到我们主题里面的CSS和JS文件中。