Javascript的简单用法

时间：2023-01-31 07:28:11
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
字符串可以是引号中的任意文本。您可以使用单引号或双引号。
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。


1、Confirm的用法：

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

2.substring和substr的用法

 

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,stop)

开始和结束的位置，从零开始的索引

参数     描述
start     必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop     可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
如果 start 或 end 为负数，那么它将被替换为 0。

2.substr 方法

定义和用法

substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

语法

stringObject.substr(start [, length ])

参数    描述
start   必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。

说明

如果start为负数，则start=str.length+start。
如果 length 为 0 或负数，将返回一个空字符串。


如果没有指定该参数，则子字符串将延续到stringObject的最后。

举例：
var str = "0123456789";

alert(str.substring(0));------------"0123456789"
alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
alert(str.substring(2,12));---------"23456789"
alert(str.substring(2,-2));---------"01"
alert(str.substring(-1,5));---------"01234"
alert(str.substring(-1,-5));--------""

alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"56789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
alert(str.substr(2,2));-------------"23"
alert(str.substr(2,5));-------------"23456"
alert(str.substr(2,12));------------"23456789"
alert(str.substr(2,-2));------------""
alert(str.substr(-1,5));------------"9"

正数 - 在字符串的指定位置开始 ；负数 - 在从字符串结尾的指定位置开始；0 - 在字符串中的第一个字符处开始


alert(str.substr(-1,-5));-----------""   

参考网址：http://http://write.blog.csdn.net/postedit?ref=toolbar

3、Target是JavaScript中的语法：

target="_blank":在新窗口中浏览新的页面。
target="_self":在同一个窗口打开新的页面。
target="_parent":在父窗口中打开新的页面。（页面中使用框架才有用）
target="_top" :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

新的连接在网页上打开的方式：

<a href="javascript:void(0)" onclick="openWin(3,this)">株洲</a>
//window.location.href="http://www.w3school.com.cn/tiy/t.asp?f=hdom_confirm"
<script type="text/javascript">
    function openWin(tag,obj)
    {
      obj.target="_self";
      obj.href = "http://www.baidu.com?stationno="+tag;
      obj.click();
    }
</script>

4、getElementById的用法：

通过元素的ID特性来获取元素
例如有入下元素：
<input type="text" id="button1" value="Click Me"/>
那么当调用document.getElementById("button1").Value的时候，返回的就是"Click Me"了

<!DOCTYPE html>
<html>
<head>
<script type="">
function Myfunction(){
 alert(document.getElementById("QQ").innerHTML);
 document.getElementById("QQ").innerHTML = "哈哈，我变了吧";
}
</script>
</script>
</head>

<div id="QQ">我是QQ的InnerHTML, <strong>这也是innerHTML</strong></div>
<input type="button" onclick="Myfunction()" value="Try it!"/>
</body>
</html>


5、在函数里面加上setTimeout("clean()",3000);

延时三秒自动关闭弹出信息

 
 
<html>
<head>
<script>
function check() {
   document.getElementById("QQ").innerHTML='我是逗比我怕谁 ';
   <span style="color:#3366ff;">setTimeout("clean()",3000);</span>
}
function <span style="color:#3366ff;background-color: rgb(192, 192, 192);">clean</span>(){
 document.getElementById("QQ").innerHTML="";
}
</script>
 
 
</head>
<body>
<div id="QQ">我是QQ的InnerHTML, <strong>这也是innerHTML<strong></div>
<input type="button" onclick="check()" value="Tyr it!"/>
</body>
</html>

 
 
6、document.write()
 
 
请使用 document.write() 仅仅向文档输出写内容。
 
 
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
 
 
 
 
<html>
<body>
 
 
<p>My first Page!</p>

 
 
 
 
<input type="button" onclick="myFunction()" value="Check Me!" />

<script>
function myFunction()
{
document.write("糟糕！按键和文档都消失了。");
}
</script>

</body>
</html>
 
 
7、对象的属性以名称和值对的形式 (name : value) 来定义
 
 
<script>
var person={
姓   : "郭",
名   : "雄风",
编号 :  1
};
document.write(person.编号 + ":" +"<br />");
document.write(person.姓);
document.write(person["名"] + "<br />");

</script>
 
 
8、javascript对象
 
 
 
 
<html>
<body>

<script>
person = new Object();
person.name = "郭雄风";
person.age = 23;
document.write(person.name + "今年" + person.age + " 岁了");
</script>

<p><b>注释：</b>郭雄风今年23岁了! </p>
</body>
</html>
 
 
<html>

<head>
<script>
function Myfunction(name, age){
document.write("我叫"+ name +"现在已经" + age + "岁了!");
}
</script>
</head>

<body>
<input type="button" onclick="Myfunction('郭雄风', 23)" value="Check Me!" />  
</body>
</html>
 
 

9、数组Array 
 
<script>
var i;

var cars = new Array("Audi", "BMW", "Volvo");
/*cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";*/
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br />");
}
</script>
//判断数组的最大值 




 
 
<script type="text/javascript">
        function getMax(arr){
            var Max = arr[0];
            for(var i=0;i<arr.length;i++){
                if(Max<arr[i])
                    Max=arr[i];
            }
            return Max;
        }
        var arr=new Array();
        arr[0]=2;
        arr[1]=10;
        arr[2]=3;
        document.write(getMax(arr));
    </script>
 

 

 
 
10、//微软的Ajax库提供的方案——构建委托对象 

 

<script type="text/javascript">
        //微软的Ajax库提供的方案——构建委托对象
        var person = {
            name: "bloss.guo",
            sayHi: function () {
                document.write("你好，我是" + this.name + "<br />");
            }
        }
        var boundFunc = person.sayHi.bind(person, person.sayHi);
        //person.sayHi();
        setTimeout(boundFunc, 3000);
        </script>

    <script type= "text/javascript">
 

 
 
11、结合切换样式 

 

 
 
<div>
        <input type="button" value="toggleClassTest" onclick="toggleClass()" />
        <input type="text" id="txtVal" value="样式切换"  />
 </div>

$(document).ready(function () {
        $("#btnVal1").click(function () {
            $("#txtVal1").toggleClass("class3");
        });
    });

.class3
    {
        font-size:120%;
        color:red;
    }
 
 
 
  
12.输入判断不为空 
  



 
 
    <div>
        <div>
            <table>
            <tr>
                <th>弹出信息验证：</th>
                <td>
                    <asp:TextBox ID="txtMsgLetter" runat="server"></asp:TextBox>
                </td>
            </tr>
            </table>
        </div>
        <div>
            <asp:Button ID="btnSend" runat="server" Text="保存" OnClientClick="Myfunction()" ></asp:Button>
        </div>
    </div>
 
 
<script type="text/javascript">
    function Myfunction() {
        var inputs = document.getElementById("txtMsgLetter").value;
        if (inputs == "" || inputs == null) {
            alert("为空，记得填写");
            return false;
        }
        else {
                alert("不为空，很好！");
               // setTimeout("clean()",3000);
                return true;
                
              }
          }
          //function clean() {
              //window.close();      
          }
 
 
 
  
13、分隔符 
 
 
 
 
   
  
<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>
 
  
结果：
 
  
<span style="font:/normal Simsun; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-stroke-width: 0px;">How,are,you,doing,today?</span><br style="font:/normal Simsun; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; -webkit-text-stroke-width: 0px;" /><span style="font:/normal Simsun; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-stroke-width: 0px;">H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?</span><br style="font:/normal Simsun; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; -webkit-text-stroke-width: 0px;" /><span style="font:/normal Simsun; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-stroke-width: 0px;">How,are,you</span>
 
  



 
 
 
  


 




 


   

 


   

 


   

 


   

 


   

标签：
相关文章