jQuery

bootstrap 样式的框架
bootstrap-table 表格
bootstrap-treeview 左侧菜单的树
jquery
jquery-validate.js 前端的验证
laydate 日期控件
toastr  弹出框

src=“lib/laydate/laydate.js”
给日期做绑定，绑定到控件上，elem，往哪个标签上绑定，#绑定id，设置模式，format，类型，date。相当于初始化了，标签禁止输入，readonly，只读的不能输入，
jquery  min.JS代表压缩的 
引入 jquery


script
 
默认的执行方法，只要进到这页面就会执行这个方法，$(function(){


alert("我被执行了")
$("#link").hide();
//初始化执行的代码


//图片进来默认隐藏
$("#loading").hide();
})


function clickA(){
var element = document.getElementById("name");
element.value="我是js设置的值";
//jquery 帮我们进行的封装,f12  console
 //输入 js也可以，以上是js原生写法，jquery 选择器写法
$("#name").val("我是jquery设置的值")
alert（$("#name").val()）//这是获取值


alert($("#span").text()) //获取文本
$(#span).text("span设置文本完成")


$(".a").val("abdc")
                    //get值是一样的


$("input").val("input设置的值")


$("[class]").val("属性选择器设置的值")
$("[class='b'][alt='生日']").val("属性选择器BBB设置的值")


}


function showLink(){


$("#link").show();


}


function addDiv(){
$("#div").append("<h1>我是被append进来的</h1>");


$("#div").prepend("<h3>我是h3</h3>");


//$("#div").remove();
$("#div").empty();


//设置属性
alert($("#span").attr("alt"));//获取写好的属性值
$("#span").attr("alt","小象") //重新设置新的属性值
alert($("#span").attr("alt")); //获取新的属性值


}


function runTest(){
$("#runTestButton").attr("disabled","true");


}


function foreachDiv(){
var array=["a","b","c","d"]
for(var i=0;i<array.length;i++){
alert(array[i]);
}


$(".div").each(function(){
第一次循环的时候  ==div1
第二次遍历的时候 == div2
$(this) == $("#div1")


alert($(this).text());


})

var = abc；


if （type(abc)=="undefined"）{

alert("undefined")
}  //   预知没有这个值可能为null，要这样去判断，


}
function jsonFormat(){
var user = {};// java 里的 User = new User（）；
user.name="希白";   //user.setName("希白")
user.age=18; //user.setAge("")
//在js里面把对象转成json字符串
var jsonStr = JSON.stringify(user); //把对象转成json
alert(jsonStr);
//json字符串转成对象
var obj = JSON.parse(jsonStr);  //把jsonStr 反转成字符串
alert(obj.name);
}




function getUser(){
var url ="${contextPath}/jqueryController/getUserJson";
$.get(url,function(data,status){
var th = "<tr><th>姓名</th><th>城市</th></tr>";
//先把th追加userTble元素里
$("#userTable").append(th);
data.forEach(function (user,index){
var userName= user.userName;
var city = user.city;
$("#userTable").append("<tr><td>"+userName"</td><td>"+city+"</td></tr>");     //tr代表一行，th  td 代表一列
alert(user.userName);
alert(user.city);
});
alert(status);
})
}
function postUser(){
var url= "${contextPath}/jqueryController/postUser";

var user={};
user.userName="牛牛";
user.city="北京";
//user  做为入参
$.post(url,user,function(data,status){
if(data.success){
alert(data.msg)}


})


}


function ajaxUser(){
var url = "${contextPath}/jqueryController/postUserJson";
var username=$("#userName").val();
var city=$("#city").val();
// 用jquery 获取表单  $("form").serialize（） 会把form标签的数据都找出来
// var user={};
// user.userName="牛牛"；
// user.city="北京";

$.ajax({
type:"post",
url：url，
dataType:"json",
data:$("form").serialize(),
//请求之前我要干嘛
beforeSend:function(){
//alert（"准备请求"）
$("#loading").show();
},

//请求成功之后我要干嘛
success:function(result){
alert(result.msg)
$("#loading").hide();
},
//请求异常的时候我要干嘛
error:function(resultError){
alert(resulError)
$("#loading").hide();
}
})




}


//19、对象函数，user对象 里面定义两个方法， js抽出去，不写在freemarker里，单独写一个类。
var user={
setUserName:function(userName){
alert(aa)
},

setAge:function(age){
alert(age)
}


}
user.setUserName("aafds");
user.setAge(23);




function getCheckBoxChecked(){
var str="";
$("input[name='codeType']").each(function(){
if($(this).is(":checked")) 
{
str+="--"+$(this).val();

}






});
//return str;
alert(str);
}


function setCheckBoxChecked(value){
var list=["神经网络"，"深度学习"];
list.forEach(function(value)){
//input 标签 name 是codeType    value是value，属性checked设置成true。
$("input:checkbox[name='codeType'][value="+value+"]").attr('checked','true')
})
}


var meter;
function myrefresh(){

meter=setTimeout('myrefresh()',5000); //指定5秒调用一次这个myrefresh这个方法
alert("定时刷新");

}


function clearRefresh(){
clearTimeout(meter); //清除meter相当清除了


}


</script>


 选择器
id选择器 #
class选择器 . class=“a”
p标签，   $("p") 对所有p标签操作
属性的，
class 选择器
标签的值
属性选择器，type id  name class  都是input标签的属性
6、隐藏和显示，
$("#p").show();
$("#p").hide();


7、添加在当前的标签内添加你需要的内容  append
$("#p").append("Some append text.")
运行之后，在div标签下面有了一个<h1>标签，动态增加标签，动态修改元素
$("#p").prepend("<h3>h3</h3>")
prepend 的意思是前置，append在后面加，append写在了前面，但是显示的是在后面，prepend写的后面，但是显示在前面


8、删除元素
$("#div").remove();这个删除是删除所有 把自身标签都删除掉
 
$("#div1").empty(); 只是清楚内容 标签div还在


选择器等于定位，定位到哪个标签上，操作哪个标签
9、获取属性，设置属性
$("#span").attr("alt")  获取属性值
$("#span").attr("alt","设置属性") 设置属性


10、禁用，点击一次后不能再继续点击,点击之后就变灰了
$("#runTestButton").attr("disabled","true");


11、遍历
$(selector).each(function($(this).text())
this 代表标签的自身


12、undefined的判断，预知一个不存在的,要这样去写  ，只要做判断的时候就要加上undefined，js除了null 还有undefined这个类型
if（tyoeof(name) =="undefined"）
用null判断不行，要用undefined




13、javascript对象
var obj={}  对象
var obj={dom:'#result'}
var array=[] 数组


14、对象转json    叫序列化
var obj={};
obj.name="longtent";
var jsonStr = JSON.stringfy(obj);    //把对象转成json






15、json字符串转对象     //反序列化
var obj = JSON.parse(jsonStr);


之前用表单提交的，现在用jquery 封装好了，
16、用js发一个get请求，需要创建两个requestMapping （get）和（post）




17、ajax请求，支持异步的请求，上面的get post 都是同步的请求。异步的消息 MQ，kfka，异步请求就是
把请求扔出之后会有一个监听，监听什么时候有返回结果，他在处理返回结果。一般都用ajax。请求的是
json格式了，不是表单格式了


$.ajax({
type:"方法",
url:"请求的路劲"，
dataType:"json",
async:false,
data:{},
beforSend:function(){},
success:function(result){},
error:function(resultError){}
})


18、获取表单




19、对象函数
检查前端代码 f12 sources ， jqueryPage 


20、checkbox选择


21、定时刷新,websocket 可以替代这个 ，服务端往客户端发送消息，应用场景，想后端不断请求 获取数据是否执行完成。




后端的java 不能return一个对象map回去，是转成json格式，然后jquery的post框架里又把json转成了对象，然后调用里面的


<a href="http://www.baidu.com" target="_blank" id="link">我是隐藏的连接</a>
<span id = "span" >我是span</span> 这个不是值，是两个标签之间的显示，这叫文本，
<input type= "button" value ="执行跳转" οnclick="clickA()">
<input type="text" id = "name" name="name" class="a" alt="生日">
<span id = "span">我是span</span>  这个不是值，是两个标签之间的显示


<div id = "div">


 <span id="span" alt="洗白">看见我了吗</span>


</div>
<input type = "button" value=" 显示连接" id="link" οnclick="showLink()">
<input type="button" value ="添加内容" οnclick="addDiv()">


<input type= "button" value= "运行测试" οnclick="javascript:alert('执行了')">
<input type = "button" id="runTestButton" value = "运行测试" οnclick="runTest()">
<input type ="button" value= "遍历div" οnclick="foreachDiv()">




contextPath= 127.0.0.1:8080


设置一个变量 assign
<#assign contextPath=request.getContextPaht()/>
<script type="text/javascript" src="${contextPath}/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"></script>


<div id ="div1" class = "div" >我是第一个div</div>
<div id = "div2" class = "div">我是第二个div</div>
<div id ="div3" class = "div">我是第三个div</div>
<div id = "div4" class = "div">我是第四个div</div>


<input type= "button" value="json" οnclick="jsonFormat()">


<input type ="button" value ="getUser" οnclick="getUser()">


<br> </br>    <tr> 是换行 <th> 是标题


<table border = "1" id ="userTable" style="width:50%";height:auto>




</table>


<input type= "button" value="postUser" οnclick="postUser">


<input type=""button" value= "ajaxUser" οnclick="ajaxUser()">
<img id="loading" src="${contextPath}/pic/wait.jpg" style="margin-left:35%;margin-top:30%">
<input type="button" value = "checkbox" οnclick="getCheckBoxChecked（）">
<input type= "button" value = "checkbox" οnclick="setCheckBoxChecked('深度学习')">


<form>
姓名：
<input type="text" name="userName" id="userName">
城市：
<input type="text" name= "city" id="city">
代码：
<input type="checkbox" value ="java" name="codeType">java
<input type="checkbox" value = "神经网络" name= "codeType">神经网络
<input type ="checkbox"  value= "深度学习" name="codeType">深度学习
<input type = "button" value ="开始定时刷新" onclick = "myrefresh()">
<input type = "button" value = "关闭定时刷新"  οnclick= "clearRefresh()">


</form>