jQuery,Ajax,Jackson,fastjson,Vue

最新推荐文章于 2023-05-10 16:00:57 发布

集合，到我这里来

最新推荐文章于 2023-05-10 16:00:57 发布

阅读量291

点赞数

本文链接：https://blog.csdn.net/qq_43370419/article/details/103830868

版权

jQuery

JavaScript库，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。（封装了JS常见的操作）
主要作用就是简化js的Dom树的操作

JQ和JS对象转换【重点】
转换语法：
js的DOM对象转换成jQuery对象，语法：$(js对象)
jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引); 一般索引写0

JQ中事件的使用

JQ里面的事件, 去掉on, 封装成了方法. 语法:【重点】
jq对象.事件方法名(function(){})
掌握事件:
click(), focus(),blur(),change(),submit(),keydown(),keyup()，mousexxx()
绑定和解绑
绑定
jq对象.on(事件名,function(){}) 注意:事件名不带(),eg:click
解绑
jq对象.off(事件名)

链式写法

<script type="text/javascript">
	$(function() {
		$("#myDiv").mouseover(function() {
			$(this).css("background", "green");
		}).mouseout(function() {
			$(this).css("background", "red");
		});
	});
</script>

JQ动画【了解】
基本效果

方法名称	解释
show([speed],[easing],[fn]])	显示元素方法
hide([speed,[easing],[fn]])	隐藏元素方法
toggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

参数名称	解释
speed	三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

实例：

<input type="button" value="show()" id="btn1" />
<input type="button" value="hide()" id="btn2" />
<input type="button" value="toggle()" id="btn3" />

<br />
<div id="div1" style="width: 100px; height: 100px; border: 1px solid red;"></div>


<script>
	$("#btn1").click(function() {
		$("#div1").show(1000);

	});

	$("#btn2").click(function() {
			$("#div1").hide(1000,function(){
				alert("Bye...");
			});
	});
	

	$("#btn3").click(function() {
		$("#div1").toggle();

	});
</script>

滑动效果

方法名称	解释
slideDown([speed,[easing],[fn]])	向下滑动方法
slideUp([speed,[easing],[fn]])	向上滑动方法
slideToggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

参数名称	解释
speed	三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

淡入淡出效果

方法名称	解释
fadeIn([speed,[easing],[fn]])	淡入显示方法
fadeOut([speed,[easing],[fn]])	淡出隐藏方法
fadeToggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

参数名称	解释
speed	三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

JQ选择器
1、基本选择器

选择器名称	语法	解释
标签选择器（元素选择器）	$(“html标签名”)	获得所有匹配标签名称的于元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

2、层级选择器

选择器名称	语法	解释
后代选择器	$("A B ")	选择A元素内部的所有B元素
子选择器	$(“A > B”)	选择A元素内部的所有B子元素
兄弟选择器	$(“A + B”)	获得A元素同级的下一个B元素
兄弟选择器	$(“A ~ B”)	获得A元素同级的所有B元素

3、属性选择器

选择器名称	语法	解释
属性选择器	$(“A[属性名]”)	包含指定属性的选择器
属性选择器	$(“A[属性名=值]”)	包含指定属性等于指定值的选择器

4、基本过滤选择器

选择器名称	语法	解释
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selecter)	不包括指定内容的元素
偶数选择器	:even	偶数，从 0 开始计数
奇数选择器	:odd	奇数，从 0 开始计数
等于索引选择器	:eq(index)	指定索引元素
大于索引选择器	:gt(index)	大于指定索引元素
小于索引选择器	:lt(index)	小于指定索引元素

5、表单属性选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

JQ操作样式

API方法	解释
css(name) 使用很少	获取CSS样式
css(name,value)	设置CSS样式

JQ操作属性

API方法	解释
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

使用JQ操作DOM

API方法	解释
val([value])	获得/设置标签里面value属性相应的值
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体内容

val() 获得表单项标签里面value属性的值 value属性的封装
val(“参数”) 给表单项标签value属性设置值

html() 获得标签的内容，如果有标签，一并获得。相当于JavaScript里面的innerHTML
html("…) 设置html代码，如果有标签，将进行解析。

text() 获得标签的内容，如果有标签，忽略标签。相当于JavaScript中的innerText
text("…"") 设置文本，如果含有标签，把标签当做字符串.不支持标签

jQuery创建,插入

API方法	解释
$(“A”)	创建A元素对象
append(element)	添加成最后一个子元素，两者之间是父子关系
prepend(element)	添加成第一个子元素，两者之间是父子关系
appendTo(element)	添加到父元素的内部最后面
prependTo(element)	添加到父元素的内部最前面
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系

jQuery移除节点(对象)

API方法	解释
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

JQ遍历（重点）
jq对象方法遍历【重点】
jquery对象.each(function(index,element){});
其中:(参数名字随便取的，这里取为index,element)
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
例：
$(array).each(function (a,n) {
console.log(“array[”+a+"]="+n);
});

全局方法遍历
$.each(jq对象,function(i,ele){
});
参数1: 下标
参数2:下标对应的值
参数名字随便取

jq3.0新特性
for(ele of jq对象){
}
缺陷是没有下标

案例
使用JQuery完成页面定时弹出广告


<script>
    $(function () {
        setTimeout(function () {
            $("#adv").show(2000,function () {
                setTimeout(function () {
                    $("#adv").hide(2000)
                },2000)

            })
        },2000)

    })
</script>
<body>
<div style="background-color: gray;width: 100%;height: 600px">
    我是主题页面的内容
    <div  style="padding-left: 200px;padding-top: 100px;">
        <span>哇</span>
        <img id="adv" src="../img/bgimage.jpg" width="400px" height="400px" style="display: none">
    </div>
</div>
</body>

使用JQuery完成表格的隔行换色

<script>
    //- 筛选出奇数的tr, 设置一个背景色
    $("tr:odd").css("backgroundColor","#FFB6C1");
    //- 筛选出偶数的tr, 设置一个背景色
    $("tr:even").css("backgroundColor","#4F81BD");
</script>

使用JQuery完成复选框的全选、反选等等效果


<script>
    $(function () {
      $("#all").click(function () {
          $(".item").prop('checked',this.checked)
      })
        $("#reverse").click(function () {
            // $(".item").click()
            $(".item").each(function (index,element) {
                element.checked=!element.checked
            })
        })
        $(".item").click(function () {
            var count=0
            $(".item").each(function (index, element) {
                var length = $(".item").length;
                if(element.checked){
                    count++
                }
                if (totalCount == checkedCount) {
                    //所有子选框都选中了，那么全选框选中
                    $("#all").prop("checked",true)
                }else {
                    //全选框不选中
                    $("#all").prop("checked",false)
                }
            })
            // $("#all").prop('checked',$(".item").length==$(".item:checked").length)
        })
    })
</script>
<body>
<table id="tab1" border="1" width="800" align="center" cellspacing="0">
    <tr>
        <td colspan="5"><input type="button" value="反选" id="reverse"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox" id="all"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>

使用JQuery完成省市联动效果


<script>
    var items = [
        ["广州","深圳","惠州","东莞"],
        ["南宁","桂林","北海","柳州"],
        ["长沙","岳阳","衡阳","益阳"]
    ]
    function changeProvince(obj) {
        var item = items[obj];
        // var $item = $(item);
        // $("#cityId").html("<option>请选择城市</option>")
        // $.each($item,function (index, element) {
        //     $("#cityId").append("<option>"+element+"</option>")
        var str = "<option>请选择城市</option>"
        $.each(item,function (index, element) {
            //每次遍历出一个城市名，则往str字符串中拼接一个option标签
            str += "<option>"+element+"</option>"
        })

        //遍历完之后，将str作为、内容设置到城市下拉框中
        $("#cityId").html(str)
        }



</script>
<body>
<select id="provinceId" onchange="changeProvince(this.value)">
    <option value="">请选择省份</option>
    <option value="0">广东省</option>
    <option value="1">广西省</option>
    <option value="2">湖南省</option>
</select>
<select id="cityId">
    <option>请选择城市</option>
</select>

表格换色

给tr设置鼠标进入事件
tr.mouseenter(function(){
//1.设置背景色为red
})；
给tr设置鼠标离开事件
tr.mouseout(function(){
//1.设置背景色为tr之前的颜色
});
//注：tr.hover(function(){},function(){})


<script>
$(function () {
    $("tr").hover(function () {
        color = this.style.backgroundColor;
        this.style.backgroundColor='blue'
    },function () {
        this.style.backgroundColor=color
    })
    // var backgroundColor = $("tr")[0].style.backgroundColor;
    // $("tr").mouseover(function () {
    //     this.style.backgroundColor='blue'
    // })
    // $("tr").mouseout(function () {
    //     this.style.backgroundColor=backgroundColor
    // })
})

</script>
<body>
<table id="tab1" border="1" width="800" align="center" cellspacing="0">
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>

电子时钟


<script>
    var interval
    function startTime(){
        if(interval!=null){
            clearInterval(interval)
        }
        interval = setInterval(function () {
            var date = new Date().toLocaleString();
            $("h1").text(date)
        },1000);
    }
    function pauseTime() {
        clearInterval(interval)
    }
</script>
<body>
<h1 style="color: green">显示时间</h1>
<input type="button" value="开始" onclick="startTime()">
<input type="button" value="暂停" onclick="pauseTime()">
</body>

Ajax

AJax是可以做异步的请求,实现局部刷新一种客户端技术

JQ的AJAX【重点】
JQuery的Ajax的API

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])
GET请求(3.0新特性)	$.get([settings])
POST请求(3.0新特性)	$.post([settings])

1、为什么要用JQ的Ajax?
JS的Ajax处理浏览器适配问题, 写起来过于繁琐
实际开发里面基本不会使用JS的AJAX, 一般使用JQ的AJAX或者VUE里面的axios
2、掌握的方法

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
$.ajax([settings])

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
callback	当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

实例
get

$("#btn1").click(function(){
  		//发送请求; $.get(url,[params],[function(result){}])

  		$.get("{pageContext.request.contextPath }/demo01",		{"username":"zs","password":"123456"},function(result){	
  			alert(result);

  		});

  	});

post

$("#btn2").click(function(){

  		//发送请求; $.post(url,[params],[function(result){}])

  		$.post("{pageContext.request.contextPath }/demo01",{"username":"zs","password":"123456"},function(result){

  			alert(result);

  		});

  	});

ajax()

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

JS的GET、POST请求方式，JQ的GET、POST方式，.Ajax方式、使用JQ的Ajax完成用户名异步校验、查询所有联系人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
    function fn1() {
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("get","demo01?username=jay")
        xmlHttpRequest.send()
        xmlHttpRequest.onreadystatechange=function () {
            if (xmlHttpRequest.status == 200 && xmlHttpRequest.readyState == 4) {
                var responseText = xmlHttpRequest.responseText;
                $("#sp").html(responseText)
            }
        }
    }
    function fn2() {
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("post","demo01")
        xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xmlHttpRequest.send("username=jay")
        xmlHttpRequest.onreadystatechange=function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                var responseText = xmlHttpRequest.responseText;
                $('#sp').html(responseText)
            }
        }
    }
    function fn3() {
        $.get("demo01?username=jay",function (result) {
            alert(result)
        },"text")
    }
    function fn4() {
        $.post("demo01",{"username":123,"pwd":123},function (result) {
            alert(result)
        })
    }
    function fn5() {
        $.ajax({
            url:"demo01",
            type:"get",
            data:"username=chen",
            async:true,
            success:function (result) {
                $("#sp").html(result)
            },
            error:function () {
                alert("服务器异常...")

            }
        })
    }
    function fn6() {
        $.ajax({
            url: "demo01",
            type: "post",
            async: true,
            data: "username=juan",
            dataType:"text",
            success:function (result) {
                alert("成功")
            },
            error:function () {
                alert("失败")
            }
        })
    }
function fn7(obj) {
    $.post("demo01",{"action":"checkUser","username":obj},function (result) {
        if (result.flag) {
            if (result.data != null) {
                var user = result.data;
                $("input[name='username']").val(user.name)
                $("#sp").html(result.message)
            }else{
                $("#sp").html(result.message)
            }
        }else{
            $("#sp").html(result.message)
        }
    },"json")
}

function fn8() {
    var  app={name:'zs',age:18}
    console.log(app.age)
    var arr=[{"name":"张三","age":18},{"name":'ddd',age:99}]
    console.log(arr[1].age)
    var ppp = {"p1": {"name": "zs", "age": 18}, "p23": [{"name": "ls", "age": 19}, {"name": "ww", "age": 20}]};
    console.log(ppp.p23[1].age)
}

</script>
<body>
<input type="text" name="username" onblur="fn7(this.value)"><span id="sp"></span>
<input type="button" value="打印" onclick="fn8()">
<a href="list.html">查询所有联系人</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<script>
    $.post("demo01","action=findAllUser",function (result) {
        if (result.flag) {
            var data = result.data;
            $.each($(data),function (index, element) {
                $("table").append(" <tr>\n" +
                    "            <th>"+(index+1)+"</th>\n" +
                    "            <th>"+element.username+"</th>\n" +
                    "            <th>"+element.password+"</th>\n" +
                    "        </tr>")
            })
            $("table").append("<tr>\n" +
                "            <td colspan=\"3\" align=\"center\"><a class=\"btn btn-primary\" href=\"add.jsp\">添加联系人</a></td>\n" +
                "        </tr>")
        }else{
            alert("服务器异常...")
        }

    },"json")
</script>
<body>
<div class="container">
    <h3 style="text-align: center">显示所有联系人</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
        </tr>
    </table>
</div>
</body>
</html>

语法介绍

定义方式：
- 对象形式：{key:value,key:value…}
  - key是字符串
  - value是任意的合法数据类型
  - 多个之间使用,隔开,最后一个,不写
  - key和value之间使用:连接
- 数组形式：[element1, element2, …]
- 混合(嵌套)形式：以上两种类型任意混合
  - json对象的value，可以是任意类型，当然也可以是数组
  - 数组里的element，可以是任意类型，当然也可以是json对象
解析语法：
- 获取json对象里的value值：json对象.key
- 获取数组里指定索引的元素：数组[索引]

JSON格式

JSON对象 {key:value,key:value}
- key是字符串
- value是任意的合法数据类型
JSON数组 [ele,ele…]
嵌套: 对象和数组的嵌套

Jackson转换工具

常见工具类

在Ajax使用过程中，服务端返回的数据可能比较复杂，比如List；这些数据通常要转换成json格式，把json格式字符串返回客户端
常见的转换工具有：
- Jackson：SpringMVC内置的转换工具
- jsonlib：Java提供的转换工具(一般不用)
- gson：google提供的转换工具(轻量级的框架)
- fastjson：Alibaba提供的转换工具(效率高速度快)

Jackson的API介绍

方法	说明
`writeValueAsString(Object obj)`	把obj对象里的数据转换成json格式
`readValue(String json, Class type)`	把json字符串，还原成type类型的Java对象
`readValue(String json, TypeReference reference)`	把json字符串，还原成带泛型的复杂Java对象

在这里插入图片描述
小结：

JackSon: json和java对象互相转换的工具,SpringMVC默认的json转换器
java对象转json(导入jar)
- 创建ObjectMapper对象
- 调用writeValueAsString(Object obj)
json转java对象(导入jar)
- 创建ObjectMapper对象
- 调用readValue(String json,Class clazz)

fastjson转换工具

fastjson的API介绍

方法	说明
`toJSONString(Object obj)`	把obj对象里的数据转换成json格式
`parseObject(String json, Class type)`	把json字符串，还原成type类型的Java对象
`parseObject(String json, TypeReference reference)`	把json字符串，还原成带泛型的复杂Java对象

Jackson和fastjson的测试


public class JsonTest {
    @Test
    public void test() throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        User user=new User(1,"zs","123");
        String s = objectMapper.writeValueAsString(user);
        System.out.println(s);
        User user1 = objectMapper.readValue(s, User.class);
        System.out.println(user1.getPassword());
    }
    @Test
    public void test2() throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        List<User> list=new ArrayList<>();
        User user=new User(1,"zs","123");
        User user1=new User(2,"ls","123");
        list.add(user);
        list.add(user1);
        String s = objectMapper.writeValueAsString(list);
        System.out.println(s);
        List<User> list1= objectMapper.readValue(s, new TypeReference<List<User>>() {});
        for (User user2 : list1) {
            System.out.println(user2.getUsername());
        }
    }
    @Test
    public void test3(){
        User user=new User(1,"zs","123");
        String s = JSON.toJSONString(user);
        System.out.println(s);
        User user1 = JSON.parseObject(s, User.class);
        System.out.println(user1);
    }
    @Test
    public void test4(){
        List<User> list=new ArrayList<>();
        User user=new User(1,"zs","123");
        User user1=new User(2,"ls","123");
        list.add(user);
        list.add(user1);
        String s = JSON.toJSONString(list);
        System.out.println(s);
        List<User> list1 = JSON.parseObject(s, new com.alibaba.fastjson.TypeReference<List<User>>() {
        });
        for (User user2 : list1) {
            System.out.println(user2.getUsername());
        }
    }
}

完成自动补全的案例(返回JSON数据)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
    function searchWords(obj){
        if(obj!=null&&obj.trim()!=""){
            $.post("demo01","action=searchAll&value="+obj,function (result) {
                if (result.flag) {
                    var data = result.data;
                    $("table").empty()
                    if(data!=null&&data.length!=0){
                        $("#divId").show()
                        $.each(data,function (index, element) {
                            $("table").append("<tr><td>"+element.username+"</td></tr>")
                        })
                    }
                }else{
                   alert(result.message)
                }

            },"json")
        }else {
            $("#divId").hide()
        }
    }
</script>
<body>
<center>

    <h1>黑马</h1>

    <!--给搜索框绑定键盘按键抬起事件-->
    <input id="inputId" type="text" style="width: 500px; height: 38px;" onkeyup="searchWords(this.value)"/><input
        type="button" style="height: 38px;" value="点一下" />
    <div id="divId"
         style="width: 500px; border: 1px red solid; height: 300px; position: absolute; left: 300px;display: none">
        <table id="tabId" width="100%" height="100%" cellspacing="0">

        </table>
    </div>
    <div style="align-content: center">你好世界</div>
    <!--<div style="align-content: center"><img src="img/bgimage.jpg" height="500px" width="500px"/></div>-->
</center>

</body>
</html>

Vue

JS前端框架
MVVM模式：模型-视图-视图-模型
MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC（model view control）模式一样，主要目的是分离视图和模型，Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。它的核心是MVVM中的VM，也就是Viewmodel。VM负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

创建Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-vue入门</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--使用插值表达式展示-->
    {{message}}
</div>

<script>
    //创建一个Vue实例(VM)
    new Vue({
        //表示当前vue对象接管了div区域
        el: '#app',

        //定义数据
        data: {
            message: 'hello world'
        }
    });
</script>
</body>
</html>

小结 data：用于定义数据
methods：用于定义的函数，可以通过return来返回函数值
数据绑定最常见的形式：“Mustanche”语法（双大括号）的文本插值表达式，Mustache标签将会被替代为对应数据对象上属性的值，无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以以下错误部分不会生效
正确：
{{ number + 1 }}
{{flag?‘true’:‘false’}}
错误：
!-- 这是语句，不是表达式 –
{{ var a = 1 }}
!-- 流控制也不会生效，请使用三元表达式 –
{{ if (flag) { return message } }}

常用事件
@click：点击事件
【需求】：点击按钮事件，改变message的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_v-on:click</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <br/>
        <input type="button" value="点击改变" @click="fun01"/>

    </div>
    <script>
        //创建vue实例
        new Vue({
            //表示当前vue对象接管了div区域
            el:'#app',

            //定义数据
            data:{
                message:'hello world'
            },
            //定义函数
            methods:{
                fun01:function () {
                    this.message = '你好,世界...';
                }
            }
        });

    </script>
</body>
</html>

@keydown：键盘按下
【需求】：对文本输入框做校验，使用键盘按下事件，如果按下0-9的数字，正常显示，其他按键则阻止事件执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--$event:为时间对象-->
        <input type="text" value="hello.." @keydown="fun01($event)"/>
    </div>

    <script>
        //创建一个Vue实例(VM)
        new Vue({
            el: '#app', //表示当前vue对象接管了div区域
            data:{
            },
            methods:{
                fun01:function (e) {
                    var keyCode=  e.keyCode;
                    if (!(keyCode >= 49 && keyCode<=57)){
                      	//阻止事件执行
                        e.preventDefault();
                    }

                }
            }
        });
    </script>
</body>
</html>

@mouseover：鼠标移入(等同于v-on:mouseover)
【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        .box {
            width: 300px;
            height: 400px;
            border: 1px solid red;
        }
        
    </style>
</head>
<body>
<div id="app">
    <div class="box" @mouseover="fun01">
        div
    </div>
</div>

<script>
    //创建一个Vue实例
    new Vue({
        el: '#app',
        data: {},
        methods: {
           fun01:function () {
               alert("div");
           }
        }
    });
</script>
</body>
</html>

小结
事件规则: 把js的事件的on换成了@或者v-on:【重点】

οnclick==>@click
οnkeydοwn==>@keydown
οnmοuseοver==>@mouseover

v-text与v-html
v-text：输出文本内容，不会解析html元素
v-html：输出文本内容，会解析html元素
【需求】：分别使用v-text, v-html 赋值 hello world ，查看页面输出内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    <div v-html="message"></div>
    <div v-text="message"></div>
    <div></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message:"<h1>hello world</h1>"
        },
        methods: {

        }
    });
</script>
</body>
</html>

v-bind和v-model
v-bind:
插值语法不能作用在HTML 属性上，遇到这种情况应该使用 v-bind指令
【需求】：使用vue定义变量ys，对页面中的字体标签color属性赋值。使用vue定义变量info，对页面中的超链接href属性赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    <font v-bind:color="ys">hello world</font>
    <a :href="info">百度</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ys:'red',
            info:'http://www.baidu.com'
        },
        methods: {

        }
    });
</script>
</body>
</html>

v-model:
用于数据的绑定,数据的读取
【需求】：使用vue赋值json(对象)数据，并显示到页面的输入框中（表单回显）. 点击按钮，改变json数据，验证同时输入框的内容也发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    用户名:<input type="text" v-model="user.username"><br>
    密码:<input type="text" v-model="user.password"><br>
    <input type="button" @click="fun01" value="按钮">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                username: 'zs',
                password: '123456'
            }
        },
        methods: {
            fun01: function () {
                this.user = {
                    username: 'ls',
                    password: '666666'
                }
            }
        }
    });
</script>
</body>
</html>

小结:

v-bind: 就是让vue能够用在html的标签的属性上简写:

 <font color='ys'></font>   --读取不到ys的值
    <font :color='ys'></font>  --读取到ys的值

v-model: 绑定
- 数据变化了视图就变化
- 视图变化了数据就变化

v-for,v-if,v-show
v-for:
用于操作array/集合，遍历
语法: v-for="(元素,index) in 数组/集合"
【需求】：使用v-for遍历数组，并把数据遍历到页面上的

标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--每遍历一次就是一个数据, 就对应一个li-->
        <li v-for="(ele,index) in array">
            {{index}} -- {{ele}}
        </li>
    </ul>
    <hr/>
    <ul>
        <li v-for="(user,index) in users">
            {{user.username}}
        </li>
    </ul>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            array:['a','b','c','d'],
            users:[
                {username:'zs',age:'18'},
                {username:'ls',age:'19'},
                {username:'ww',age:'20'}
            ]
        },
        methods: {}
    });
</script>
</html>

v-if与v-show
v-if是根据表达式的值来决定是否渲染元素(标签都没有了)
v-show是根据表达式的值来切换元素的display css属性(标签还在)
【需求】：使用vue赋值flag变量（boolean类型），用来判断div元素中的内容是否显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    <span v-if="flag">hello</span>
    <span v-show="flag">你好</span>
    <input type="button" value="开关" @click="fun01"/>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            fun01: function () {
                this.flag = !this.flag;
            }
        }
    });
</script>
</body>
</html>

小结

v-for:作为标签的属性使用的, 遍历
<标签 v-for="(元素,索引) in 数组"></标签>
1.元素的变量名随便取
2.索引的变量名随便取
v-if: 作为标签的属性使用的, 决定了标签是否展示
<标签 v-if=“boolean类型的”></标签>
1.v-if里面是true, 展示
2.v-if里面是false, 不展示,标签都没有

集合，到我这里来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery,Ajax,Jackson,fastjson,Vue

jQueryJavaScript库，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。（封装了JS常见的操作）主要作用就是简化js的Dom树的操作JQ和JS对象转换【重点】转换语法：js的DOM对象转换成jQuery对象，语法：$(js对象)jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引);...
复制链接

扫一扫