【js】

JavaScript String 对象：

创建方式：

var s1 = "hello" ;

var s2 = new String("world")

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

JavaScript Array 对象：

js中数组的特性：

　　//可以装任何类型

　　//无需自定义长度，可以自增加

join方法　　//将数组中的字符串元素进行拼接

如：

var arry = ["hello", "world"].join("+");　　　　//hello+world

push pop unshift shift方法

如：

var arry = [1,2,3,4,5,6];

arry.push(7);　　[1,2,3,4,5,6,7]

arry.pop();　　　[1,2,3,4,5,6]

arry.unshift(0);　　[0,1,2,3,4,5,6]

arry.shift();　　　　[1,2,3,4,5,6]

排序 sort reverse

var arry = [1,20,3,4];

arry.reverse()　　 [4,3,20,1]

arry.sort()　　　　[1,20,3,4]  //比较第一位

arry.sort((function (a,b){return a-b;}))　　　[1,3,4,20]

JavaScript Date：

Date方法

如：

    var t = new Date();
    var year = t.getFullYear();
    var month = t.getMonth() + 1;
    var day = t.getDate();
    var hours = t.getHours();
    var minutes = t.getMinutes();
    var week = t.getDay();
    var weekarry = ['星期天', "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    alert(year+"年"+month+"月"+day+"日 "+hours+": "+(minutes>10?minutes:"0"+minutes)+" "+ weekarry[week])

JavaScript BOM window：

confirm

var ret = confirm("是否确认下载!")　　//确认返回true 取消返回false

var ret = prompt(hello)　　　　　　//返回值取决于输入框

JavaScript BOM window 定时器：

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
clearInterval()　
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
clearTimeout()

如：

<body>

    <input type="text" id="txt" style="width:280px"/>
    <input type="button" value="start" onclick="start()"/>
    <input type="button" value="stop" onclick="stop()"/>
    <script>
        function get_time() {
            var t = new Date();
            var year = t.getFullYear();
            var month = t.getMonth() + 1;
            var day = t.getDate();
            var hours = t.getHours();
            var minutes = t.getMinutes();
            var seconds = t.getSeconds()
            var week = t.getDay();
            var weekarry = ['星期天', "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            time = (year+"年"+month+"月"+day+"日 "+hours+":"+(minutes>10?minutes:"0"+minutes)+":"+seconds+" "+ weekarry[week]);
            return time;
        }

        var startid;
        function start() {

            if (startid == undefined)
            {
                set_time()
                startid = window.setInterval(set_time, 1000);
            }

        }
        function set_time() {
            var txt = window.document.getElementById("txt");
            txt.value = get_time();
        }
        function stop() {
            window.clearInterval(startid);
            startid = undefined;
        }
    </script>
</body>

JavaScript BOM history：

属性：history.length　　//返回历史列表中的网址数

方法：

history.forward（） //加载 history 列表中的前一个 URL

history.back（）　　//加载 history 列表中的下一个 URL

history.go(number|URL) //加载 history 列表中的某个具体页面（-1上一个页面，1前进一个页面) -2 后退2页

JavaScript BOM location：

属性

location.href="http://www.baidu.com"　　//相当于跳转至百度

方法：

<input type="button" value="refresh" onclick="location.reload()">　　//刷新页面

JavaScript DOM document：

对文档树进行导航：

var ele = document.getElementById()　　//通过ID获取标签元素　　未找到返回null

ele.firstElementChild　　　　　　　　　　 //获取第一个子标签元素

ele.lastElementChild　　　　　　　　　　　//获取最后一个子标签元素

ele.nextElementSibling　　　　　　　　　　//获取下一个兄弟标签元素

ele.previousElementSibling　　　　　　　　//获取上一个兄弟标签元素

ele.parentElement　　　　　　　　　　　　　//父节点标签元素

ele.children　　　　　　　　　　　　　　　　//获取所有子标签

查找方式：
页面全局查找 通过document 
1.通过ID 属性查找 ID属于唯一 直接返回标签元素
var ele = document.getElementById()

2.通过class 属性查找 不唯一，返回一个数组
var ele = document.getElementsByClassName()

3.通过（tag）标签名字查找　　不唯一，返回一个数组
var ele = document.getElementsByTagName()

4.通过name 属性查找 不唯一，返回一个数组
var ele = document.getElementsByName()
局部查找 通过document查找到的标签元素 只能通过TagName 和ClassName

JavaScript DOM 事件

创建事件的两种方式：

1.在标签添加事件属性

<input id="csClick" type="button" value="单击事件" onclick="cSingleClick()">

<script>

　　function cSingleClick(){

　　　　alert("触发了单击事件")

　　}

</script>

2.在js里导航标签添加事件

document.getElementById("csClick").onclick=function(){

　　　　alert("触发了单击事件")

　}

常用的事件：

onclick　　　　　//单击

ondblclick　　　 //双击

onfocus　　　　 //获得焦点　　应用场景：作用于输入框提示用户名等

onblur　　　　 //失去焦店　　应用场景：用户离开某个输入框时，代表已经输入完成，我们对它进行合法性验证

onchange　　 //域的内容被改变　　应用场景：通常用于表单元素，当元素内容改变时触发（三级联动）

onkeydown　　 //某个键盘按键被按下应用场景：当用户的最后一个输入框按下回车按键时，表单提交

onckypress　　//某个键盘按键被按下并松开。

onkeyup　　　　//耨个键盘按键被松开

onload　　　　//一张页面或者一副图像完成加载。可以应用于script 当页面加载完成后再运行js<感觉没什么乱用>

onmousedown //鼠标按钮被按下

onmousemove //鼠标被移动

onmouseout //鼠标从某元素移开　　应用场景：与移动元素之上联合使用、移向移开元素改变颜色或者图片等

onmouseover //鼠标移动到某元素之上

onselect　　　//文本被选中

onsubmit　　 //确认按钮被单击

事件改变文本颜色例子例子：　　

    <h1 onmouseover="ok()" onmouseout="on()" style="color: blue;" id="hello">hello</h1>
    <script>

        function ok() {
            var txt = document.getElementById("hello")
            txt.style="color: black;"
        }
        function on() {
            var txt = document.getElementById("hello")
            txt.style="color: blue;"

        }
    </script>

onsubmit：

　　　//当表单在提交时触发，该属性也只能给form元素使用　　应用场景：表单提交前验证合法性，是否阻止提交。

第一种：

    <form onsubmit="return sbVerification()">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="登录">
    </form>
    <script>
        function sbVerification() {
            //验证是否合法，不合法返回false 则不提交表单
            return false；
        }

    </script>

第二种：

    <form id="fUserForm">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="登录">
    </form>
    <script>
        document.getElementById("fUserForm").onsubmit=function () {
            //验证是否合法，不合法返回false 则不提交表单
            return false；
        }
    </script>

1.除了return false还可以使用

event里面的方法 event.preventDefault() 　　//通知浏览器不要执行与事件相关联的默认动作

1.关于为什么第一种onsubmit需要return：

使用大白话来说第二种就如同c++，java等语言中重写函数，第一种就如重写需写return，返回一个是否成功。是否成功取决于return后面方法返回值。（意思差不多是这个意思，但说的贼乱。）

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

https://www.w3school.com.cn/jsref/dom_obj_event.asp

事件传播

在一个标签里包含另外一个标签时，触发里面的标签事件会造成外面的标签事件连锁触发

使用event.stopPropagation 不再派发事件。

<div id="div1" onclick="alert('点击div1')" style="width: 500px;height: 500px;background-color: blueviolet">
        <div id="div2" onclick="alert('点击div2');event.stopPropagation();" style="width: 300px;height: 300px;background-color: black">
        </div>
</div>

增删改查

增加元素：

createElement(name) 创建元素

appendChild() 将元素添加为儿子

var ele = document.getElementById()；

var a = document.createElement("a")；

ele.appendChild(a)

删除元素：

1.获取要删除的元素

2.获得它的父元素

3.父元素使用removeChild删除子元素

修改元素：

　　第一种：使用上面增和删结合完成修改

　　第二种：

　　　　使用setAttribute(attributename，attributevalue)　　方法修改属性

　　　　　　attributename String 必需。您希望添加的属性的名称。

　　　　　　attributevalue String 必需。您希望添加的属性值　　

　　　　　　例：document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

　　　　使用innerHTML　　属性修改元素内容

修改 HTML DOM

　 class操作

　　　　className

　　　　classList.add

　　　　classList.remove

　　　　如：

　　　　var ele = document.getElementById()；

　　　　ele.classList.add()　　//为标签添加一个class

　　修改文本：

　　　　innerText：只会修改文本，将文本原封不动添加到文本中

　　　　innerHTML：会解析文本中的标签，可以添加标签属性

　　修改CSS样式：

　　　　ele.style.fontSize="30px"

　　修改属性：

　　　　使用setAttribute(attributename，attributevalue)　　方法修改属性

　　　　　　attributename String 必需。您希望添加的属性的名称。

　　　　　　attributevalue String 必需。您希望添加的属性值　　

　　　　　　例：document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

　　　　使用修改value　　

　　　　　　例：document.getElementsByTagName("INPUT")[0].value("hello");

　　创建新的 HTML 元素：

createElement(name)

　　删除已有的 HTML 元素

elementNode.removeChild(node)

https://www.cnblogs.com/yuanchenqi/articles/5980312.html

posted @ 2021-04-24 22:33 Shuranima 阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

Shuranima

【js】

JavaScript String 对象：

创建方式：

JavaScript Array 对象：

JavaScript Date：

JavaScript BOM window：

JavaScript BOM window 定时器：

JavaScript BOM history：

JavaScript BOM location：

JavaScript DOM document：

JavaScript DOM 事件

Event 对象

事件传播

增删改查

修改 HTML DOM

class操作

公告

　 class操作