jQuery公式

一. 概述

1.JQuery是什么

	jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多.

2.优点

	（ 1）提供了强大的功能函数
	（ 2）解决浏览器兼容性问题
	（ 3）实现丰富的 UI 和插件
	（ 4）纠正错误的脚本知识

3. 在页面引入

注意：src路径为编译打包后相对当前文件的js所在地址，而不是实际项目代码中的js所在地址
<script src="js/jquery.js" type="text/javascript" ></script>

二、 jQuery 核心

三、 DOM 对象和 jQuery 包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供的方法。

1. Dom 对象

2. jQuery 包装集|对象

3. Dom 转 jQuery 对象

4. jQuery 对象转 Dom 对象

四、 jQuery 选择器

jQuery 选择器按照功能主要分为”选择”和”过滤”。 并且是配合使用的，具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。

.1 基础选择器 Basics（掌握即可）

<script>
    // id选择器
    var div1 = $("#div1");
    console.log(div1);

    //类选择器
    var cls = $(".test");
    console.log(cls);

    // 元素选择器
    var divs = $("div");
    console.log(divs);

    // 通用选择器
    var all = $("*");
    console.log(all);

    // 组合选择器
    var group = $("#div1,span,.test");
    console.log(group);
</script>

2. 层次选择器 Hierarchy

<div id="parent">层次择器
    <div id="child" class="testColor">父选择器
        <div class="gray">子选择器</div>
        <p>PPPPPPPPPP</p>
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129" />
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129" />
    </div>
    <p>这是一个P</p>
    <div>
        选择器2<div>选择器2中的div</div>
    </div>

</div>

<script>
    // 后代选择器   ancestor descendant    $("#parent div")
    var houdai = $("#parent div");
    houdai.each(function(){
        console.log(this);
    });
    console.log("==============");

    // 子代选择器   parent > child $("#parent>div")
    var zidai = $("#parent > div");
    zidai.each(function(){
        console.log(this);
    });
    console.log("==============");

    // 相邻选择器   prev + next    $(".blue + img")  只会查询指定元素的下一个指定元素（只往下找一次元素）
    var xl = $("#child + p");
    xl.each(function(){
        console.log(this);
    });
    console.log("==============");

    // 同辈选择器   prev ~ sibling $(".blue ~ img")
    var tb = $(".gray ~ img");
    tb.each(function(){
        console.log(this);
    });
</script>

3. 表单选择器Forms

<script type="text/javascript">
   // 表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
   // 非表单元素：div、span、p、h1~h6、img、a、table
   var inputs = $(":input"); // 表单选择器，所有表单元素
   console.log(inputs.length);
   var inputs2 = $("input"); //元素选择器
   console.log(inputs2.length);
</script>

4.过滤选择器(用于元素)

<script type="text/javascript">
   /**
      :checked 选择所有被选中的元素
      :eq(index) 匹配指定下标的元素      eq=equal
      :gt(index) 匹配下标大于指定值的所有元素     gt=great than
      :odd 选择每个相隔的（奇数） 元素
      :even 选择每个相隔的（偶数） 元素
    */
   
   var checkboxs = $(":checkbox");
   checkboxs.each(function(){
      console.log(this);
      console.log(this.checked);
   });
   
   console.log("==============");
   
   var ckeckeds = $(":checkbox:checked");
   ckeckeds.each(function(){
      console.log(this);
   });
   
   console.log("==============");
   var second = $(":checkbox:eq(1)")
   second.each(function(){
      console.log(this);
   });
   
   
   console.log("==============");
   var gtfirst = $(":checkbox:gt(0)")
   gtfirst.each(function(){
      console.log(this);
   });
   
   
   console.log("==============");
   var odds= $(":checkbox:odd")
   odds.each(function(){
      console.log(this);
   });
</script>

5.获取table下的第二列th的值

$(“#myTbody1”).children().eq(1).html());

6.获取选中行tr所对应的某列td的值

$(“#myTbody1 :input:checked”).parent().children().eq(1).html());

7.获取checkbox选中几项

$(“#myTbody1 :input:checked”).length

8.隐藏或者展示form或者table标签

$(“#myForm”).show();
$(“#myForm”).hide();

9.移除radio或者checkbox所有选中项

$(“#sex :radio”).removeAttr(“checked”);

10.设置checkbox全选或者全不选

$("#mycheckbox").click(function () {
  //判断全选框是勾选还是非勾选
   if ($(this).prop('checked')) {
       $("#myTable input[type=checkbox]").prop("checked", true);
   } else {
       $("#myTable input[type=checkbox]").prop("checked", false);
   }
});

五、 jQuery DOM 操作

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动画操作等。注意： 以下的操作方式只适用于 jQuery 对象。

1. 操作元素的属性

<!--
   获取属性的值
      attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。   attr('checked')
         attr('name')
      prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
   
   设置属性的值
      attr(属性名称,属性值);
      prop(属性名称,属性值);
      
   移除属性
      removeAttr(属性名)    移除指定的属性    removeAttr('checked')
   
   如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();
-->

2. 操作元素的样式

<body>
<!--
      attr(“class”)  获取class属性的值，即样式名称
      attr(“class”,”样式名”)
         修改class属性的值，修改样式
      addClass(“样式名”)     后面添加显示style:....
         添加样式名称
      css()  添加具体的样式     后面添加显示style:....
      removeClass(class)
         移除样式名称
   -->
    <div id="div1" class="red">我是div1</div>
    <div id="div2">我是div2</div>
    <div id="div3" class="greenyellow">我是div3</div>
</body>
<script src="js/jquery-1.9.0.min.js"></script>
<script>
    /* attr */
    // 设置元素的class属性（如果属性不存在，则添加属性）
    $("#div2").attr("class","red");

    // 如果属性存在，则修改属性值
    $("#div1").attr("class","dodgerblue");

    // addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
    $("#div2").addClass("larger");

    // css()
    // 添加一个具体样式  css("样式名","样式值")
    $("#div3").css("background","dodgerblue");
    // 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
    $("#div3").css({"color":"red","font-family":"楷体"})

    //removeClass(class)移除样式名称
    $("#div2").removeClass();
</script>

3. 操作元素的内容

4. 创建元素

5. 添加元素

6. 删除元素

<script>
    // remove()
    $("#div1").remove();

    // empty()
    $("#div2").empty();
</script>

7. 遍历元素

</body>
    <!--
        each()
        $(selector).each(function(index,element)) :遍历元素
        参数 function 为遍历时的回调函数，
        index 为遍历元素的序列号，从 0 开始。
        element是当前的元素，此时是dom元素。
    -->
<script>
    $(".green").each(function(index,element){
        console.log(index);
        console.log(this);
        console.log(element.innerHTML); //Dom对象取值
        console.log($(element).text()); //Jquery对象取值
    });
</script>

六、 Jquery 事件

1. ready()加载事件

<!--
			1.ready()加载事件
				ready()类似于 onLoad()事件
				ready()可以写多个，按顺序执行
				$(document).ready(function(){})等价于$(function(){})
				
				onload与ready()的区别：
					1、ready()在DOM结构解析完毕后即执行
					2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行
		-->
		<script type="text/javascript">
			// js的onlooad事件
			/*window.onload = function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			}*/
			
			// jquery的ready事件
			$(document).ready(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
			
			$(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
		</script>

2. bind()绑定元素事件

<body>
		<!--button元素，默认是提交按钮-->
		<button type="button" id="btn">按钮</button>
		<input type="text" id="txt" value="Hello Jquery" />
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<!--
		 1.确定为哪些元素绑定事件
		 	获取元素
		 2.绑定什么事件（事件类型）
		 	第一个参数：事件的类型
		 3.相应事件触发的，执行的操作
		 	第二个参数：函数
	-->
	<script type="text/javascript">	
		/*绑定简单事件*/
		// js绑定事件
		/*document.getElementById("btn").onclick = function(){
			alert('这是个按钮。。。');
		};*/
		
		// bind()绑定事件
		/*$("#btn").bind("click",function(){
			alert('这是个按钮。。。');
		});*/
		
		// 直接绑定事件
		$("#btn").click(function(){
			alert('这是个按钮。。。');
		});
	
		/*绑定多个事件*/
		// 聚焦失焦事件
		// 方式一：
		$("#txt").focus(function(){
			// 聚焦时清空文本框
			$("#txt").val("");
		}).blur(function(){
			$("#txt").val("你好");
		});
		
		// 多个事件绑定一种行为
		$("#txt").bind("focus blur",function(){
			console.log("。。。");
		});
		
		$("#txt").bind("focus",function(){
			console.log("aaa");
		}).bind("blur",function(){
			console.log("bbb");
		});
		
		$("#txt").bind({
			focus:function(){
				console.log("链式编程1");
			},
			blur:function(){
				console.log("链式编程2");
			}
		});	
	</script>

3.常用事件类型

 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
 change( ) 用户改变域的内容 input, textarea, select 
 click( ) 鼠标点击某个对象 几乎所有元素 
 dblclick( ) 鼠标双击某个对象 几乎所有元素 
 error( ) 当加载文档或图像时发生某个错误 window, img 
 focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
 keydown( ) 某个键盘的键被按下 几乎所有元素 
 keypress( ) 某个键盘的键被按下或按住 几乎所有元素 
 keyup( ) 某个键盘的键被松开 几乎所有元素 
 load( fn ) 某个页面或图像被完成加载 window, img 
 mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 
 mousemove( fn ) 鼠标被移动 几乎所有元素 
 mouseout( fn ) 鼠标从某元素移开 几乎所有元素 
 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 
 mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 
 resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 
 scroll( fn ) 滚动文档的可视部分时 window 
 select( ) 文本被选定 document, input, textarea 
 submit( ) 提交按钮被点击 form 
 unload( fn ) 用户退出页面 window

4.事件处理的两种方法

 $("div").click(function(e){...})
          e.type : 事件的类型
          e.target: 事件作用的对象
 jQ().on(事件类型,[obj],function(e){...}
          e.data.[对象名]:   传递对象参数给回调函数的对象可以省略

本人相关其他文章链接

1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf

3.JavaScript入门及基础知识介绍

4.AJax(XHR+Get和Post+AJax的封装)

5.SpringBoot项目的html页面使用axios进行get post请求