Jquery

得到一堆元素中的某个

比如有堆按钮但是你不想写ID 和 Class可以选择下面方法

//eq(第几个) 从0开始
$("button").eq(0).click(function (){
    alert("增加");
});

界面刷新

location.reload ();

得到div的高度包含内外边距

var cf=$("#bk").outerHeight(true);

判断用户是否有互联网 有返回1

if(navigator.onLine){
  alert(1);
}else{
  alert(0);
}

添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

 //内部增加 增加在标签里面
$("p").append("你好");//在之后添加
            $("p").append("<h1>你好2</h1>")
            $("p").prepend("数据包");//在之前添加
            $("p").prepend("<h1>数据包2</h1>")

 //外部增加 增加在标签的外面
            $("p").after("你好");//在之后添加
            $("p").before("你好");//在之前添加

jquer设置属性

$("标签").attr("属性","值")
列：按钮禁用
$("#login").attr("disabled",true)
//改变图片路径
$("#tp").attr("src","1.webp")
//获取属性值
var val=$("a").attr("price");

定义数组和遍历

function fn2(){
		var c=["中国","米国","德国","法国"];//定义数组
		//遍历数组
		for(var i=0;i<c.length;i++){
			//访问数组里面的元素
			alert(c[i])
		}
	}

数组foreach遍历

function fn2(){
		var c=["中国","米国","德国","法国"];//定义数组
		//遍历数组
		for(var i=0;i<c.length;i++){
			//访问数组里面的元素
			alert(c[i])
		}
		var ch=[4,7,8,9,7];
		//遍历数组2
		ch.forEach(fn3);//指向一个函数
	}
	function fn3(value){
		alert(value)
	}

id选择器

document.getElementById("ID")

function fn1(){
	var obj=document.getElementById("p1");
	obj.innerText="西门庆"
	
	/* document.getElementById("p1").innerText="武大郎"; */
}
function fn2(){
	var bt=document.getElementById("btn1");//通过id的到元素
	var valu=bt.value;//获取元素的value属性
	if(valu=="开门"){
		bt.value="关门"; //改变元素的value这个属性
	}else{
		/* bt.value="开门"; */
		bt.setAttribute("value","开门");
	}
}

执行点击按钮

$("#testsbmit").click();

DOM

一、eval函数
	eval('字符串');
	字符串编程JS代码
一、获取html元素
	1、根据ID获取元素（单个元素）
		标签必须有id值
		document.getElementById("id值");
	2、根据name获取元素：(获取多个元素)
		var arr=document.getElementsByName("name值");
			取出某个元素
				arr[0] 第一个元素

	3、根据标签获取元素
		document.getElementsByTagName("标签");
		获取所有p标签
		document.getElementsByTagName("p");

	4、根据class属性
		document.getElementsByClassName("class值")

二、操作html常用属性和函数
	函数语法：html对象.函数名();
	属性语法：html对象.属性名;

	var a=document.getElementById("d1");
	1、获取设置某值：表单元素有属性value
		a.value
		获取选中单选按钮值
			a.checked 判断是否等于true

	2、获取某个属性
		a.getAttribute("属性名");
		根据不同id显示不同样式
	3、设置某个属性
		a.setAttribute("属性名","值");
		变色字体设置
	4、设置样式
		a.style.样式属性名="样式值"
			a.style.color="red";
			设置单个样式
		a.setAttribute("style","color:red;padding:5px;");
	5、移除属性
		a.removeAttribute("属性名");
	6、设置CSS样式名
		a.className="class值";
		class样式切换
			注：必须先准备类样式

	7、设置获取文字
		a.innerText="值"
	8、设置获取html代码
		a.innerHTML="html代码"
		设置多个div间隔添加html

	9、显示隐藏
		style中样式
			display:block  显示
			display:none  隐藏
		表单验证提示
		事件：
			onmouseover:鼠标移入事件
			onmouseout:鼠标移出事件
			onfocus:获得光标
			onblur：失去光标

/*通过标签名查找元素 改变 Css样式   前提需要先把Css样式写好  如 
Class类选择器  调用试使用 className=“css类的名称”  进行作用的样式

*/

function fn4(){
	var c=document.getElementsByTagName("li");//使用标签名查找
	//循环
	/* alert(c);
	c.forEach(fg); */
	//改变字体样式 
	for(var i=0;i<c.length;i++){
		//循环遍历 
		var oj=c[i];
		oj.className="myli";//修改元素 的className属性
	}
}

尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
var wid= $("body").width();//不包括内边距、边框或外边距
var heg=$("body").height();

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
var inw=$("#d1").innerHeight();//包括内边距
var inh=$("#d1").innerWidth();

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
var ot=$("#d1").outerHeight();//包括内边距和边框
var otr=$("#d1").outerWidth();

outerWidth(true) 方法返回元素的宽度（包括内边距和边框 外边距）。
outerWidth(true) 方法返回元素的宽度（包括内边距和边框 外边距）。
var ottr=$("#d1").outerHeight(true); //包括内边距 边框 外边距
var otth=$("#d1").outerWidth(true);

var w=screen.width;  获取屏幕宽度
var h=screen.height;  获取屏幕高度

location.href="跳转页面";   跳转到指定的网页

跳转到一个servlet

location.href="servlet类名";
location.href="OrderServlet";  

错误消息

else{request.setAttribute("errpr","账号或密码错误！")}，request.getRequestDispatcher("原来页面").forward(request, response);

页面前进回退

history.back()后退
history.forward()前进

在本页面打开一个小窗口

window.open('index3.jsp', 'index','top=100,left=100,width=500,height=200,scrollbars=no,toolbar=no,location=no');

当加载完这页面执行

onload="cf()"  cf()为js   //加载完后打开小窗口页面  function cf(){window.open('index3.jsp', 'index','top=100,left=100,width=500,height=200,scrollbars=no,toolbar=no,location=no');}

JQueryBasic

导入外部文件  必须把JQuery引入的放到第一
<script src="js/jquery-1.10.2.js"></script>

当文档中的元素加载完毕之后 执行函数

$(document).ready(function(){
	alert("我是JQuery 欢迎使用！")
});
//第二种写法 
$(function(){
	var div2=document.getElementById("d1");
	div2.innerHTML="<h1>good morning</h1>";
})

id选择器

$("#ID名称")   接收时需要加$
列：
function fn1(){
	//ID选择器
	var $t=$("#d1");
	$t.html("<h1>中国</h1>");
	//第二种写法
	$("#d1").html("<h1>中国</h1>"); html=innerHTML
}

标签选择器

$("标签名") 获取标签为li的

$(this)  代表本身

设置CSS样式 
$("标签名").css("样式名","参数") 
mouseover鼠标移入的时候 
mouseout鼠标移出

mouseover(function(){
      
	  需要执行的事件
    
})

链式编程

$("li").css("color", "pink").css("font-size","30px").css("background-color","black").mouseover(function(){
		$(this).css("background-color","red")
	}).mouseout(function(){
		$(this).css("background-color","blue")
	});

类选择器

$(".class")

$(".类名")  获取类名为 .calss

//类选择器 input没有设onclick 事件  .click是鼠标点击事件
$(function(){
      //指定id对象的单击事件
	$("#btn1").click(function(){
	  //类选择器
		$(".mp").css("color","pink")
	})
})

找所有标签

$("*")

JQuery DOM节点

当加载完这页面执行
$(function(){
	
})
//jquery 放文本 text("值")
$("#d1").text(data);

$("ul:first li:even") even:偶数

$("ul:first li:odd")  odd:奇数    //li偶数

$("ul:first") ul标签的第一个  first第一个

$("li").eq(2).css("font-size","40px");//定位到第几个

$("ul:first li") 第一个ul下的li标签  

$("ul:last li") //最后一个li  last最后一个

$("ul:first li").css({"font-size":"40px","background-color":"pink"})  样式数组写法

$(".c1").val();    //获取文本框的值 .val
$(".c1").val("值")  //给文本框设置值

窗口滚动事件

$("div").scroll(function(){
    $("span").text(x+=1);
  });

离开页面事件

$(window).unload(function(){
    alert("Goodbye!");
});

/ on /单击事件 第一个执行事件的名称 /*click mouseover  mouseout... */  第二是具体的代码 function(){代码}
$(".d1").on("click",function(){

})

on == bind 方法相同

/  bind  /单击事件 第一个执行事件的名称 /*click mouseover  mouseout... */  第二是具体的代码 function(){代码}
$(".d1").bind("click",function(){
		
	})

bind多个事件

$(".d1").bind("事件名称1" : function(){},"事件名称2":function(){},......)

祖先 （父元素）

var obj=$("ul").parent();//找上一级父元素 
            var enj=$("ul").parents();//返回所有的父亲
            var qu=$("ul").parentsUntil("body");//过滤到body截止
            console.log(enj);

后代（子元素）

var zdv=$("div").children();//找子元素 
            console.log(zdv);

            var nj=$("ul").children(".lk");//子元素过滤  找ul下面的属性带有lk的
            console.log(nj);

            var fint=$("div").find("span"); //选元素的后代元素，一路向下直到最后一个后代
            console.log(fint);

            var fiall=$("div").find("*");//找所有的后代

each遍历

tbys.each(function(){
                console.log($(this))
            })

tbys.each(function(index,ele){
                console.log(index+"--"+$(ele).html());
            })

查找同胞元素

var tbys=$("li").siblings(); //查找同胞元素

            var next=$(".lk").next();//下一个
            console.log(next.text())

            var nexall=$(".lk").nextAll();//下面的所有元素
            
            var h=$(".lk").nextUntil("li");//截止到某一个元素

            var up1=$(".lk").prev();//元素的上一个 

            var up2=$(".lk").prevAll();//元素上一个的所有

            var up3=$(".lk").prevUntil("li");//截止到某一个元素

Filter过滤

$("li").filter(".lk");//查找带有这个元素的

not过滤

$("li").not(".lk");//查找不带这个元素的

//这里是a的类 .d1 然后

<tr><td>桌子</td><td>3000</td><td><a href="#">编辑</a>&nbsp;&nbsp;<a href="#" class="d1">删除</a></td></tr>
$(".c1").parents("tr");//它的父级 如ttd的父级是tr tr这个父亲 

添加一个样式 bk是一个.css的样式 在style中写出来

如：
<style>
.bk{
background-color:red;
}
</style>
$(this).addClass("bk");//添加一个Css样式

移掉一个CSS样式

$(this).removeClass("css样式名")  如("bk");

获取焦点 focus  获取焦点

$("input:first").focus(function(){
		$(this).val("");
	})

键盘事件得到用户按的

$("input").keypress(function(){
                var k=event.keyCode;
                alert(k);
            })

失去焦点

$("input:first").blur(function(){
	代码
})

删除元素

$("#d1").remove();//移掉指定元素

$("#d1").empty();//清除子元素 只会删除di下面的元素
$("#d1 h1").remove("#cf");//移掉指定元素 过滤元素  删除d1下 h1标签 ID为cf的

表单提交触发事件

$("form").submit(function(){
    alert("提交");
});

为空不能提交required

<form action="https://www.baidu.com/s" method="GET">
        <input type="text" name="wd" id="in1" required>
        <input type="submit" value="提交" />
    </form>

属性选择器

$("[name='username']"); name是属性名称=属性名称
$("[price]").css("font-size","100px");//属性为price的
$("li[price!='3000']").css("font-size","100px");//属性price不等于... 只有不等于和等于

表单选择器

$(":button").css("background-color","pink");

load() 加载方法

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

实例 加载一个jsp

$(function(){
	$("#d1").load("Tes.jsp",function(responseTxt,statusTxt,xhr){
		if(statusTxt=="success"){
			alert("加载成功！");
		}else{
			alert("加载失败！");
		}
	})
})

请求传参数

$(function(){
	$("#d1").load("http://47.101.177.78/H5APP2/AppServlet/logine",{"na":"admin","pa":"admin"},function(data){
		alert(data);
	})
})

无返回

$(".right").load("Tes.jsp");

AJAX  匿名函数的参数随便命名

ajax的get请求

function 回调函数     data是指服务器响应的信息
$.get("url地址",function(data){
	alert(data)
})

get请求

$(function(){
	$("#bt1").click(function(){
		$.get("http://47.101.177.78/H5APP2/AppServlet/logine",{"na":"admin","pa":"admin"},function(data){
			if(data=="sucg"){
				$("#d1").html("<h1 style='font-size:40px'>用户登入成功！</h1>")
			}else{
				$("#d1").html("<h1 style='font-size:40px'>用户登入失败！</h1>")
			}
		});
    })
})

ajax的post请求

$.post("url地址",{数据1名称：数据1的值,数据2名称：数据2的值....},function(data)){
	alert(data)
}
列题：
function del(id){
	if(confirm("确认删除嘛？")){
		$.post("CarServlet",{"type":"del","id":id},function(data){
			/* showall();//调用此方法  把33换成调用此方法 */
			alert("删除成功！");
			/* location.href = location.href; */
			showall();
		})
	}
}

列：

$.post("servlet",{"type":"edit","id":id,"cna":cname,"cum":cnumber,"co":color},function(ed){
                    if(ed=="u3"){
//成功操作
                        var ii = layer.load();
                        //此处用setTimeout演示ajax的回调
                        setTimeout(function(){
                            layer.close(ii);
                        }, 500);
                        layer.closeAll(function(){ //关闭所有层并执行回调
                            layer.msg("编辑成功！");
                            //刷新
                            cx();
                        });

                    }
                });

Ajax请求

$("#bt2").click(function(){
		$.ajax({url:"http://47.101.177.78/H5APP2/AppServlet/reguser",data:{"na":"test","pa":"test"},success:function(res){
			if(res=="resucg"){
				$("#d2").html("<h1 style='font-size:40px'>用户注册成功！</h1>")
			}else{
				$("#d2").html("<h1 style='font-size:40px'>用户注册失败！</h1>")
			}
		}});
    })

json 更小更快 更容易解析

json 支持数组 逻辑值 对象

json例
var obj={
            "name":"提莫",//键值对
            "age":18,
            "bag":["戒指","红药","眼"],//支持数组
            "gender":true,
			 "gf":{//对象
                "name":"安妮",
                "age":16,
                "addr":"湖南长沙"
            }
        }
        console.log(obj.bag[1]);//取数组第二个
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.gender);
		console.log(obj.gf.name);//访问对象

 //写一个对象 警察 恐怖分子 
 //名字和血量的属性 
 //包 [刀（2），枪(价格) 步枪（价格）]
 var police={
            "name":"雅迪",
            "hp":1000,
            "bag":[{"name":"军刀","price":2},{"name":"沙漠之鹰","price":20},{"name":"AK47","price":25}]
        }
        console.log(police.name);
        console.log(police.hp);
        console.log(police.bag[1].name);
        console.log(police.bag[1].price);
        //循环输出
        for(var i=0;i<police.bag.length;i++){
            var c=police.bag[i];
            console.log(c.name);
            console.log(c.price);
        }

        //forEach遍历
        police.bag.forEach( wp=>{
            console.log(wp.name);
        })
		
		
		 //模仿我发数据给服务器 
        var test={
            "name":"temo",
            "age":18
        }
        var test2=JSON.stringify(test);//json转成字符串
        console.log(test);
        console.log(test2);



        //模拟服务器(后端)发数据给我 html(前端)
        var h='{"name":"temo","age":18}';
        var t=JSON.parse(h);//字符串转换成json
        console.log(t.name);

//json --数据交换格式 （javaScript对象符号）
json使用时导入6个包 

如何将一个对象数组转换成json字符串

创建一个类为book 定义属性 然后放到list集合中
Book b1=new Book();
		//Book b1=new Book(909,"七星剑",45);
		b1.setId(909);
		b1.setName("七星剑");
		b1.setPrice(45);
		
		Book b2=new Book();
		//Book b2=new Book(667,"古龙香",89)
		b2.setId(667);
		b2.setName("古龙香");
		b2.setPrice(89);
		
		List<Book> listbook=new ArrayList<Book>();
		listbook.add(b1);
		listbook.add(b2);
		
		//将列表转换成json字符串
		String j="{\"name\":\"天地会\",\"id\":235}";
		String c="秦朝";

//将一个对象变成json的数组
JSONArray array=JSONArray.fromObject(listbook);

//将json数组转换成字符串
String jsonstr1=array.toString();
System.out.println(jsonstr1);

封装一个方法来转换成json字符串

/**
	 * 将java的列表转换成json字符串
	 * @param list
	 * @return
	 */
	public static String ToJson(List list) {
		JSONArray ja=JSONArray.fromObject(list);
		return ja.toString();
	}

将json转换成字符串

function getbook(){
	$.get("类servlet",function(data){
		//将json字符串转换成jsno对象
		var books=JSON.parse(data);
		for(var i=0;i<books.length;i++){
			var obj=books[i];//获取数组中的元素 这个元素是一个js的对象
			document.write(obj.id+"--"+obj.name+"---"+obj.price+"<br>");//输出
		}
	})
}
列：
function getbook(){
	$.get("BookServlet",function(data){
		$("#d1").text(data);
		//将json字符串转换成jsno对象
		var books=JSON.parse(data);
		//循环遍历获取元素
		for(var i=0;i<books.length;i++){
			var obj=books[i];//获取数组中的元素 这个元素是一个js的对象 
			//输出获取到的元素 
			document.write(obj.id+"--"+obj.name+"---"+obj.price+"<br>")
		}
		
		//$.parseJSON(data) 也可以使用 3.0弃用了
		/* var vg=$.parseJSON(data);
		for(var i=0;i<vg.length;i++){
			var obj=vg[i];
			document.write(obj.id+"--"+obj.name+"---"+obj.price+"<br>")
		} */
	})
}

移掉某一行

$(this).parents("tr").remove()

刷新页面

location.href = location.href;

判断复选框是否被选中 选中为true   未选择为false

var st=$("#chk1").is(":checked");

得到选中的内容

var chlist=$("[name='ckcar']");
	var idstr="";
	
	for(var i=0;i<chlist.length;i++){//遍历所有的复选框
		var cf=chlist[i].checked;//得到每个复选框的状态
		/* alert(cf); */
		if(cf==true){
			 var id=(chlist[i].value);
			 idstr+=id+",";
		}
	}

复选框为选中

$("[name='ckcar']").prop("checked",true);//设置为选中 prop为设置 

复选框不选中

$("[name='ckcar']").removeAttr("checked",false); 

//servlet 返回打印消息 out.println
PrintWriter out=response.getWriter();
		out.println("hello 你好！");
		out.flush();
		out.close();

httpAJAX

AJAX是一种无需重新加载整个网页的情况下 能够更新部分网页的技术

<a href="xxx">
<form action="xxx">
js:
form.submit();  //考试系统 倒计时使用

特点：整个页面变化

网页如何接收 响应消息

响应文本-- responseText

一个事件 onreadystatechange



网页如何发消息给服务器

cf.send(值); post请求
//get请求  cf.open("请求方式","请求地址","true/false") true//异步  false同步
var myname=document.querySelector("#name").value;
	cf.open("get","AjaxServlet?name="+myname,true);
	cf.send(); 
	
	
--get请求发送数据
//get请求发送数据到服务器                        true异步  false同步
	/* 
	cf.open("get","AjaxServlet?name="+myname,true);
	cf.send();
	
	*/



var xm=new XMLHttpRequest();
function co(){
//触发事件去发送数据
xm.open("请求方式","请求的地址","true/false")
xm.send()//发送
}
//准备事件改变是时 得到它返回的值
xm.onreadystatechange=function(){
/**
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

200：ok 
404:未找到页面



**/
	if(cf.readyState==4 && cf.status==200){
		//执行的代码
	}
}



upn.innerHTML=http.responseText;--响应文本

post请求发送数据

//post请求发送数据到服务器 
cf.open("post","AjaxServlet",true);
//必须需要这行  请求头
cf.setRequestHeader("Content-type","application/x-www-form-urlencoded");
cf.send("na="+myname);

--- ajax02

AJAX 返回复杂的数据时？？？

ajax json对象

BbcDaoimpl imp=new BbcDaoimpl();
//json
	Gson gs=new Gson();
	//查询地区
	protected void sere(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, SQLException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=UTF-8");
		/* response.setContentType("application/json;charset=UTF-8"); */
		List list=imp.sere();
		String json=gs.toJson(list);//将list转换成string
		/* response.setContentType("text/html;charset=UTF-8"); */
		response.getWriter().write(json);
	}
	
string转json  -- JSON.parse(值)
String json=gs.toJson(list);//将list转换成string

下拉框改变时

下拉框改变时  元素值发生改变时

onchange="chang()" //下拉框改变时  元素值发生改变时
删除行 deleteRow(下标) 

计算当前时间到指定时间的秒数

计算当前时间到指定时间的秒数
Date da=new Date();
long cf=da.getTime();
//年份需要-1900   月份需要减1 0-11月
Date dat=new Date(2021-1900,5,16,12,00);//预计时间
long ti=dat.getTime();
//得到秒数
System.out.println((ti-cf)/1000);

Math.floor

Math.floor返回小于等于x的最大整数
var d = Math.floor(time/60/60/24);//得到天
var h = Math.floor(time/60/60%24);//得到小时
var m = Math.floor(time/60%60);//得到分钟
var s = Math.floor(time%60);//得到秒数