🌓

js 给页面所有的A标签加某个推广地址栏参数

2015-07-12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
$(document).ready(function() {
addUrlParse();
});

// 获取地址栏的参数数组
function getUrlParams() {
var search = window.location.search;

// 写入数据字典
var tmparray = search.substr(1, search.length).split("&");
var paramsArray = new Array;
if (tmparray != null) {
for (var i = 0; i < tmparray.length; i++) {
var reg = /[=|^==]/; // 用=进行拆分，但不包括==
var set1 = tmparray[i].replace(reg, '&amp;');
var tmpStr2 = set1.split('&amp;');
var array = new Array;
array[tmpStr2[0]] = tmpStr2[1];
paramsArray.push(array);
}
}
// 将参数数组进行返回
return paramsArray;
}
// 根据参数名称获取参数值
function GetQueryString(name) {
var paramsArray = getUrlParams();
if (paramsArray != null) {
for (var i = 0; i < paramsArray.length; i++) {
for (var j in paramsArray[i]) {

if (j.toLowerCase() == name.toLowerCase()) {
return paramsArray[i][j];
}
}
}
}
return null;
}

//function GetQueryString(name) {

// var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)");
// var r = window.location.search.substr(1).match(reg);
// if (r != null) return unescape(r[2]); return null;
//}

//搜索后添加推广ID 2013年5月23日16:16:51
function addUrlParse() {
var ruid = GetQueryString("referraluserid");
//alert("ruid=" + ruid);
if (ruid != "" &amp;&amp; ruid != null) {
var aStr = "ReferralUserId=" + ruid;

var url = window.location.search;
try {
$("a").each(function(i) {
var hrefstr = $(this).attr("href");
if (hrefstr != null &amp;&amp; hrefstr != "" &amp;&amp; hrefstr.indexOf("javascript:") < 0) {
var jinghao = "";
if (hrefstr.indexOf("#") > 0) {
var arr = hrefstr.split("#");
hrefstr = arr[0];
jinghao = arr[1];
}
// hrefstr = hrefstr + (hrefstr.indexOf("?") > 0 ? url.replace("?", "&amp;") : url);
if (hrefstr.toLowerCase().indexOf("referraluserid=") == -1)
hrefstr = hrefstr + (hrefstr.indexOf("?") > 0 ? "&amp;" + aStr : "?" + aStr);
if (jinghao != "") {
hrefstr += "#" + jinghao;
}
$(this).attr("href", hrefstr);
}
});
}
catch (e) {
alert(e);
}
/*
var hrefstr = "";
try {
var url = window.location.search;

$("a").each(function(i) {
hrefstr = $(this).attr("href");
// alert(hrefstr.indexOf("referraluserid=") + aStr);
if (hrefstr.indexOf("referraluserid=") == -1)
$(this).attr("href", $(this).attr("href") + (hrefstr.indexOf("?") > 0 ? "&amp;" + aStr : "?" + aStr));
});
}
catch (e) {
alert(e + " + " + hrefstr);
}

*/

}
}
//搜索后添加推广ID 2013年5月23日16:16:51
function addSearUrlParse() {

var ruid = GetQueryString("ReferralUserId");
if (ruid != "" &amp;&amp; ruid != null) {
var aStr = "&amp;ReferralUserId=" + ruid;
return aStr;
}
return "";
}

阅读全文

JS获取几种URL地址的方法

2015-07-12

以下为JS获取几种URL地址的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
javascript
thisURL = document.URL;
thisHREF = document.location.href;
thisSLoc = self.location.href;
thisDLoc = document.location;

thisTLoc = top.location.href;
thisPLoc = parent.document.location;
thisTHost = top.location.hostname;
thisHost = location.hostname;

tmpHPage = thisHREF.split( "/" );
thisHPage = tmpHPage[ tmpHPage.length-1 ];
tmpUPage = thisURL.split( "/" );
thisUPage = tmpUPage[ tmpUPage.length-1 ];

阅读全文

移动web开发常见问题解决方案

2015-07-12

1

1、<meta>元素

meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：

阅读全文

javascript div 遮罩层封锁整个页面

2015-07-12

在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。

具体解决方案如下：

一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。

clientHeight

阅读全文

移动前端头部标签(HTML5 head meta)

2015-07-12

移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->

    <title>标题</title>
</head>

阅读全文

IE6不支持border-color:transparent 的问题解决

2015-07-12

IE6不支持设置transparent为边框的颜色。

例如：
border:solid 1px transparent;

c

阅读全文

ie下按keydown事件会触发button

2015-07-12

负责公司的一个b2c平台，头部那里有个搜索查询的功能，根据用户输入的内容按回车键也会跳转到响应的页面，后来在ie浏览器下惊奇的发现按回车键的同时它也会触发底部的邮箱订阅的button事件，开始以为是其它的地方用到了回车键从而冲突了，好来发现没有其它地方用到，找了好久都找不到原因，后来百度了一下，找到了相关的问题描述：

阅读全文

可以直接拿来用的15个jQuery代码片段

2015-07-12

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

阅读全文

js过滤数组中相同的值

2015-07-12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
    Array.prototype.del = function() {
        for (var i = 0; i < l; i++) {
            var a = {}, c = [], l = this.length;
            var b = this[i];
            var d = (typeof b) + b;
                c.push(b);
                a[d] = 1;
            }
        }
        return c;
        
    }
    var myArr=['text','text','5','2','2','3','4','5','5'];
    document.write(myArr.del());

</script>

阅读全文

内容loading加载后高度变化CSS3 transition体验优化

2015-07-12

一、概述

现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页面加载，看到一个框框里面有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。例如：

阅读全文

IE6 PNG透明终极解决方案

2015-07-12

方案1 - 滤镜解决方案：

介绍：滤镜从IE4.0被微软正式引入，所以我们可以使用滤镜解决IE6的PNG透明问题，滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。

阅读全文

解决inline-block元素的空白间距

2015-07-11

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

阅读全文

jQuery.extend 函数详解

2015-07-11

JQuery的extend扩展方法：

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。

一、Jquery的扩展方法原型是:

extend(dest,src1,src2,src3...);

阅读全文

简单通用Ajax函数

2015-07-11

近日，总在纠结不懂Ajax原理，导致用JQuery做Ajax的时候，总是会碰到各种诡异的问题。身边的朋友也是一问三不知！
正所谓，我不入地狱，谁入地狱。我不学习，等特么谁学习。。
so~~看了1星期的Ajax历史、由来、原理等。。自己写了个通用源生javascript函数，希望能给大家一些启迪。
Over，小二，上码！
各位加油，理解万岁。

阅读全文

学习javascript必须掌握的基础知识

2015-07-11

好多人想要学习前端……自学或者培训那么我们在学习过程中到底需要掌握那些基础知识呢！下面分类了JS中必备的知识也是必须要了解学会的！看一看你是否已经将JS的基础知识都了如指掌了呢？

事件:

  • onmousedown 鼠标按下

阅读全文

position: fixed 的跨浏览器完美解决方案(支持IE5、6且无抖动)

2015-07-11

position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案，欢迎来喷我。
下面是代码

阅读全文

CSS3圆角问题，支持IE6

2015-07-11

页中圆角应用时比较常见的，但css3的border-radius属性只有IE9才能支持，让人非常的恼火啊~~~现在给大家一解决方法~~

第一步先加样式，我以行内样式说明：

1
2
3
4
5
6
7
8
<style type="text/css">
.yJ {
-moz-border-radius:4px; /* Firefox */
-webkit-border-radius:4px; /* Safari and Chrome */
border-radius:4px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
behavior: url(ie-css3.htc);
}
</style>

阅读全文

移动前端开发优化指南

2015-07-10

移动前端开发由于是在手机上使用，需要考虑到网络信号较差和为用户的流量着想，性能和加载速度就是前端开发人员需要认真考虑的，PC的优化手段同样使用在移动端上。

概述

    阅读全文

    CSS样式控制图片等比缩放

    2015-07-10

    例如，某容器宽度为950px，内容图片宽高不等，有可能是1000px宽度。为了方便编辑，不用对每张内容图片处理尺寸。
    图片样式为：

    1
    img{ max-width:950px; height:auto}

    阅读全文