jQuery

简介

1. 它是JS的前端框架之一。
   市场上主流的JS框架很多：vue、Jquery、prototype、Ext.js、node.js、AngularJS….等等。
2. Jquery的设计思想，是将原本的dom操作封装成一个Jquery对象，通过调用Jquery函数来操作dom节点。
3. Jquery屏蔽了浏览器兼容问题。
4. Jquery封装了Ajax技术。
5. Jquery拥有非常强大的选择器。

• 如何使用？
  在html页面中导入Jquery
  <script src="../js/jquery-3.4.1.min.js" type="application/javascript"></script>
  src属性：对应是Jquery所在文件地址。

• Jquery 与 JS 的区别
  区别在于获取节点的方式与操作节点方式发生了根本的改变。

jquery：中使用$(选择器)获取节点。

JS：中使用document对象的函数来获取节点。

<!-- jq -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	//Jquery的页面加载即刻执行
	$(function(){
		console.log("Jquery的页面加载即刻执行...");
		$("button:eq(0)").click(function(){
			console.log("按钮被点击");
		})
	});
</script>

<!-- js -->
<script type="text/javascript">
	window.onload = function() {
		console.log("JS页面加载即执行...");
		document.getElementById('btn').onclick = function() {
			console.log("按钮被点击...");
		}
	}
</script>

选择器

用于查找指定的某个节点或者某一些节点。

1.基本选择器
	id选择器
	类选择器
	标签选择器
	属性选择器
		=：完全匹配
	   !=：完全不匹配
	   ^=：以某个字符开头
	   $=：以某个字符结尾
	   *=：包含某个字符
	 比如：$('div[title$=v]').css("color","red");//查找 div标签中带有title属性并且title属性的值是以v结尾的
	 	   //多属性选择器。
	 	   //查找input标签，必须包含id属性和name属性的值必须以man结尾
	 	   //prop()：设置当前节点的属性和属性值
	 	   $('input[id][name$=man]').prop("value","张三");	 	
	伪类选择器
		li:first-child：//查找第一个子元素
		li:last-child：//查找最后一个子元素
		li:nth-child(2)：//查找指定位置的元素
		li:empty：//查找空元素

筛选器/过滤选择器(重点)

大于	大于等于	等于	小于	小于等于	不等于
gt	ge	eq	lt	le	!=
>	>=	=	<	<=	!=

$('li:first')：获取第一个元素
$('li:last')：获取最后一个元素
$('li:even')：获取奇数
$('li:odd'):：获取偶数
$('li:eq(0)')：获取下标为0的元素
$('li:gt(4)')：获取下标大于4的元素
$('li:lt(2)')：获取下标小于2的元素
$('li:not(li:empty)')：获取除了空节点的所有元素。

表单元素选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域
$(":disabled")   //获取所有不可修改的节点
$('input:checked') //获取所有已选中的多选框
$('input:selected')//获取选中的下拉选框
 
总结：
	表单元素选择器 与 属性过滤选择器 本质上的差别就是少些了一个input
	比如：
		属性选择器：$("input[type=text]").css("background-color","red");
		表单选择器：$(":password").css("background-color","red");    

层次选择器 筛选、过滤器

first()：返回第一个节点元素
last()：返回最后一个节点元素
next():返回下一个兄弟元素
nextAll(selector)：默认返回当前节点同级别的下面的所有节点，可以按照selector进行筛选
prev()：返回当前节点同级别的上一个元素
prevAll(selector)：默认返回当前节点同级别的上面的所有节点，可以按照selector进行筛选
parent()：返回的是当前节点的直接父元素
parents(selector)：返回当前节点所有的祖宗元素，可以按照selector进行筛选
eq(1)：匹配指定下标的节点元素
find(selector)：筛选指定selector的元素节点
siblings(selector)：返回当前节点前后所有兄弟元素。可以按照selector进行筛选
children(selector)：返回当前节点的所有子元素，可以按照selector进行筛选，只能查找直接子元素

事件

1.鼠标事件
	click(function callback)：单击事件。
    dblclick(function callback)：双击事件。
    
    mouseenter(function callback)：鼠标移入
    mouseleave(function callback)：鼠标移出
    mouseover(function callback)：鼠标移入
    mouseout(function callback)：鼠标移出
    
    hover(function callback,function callback)：鼠标移入移出的整合
    
2.键盘事件
	keydown - 键按下的过程
	keypress - 键被按下
	keyup - 键被松开

3.表单事件
	focus：获取焦点事件
    blur：失去焦点事件
  	change：值改变事件
    submit：表单提交事件，在表单提交之前所触发的事件，多用于表单验证。
    
    
4.事件绑定函数
	bind({})：可以绑定多个事件(已过时)
    on({})：可以绑定多个事件
    one({})：可以绑定多个事件,事件只能触发一次。

// 事件绑定函数
$(function() {
	$('li').on({
		click: function() {
			console.log("我被点击了...");
		},
		mouseenter: function() {
			console.log("我进入了...");
		},
		mouseleave: function() {
			console.log("我出去了...");
		}
	})
})

DOM

1.样式操作
	css();方法设置或返回被选元素的一个或多个样式属性。
		css(param):获取样式属性值
		css("","")：设置单个样式
		css({})：设置多个样式
	addClass()：添加样式
	removeClass()：删除样式
	toggleClass()：切换样式
	
2.内容操作
	text()：只更改文本内容，不会将HTML标签解析。
	html()：改文本内容，会将HTML标签解析。
	val()：获取或设置input节点的value属性值
	
3.属性的操作
	attr();获取或设置节点的属性
		attr("")：获取指定属性的值
		attr("","")：设置属性值
		attr({})：设置多个属性值
		
	prop();类似于attr

4.节点的操作
	1.增加节点：
		a)创建新的节点
			$("<li></li>")
		b)将新节点追到到指定节点中
			obj.append($("<li></li>"));
	2.删除节点
		remove():删除一个节点
		empty();不删除节点，只将节点的内容置空
	
	3.复制节点
		clone()：只复制节点和内容不复制事件
		clone(true)：复制节点的一切
		
	4.替换节点
		replaceWith:替换一个节点
		replaceAll：替换一个节点

动画

将一个元素显示或者隐藏，或者按照既定的样式进行显示。

1.隐藏/显示
	hide():
	show():
2.淡入/淡出
	fadeOut:淡出
	fadeIn：淡入
	fadeToggle：淡入淡入的切换
3.滑动
	slideUp：向上滑动
	slideDown：向下滑动
	slideToggle：滑动切换

4.自定义动画【了解】
	animate()

循环 each

语法：

$.each(数组,function(下标,每份){
})

选中的数组.each(function(下标,每份){
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#b1").on("click",function(){
					// 遍历dom对象方式一
					var texts = $(":text");
					$.each(texts,function(index,item){
						console.log(index,item.value);
					})

					// 遍历dom对象方式二
					$(":text").each(function(i,iteam){
						console.log(i,iteam.value);
					})
				});

				// 遍历json
				$("#b2").on("click",function(){
					var jsonArr = [{"name":"张三","age":"22"},
					{"name":"li4","age":"22"},
					{"name":"wang5","age":"22"},]

					$.each(jsonArr,function(index,item){
						console.log(item.name+item.age);
					})
				})
			})
		</script>
	</head>
	<body>
		<p>文本框</p>
		<input type="text" value="刘备" /><br>
		<input type="text" value="关羽" /><br>
		<input type="text" value="张飞" /><br>

		<input type="button" id="b1" value="点击">

		<input type="button" id="b2" value="点击">
	</body>
	<script>
	</script>
</html>

JSON

JavaScript Object Notation 简称js对象符号。
简单理解：一大堆字符串。用于后端与前端进行数据交互的一种技术。属于中间数据转换的一种语言。

语法：{"属性":"属性值"}

ajax

Asynchronous JavaScript and XML = 异步 JavaScript 和 XML
是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

var xhr = new XMLHttpRequest();

XmlHttpRequest对象常用重要属性:
open(methodType,url)：设定发送请求的方式和请求的地址。
setRequestHeader()：设置请求的消息头
onreadystatechange：注册一个监听器【绑定一个事件处理函数】

readyState：返回网络协议状态值
    0：未初始化状态【对象已经创建，尚未调用open方法】
    1：初始化状态【xhr调用了open方法】
    2：发送数据【send已经被调用】
    3：数据传输中【已经接受部分数据】
    4：响应结束【接收了所有的数据】

status：浏览器返回的状态码
    200：浏览器接收完毕，数据正常接收
    
responseText：服务器返回的数据。
send()：发送请求，请求中可以包含请求数据

原生方式

用原生方式写 动态监测输入用户名是否被注册

<html>
<head>
    <meta charset="utf-8"/>
    <title>获取XmlHttpReuqest对象</title>
    <script type="text/javascript">
        // var xhr = new XMLHttpRequest();
        // console.log(xhr);
        function check_username() {
            //1.获取 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            //2.发送请求
            xhr.open("post", "checkusername");
            //3.设置请求消息头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //4.绑定网络传输监听
            xhr.onreadystatechange = function () {
                //获取服务器返回的数据，更新页面
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //响应接收完毕,获取服务器返回的数据
                        var txt = xhr.responseText;
                        console.log(txt.length);
                        if (txt.trim() == "用户名被占用") {
                            document.getElementById('username_msg').innerText = txt;
                            document.getElementById('username_msg').style.color = "red";
                        } else {
                            document.getElementById('username_msg').innerText = txt;
                            document.getElementById('username_msg').style.color = "green";
                        }
                    }
                }
            }
            xhr.send("username=" + document.getElementById('user-name-label').value);
        }
    </script>
</head>
<body>
<h1>判断用户名是否被占用</h1>
<form action="#" method="#">
    用户名：<input type="text" id="user-name-label" name="username" onblur="check_username();"/>
    <span id="username_msg"></span>
</form>
</body>
</html>

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/checkusername")
public class CheckUserNameServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
        if(username.equals("1224976993@qq.com")){
            response.getWriter().println("用户名被占用");
        }else{
            response.getWriter().println("用户名可以使用");
        }
    }
}

Jquery对Ajax支持

Jquery对原生的ajax做了很好的封装特性。
提供了基于ajax()方法对服务器访问的函数。

函数以及语法

函数：
1.ajax({}) : jquery提供的最基础的ajax访问函数，如 load,get,post函数都是基于ajax()函数的

    语法：
    $.ajax({});
    ajax()函数的常用属性：
    ajax({
        url:		浏览器请求地址
        async:		同步 | 异步	  默认是异步，true是异步， false是同步
        type:		请求的方式
        dataType:	响应的数据类型		 text【文本】 html【html内容】 json【后台解析过的对象】
        success:	成功后的回调函数
        error:		失败后的回调函数
    }):


2.load：方法从服务器加载数据，并把返回的数据放入被选元素中。

   语法：
   	load(url,{},function(data){})
 	url:浏览器请求地址
 	{}:要发送给服务器的数据
 	function(data) : 成功后的回调函数,data是服务器返回的数据
 
3.get
	语法：	
	$.get(url,function(data){})
	$.parseJSON(data)：将指定格式的字符串转换为JSON对象

4.post
	语法：
		post(url,{},function(data){})
	
5.serialize()
	将表单序列化，然后浏览器引擎会将表单的数据转换为form data
	发送给服务器。

例子：

$.ajax({
	url:"user",					//访问user链接
	type:"post",				//post方式访问
	data: $('#addForm').serialize(),		//需要发送的数据(可多个 需要大括号包围、自定义key：value)；serialize()表示序列化。
	dataType:"text",			//函数返回的值将由jQuery进一步处理
	success:function(data){				//成功后，返回的的数据
		console.log(data);
	}
})

prop与attr

获取在匹配的元素集中的第一个元素的属性值。
$("#xxxx").prop("checked");

设置或返回被选元素的属性值。
$("img").attr("src");

转跳到某个页面

window.location.href="/index";

md5加密

var loginPassword = $.md5($("#loginPassword").val());

dom对象与jq对象转换

dom对象---> jq对象
语法：
	$(dom对象)
用$包一下即可

---

jq对象--->dom对象
语法：
	jq对象[0]		或者		jq对象.get(0)

下拉列表注意点

<option value="1234567">文本内容</option>

$("xxx").text();
<!-- 输出的是整个下拉别表的文本内容 -->

$("xxx").val();
<!-- 输出的是 value值  1234567 -->

$("xxx :selected").text();
<!-- 这个才是输出下拉列表选中的内容，注意：冒号前面要空格 -->