function swt_cons(){
var chats=document.characterSet||document.charset;
var chats=chats.toLowerCase();
if(!chats){
alert(“error”);
}
if(chats==”utf-8″){
document.writeln(“<script charset=\”utf-8\” language=\”javascript\” src=\”http://blog.aiwebcom.com/utf8.js\”></script>”);
}else{
document.writeln(“<script language=\”javascript\” src=\”http://blog.aiwebcom.com/gbk.js\”></script>”);
}
}

swt_cons();

 

前几天 写一个字符串分割转换效果,当时输出的时候确出现了 undefined

<div class=”box_left_list_content”>
<ul>
<li >
<p class=”l”>111111111</p>
<div class=”l artid” id=”artid1″>乐天熊字饼,苹果,萝卜,咸鱼</div>
</li>
<li >
<p class=”l”>2222222222</p>
<div class=”l artid” id=”artid2″>乐天熊字饼,苹果、萝卜,咸鱼</div>
</li>
</ul>
</div>

js代码

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

执行结果会多出一个undefined。 后来问了一个大神朋友 才发现了问题

js声明变量没有赋值的时候是undefined类型,undefined类型遇到+号会被隐式转换为字符串,所以咯 就会多出了一个undefined了

所以在声明  var keywts=‘’  这样就可以了。

最终js

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts=‘’;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

 

下面是商务通的url地址 麻瓜程序员要提取其中的 &p后面的参数 , 这个是记录商务通的来源地址

var gjurl=”http://ala.zoossoft.com/LR/Chatpre.aspx?id=ALA99462251&cid=141650343471279156111&lng=cn&sid=1447057520936281725109&p=http%3A//ruxian.020gb.net/mtzf/341.html&rf1=http%3A//ruxian.020gb&rf2=.net/&e=%u4E73%u817A%u79D1pc%u7AD9%u4E2D%u95F4%u5F39%u7A97%u94FE%u63A5&bid=&d=1447063405416″;
gjurl=gjurl.split(“&”);
for(var i=0;i<gjurl.length;i++){
if(gjurl[i].indexOf(“p=”)!=-1){
var sjurl=unescape(gjurl[i].substr(2));
alert(sjurl);
}
}

 

css和js部分,记得重新引用你自己的jquery库 我这个是本地的jquery库

<script src=”http://localhost:18111/templets/default/js/jQuery1_18.js” type=”text/javascript”></script>
<style type=”text/css”>
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type=”text/javascript”>
var _c = _h = 0;
$(function(){
$(‘#play > a’).click(function(){
var i = $(this).attr(‘alt’) – 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$(“#pic img”).hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval(“auto()”, 1000);
}
function change(i)
{
$(‘#play > a’).css(‘background-color’,'#E8FCEB’).eq(i).css(‘background-color’,'#C6FF5E’).blur();
$(“#pic img”).hide().eq(i).fadeIn(‘slow’);
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>

html部分

<div id=”pic”>
<img src=”img1.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img2.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img3.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img4.jpg” width=”300″ height=”200″ alt=”" />
</div>
<div id=”play”>
<a href=”###” alt=”1″ style=”background-color:#C6FF5E”>1</a>
<a href=”###” alt=”2″ >2</a>
<a href=”###” alt=”3″ >3</a>
<a href=”###” alt=”4″ >4</a>
</div>

 

 

如果一个项目接手的人比较多或者是以前的老项目,大家肯定碰到过用jquery会影响已有的页面效果,或者重复引用jquery库造成莫名其妙的bug,直接上代码,很简单一句话代码搞定:

<scripttype=”text/javascript”>window.jQuery || document.write(‘<scripttype=”text/javascript”src=”/js/jquery.min.js”></script>’);</script>

 

css部分

.swt_bo{background:#fff; position:fixed; bottom:2px; right:2px; z-index:99999; width:294px; height:169px; padding:3px; border:3px solid #b2b2b2; overflow:hidden; _position:absolute;_top:exprssion(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
.swt_top{ width:294px; height:29px; overflow:hidden; position:relative;}
.swt_top a,.swt_top span{ display:inline-block; float:left; overflow:hidden;}
.swt_top a.swt_on{ width:120px; height:29px; }
.swt_top span{ width:160px; height:28px; border-bottom:1px solid #ccc; line-height:29px; color:#e84040; font-size:12px; font-weight:bold; }
.swt_top span.swt_close{ cursor:pointer; border:none; width:16px; height:16px; background:url(/swt/swt_close.png) no-repeat top; clear:both; position:absolute; top:0px; right:0px; }
.swt_list{ height:103px; overflow:hidden; margin-bottom:10px;}
.swt_list li,.swt_list p{ border-bottom:1px dashed #ccc; overflow:hidden;}
.swt_list p{ height:33px; line-height:34px; font-size:13px;}
.swt_list p a{ float:right; color:#ff0000; margin-right:20px;}
.swt_list p strong a{ float:left; margin:0px; color:#000;}
.swt_list li{ height:22px; line-height:22px; background:url(/swt/fixedbox_arrow.png) no-repeat 3px center; text-indent:1em }
.swt_list li a{ color:#000; font-size:12px;}
.swt_list_w{ height:23px; line-height:23px; overflow:hidden;}
.swt_list_w ul{ width:225px; overflow:hidden;}
.swt_list_w ul li{ height:23px; line-height:23px; background:url(/swt/4.jpg) no-repeat 3px center; text-indent:1.3em;}
.swt_list_w ul li a{ font-size:12px; color:#000; }
.swt_list_w ul li a span{ color:#ff0000; font-size:16px;}
.swt_list_w .swt_ok{ float:right;}
.swt_bo a:hover{ color:#ff0000;}

html部分

<div class=”swt_bo” id=”swt_bos”>
<div class=”swt_top”><a href=”http://blog.aiwebcom.com” class=”swt_on”><img src=”/swt/swt_anl.gif” title=”在线免费咨询” alt=”在线免费咨询”></a><span>在南穗,找到最高的自己!</span><span class=”swt_close” target=”_parent”></span></div>
<div class=”swt_list”>
<ul>
<p><a href=”http://blog.aiwebcom.com”>更多详情</a><strong><a href=”http://blog.aiwebcom.com”>暑期增高好礼大放送</a></strong></p>
<li><a href=”http://blog.aiwebcom.com”>身高在线预测、把握未来</a></li>
<li><a href=”http://blog.aiwebcom.com”>长高6厘米,走向好人生</a></li>
<li><a href=”http://blog.aiwebcom.com”>母爱与正确的增高方法,助我远离“矮矬穷”</a></li>
</ul>
</div>
<div class=”swt_list_w”><a href=”http://blog.aiwebcom.com” class=”swt_ok”><img src=”/swt/5.jpg” alt=”马上预约” title=”马上预约”></a>
<ul class=”swt_ul”>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>21</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>22</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>23</span></a></li>
</ul>
</div>
</div>

js内容 记得要添加jquery库

$(function(){
var _wrap=$('ul.swt_ul');//定义滚动区域
var _interval=4000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
var swt_times=6000;
var swt_open=function(){
$(".swt_bo").animate({height:'169px'},"slow");
$(".swt_close").css("backgroundPosition","top");
}
var swt_close=function(){
$(".swt_close").css("backgroundPosition","bottom");
$(".swt_bo").animate({height:'30px'},"slow");
var timing = setTimeout(swt_open,swt_times);
}
$(".swt_close").toggle(swt_close,swt_open);

});
 

window.opener是当前页面A通过open方法弹出一个窗口B,那在B页面上 window.opener就是A

window.parent是当前页面C通过location.href转到新的页面D,那在D页面上window.parent就是B

或者是页面E里套一个frame为F,那F页面的window.parent就是E

A页面通过open方法打开B页面,B页面通过location打开C页面,C页面上刷新A页面
function refreshParenetWindow( refreshMethod )
{
switch( refreshMethod )
{
case “ButtonClick”: oParentButton = window.parent.opener.document.getElementById( “btnSearch” );
oParentButton.click();
break;
case “Location”: window.opener.navigate(window.opener.location.href);
break;
default: window.opener.navigate(window.opener.location.href); break;
}
}
A页面通过open方法打开B页面,B页面通过open打开C页面,C页面上刷新A页面在B页面的onunload事件中写一段刷新A页面的javascript方法,在C页面关闭的时候,关闭B页面,就可以实现。

document.referrer 用法

referrer 描述: document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL。

举例:

1. a.html文件内容如下: 浏览b.html
2. b.html文件中的内容如下:
3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是: http://127.0.0.1:8180/a.html 说明: 经过测试,需要将两个文件放在服务器中才能得到想要的结果,若直接在本地文件夹中则得到空字符串,若直接在浏览器地址栏中输入b.html的URL地址或使用打开菜单访问b.html,则document.referrer的值为空字符串。

js操作frame详细解说,window.opener和window.parent的区别

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent
window.opener引用的是window.open打开的页面的父页面。

window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.

可以这样
window.frames[0].document.getElementById(‘xx’);
可以这样
window.frames[0].document.body.innerHTML;

frm = window.parent.window.frames['uploadFrame'];
frmDocument = frm.document;
frm.sb(3); //sb 是uploadFrame页面里的一个函数

对于firefox
如果你遇到报错:parent.document.frames has no properties
换为如下代码就可以了,这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实 frames 集合并不是挂在 document 而是挂在 window 对象下.

注意这样修改frame里的页面有限制,就是必须是同域下的,否则无法访问
如果是同一域下,但是子域名不同,那么涉及到的js,html文件都加上一句。
document.domain = xxx.com [这里填写你的域名]

document.getElementById(‘iframeid’).contentWindow.document.getElementById(‘someelem

 

var urls=”http://zuiretv.com”;
function opens(){
if(navigator.userAgent.indexOf(“MSIE”)>0){window.opener.navigate(urls)}else{
window.opener.location.href=urls;
}
}
var in_search=document.referrer.toLowerCase();
if(in_search.indexOf(“.baidu.com”)>0){opens();}

这里主要是 当你用百度搜索进入你的网站的时候,就会将之前用来收的的父窗口就会跳转到相应的url地址 例如我上面的就会跳转到 “zuiretv.com” 这个地址。
其实这个还可以用来做弹窗广告。

 

其实使用php也可以判断ip所在的城市是哪里,不过如果只能使用js呢?那也可以实现,只要使用 其他网站提供的js ip数据库就可以了

http://pv.sohu.com/cityjson?ie=utf-8 这是 搜狐的ip数据库

打开可以看到 一下内容

var returnCitySN = {"cip": "116.23.98.75", "cid": "440100", "cname": "广东省广州市"};
那接下来就简单了,调用对象的属性就可以了

<script type=”text/javascript” src=”http://pv.sohu.com/cityjson?ie=utf-8″></script>
<script type=”text/javascript” >
document.write(returnCitySN.cname);
</script>

这样就可以出现你当前ip所在的城市了。

还有其他网站的ip数据库

http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 这是新浪的

打开出来的是:

var remote_ip_info ={"ret":1,"start":"116.21.0.0","end":"116.23.255.255","country":"\u4e2d\u56fd","province":"\u5e7f\u4e1c","city":"\u5e7f\u5dde","district":"","isp":"\u7535\u4fe1","type":"","desc":""};

使用方法跟上面一样 改下对象名称和相应的属性就好了 .

 

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$(‘#msg’)等同于JQuery(‘#msg’)的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。
第一种情况:jquery.js在prototype.js之后进行引入,如:

<script src=”prototype.js” type=”text/javascript”/>
<script src=”jquery.js” type=”text/javascript”/>

在这种情况下,我们在自己的js代码中如下写的话:

$(‘#msg’).hide();

$永远代表的是jquery中定义的$符号,也可以写成JQuery(‘#msg’).hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如:

<script src=”jquery.js” type=”text/javascript”/>
<script src=”prototype.js” type=”text/javascript”/>

在这种情况下,我们在自己的js代码中如下写的话:

$(‘#msg’).hide();

$此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery(‘#msg’).hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。它的返回值是JQuery。当在代码中调用了该 方法以后,我们就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。如下:

JQuery.noConflict();

//此处不可以再写成$(‘#msg’).hide(),此时的$代表prototype.js中定义的$符号。
JQuey(‘#msg’).hide();

自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。

二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:

var $j=JQuery.noConflict();
$j(‘#msg’).hide();//此处$j就代表JQuery

自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:

JQuery.noConflict();
JQuery(document).ready(function($){
$(‘#msg’).hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$.
});

或者使用如下语句块:

(function($){
…..
$(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:

代码
<script src=”jquery.js” type=”text/javascript”/>
<script src=”prototype.js” type=”text/javascript”/>
<script type=”text/javascript”>

(function($){
…..
$(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)
</script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

 

以上是处理的原理,
当然用最简单的更改命名方法
var j = jQuery.noConflict();

也就是用j代替了$
以后自己写jq库的时候尽量避免用$,养成个良好的习惯吧

© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha