javascript基础_03

1、split() 方法：

• split() 方法用于把一个字符串分割成字符串数组。
• 语法：
  stringObject.split(separator,howmany)；

• 参数
  separator:必需的，字符串或正则表达式，从该参数指定的地方分割 stringObject。 （按什么方式分割）。
  howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

• 返回值
  返回的是一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
  但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）

• 例子：

<script type="text/javascript">
var str="How,are,you,doing,today?"
  document.write(str.split(",") )
  document.write(str.split(",",3))
script>

结果为：

2、JS中的循环:

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块

• do/while - 同样当指定的条件为 true 时循环指定的代码块
  这里只有for/in 在java中没用过，其余的用法是一样的，这里主要说下for/in的用法。

• For/In循环：

  • JavaScript for/in 语句循环遍历对象的属性： 例子：

        var person={
                name:"小强",
                sex:"男",
                age:18,
            };
            var str;    
            for(i in person)
            {
                str=str+person[i];
            }
            alert(str);
        }

这样就可以遍历出person对象里面的所有属性。
3、用jquery的方法获取对象

• 用js是document.getElementById(“id”);来获取对象
• 用jQuery是用$(#id)来获取的
  例子：

function testJQ()
{
//这一句就给span标签里面的内容重新赋值了。
    $("#stext").text("你好吗");       
}
//body里面的内容
"stext">这里是span</span>

4、js中常用事件

• onclick事件：单击触发。
• ondblclick事件：双击触发.
• onload 和 onunload 事件
  
  • onload 和 onunload 事件会在用户进入或离开页面时被触发。
  • onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  • onload 和 onunload 事件可用于处理 cookie。
  • 例子：

            function testG()
            {
                alert("欢迎进入页面");
            }
            function testH()
            {
                alert("欢迎下次访问");
            }
            window.onload=testG;
            window.onunload=testH;

在进入页面会弹出”欢迎进入页面”,离开页面会弹出”欢迎下次访问”。

• onchange 事件：当内容发生改变时触发.事件常结合对输入字段的验证来使用.
  
  • 例子：

        function changeC()
        {
            var province =document.getElementById("province");

            var city=document.getElementById("city");

            if(province.options[province.selectedIndex].text=="四川省")
            {   
                city.options[city.selectedIndex].text="绵阳市";

            }
        }
        //body里面的内容
     "province" onchange="changeC()">
        <option >四川省option>
        <option >辽宁省option>
     
     "city">
        <option>成都市option>
        <option>大连市option>
     
//这里只是简单演示下onchange事件的用法

/* 一：javascript原生的方法

     1:拿到select对象： var  myselect=document.getElementById("test");

     2：拿到选中项的索引：var index=myselect.selectedIndex ;  // selectedIndex代表的是你所选中项的index

     3:拿到选中项options的value：  myselect.options[index].value;

     4:拿到选中项options的text：  myselect.options[index].text;

    二：jquery方法（前提是已经加载了jquery库）

    1:var options=$("#test option:selected");  //获取选中的项

    2:alert(options.val());   //拿到选中项的值

    3:alert(options.text());   //拿到选中项的文本   
    */

• onmouseover 和 onmouseout 事件:
  1.onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

• onmousedown和onmouseup事件：
  1.onmousedown鼠标按下触发，注意是按下没松开。
  2.onmouseout 鼠标松开的时候触发.
  4、 JavaScript HTML DOM 元素（节点）

• 添加HTML元素：

  • 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
  • 例子：

        function testA()
        {
        //这段代码创建新的 
 元素：
            var para=document.createElement("h1");
        //如需向 
 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
            var node=document.createTextNode("这是新标签");
        //然后您必须向 
 元素追加这个文本节点：
            para.appendChild(node);
        //最后您必须向一个已有的元素追加这个新元素。
            var div=document.getElementById("div1");
            div.appendChild(para);
        }
//body里面的代码
     
"div1">
     "testA();">点击创建

点击按钮就会创建一个P标签并向P标签里面添加了内容，注意查看源代码的时候里面并没有新增P标签。

• 删除已有的 HTML 元素：
  
  • 例子：

function testB()
        {
            var parent=document.getElementById("div2");
            var node=document.getElementById("p2");
            parent.removeChild(node);
        }
//body里面的代码
 
"div2">
         
"p1">这里是p1
         
"p2">这里是p2
      
      //点击删除过后就会删除第二个P标签
      "testB();">点击删除P2

• window.location
  
  • 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http:// 或 https://）
  • 例子：

        function testE()
        {
            var name=document.getElementById("name").value;
            location.href="https://www.baidu.com/baidu?wd="+name+"&tn=monline_dg&ie=utf-8";
        }

//body里面的内容
 
"">
          type="text" id="name"/>
          type="button" value="提交" onclick="testE()">
      
   //这样就可以把文本框填的内容通过百度搜索出来。

结果：