Category Archives: JavaScript

七 20

JS获取当前域名

Posted on by

<script language="javascript">
//获取域名
host = window.location.host;
host2=document.domain;

//获取页面完整地址
url = window.location.href;

document.write("<br>host="+host)
document.write("<br>host2="+host2)
document.write("<br>url="+url)
</script>

七 20

jQuery对象与dom对象相互转换

Posted on by

什么是jQuery对象？

—就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById(“id”)得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中 Continue reading →

七 07

使用JS改变a标签中的href链接与图片src链接方法

Posted on by

一、原生JS直接改变a标签链接与图片src链接（JS一定要在欲改变的源码之后加载）

0
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<img id="image" src="/i/tulip.jpg" />
<a id="test" href="http://www.baidu.com/" target="_blank">织梦先生</a>
<script>
document.getElementById("image").href="/myimg.jpg";
document.getElementById("test").href="http://mrdede.com/";
</script>
</body>
</html>

原始图片是tulip.jpg，改变后的图片myimg.jpg。
a标签改变后的链接是http://mrdede.com/

二、引入jQuery方法改变a标签链接与图片src链接（应该是任意jQuery版本都可以，JS一定要在欲改变的源码之后加载）

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<img id="image" src="/i/tulip.jpg" />
<a id="test" href="http://www.baidu.com/" target="_blank">织梦先生</a>
<script type="text/javascript">
    var w = $(document).width();
    if(w < 768){
        $('.image').attr('src','/myimg.com');
        $('.test').attr('href','http://mrdede.com');
        $(".test").text('百度');
    }
</script>
</body>
</html>

原始图片是tulip.jpg，改变后的图片myimg.jpg
a标签改变后的链接是http://mrdede.com/
原始文本是“织梦先生”，改变后文本是“百度”
其中加了判断，当前可使用屏幕宽度小于768时，改变图片链接、a标签链接和文本内容。

六 24

HTML5+JavaScript实现仿微信摇一摇效果

Posted on by

在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。

而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

事件监听

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo.html

把监听事件绑定给 deviceMotionHandler

0
1
2
3
4
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}

获取设备加速度信息 accelerationIncludingGravity

0
1
2
3
4
5
6
7
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity,
        x, y, z;
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    document.getElementById("status").innerHTML = "x:"+x+"<br />y:"+y+"<br />z:"+z;
}

将加速度信息打印置页面，通过演示地址可以看到随着设备的移动，屏幕上数字的变化。

 

摇晃判断

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo_1.html

“摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

0
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
var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
 
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}
 
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();
    if ((curTime - last_update) > 100) {
        var diffTime = curTime - last_update;
        last_update = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
        var status = document.getElementById("status");
        if (speed > SHAKE_THRESHOLD) {
            var text = "x:"+x+"<br />y:"+y+"<br />z:"+z+"<br />speed:"+speed;
            status.innerHTML = text;
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}

100毫秒进行一次位置判断，若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作。

 

然后通过上面2个演示，然后再增加点样式效果，即可模拟一个简单的微信摇一摇界面。

应用演示：简易模拟微信摇一摇

演示地址（手机浏览）：http://mrdede.com/UploadFiles/demo/js/shake/demo_2.html

六 13

JavaScript常用函数收集

Posted on by

脑袋不好使就多记笔记，收集了一些比较常用的javascript函数，以备急用。

字符串长度截取

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function cutstr(str, len) {
    var temp,
        icount = 0,
        patrn = /[^\x00-\xff]/,
        strre = "";
    for (var i = 0; i < str.length; i++) {
        if (icount < len - 1) {
            temp = str.substr(i, 1);
                if (patrn.exec(temp) == null) {
                   icount = icount + 1
            } else {
                icount = icount + 2
            }
            strre += temp
            } else {
            break;
        }
    }
    return strre + "..."
}

替换全部

0
1
2
String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2)
}

清除空格

0
1
2
3
String.prototype.trim = function() {
    var reExtraSpace = /^\s*(.*?)\s+$/;
    return this.replace(reExtraSpace, "$1")
}

清除左空格/右空格

0
1
function ltrim(s){ return s.replace( /^(\s*|　*)/, ""); }
function rtrim(s){ return s.replace( /(\s*|　*)$/, ""); }

判断是否以某个字符串开头

0
1
2
String.prototype.startWith = function (s) {
    return this.indexOf(s) == 0
}

判断是否以某个字符串结束

0
1
2
3
String.prototype.endWith = function (s) {
    var d = this.length - s.length;
    return (d >= 0 && this.lastIndexOf(s) == d)
}

转义html标签

0
1
2
function HtmlEncode(text) {
    return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>')
}

时间日期格式转换

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Date.prototype.Format = function(formatStr) {
    var str = formatStr;
    var Week = ['日', '一', '二', '三', '四', '五', '六'];
    str = str.replace(/yyyy|YYYY/, this.getFullYear());
    str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
    str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
    str = str.replace(/M/g, (this.getMonth() + 1));    str = str.replace(/w|W/g, Week[this.getDay()]);
    str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
    str = str.replace(/d|D/g, this.getDate());
    str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
    str = str.replace(/h|H/g, this.getHours());
    str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
    str = str.replace(/m/g, this.getMinutes());
    str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
    str = str.replace(/s|S/g, this.getSeconds());
    return str
}

判断是否为数字类型

0
1
2
3
4
5
6
7
function isDigit(value) {
    var patrn = /^[0-9]*$/;
    if (patrn.exec(value) == null || value == "") {
return false
    } else {
return true
    }
}

设置cookie值

0
1
2
3
4
5
6
7
8
function setCookie(name, value, Hours) {
    var d = new Date();
    var offset = 8;
    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    var nd = utc + (3600000 * offset);
    var exp = new Date(nd);
    exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
}

获取cookie值

0
1
2
3
4
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null
}

加入收藏夹

0
1
2
3
4
5
6
7
8
9
10
function AddFavorite(sURL, sTitle) {
    try {
window.external.addFavorite(sURL, sTitle)
    } catch(e) {
try {
window.sidebar.addPanel(sTitle, sURL, "")
} catch(e) {
alert("加入收藏失败，请使用Ctrl+D进行添加")
}
    }
}

设为首页

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setHomepage() {
    if (document.all) {
document.body.style.behavior = 'url(#default#homepage)';
document.body.setHomePage('http://w3cboy.com')
} else if (window.sidebar) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
} catch(e) {
alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true")
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);        prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com')
    }
}

加载样式文件

0
1
2
3
4
5
6
7
8
9
10
11
function LoadStyle(url) {
    try {
document.createStyleSheet(url)
    } catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
    }
}

返回脚本内容

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function evalscript(s) {
    if(s.indexOf('<script') == -1) return s;
    var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
    var arr = [];    while(arr = p.exec(s)) {
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
    }
    return s;
}

清除脚本内容

0
1
2
function stripscript(s) {
    return s.replace(/<script.*?>.*?<\/script>/ig, '');
}

Continue reading →

六 10

jQuery DOM 元素方法index()方法获取值为-1，得不到正确的值

Posted on by

$(selector).index()获得第一个匹配元素相对于其同胞元素的 index 位置

0
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
$(".newsTab dd:first-child").addClass("hover");
 
$(".newsList dd:first-child").show();
 
(function(){
 
var _left = $(".newsTab dd.hover").position().left;
 
//alert(_left)
 
$(".newsTab span").css({left: _left});
 
$(".newsTab dd").each(function(index, el) {
 
$(this).click(function(event) {
 
if (!$(this).hasClass('hover')) {
 
$(this).addClass('hover').siblings().removeClass('hover')
 
var _left2 = $(this).position().left;
 
$(".newsTab span").stop(true).animate({left: _left2}, 500);
 
$(".newsList dd").hide();
 
$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
 
};
 
});
 
});
 
}())

不懂装懂，帮朋友修改一个JS效果（点击后不显示同胞元素），JQ方法功能也是现查的手册，测试index()返回值是-1，这一定是不正确了。

结果就是一阵的百度搜索，在开源中国的一篇文章中得到了启发：

$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
修改为
$(".newsList dd").eq($(".newsTab dd").index($(".hover"))).show();

解释：

$(“.newsTab dd”)表示找到newsTab类下的所有的dd，返回一个dd的数组的对象；

后面的.index($(“.hover”))表示返回数组对象中的class为hover的对象的坐标。