JavaScript

本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript

(前端核心第一天)

windown常见属性

location 位置
	location.href 网址地址
	location.reload()	重新加载
	location.search  获取从？开始的所有参数信息

history
	history.length 历史页面数量
	history.forward() 前进
	history.back() 后退

事件相关

鼠标事件

onclick
onmouseover
onmouseout
onmousedown
onmouseup
	
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;

        }
    </style>
</head>

<body>

    <div onm ouseover="overfn()" onm ouseout="outfn()" onm ousemove="movefn()" onm ousedown="downfn()" onm ouseup="upfn()">
    </div>

    <script>
        function upfn() {
            console.log("mouse is up");
        }


        function downfn() {
            console.log("mouse is down");
        }
        function movefn() {
            console.log("mouse is move");
        }
        // function clickfn() {
        //     console.log("mouse is click");
        // }
        function overfn() {
            console.log("mouse on over");
        }

        function outfn() {
            console.log("mouse on out");
        }
    </script>
</body>

</html>

键盘事件

onkeydown 键盘按下
onkeyup 键盘抬起
event.keyCode 获取ASCII码
String.fromCharCode() 将ASCII码转为字符

	    <input type="text" onkeydown="kdfn()" onkeyup="kufn()">

    <script>
        function kdfn() {
           console.log("键盘按下"+event.keyCode);
            // event.keyCode可以获取按键的编码。
        }
        function kufn(){
           console.log("键盘抬起"+String.fromCharCode(event.keyCode));
            // String.fromCharCode转换案件编码为英文
        }
        
    </script>

状态改变事件

onblur 失去焦点事件
onchange 值改变事件

  <input type="text" onblur="blurfn()">
    <select name="school" onchange="changefn()">
        <option>北京大学</option>
        <option>清华大学</option>
    </select>

    <script>
        function blurfn() {
            console.log("文本完成");
        }

        function changefn() {
            console.log("学校改变");
        }

    </script>

DOM文档对象模型

包含和页面相关内容
document.querySelector("选择器");
innerText
value

JQuery框架

对原生javaScript的封装，可以更高效的开发动态效果。
如何使用JQuery框架。
	1）下载JQuery.js框架文件，然后引入本地文件。
	 <script src="JQuery.js"></script>
	2）通过CND的方式引入远程js文件到页面中
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<body>

    <input type="text" id="it1">
    <input type="button" value="显示" id="bt1">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- <script src="JQuery.js"></script> -->
    <script>
        $("h1").text("引入成功");
        $("#bt1").click(
            function () {
                var i = $("#it1");
                console.log(i.val());
               //  i.val() 是一个方法，可以展示input框中的内容。
            }
        )
    </script>
</body>

Js和Jq对象相互转换

js对象转jq对象
jq对象就是一个数组，用来存放js对象，因此只需要按照数组元素获取数据的方式。

js转jq：let jq = $(js);
jq转js：let js= jq[0];

<body>

	<input type="text" id="t1">
	<input id="it1" type="button" value="输出">

	<script>

		$("it1").click(function () {
			let jq = $("#t1");
			let js = jq[0];
			alert(jq.val);
		})

	</script>


</body>

JQ选择器

$("")

使用$("选择器")
js对象和jq对象不一样，不能混合调用各自的方法。但都可以用var获取。
jq中的方法没有on。如onclick只需click。

CSS中的选择器，都可以在jQuery中使用，新增了一些选择器
常见选择器：
	匹配所有div中的第一个：$("div:first");
	匹配所有div中的最后一个：$("div:last");
	匹配所有div中的第n个第div：$("div:eq(n)"); n从0开始。

给元素动态绑定事件

格式：选择器选择到元素对象.事件名(function(){})
	$("#b1").click(function(){事件相关代码})

	$("#b1").click(function(){
		事件相关代码.
	})
	
JQuery中的事件名比JS中少on

显示效果相关

创建元素对象
	let h = $("<h1> </h1>")
	
添加元素到某个元素中
    append()增加元素 
    元素对象.append(元素对象)
    
获取和修改元素文本内容
    text() 获取
    text("xxx") 修改xxx
    
获取和修改form表单中控件的值
	控件对象.val() 获取
	控件对象.val("xxx") 修改

显示隐藏
	元素对象.remove() 删除元素。
    元素对象.hide() 隐藏
    元素对象.show() 展示
    元素对象.toggle() 隐藏/展示
    
$("input:first") 选第一
$("input:last") 选最后 
$("input:eq(n)") 选第n个



<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="tx">
<input type="button" value="查看" id="bt1">
<div></div>
<script>
    let n = $("<h1> 我是h1 </h1>")
    $("body").append(n);
    $("input:last").click(function () {
        $("div").text($("#tx").val());
    })
    $("h1").remove();
</script>
</body>

<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="tx">
<input type="button" value="查看" id="bt1">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">

<div></div>
<script>

    let n = $("<h1> 我是h1 </h1>")
    $("body").append(n);

    $("input:eq(1)").click(function () {
        $("div").text($("#tx").val());
        $("h1").remove();
    })

    $("input:eq(2)").click(function () {
        $("h1").hide();
    })

    $("input:eq(3)").click(function () {
        $("h1").show();
    })

    $("input:eq(4)").click(function () {
        $("h1").toggle();
    })
    
</script>
</body>

好友分组

元素对象.children() :该元素对象的子元素。

<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>


<ul>
    <li>同事
        <ul>
            <li>王城</li>
            <li>罗源</li>
            <li>杨立</li>
        </ul>
    </li>
    <li>朋友
        <ul>
            <li>董斌</li>
            <li>刘清</li>
            <li>流失</li>
        </ul>
    </li>
    <li>领导
        <ul>
            <li>西晋</li>
            <li>罗氏</li>
        </ul>
    </li>
</ul>


<input type="button" id="show" value="展示">

<script>
    $("li>ul").hide();
    $("#show").click(function () {
        $("li>ul").toggle();
    })

    $("body>ul>li").click(function () {
        // 得到点击元素的子元素，并让其展示
        $(this).children().toggle();
    })
</script>
</body>

英雄表

<body>

<table border="2">
    <caption>英雄列表</caption>
    <tr>
        <th>名字</th>
        <th>类型</th>
        <th>价格</th>
    </tr>
</table>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script>
    let arr = [
        {name: "无极剑圣", type: "刺客", price: "450"},
        {name: "蛮王", type: "战士", price: "4800"},
        {name: "索拉卡", type: "辅助", price: "450"}
    ]

    for (let i = 0; i < arr.length; i++) {
        let hero = arr[i];
        let tr = $("<tr></tr>");
        let nametd = $("<td></td>");
        let typetd = $("<td></td>");
        let pricetd = $("<td></td>");
        nametd.text(hero.name);
        typetd.text(hero.type);
        pricetd.text(hero.price);
        tr.append(nametd);
        tr.append(typetd);
        tr.append(pricetd);
        $("table").append(tr);

    }

</script>

</body>

员工列表

<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="员工姓名">
<input type="text" placeholder="工资">
<input type="text" placeholder="工作">
<input type="button" value="添加" id="add">

<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
        <th>操</th>
    </tr>

</table>

<script>
    $("#add").click(function () {
        let tr = $("<tr></tr>");
        let nametd = $("<td></td>");
        let salted = $("<td></td>");
        let jobtd = $("<td></td>");
        let deltd = $("<td><input type='button' value='删除'> </td>");

        deltd.children().click(function () {
            tr.remove();
        });


        nametd.text($("input:eq(0)").val());
        salted.text($("input:eq(1)").val());
        jobtd.text($("input:eq(2)").val());

        tr.append(nametd);
        tr.append(salted);
        tr.append(jobtd);
        tr.append(deltd);
        $("table").append(tr);


    })
</script>
</body>

动画相关

hide：隐藏，格式hide(500)，hide(时长)。
show：显示
fadeOut：淡出
fadeIn：淡入
slideUp：上划
slideDown：下划
animate：自定义，格式 
	animate({"left/top":"100px"},500);
	animate({"定位":"像素"},时长)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img {
            width: 900px;
            position: relative; /*相对定位*/
        }
    </style>

</head>
<body>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上划">
<input type="button" value="下划">
<input type="button" value="自定义">

<hr>
<img src="img.jpg" alt="">

<script>

    $("input:eq(0)").click(function () {
        $("img").hide(500);
    })
    $("input:eq(1)").click(function () {
        $("img").show(500);
    })
    $("input:eq(2)").click(function () {
        $("img").fadeOut(500);
    })
    $("input:eq(3)").click(function () {
        $("img").fadeIn(500);
    })
    $("input:eq(4)").click(function () {
        $("img").slideUp(500);
    })
    $("input:eq(5)").click(function () {
        $("img").slideDown(500);
    })

    // 平移动画 必须设置定位方式为相对定位或绝对定位，因为left/top这些样式，默认静态定位无效。
    $("input:eq(6)").click(function () {
        $("img").animate({"left": "200px"}, 500).animate({"top": "200px"}, 500).animate({"left": "0px"}, 500)
            .animate({"top": "0px"}, 500).animate({"width": "200px"}, 500).animate({"width":"900px"},500);
    })


</script>

</body>
</html>

前端设计模式

MVC设计模式

M:Model模型，指数据模型，数据一般来自于服务器
V:View视图，指页面的各种标签
C:Controller控制器，指将数据模型展示到标签中的过程。

MVVM设计模式

此设计模式避免了大量的dom操作，遍历查询元素，从而提高了执行效率
M：Model模型，数据模型，数据来自服务器
V：View视图，指页面中的各种标签
VM：ViewModel视图模型，视图模型负责将页面中的元素和变量进行绑定，当变量发生改变时页面会自动发生改变。

VUE

VUE框架就是基于MVVM设计模式诞生的一种比较流行的框架。
如何使用？
类似JQuery，也是一个js文件，在html中引入即可。

vue引入:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>

<div id="vm_div">
    <h1>{{msg}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    // 创建vue对象。此对象就是一个vm视图模型。负责将页面元素和变量负责绑定
    let vm = new Vue({
        el: "#vm_div",
        data: {msg: "hello world"}
    })

    let count = 0;
    setInterval(function () {
        count++;
        vm.msg=count;
    },500)
    // setInterval(function(){} , 1000) 1000就是1s
</script>

</body>

setInterval() 方法会不停地调用函数，直到 [clearInterval()](https://www.runoob.com/jsref/met-win-clearinterval.html) 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

**提示：** 1000 毫秒= 1 秒。

<body>

<div id="vm_div">
    <h1>{{msg}}</h1>
</div>
<input type="button" value="Add">

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: "#vm_div",
        data: {msg: 0}
    });

    $("input").click(function () {
        vm.msg++;
    })

</script>

</body>

这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

JavaScript

JavaScript

windown常见属性

事件相关

鼠标事件

键盘事件

DOM文档对象模型

JQuery框架

Js和Jq对象相互转换

JQ选择器

给元素动态绑定事件

显示效果相关

好友分组

英雄表

员工列表

动画相关

前端设计模式

MVC设计模式

MVVM设计模式

VUE

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯