javaScript學習基礎篇(3)(字串)

小溪彼岸發表於2016-06-27
JavaScript字串
  • javaScript字串的擷取
    • slice(a,b) 擷取[a,b)之間的內容
    • slice(a, -b) 擷取[a,-b)之間的內容
    • substring（a,b） 擷取[a,b)之間的內容
    • substring（a,-b） 擷取[0,b)之間的內容
    • substr(a,b) 擷取[a,b]之間的內容
<script type="text/javascript">
    var isString = "hello world!";
    document.write(isString.slice(1,3));
    document.write("<br>");
    document.write(isString.substring(1,3));
    document.write("<br>");
    document.write(isString.substr(1,3));
    document.write("<br>");
    document.write(isString.slice(1,-3));
    document.write("<br>");
    document.write(isString.substring(1,-3));
    document.write("<br>");
    document.write(isString.substr(1,-3));
    document.write("<br>");
</script>
  • javaScript的字元查詢
<script type="text/javascript">
     var isString = "hello world!";
     document.write(isString.indexOf("w")+"<br>");
     document.write(isString.indexOf("w",2)+"<br>");//可選值從第幾個字元開始向後找
     document.write(isString.lastIndexOf("w")+"<br>");
     document.write(isString.lastIndexOf("w",8)+"<br>"); //可選值從第幾個字元開始向前找
 </script>
  • javaScript字串的內容匹配
    如果存在列印返回內容，不存在返回null
<script>
    var isString = "hello world";
    document.write(isString.match('hello'));
</script>

*javaScript字串的替換

<script>
    var isString = "hello world";
    document.write(isString.replace('hello','zw'));
</script>

*javaScript字串大小寫轉換

<script>
    var isString = "hello world";
    document.write(isString.toUpperCase()+"<br>");
    document.write(isString.toLowerCase());
</script>
  • javaScript字串的拼接和拆分
<!--字串的拆分-->
<script type="text/javascript">
    var map = "china,USA,Briain";
    var newMap = map.split(",");
    document.write(newMap +"===>"+typeof (newMap));
</script>
  • javaScript 事件
    檢查cookie是否可用
    <script>
    //檢查是否支援cookie
        function checkCookies()
        {
            if (navigator.cookieEnabled==true)
            {
                alert("已啟用 cookie")
            }
            else
            {
                alert("未啟用 cookie")
            }
        }
    </script>
    <body onload="checkCookies();">
    </body>

檢視顏色值

<script>
function changeColor(id){
            id.style.backgroundColor = "#795548";
        }
        function changeText(id){
            id.innerHTML = "div的顏色值#795548";
        }
</script>
<div id="div1" onclick="changeColor(this)">
  <p onclick="changeText(this)">點我檢視div的顏色值</p>
</div>

文字內容改變

<script>
//將文字內容轉換為大寫
        function textChange(){
            var x=document.getElementById("fname");
            x.value=x.value.toUpperCase();
        }
 </script>
<div id="div2">
    <input type="text" id="fname" onchange="textChange();">
</div>

滑鼠事件

<script>
//滑鼠的移入移出
        function movein(){
            document.getElementById("div3").innerHTML = "滑鼠移入";
        }
        function moveout(){
            document.getElementById("div3").innerHTML = "滑鼠移出";
        }
</script>        
<div id="div3" onmouseover="movein()" onmouseout="moveout()">
   滑鼠movein ,moveout
</div>

動態新增節點

<script>
function addPara() {
            var para = document.createElement("p");
            para.style.backgroundColor = "#607D8B" ;
            var node = document.createTextNode("這是新段落。");
            para.appendChild(node);

            var element = document.getElementById("div4");
            element.appendChild(para);
        }
        //移除子節點
        function remoItem() {
            var child = document.getElementById("div4");
//            child.parentNode.removeChild(child);//可以
              for (var i = 0;i<child.childNodes.length;i++){
                  document.write(child.childNodes[i]);
              }
        }
</script>
<div id="div4" onclick="addPara()">
    <p>段落1</p>
    <p>段落1</p>
</div>
<p onclick="remoItem()">移除子節點</p>

顯示一個時鐘效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript">
    function startTime()
    {
        var today=new Date();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        //如果分和秒小於10顯示為0x
        m=checkTime(m);
        s=checkTime(s);
        document.getElementById('txt').innerHTML=h+":"+m+":"+s;
        t=setTimeout('startTime()',500);
    }

    function checkTime(i)
    {
        if (i<10)
        {i="0" + i;}
        return i;
    }
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

相關文章