jQuery

jQuery

① 概念

jQuery是一个javascript的框架，是对javascript的一种封装。 
使用前一定要引入外部的jquery.js文件
<script src="./js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
注意：路径问题

② 理解 $(function(){})

$(function(){});  表示文档加载。

其实是由下面两种构成： 
$(); 和 function(){ }  合并在一起就是：  $(function(){ });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。换句话说，
写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。一样功能，
还有另一个写法
$(document).ready(function(){  });
它也是由两部分组成
$(document).ready();  和  function(){ }

③ 通过选择器获取元素

与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了
需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 JQuery 对象

1> 取值

通过JQuery对象的val()方法获取值,相当于 document.getElementById("input1").value; 
//获取元素内容,如果有子元素，保留标签 
通过html() 获取元素内容,如果有子元素，保留标签 
通过text() 获取元素内容,如果有子元素，不包含标签 

var val1=$("选择器").val();  // input输入框 select下拉框  类似于 value属性
var content=$("选择器").html(); // divspan textarea双标签中内容就使用html 类似于innerHTML

2> 设置值

$("选择器").val("值");
$("选择器").html("内容");

④ JQuery转DOM

通过get(0)或者[0] 把JQuery对象转为DOM对象 

⑤ DOM转jQuery

通过$() 把DOM对象转为JQuery对象 

⑥ JQuery属性

1> 通过attr()获取一个元素的属性

  $("选择器").attr("属性名")

2>通过attr(attr,value)修改属性

  $("选择器").attr("属性名","属性值") ;

3>通过removeAttr(attr)删除属性

  $("选择器").removeAttr("属性名");

4>prop与attr的区别

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
    attr 只能获取初始值， 无论是否变化
    prop 能够访问变化后的值，并且以true|false的布尔型返回。
    所以在访问表单对象属性的时候，应该采用prop而非attr 

⑦ JQuery效果

1> 显示 隐藏 切换

显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000) 

2> 向上滑动 向下滑动 滑动切换

向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现 
也可以加上毫秒数，表示延时操作，比如slideUp(2000) 

3> 淡入 淡出 淡入淡出切换 指定淡入程度

淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入

4>自定义动画效果

通过animate 可以实现更为丰富的动画效果 
animate()第一个参数为css样式 
animate()第二个参数为延时毫秒 
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000);
   });
});

5>回调函数

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。 
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");
    });
   });
});

⑧ 事件

1> 加载

页面加载有两种方式表示 
1. $(document).ready(function(){}); 
2. $(function(){}); 这种比较常用 
图片加载用load()函数 
3.  $("#img").load(function(){
      $("#msg").html("图片加载成功"); 
    });

2>点击

click() 表示单击 
dblclick() 表示双击 
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件
示例：
      $("#b").click(function(){
          $("#msg").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#msg").html("双击按钮");
      });

3>键盘

keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
    这三者的区别分别表现在发生的 先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
    先后顺序： 按照 keydown keypress keyup 顺序发生
    键盘按钮值：
    通过event对象的which属性获取键盘的值
    keydown和keyup 能获取所有按键，不能识别大小写
    keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
    文本取值：
    keydown和keypress：不能获取最后一个字符
    keyup： 获取所有字符
    如图所例，敲入ab
    发生的先后顺序是 keydown,keypress,keyup
    keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
    keydown和keypress只能取到文本值a, keyup可以取到ab 

4>鼠标

    mousedown 表示鼠标按下 
    mouseup表示鼠标弹起 
    mousemove表示鼠标进入 
    mouseenter表示鼠标进入 
    mouseover表示鼠标进入 
    mouseleave表示鼠标离开 
    mouseout表示鼠标离开 
进入事件有3个 mousemove mouseenter mouseover 
    mousemove ：当鼠标进入元素，每移动一下都会被调用 
    mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用 
    mouseover：当鼠标进入元素，调用一下，在其中移动，不调用 

mouseenter 和 mouseover的区别 
    mouseenter: 当鼠标经过其子元素不会被调用 
    mouseover：当鼠标经过其子元素会被调用 

mouseleave 和 mouseout的区别 
    mouseleave: 当鼠标经过其子元素不会被调用 
    mouseout：当鼠标经过其子元素会被调用 

5>焦点

focus() 获取焦点 
blur() 失去焦点 

6>改变

change() 内容改变 
注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。 

7>绑定事件

以上所有的事件处理，都可以通过on() 绑定事件来处理
$("selector").on("event",function);

$("#b").on("click",function(){
     $("#message").html("单击按钮");
});

8>触发事件

      $("#b").on("click",function(){
          $("#msg").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#msg").html("双击按钮");
      });
     $("#b").trigger("dblclick");

⑨ Ajax

1>提交AJAX请求

参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证，当用户输入值的时候提示"已经存在"
完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。
 
$.ajax({
   url: page,
   data:{"name":value},
   success: function(result){
      $("#选择器").html(result);
   }
});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数 

2> get

$.get 是 $.ajax的简化版，专门用于发送GET请求 
 
$.get(
     page,
     {"name":value},
     function(result){
         $("#checkResult").html(result);
      }
);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选 

3> post

$.post 是 $.ajax的简化版，专门用于发送POST请求 
 
$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);
$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

4> load

$("#id").load(page,[data]); 
id: 用于显示AJAX服务端文本的元素Id 
page: 服务端页面 
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表 

5> 表单格式化

serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串 
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "请求地址";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});

⑩ Json转换字符串

将JSON格式的字符串，转换为JSON对象


$.parseJSON 将JSON格式的字符串，转换为JSON对象 
  var json对象 = $.parseJSON('json格式字符串');

数组的操作

1> 遍历

$.each 遍历一个数组 
第一个参数是数组 
第二个参数是回调函数 i是下标，n是内容 

$.each( 数组, function(i, n){
     
});

2>去除重复

$.unique() 去掉重复的元素
注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。

var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})

3> 是否存在$.inArray

$.inArray 返回元素在数组中的位置 ，如果不存在返回-1 

var a = new Array(1,2,3,4,5,6,7,8);
document.write($.inArray(9,a));

阻止事件传播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止事件传播</title>
		<style type="text/css">
			.big {
				width: 150px;
				height: 150px;
				background-color: lightblue;
			}

			.small {
				width: 100px;
				height: 100px;
				background-color: lightgreen;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="small">

			</div>
		</div>
		<script src="./js/jquery-3.3.1.min.js"
		 type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".small").click(function(event) {
					alert("点击了小块");
					//event.stopPropagation();//阻止了事件的传递
					return false;
				});
				$(".big").click(function() {
					alert("点击了大块");
				});
			});
		</script>

	</body>
</html>