2011

Jun

14

JavaScript获取网页中HTML元素的几种方法
文章分类:XHTML相关

呵呵,最近加入了.net项目,开始学习和使用.net啦,换个口味,有些兴奋。

这个项目中大量用到javascript和ajax,页面上的主要元素都是用ajax请求和javascript动态显示(和我的博客的留言板比较像哈~),以前对javascript也只是一知半解哈,正好乘此机会补习补习O(∩_∩)O~

1、getElementById()

......

2011

Feb

11

兼容IE与火狐的javascript回车提交表单
文章分类:XHTML相关

如果是form用submit提交表单,则回车后即可提交,但项目中很多时候都不需要form,这是则需要回车出发提交事件,来个简单的例子:

XML/HTML代码
  1. <p><input type="text"  onkeydown="return enterSubmit(event)" /></p>  
  2. <p><input type="button" value="提交" id="btn" onclick="login()" /></p>  
JavaScript代码
  1. function enterSubmit(evt){  
  2.     evt = (evt) ? evt : ((window.event) ? window.event : "")  
  3.     var key = evt.keyCode?evt.keyCode:evt.which;  
  4.     if(key == 13){  
  5.         document.getElementById("btn").click();  
  6.         return false;  
  7.     }  
  8. }  
  9. function login(){  
  10.     alert("提交成功!");  
  11. }  

点击此处查看示例。

2010

Dec

30

javaScript与jquery实现锚点平滑移动
文章分类:XHTML相关

最近做项目时需要用到锚点平滑移动的效果,在网上找了两个列子,还不错。

一、用jquery实现的,代码如下:

XML/HTML代码
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         $("a").click(function() {//给所有的a标记添加单击事件;  
  4.             var href = $(this).attr("href");//例如:当点击"滑到底部" 时,获取它的href属性为"#bottom",就会跳转到id为bottom的容器处;  
  5.             var pos = $(href).offset().top;//$(href)就相当于找到$("#bottom")(最下面的标记),找到他距离顶部的距离;  
  6.             $("html,body").animate({ scrollTop: pos }, 3000);//3秒钟  
  7.             return false;  
  8.         });  
  9.     });  
  10. </script>  
  11. <div id="top">平滑跳转到底部:<a href="#bottom">滑到底部</a></div>  
  12. <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />  
  13. <div id="bottom">平滑回到顶部:<a href="#top">回到顶部链接</a></div>  

1、点击此处查看演示效果;
2、优点:代码简洁;
3、缺点:只能用鼠标点击事件触发。

......

2010

May

27

JavaScript获取FCKeditor编辑器内容的方法
文章分类:XHTML相关

最近在做后台文章自动保存功能,自动保存需要用Ajax提交,所以要用javascript获取表单内容。普通输入框内的文字用javascript获取很容易,相信懂JS的童鞋都会,可是FCKeditor就不同了,它是用iframe调用编辑器的,所以直接用ID是获取不到的。网上查找后发现官方是留了此API的,用如下代码即可获取FCKeditor编辑器内容:

var blogcontent = FCKeditorAPI.GetInstance("content").EditorDocument.body.innerHTML;//content是FCKeditor的id

2010

Jan

13

JavaScript中的MD5加密
文章分类:XHTML相关

记得以前学ASP的时候用md5加密密码,需要加载一个md5.asp的文件,才能够使用md5。后来学PHP,PHP中内置了md5函数,可以直接调用,不由感叹PHP之强大。因为最近在搞Ajax留言那部分,在页面不刷新的情况下动态显示留言,其中有Gavaratar头像想需要动态显示,所以需要使用到JavaScript的md5加密Email后获取头像。

JavaScript中也没有内置的md5函数,需要加载一个md5.js的文件,点击此处下载md5.js,在需要用到md5的页面加载该js文件,调用时代码如下:

<script type=”text/javascript” >  
document.write(hex_md5(“123″) );  
</script>

2010

Jan

04

一款很不错的JS日历插件
文章分类:个人日记

效果如图:

调用代码:

......

2009

Dec

24

JavaScript全选与取消全选
文章分类:XHTML相关

全选功能在网页上很常见,方法也很简单,整理了一段该功能的代码:

//全选  
function upCheckAll(){  
    if($("#upcheckboxall").attr("checked") == true) {      
        $("input[name='upcheckbox']").each(  
            function() {  
                if ( ! $(this).attr("disabled")){  
                    $(this).attr("checked", true);   
                }  
            }  
        );   
    }else{    
        $("input[name='upcheckbox']").each(  
            function() {  
                if ( ! $(this).attr("disabled")){  
                    $(this).attr("checked", false);    
                }  
            }  
        );    
    }   
};  
  
//取消全选  
function downCancelCheckAll(){  
    if($("#upcheckboxall").attr("checked") == true){  
        $("#upcheckboxall").attr("checked", false);  
    }  
}
<table border="0" cellspacing="10" cellpadding="0" style="margin-left:200px;">  
    <tr>  
        <td><input type="checkbox" id="upcheckboxall" onclick="upCheckAll()" />td>  
        <td>全选td>  
    tr>  
    <tr>  
        <td><input name="upcheckbox" type="checkbox" onclick="downCancelCheckAll()" />td>  
        <td>记录1td>  
    tr>  
    <tr>  
        <td><input name="upcheckbox" type="checkbox" onclick="downCancelCheckAll()" />td>  
        <td>记录2td>  
    tr>  
<table>

点击此处查看演示。

2009

Dec

22

JavaScript去除字符串两端空格
文章分类:XHTML相关

在使用表单提交数据的时候,有时会不小心在输入框内输入空格,而提交后存入数据库里面的数据并不是自己需要的,于是乎造成了很多不必要的麻烦。为此,PHP中诞生了trim()函数,数据提交到服务器端经过trim()函数后即去掉了两端空格。

可是在用JavaScript验证表单时,却找不到现成的类似函数,需要我们自己写一个类似功能的函数。

/*去除字符串左边的空格*/  
function LTrim(str){  
    for(var k=0; str.length && str.charAt(k)<=" " ; k++){  
        ;  
    }  
    return str.substring(k,str.length);  
}  
/*去除字符串右边的空格*/  
function RTrim(str){  
    for(var j=str.length-1; j>=0 && str.charAt(j)<=" " ; j--){  
        ;  
    }  
    return str.substring(0,j+1);  
}  
/*合并上面的两个函数*/  
function Trim(str){  
    return LTrim(RTrim(str));  
} 

上面的Trim()可去掉字符串两端空格。

......

2009

Nov

12

JavaScript返回上一页并自动刷新的方法
文章分类:XHTML相关

谈到返回上一页,大家或许都会想到history.go(-1)和history.back()等,但是这只是单纯的返回上一页,读取的是缓存中的数据,不一定会达到想要的效果。比如说在某在网站上登陆后返回到上一页,这时需要刷新后才能显示你已登录,就不能仅仅只是返回上一页了。

实现该功能需要用到JavaScript中的document.referrer,什么是document.referrer呢?比如说在http://www.a.com/index.html上有个链接指向http://www.b.com/,当点击http: //www.a.com/index.html上那个链接转到http://www.b.com/时,对http://www.b.com/来说document.referrer就是http://www.aaaa.com/index.html。简单的说就是指当前页的上一个页面的URL。如果用的是Ajax登录,在登录成功后就用location.href = document.referrer;这时即可返回上一页并且刷新(实质上是重新载入上一页),就这么一句话,即可满足你的需求。

2009

Oct

17

IE中只读的innerHTML属性
文章分类:XHTML相关

       编写ajax程序时,经常需要动态生成页面元素,而element的属性innerHTML就是我们经常利用的途径。但今天在为一个table元素的innerHTML时赋值时,在firefox下是好的,但在ie下却没反应,代码如下:

document.getElementById("newline").innerHTML = document.getElementById("newline").innerHTML + tmpstr;

在网上找了一下资料,原因是在ie下,下列元素table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的(注意没有td),所以没法改变,如果想要在ie实现像Firefox下面的效果,需要用jQuery,写法如下:

var temp = $("#idname").html() + tmpstr;  
$("#idname").html(temp);  

下面来看一个实例:

......

页数1/2 12

闲言碎语

又梦见了,忘记真的很难。 (2月8日)

晚上和爸妈吃个饭。 (2月6日)

装修好累哟 (2月4日)

文章分类

最近文章

iOS开发之回调delegate的方法...

iOS开发之使用AES加密(兼容Obj...

事情好多哦

iOS开发之获取本机IP地址的方法

简单记录PC上安装苹果系统

最近评论

日志归档

友情链接

其它功能

随机标签