java学习

javascript字符串属性和方法

toString() 用法：<数值变量>.toString()；返回：字符串形式的数值。如：若
a == 123；则 a.toString() == '123'。
String 字符串对象。声明一个字符串对象最简单、快捷、有效、常用的方法就
是直接赋值。
length 用法：<字符串对象>.length；返回该字符串的长度。
charAt() 用法：<字符串对象>.charAt(<位置>)；返回该字符串位于第<位置>
位的单个字符。注意：字符串中的一个字符是第 0 位的，第二个才是第 1 位的，
最后一个字符是第 length - 1 位的。
charCodeAt() 用法：<字符串对象>.charCodeAt(<位置>)；返回该字符串位于第
<位置>位的单个字符的 ASCII 码。
fromCharCode() 用法：String.fromCharCode(a, b, c...)；返回一个字符串，
该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。
indexOf() 用法：<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置
>])；该方法从<字符串对象>中查找<另一个字符串对象>（如果给出<起始位置>
就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。
所有的“位置”都是从零开始的。
lastIndexOf() 用法：<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起
始位置>])；跟 indexOf() 相似，不过是从后边开始找。
split() 用法：<字符串对象>.split(<分隔符字符>)；返回一个数组，该数组是
从<字符串对象>中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包
含在所返回的数组中。例如：' 1&2&345&678'.split('&')返回数组：1 ,2,345,678。
关于数组，我们等一下就讨论。
substring() 用法：<字符串对象>.substring(<始>[, <终>])；返回原字符串的
子字符串，该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终>
- <始> = 返回字符串的长度（length）。如果没有指定<终>或指定得超过字符
串长度，则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返
回字符串，则返回空字符串。
substr() 用法：<字符串对象>.substr(<始>[, <长>])；返回原字符串的子字符
串，该字符串是原字符串从<始>位置开始，长度为<长>的一段。如果没有指定<
长>或指定得超过字符串长度，则子字符串从<始>位置一直取到原字符串尾。如
果所指定的位置不能返回字符串，则返回空字符串。
toLowerCase() 用法：<字符串对象>.toLowerCase()；返回把原字符串所有大写
字母都变成小写的字符串。
toUpperCase() 用法：<字符串对象>.toUpperCase()；返回把原字符串所有小写
字母都变成大写的字符串。
Array 数组对象。数组对象是一个对象的集合，里边的对象可以是不同类型的。
数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置（既然是
“位置”，就也是从零开始的啦）。
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：
<数组名>[<下标>] = ...;
注意这里的方括号不是“可以省略”的意思，数组的下标表示方法就是用方括号
括起来。
如果想在定义数组的时候直接初始化数据，请用：
var <数组名> = new Array(<元素1>, <元素 2>, <元素3>...);
例如，var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray，
里边的元素是：myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'。
但是，如果元素列表中只有一个元素，而这个元素又是一个正整数的话，这将定
义一个包含<正整数>个空元素的数组。
注意：JavaScript 只有一维数组！千万不要用“Array(3,4)”这种愚蠢的方法
来定义 4 x 5 的二维数组，或者用“myArray[2,3]”这种方法来返回“二维数
组”中的元素。任意“myArray[...,3]”这种形式的调用其实只返回了
“myArray[3]”。要使用多维数组，请用这种虚拟法：
var myArray = new Array(new Array(), new Array(), new Array(), ...);
其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数
组”的元素时：myArray[2][3] = ...;
属性
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。
它等于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要：
myArray[myArray.length] = ...。
方法
join() 用法：<数组对象>.join(<分隔符>)；返回一个字符串，该字符串把数组
中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原
本的内容。
reverse() 用法：<数组对象>.reverse()；使数组中的元素顺序反过来。如果对
数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。
slice() 用法：<数组对象>.slice(<始>[, <终>])；返回一个数组，该数组是原
数组的子集，始于<始>，终于<终>。如果不给出<终>，则子集一直取到原数组的
结尾。
sort() 用法：<数组对象>.sort([<方法函数>])；使数组中的元素按照一定的顺
序排列。如果不指定<方法函数>，则按字母顺序排列。在这种情况下，80 是比 9
排得前的。如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。<方
法函数>比较难讲述，这里只将一些有用的<方法函数>介绍给大家。
按升序排列数字：
function sortMethod(a, b) {
return a - b;
}
myArray.sort(sortMethod);
按降序排列数字：把上面的“a - b”该成“b - a”。

posted @ 2013-03-19 15:17 杨军威阅读(174) | 评论 (0) | 编辑收藏

jquery事件类型

添加css样式

<html>
<head>
<style>
.over{
color:red;
background:#888;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
     $("div").bind("mouseover mouseout", function(){
        $(this).toggleClass("over");
     });
})
</script>
</head>
<body>
<div style="width:100px;height:50px;">滑入.</div>
</body>
</html>

根据事件类型
<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("div").bind("click.plugin",function(){
           $("body").append("<p>click事件</p>");
   });
   $("div").bind("mouseover.plugin", function(){
           $("body").append("<p>mouseover事件</p>");
   });
   $("div").bind("dblclick", function(){
           $("body").append("<p>dblclick事件</p>");
   });
   $("button").click(function() {
       $("div").unbind(".plugin");
   })
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间，删除事件</button>
</body>
</html>

相同事件名称,不同命名空间执行方法

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("div").bind("click",function(){
           $("body").append("<p>click事件</p>");
   });
   $("div").bind("click.plugin", function(){
           $("body").append("<p>click.plugin事件</p>");
   });
   $("button").click(function() {
          $("div").trigger("click!");    // 注意click后面的感叹号
   });
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间，触发事件</button>
</body>
</html>

posted @ 2013-03-19 14:09 杨军威阅读(305) | 评论 (0) | 编辑收藏

jquery自定义事件

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $('#btn').bind("myClick", function(){
                   $('#test').append("<p>我的自定义事件.</p>");
              });
       $('#btn').click(function(){
           $(this).trigger("myClick");
       }).trigger("myClick");
   })
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

<html>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
        $('#old').bind("click", function(){
           $("input").trigger("focus");
       });
       $('#new').bind("click", function(){
            $("input").triggerHandler("focus");
       });
       $("input").focus(function(){
            $("body").append("<p>focus.</p>");
        })
   })
</script>
</head>
<body>
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
</body>
</html>

posted @ 2013-03-19 14:01 杨军威阅读(198) | 评论 (0) | 编辑收藏

jquery移除事件

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $('#btn').bind("click", function(){
                   $('#test').append("<p>我的绑定函数1</p>");
              }).bind("click", function(){
                   $('#test').append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                   $('#test').append("<p>我的绑定函数3</p>");
              });
       $('#delAll').click(function(){
              $('#btn').unbind("click");
       });
$('#delTwo').click(function(){
              $('#btn').unbind("click",myFun2);
       });
   })
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
<button id="delTwo">删除第二个事件</button>
</body>
</html>

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $('#btn').one("click", function(){
                   $('#test').append("<p>我的绑定函数1</p>");
              }).one("click", function(){
                   $('#test').append("<p>我的绑定函数2</p>");
              }).one("click", function(){
                   $('#test').append("<p>我的绑定函数3</p>");
              });
   })
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

posted @ 2013-03-19 10:19 杨军威阅读(524) | 评论 (0) | 编辑收藏

jquery得到事件类型，href，

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
   $("a").click(function(event) {
      alert(event.type);//获取事件类型
alert(event.target.href);//获取触发事件的<a>元素的href属性值
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
      return false;//阻止链接跳转
   });
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>

posted @ 2013-03-19 09:46 杨军威阅读(607) | 评论 (0) | 编辑收藏

jquery阻止表单提交

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val(); //获取元素的值
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
             event.preventDefault(); //阻止默认行为 ( 表单提交 )或者return false;
       }
   })
})
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>
</html>

posted @ 2013-03-19 09:38 杨军威阅读(4851) | 评论 (3) | 编辑收藏

jquery事件冒泡

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
   $('span').bind("click",function(event){
       var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
       $('#msg').html(txt);
       event.stopPropagation();    // 阻止事件冒泡或者return false;
   });
   // 为div元素绑定click事件
   $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
       $('#msg').html(txt);
       event.stopPropagation();    // 阻止事件冒泡或者return false;
   });
   // 为body元素绑定click事件
   $("body").bind("click",function(){
       var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
       $('#msg').html(txt);
   });
})
</script>
</head>
<body>
<div id="content">
   外层div元素
   <span>内层span元素</span>
   外层div元素
</div>

<div id="msg"></div>
</body>
</html>

posted @ 2013-03-19 09:35 杨军威阅读(217) | 评论 (0) | 编辑收藏

jquery隐藏显示的合成事件

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").hover(function(){//鼠标移动事件
        $(this).next().show();
   },function(){
        $(this).next().hide();
   })
})
</script>
</head>
<body>
<div id="panel">
   <h5 class="head">什么是jQuery?</h5>
   <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和

跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了

JavaScript程序员的设计思路和编写程序的方式。
   </div>
</div>
</body>
</html>

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
.highlight{ background:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){//鼠标点击事件
           $(this).addClass("highlight");
           $(this).next().show();
   },function(){
           $(this).removeClass("highlight");
           $(this).next().hide();
   });
})
</script>
</head>
<body>
<div id="panel">
   <h5 class="head">什么是jQuery?</h5>
   <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和

跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了

JavaScript程序员的设计思路和编写程序的方式。
   </div>
</div>
</body>
</html>

posted @ 2013-03-19 09:26 杨军威阅读(890) | 评论 (0) | 编辑收藏

jquery点击，鼠标模块的隐藏和显示

<head>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("click",function(){
        var $content = $(this).next();
        if($content.is(":visible")){
           $content.hide();
       }else{
           $content.show();
       }
   })
})
</script>
</head>
<body>
<div id="panel">
   <h5 class="head">什么是jQuery?</h5>
   <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和

跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了

JavaScript程序员的设计思路和编写程序的方式。
   </div>
</div>
</body>
</html>

<html >
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("mouseover",function(){
        $(this).next().show();
   });
      $("#panel h5.head").bind("mouseout",function(){
         $(this).next().hide();
   })
})
</script>
</head>
<body>
<div id="panel">
   <h5 class="head">什么是jQuery?</h5>
   <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和

跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了

JavaScript程序员的设计思路和编写程序的方式。
   </div>
</div>
</body>
</html>

<html>
<head>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
   });
   $("#panel h5.head").mouseout(function(){
         $(this).next().hide();
   })
})
</script>
</head>
<body>
<div id="panel">
   <h5 class="head">什么是jQuery?</h5>
   <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和

跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了

JavaScript程序员的设计思路和编写程序的方式。
   </div>
</div>
</body>
</html>

posted @ 2013-03-18 17:27 杨军威阅读(729) | 评论 (0) | 编辑收藏

jquery加载时间比较

<head>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   var startTime = new Date().getTime();
   $(document).ready(function(){
       test1();
})

function test1(){
      var endTime2 = new Date().getTime();
      var a = endTime2 - startTime;
      $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
}

function test2(){
       var endTime1 = new Date().getTime();
       var b = endTime1 - startTime;
       $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
}
</script>
</head>
<body onload="test2();">
   <img src="demo.jpg" style="width:200px;height:200px;"/>
</body>
</html>

posted @ 2013-03-18 16:15 杨军威阅读(217) | 评论 (0) | 编辑收藏

仅列出标题

javascript字符串属性和方法

jquery事件类型

jquery自定义事件

jquery移除事件

jquery得到事件类型，href，

jquery阻止表单提交

jquery事件冒泡

jquery隐藏显示的合成事件

jquery点击，鼠标模块的隐藏和显示

jquery加载时间比较

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜