jquery： javascript库（jquery-3.3.1.js）

(1) 引入js库:	<script type="text/javascript" src="...." ></script>

	(2) jquery初始化函数：$(function(){...});

1.Dom对象与jQuery对象

Dom节点有三种类型：
		元素节点    <html>   <ul>... <p>
		属性节点  ：title  src  alt ...
		文本节点： 文本节点

	Dom对象：
		以上三种节点类型的具体对象 就是Dom对象。
		使用：JavaSCript能够直接操作的对象，就是Dom对象。

	jQuery对象：
			jQuery能够直接操作的对象，就是jQuery对象。
			例如：var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。

	同样一个元素，即可以成为一个dom对象（javascript对象），也可以成为一个jquery对象
	
	注：dom对象 只适用于js的各种语法（函数、属性），jquery对象只用于jquery的各种语法（函数、属性）。
dom对象->jquery对象 : jquery工厂，$(dom对象)
	
	jquery对象 ->dom对象：
		原理：jquery对象默认是一个数组 或集合   ；dom对象默认是一个单独的对象

		数组：jquery对象[0]
		集合：jquery对象.get(0)

2.Jquery选择器

标签选择器：$("标签名")

	类选择器：$(".class值")

	id选择器：$("#id值")

	并集(或)选择器（逗号,）：$(".class值,#id值")
	
	交集选择器（同时存在）直接写：$(".class值#id值")$("p.myStyle").html()（选中 即是p标签，并且class的值是myStyle）
	
	全局选择器：$("*")
相邻选择器（+）：$("选择器1+选择器2")

	同辈选择器（~）：$("选择器1~选择器2")

	后代选择器（空格）：$("选择器1 选择器2")

	子代选择器（>）：$("选择器>选择器2")
$("[属性名]")
	$("[属性名=属性值]")
	$("[class!=a]")  不等于， 包含两种： 有class但值不是a,   没有class
	$("[class^=a]")  class以a开头的元素
	$("[class$=a]")  class以a结尾的元素
	$("[class*=a]")  class有a的元素
:first ：最开头那一个
	:last  ：最后那一个
	:even  ：偶数
	:odd   :奇数
	:eq(index)：第index个

	:gt(index)   : >index的全部元素
	:lt(index)   : <index的全部元素
	:not(选择器) :除了...以外
	:header      :选中所有的标题元素 h1 h2 <h1>
	:focus       : 获取当前焦点的元素
:visible ：选中所有可见的元素
	:hidden：选中所有隐藏的元素

3.事件、事件函数（事件方法）

js: onXxx
	onclick();
	写在<script>内，ready()外；

jquery: Xxx
	click(); 
	ready(function(){

		$(选择器).事件类型(function(){
			...
		});
	});
click()：单击事件
	mouseover():鼠标悬浮
	mouseout():鼠标离开
keydown():按键 从上往下的 过程
	keypress() ： 按键被压到 最底部
	keyup()：松开按键
focus()：获取焦点
	blur()：失去焦点
绑定事件：$(...).bind("事件名",[数据],函数);

	批量绑定：$(...).bind({ "事件名":函数   ,  "事件名":函数 ,...,"事件名":函数 }) ;

	移除事件：$(...).unbind("事件名");
hover(f1,f2)：切换使用mouseover()和mouseout()
hide()：隐藏形式--> hide([速度],[回调函数]);
	show()：显示
	toggle()：切换隐藏与显示
	fadeIn()：淡入  显示
	fadeOut()：淡出 隐藏
	slideDown()：下拉，显示
	slideUp()：上拉  隐藏

4.操作DOM

jquery对象.css("属性名","属性值");
		jquery对象.css({ "属性名":"属性值"      ,"属性名":"属性值" ,...,"属性名":"属性值"     });
addClass("x");
		addClass("x x x");
		removeClass(x);
		removeClass(x x );
		removeClass()：移除全部样式
		toggleClass("x x x")：切换追加与移除
html()：获取值 ，获取的是元素 的内容 ，包含了 元素内部的 各种标签
	html(xxxx)：先渲染，后显示

	text()：获取值 ，值获取文本值
	text(xxxx)：將值原样显示，没有渲染

	val()：获取value值
	val(xxx)：设置value值
①查询节点：（jquery选择器）
		
		②创建节点： $()
			$(选择器):获取节点		
			$(DOM对象)：转换
			$(html字符串)
			
		③插入节点  文档
		
		④替换节点
			$X.replaceWith($Y)	：用$Y替换$X	
			replaceAll();
			
		⑤删除节点
			remove()：彻底删除
			detach()：将结点删除，但关联的事件、数据不会删除（不推荐使用）
			empty()：只删除内容
			
		⑥克隆节点
			clone(true|false)
			$(document).ready(function(){     
				$("li").click(function(){  ... });
			});			
			  <li>xxxx</li>
attr("属性名")：获取属性值
		attr("属性名","属性值")：设置属性值
		attr({ "属性名":"属性值", "属性名":"属性值" , "属性名":"属性值" } );
		removeAttr("属性名")：删除属性值
子节点集合 
		$(...).children( "li")

	后代集合
	 	$(...).find( "li")

	同辈集合
		next()：后一个  +
		prev(): 前一个
		siblings()：同辈，左、右

	前辈
		parent()：父代
		parents("ul")：祖先

	过滤集合：
		(1)很多方法的()就是一个过滤选择器
		(2)filter("选择器...");  

	遍历集合：
	$(...).each(function(index,element){...});
height(500) ;
	width(500)

	offset()：偏移量（左上角的点）,left top
	offset(function(n,oldOffset){   ... })

	offsetParent()：获取  （已定位）的最近的祖先元素
	

	scrollLet()
	scrollTop()
(1) 获取要校验的元素值(选择器) 用户名、密码
  	(2) 通过字符串处理方法或者正则表达式等手段进行校验
	(3) 触发校验的方法或事件（校验）
		blur()：失去焦点时触发
		submit()：当点击表单的 “提交submit”按钮时触发
		onblur="xxx()"
		onsubmit="xx()"