jquery基本语法、选择器、属性操作、css类操作、事件、效果、文档处理、遍历、表单校验基本知识详解

1.jQuery的理解：

1.jQuery是一个快速、简洁的JavaScript框架，封装了javascript常用的功能代码，提供一种简便得javascript设计模式，优化HTML文档操作、事件处理、动画设计、Ajax交互
2.核心特性
	1.具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件
3.理解：
	1.JQuery是js封装的框架（代码库）
	2.宗旨：写更少的代码，做更多的事
	3.jquery将js代码封装成函数 比如：文档操作  事件处理  动画
	4.提供了丰富的插件（复杂的功能）
4.使用
	1.下载jQuery的js文件www.jquery.com
	2.将jquery.min.js上线版或者 jquery.js引入到当前页面中
	3.格式：
		<script type ="text/javascript"src = "js/jquery-3.4.1.js"></script>

2.jquery基本语法：核心函数$();

1.window.onload的封装
	1.原生的js写法
		window.onload = function(){}
	2jQuery的第一种写法.jQuery(document).ready(function(){});
	2.jQuery的第二种写法：$(document).ready(function(){});
	3.jQuery的第三种写法：$(function(){})
2.获取标签元素封装：
	作用：将js中获取标签元素的函数封装成了$(选择器)
	使用方式：
		原生js获取标签元素：
			var d1 = document.getElementById("d1"); 
			 console.log(d1);//js原生对象
                jquery获取：
                var dd1 = $("#d1");  
                cosole.log(dd1);//jquery对象

js原生对象和jquery可以相互转换

原因：原生js对象不能调用jquery中函数，jquery对象也不能调用js的属性
1.jQuery对象转换成原生js对象
	jquery对象转换为js对象的时候，需要将jquery数组中的js原生对象通过数组角标的方式取出
2.原生js对象转换成jQuery对象
	js原生对象转换为jquery对象的时候需要给js原生对象加$，将其转换为jquery对象

4.jquery核心内容：

1.选择器：方便的获取对应的标签
	1.基本选择器
		1.ID选择器
			var  $p1= $("#p1");
		2.class选择器
			var $p2 = $(".class")
		3.标签选择器
			var $p3 = $("p");
		4.*选择器
			var $4 = $("*");
		5.组合选择器
			var $5 =$("#p1,div,#sp,.p1");
	2.层级选择器：
		1.$("parent child"): 获取parent所有的后代child标签  包括 儿子 算子  重孙子
		2.$("parent->child")：获取parent后代child标签儿子
		3.$("prev+next"):获取prev下一个相邻的兄弟next标签
		4.$("prev~sibling")：获取prev下面的所有兄弟sibling标签
	3.过滤选择器：
		1.first：
			1.first:获取第一个li标签
			html():jquery对象获取中间内容
		2.last:
			last：获取最后一个
		3.not():不包含的
		4.even:
			even  匹配偶数行 从0开始
		5.odd:
			odd:匹配奇数行 从0开始
		6.eq(index)：
			eq(index):匹配指定索引的元素，从0开始
		7.gt(index):
			gt(index):匹配大于指定索引的元素
		8.lt(index):
			lt(index):匹配小于指定索引的元素
		9.header:
			匹配标题元素 比如：h1 h2....
	4.内容选择器：
		1.：contains(text):匹配包含指定文本内容的元素
			$("div:contains(你要加油)")
		2.：empty：匹配空文本的元素
			$("div:empty");
		3.：has（选择器）：匹配包含某个标签的元素
			$("div:has(.p1)")
		4.：parent,匹配包含子元素或者子文本的元素
			$("div:parent");
	5.可见性选择器：
		1.:hidden 匹配隐藏的元素
			$(":hidden")
		2.:visible 匹配可见的元素
			var p1 = $("input:visible")
	6.属性选择器：
		1.【attribute】:匹配包含xx属性的
			var p1 = $(“【name】”)
		2.[attribute = value]:匹配属性包含属性值等于xx的
			var p2 = $("[class = d3]")
		3.[attribute!=value]:匹配属性值不等于xx
		4.【attribute^=value】:匹配属性值以xx开头
		5.【attribute$=value】:匹配属性值以xx结尾
		6.【attribute*=value】：匹配属性值中包含xx
	7.子元素：
		1.:nth-child(n)匹配子元素中第几个
		2.：first-child 匹配第一个子元素
		3.：last-child：匹配最后一个子元素
		4.：only-child  匹配仅有唯一子元素
	8.表单选择器：
		1.：input 匹配所有的input框、textarea、select...
		2.:text匹配type属性 是text的input框
		3.：password
		4.submit
		5.radio
		6.checkbox
		7.file
		表单对象属性：
			：enabled：可用的
			：disabled   不可用
			：checked  被选中的
			：selected 被选中的

2.属性操作

	1.attr（{属性名：属性值，属性名：属性值.....}）:设置或者返回属性
		注意：
			1.attr可以设置标签的属性，也可以设置自定义属性
			2.获取属性的时候，如果是checked之类的，属性值存在返回具体值 不存在返回undfinned
	2.remove(属性名)；删除属性
	3.prop({属性名：属性值，属性名：属性值....})：设置或者返回属性
	4.remove PRop（属性名）：删除属性
	注意：
		1.prop只可以设置标签自带的属性
		2.获取属性的时候如果checked之类的属性值存在返回true，如果不存在返回false
		3.删除属性只能删除prop设置的属性

3.css类操作：

	addClass():添加class
	removeClass()：删除class
	toggleClass():有就删除 没有就添加

4.html代码/文本/值

	1.html(val|func):innerHTMl
	2.text(val|func):innerText
	3.val(val|func):value input框的

5.css操作

	css():匹配访问元素的样式，一个参数获取多个参数设置

6.事件：

	1.鼠标点击事件
		1.onclick = function(){}-------->click(function(){});
	2.鼠标双击事件
		2.ondbclick = function(){}--->dblclick(function(){});
	3.内容改变事件
		3.onchange = function(){}-->change(function(){})
	4.焦点失去事件
		4.onblur = function(){}-->blur(function(){});
	5.得到焦点事件
		5.onfocus = function(){}--->focus(function(){});
	6.鼠标移上事件
		6..onmouseove = function(){}--->mouseover(function(){});
	7.鼠标移下事件
		7.onmouseout = function(){}--->mouseout(function(){});
	8.键盘上升事件
		8.onkeyup = function(){}--->keyup(function(){})
	9.键盘按下事件
		9.onkeydown = function(){}-->keydown(function(){})

7.效果

	1.基本效果：
		show()；显示
		hide():隐藏
		toggle（）：开关
	2.滑动效果
		slideDown（）滑动打开
		slideUp():滑动关闭
		slideToggle（）：开关
	3.淡入淡出
		fadeIn():淡入
		fadeOut（）：淡出
		fadeTo():指定透明度
		fadeToggle（）：开关
	4.自定义动画
		animate({样式}，事件 function(){});

8.文档处理（js中的dom操作）

	1.内部插入  （父子关系）
		1.append():将后面的元素标签插入到前面的元素标签的内部最后面
		2.appendTo():将前面的元素标签插入到后边元素标签的内部最后面
		3.prepend():插入到最前面，将后面的元素标签插入到前面的元素标签的内部最前面
		4.prependTo():将前面的元素标签插入到后面元素标签的内部，最前面
	2.外部插入（兄弟关系）
		1.after():将函数中的参数插入到调用者的后面
		2.before():将函数中的参数插入到调用者的前面
		3.insertAfter();将调用者插入到函数中参数的后面
		4.insertBefore():将前调用者插入到函数中的参数的前面
	3.包裹：
		1.wrap():将调用者使用函数的参数包裹起来
		2.unwrap()：去除调用者的父元素
		3.wrapAll（）：所有匹配到的调用者统统的使用函数的参数包裹
		4.wrapInner()：调用者的文本内容使用函数的参数包裹起来
	4.替换：
		1.replaceWith（）：将调用者（包含内容替换成函数参数标签）
		2.replaceAll()：将函数的参数替换成调用者
	5.删除：
		1.empty():清空内容
		2.remove():删除该元素
		3.detach():删除该元素
	6.克隆（复制）：
		clone():复制

9.遍历：

	1.$.each(遍历的对象，function(下标，每一个元素对象.js){});
	2.遍历的对象.each(function(下标，每一个元素对象.js){});

10.ajax 需要和后台进行交互：（后续补充）

11.表单校验的插件

	1.下载validate和jQuery.js文件
		jquery.validate.js表单校验插件
		jquery-3.4.1.js jquery
		messages_zh.js：支持中文
	2.导入到页面中
	3.指定校验规则：
		1.required:true 必填字段
		2.remote:"check.php"：使用ajax方法调用check.php验证输入值
		3.email:true必须输入正确格式的电子邮件
		4.url:true 必须输入正确格式的网址
		5.date:true 必须输入正确格式的日期
		6.dateISO：true必须输入正确格式的日期（ISO）
		7.number:true 必须输入合法的数字（）负数，小数
		8.digits:true 必须输入整数
		9.credit card:必须输入合法的信用卡号
		10.equalTo：“#field”输入值必须和#fiedl相同
		11.accept:输入拥有合法后缀名的字符串（上床文件的后缀）
		12maxlength:5 输入长度最多是5的字符串（汉字算一个字符）
		13.minlength：10输入长度最小是10的字符串（汉字算一个字符）
		14.rangelength:[5,10] 输入长度必须介于5和10之间的字符串
		15.range:[5,10] 输入值必须介于5和10之间
		16.max:5 输入值不能大于5
		17.min:10输入值不能小于10

5.bootstrap前端框架简介：

1.理解：
	1.简洁、直观、强悍的前端开发框架，让web开发迅速、简单
	2.用于开发响应式布局、移动设备优先的web项目
2.特点：
	1.前端开发框架（将htnl、css、js封装起来）
	2.响应式布局（随着屏幕大小自动调整样式）
	3.适用于手机、平板
	4.简单快速
3.使用：
	1.下载www.bootcss.com
	2.配置基本模板：将下载的css js fonts 导入到应用中

6.jquery和bootstrap常用网站推荐：

1.jquery插件：www.jq22.com
2.bootstrap:www.bootcss.com
3.w3school：www.w3school.com
4.菜鸟教程 www.runnoob.com