javascript基础_03

最新推荐文章于 2024-11-02 12:42:04 发布

神秘人998

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量302

点赞数

分类专栏： java 文章标签： javascript js常用事件

本文链接：https://blog.csdn.net/m0_38112363/article/details/75042544

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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里面的内容
<span id="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里面的内容
     <select id="province" onchange="changeC()">
        <option >四川省</option>
        <option >辽宁省</option>
     </select>
     <select id="city">
        <option>成都市</option>
        <option>大连市</option>
     </select>
//这里只是简单演示下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()
        {
        //这段代码创建新的 <p> 元素：
            var para=document.createElement("h1");
        //如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
            var node=document.createTextNode("这是新标签");
        //然后您必须向 <p> 元素追加这个文本节点：
            para.appendChild(node);
        //最后您必须向一个已有的元素追加这个新元素。
            var div=document.getElementById("div1");
            div.appendChild(para);
        }
//body里面的代码
     <div id="div1"></div>
     <button onclick="testA();">点击创建</button>

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

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

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

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里面的内容
 <form action="">
          <input type="text" id="name"/>
          <input type="button" value="提交" onclick="testE()">
      </form>
   //这样就可以把文本框填的内容通过百度搜索出来。