JQuery基础

JQuery基础

1.概念

• JavaScript库 -> 提高编写效率 通过更少的代码实现更多的功能
• 注意 -> JQuery能实现的功能JavaScript必定能实现 反之不可（灵活性不够）
• 扩展: 原生态->复杂难度高 兼容性灵活性 VS 框架（工具）-> 开发效率高 固化规范
• jquery-1.12.4.js

2.环境 -> 自行安排

IDE : JetBrains WebStorm 
Broswer : Google Chrome
分辨率 : 考虑因素

3.语法 -> 链式语法

标志 -> $() : JQuery工厂产生（获取）JQuery对象
结构 -> 页面加载事件
	$(document).ready(function(){
        alert("Hello JQuery");
    });
	简化为 ->
	$(function(){
		alert("Hello JQuery");
	});
注释 -> Ctrl+Shitf+/ 
风格 -> $().属性().方法().事件(function(){}).xxx()

4.API（术语） ->

***选择器*** -> 核心基础（定位操作对象[集合]）
基本选择器 <> css选择器
	id选择器 	-> $("#id")	单个对象
	class选择器	-> $(".class") 对象集合
	标签选择器 	-> $("标签") 对象集合
	系统变量	-> 
		$(this) 当前对象
		$(window)
		$(document)
		
层次选择器 
	概念 层次模型（树形结构） ->  算法 递归
	理论 除根节点外 其他节点有且只有一个父节点
	应用 列表标签 盒子模型
	注意:
	1) 邻居
		+		-> 后一个
		next()	-> 后一个
		perv()	-> 前一个
	2) 同级
		~		-> 后面同级
		siblings()	->前后同级
	3) 后代
		[空格]	-> 所有子孙
		find()	-> 所有子孙
		parents() -> 所有父代
	4) 父子
		>		-> 子代一级
		childern() -> 子代一级
		parent() -> 父代一级
		
属性选择器 []
	1)完全匹配
		$("选择器[属性='值']")
	2)从头匹配
		$("选择器[属性^='值']")
	3)结尾匹配
		$("选择器[属性$='值']")
	4)模糊匹配
		$("选择器[属性*='值']")
		
过滤选择器 -> 筛选 :
	1)索引过滤 -> 注意:索引0开始
		$("选择器:eq(索引)")	=
		$("选择器:lt(索引)")	<
		$("选择器:gt(索引)")	>
	2)奇偶过滤
		$("选择器:odd")		奇数
		$("选择器:even")	偶数
	3)显示过滤 -> 注意:包括样式和隐藏域
		$("选择器:visiable")显示
		$("选择器:hidden")	隐藏
	4)选择过滤
		$("选择器:checked")	选择
		$("选择器:not(:checked)")	未选择
	5)动画过滤
		$("选择器:animated")	动画过程中
		$("选择器:not(:animated)")	未产生动画
********************************************

事件处理
	$("选择器") -> 事件源
	$(document).ready(function(){});	-> 加载事件
	$("选择器").click(function(){});	-> 点击事件
	$("选择器").mounseXXX(function(){});-> 鼠标事件
	$("选择器").keyXXX(function(){});	-> 键盘事件
	$("选择器").focus(function(){});	-> 焦点事件
	$("选择器").blur(function(){});		-> 失焦事件
	$("选择器").submit(function(){});	-> 提交事件
	
简单特效
	show() hide()			-> 对角拉伸
	slideDown()	slideUp()	-> 垂直拉伸
	fadeIn() fadeOut		-> 渐变效果
	
意识形态 
8020定律 -> 利用80%的时间重点研究20%常用技术（客观数据说话 招聘需求）
	反之 -> 利用20%的时间了解熟悉80%非常技术

DOM解析

1.概念

DOM Document Object Model -> （HTML）文档对象模型
<标签 属性="值">
	<标签></标签>
	<文本></文本>
</标签>
解析 -> 通过JQuery脚本 处理操作文档对象（属性 样式 内容 结构等等）

2.API

样式
	css()			-> css("fontSize","16px")
	css()			-> css({"fontSize":"16px","color":"red"})
	addClass()		-> 添加样式表
	removeClass()	-> 移除样式表 
	说明 -> 修改本质上是先删除在添加
	
内容
	text()
	val()
	注意 -> 标签直接转义
	
属性
	attr() -> 获取已标注属性值 （避免布尔属性）
	prop() -> 推荐使用 ******
	说明 -> 常用布尔属性
		checked		选中
		readonly	只读
		disabled	不可用
		hidden		隐藏
	补充 -> lang属性 
		俗称口袋 隐藏需要存储数据
		
结构
	同级
		before()  	-> 之前插入
		after() 	-> 之后追加
	包含
		append()	-> 父节点包含子节点
	包裹
		appendTo()	-> 子节点被父节点包裹
	删除
		remove()	-> 对象移除
		empty()		-> 子对象移除
		
事件 -> 注意注册

表单(格式)验证

1.作用 -> 数据清洗
减少服务器容错压力 避免无效（非法）业务请求

2.理论
正则表达式
1)定义 -> 有特定(字符)符号组合成字符串，这些符号有其特定验证意义，通用于程序行业。
2)基本 -> 6个
^ 从头匹配
$ 结尾匹配
| 或者（多选一）
() 一种情况
[] (一个字符)选择范围
{} 出现次数
3)扩展
\d [0-9]
\D 非数字
\w [0-9,A-Z,a-z,_]
\W 非法字符
+ {1,} 至少一次
? {0,1} 至多一次
* {0,} 可有可无
…
自行参考文档
4)应用 (常用)
手机号码 1[3-9]\d{9}
QQ号码 [1-9]\d{5,10}
电子邮箱 \w+@\w+.\w+
个人网站 http[s]?😕/\w+.\w+
中文汉字 [\u4e00-\u9fa5]
…
自行查阅网站
Java - API
//import java.util.regex.Pattern;
//默认 全局匹配
String regInfo = “\d”;
String info = “1”;
System.out.println(Pattern.matches(regInfo, info));

3.方案

1)逻辑代码	-> 复杂度 开发效率低 
	提交按钮
		<input type="image" src="images/add_ad.gif" />
		<input type="submit" value="" />
	提交事件
		$("form").submit(function () {
			//格式错误 阻止表单提交
			return false; 
		});
2)验证属性	-> 简洁度 灵活性低
	required 	非空验证
	pattern		正则验证 
3)配合使用  -> 一般情况下推荐
	属性绑定
		<input id=" uname " type="text" required pattern="^[a-z,A-Z]\w{3,15}$"/>
		<input type="submit" value="提交"/>

	提交事件 -> 注意:点击事件，非提交事件
		$("input[type='submit']").click(function () {
			
		});
	表单对象 -> 注意:JS对象 并非 JQ对象
         var uname = document.getElementById("uname");
	条件控制
	uname.validity.valueMissing 是否为空
	uname.validity.patternMismatch  正则表达式是否匹配
	表单控制
		uname.setCustomValidity(""); //空信息 放行
		uname.setCustomValidity("用户名不能为空"); //信息 阻止

Jquery 自定义(简单位移)动画
$(“选择器”).animate({“样式”:“值”,“样式”:“值”…},时间)
Jquery 处理常见特效
1.全选全否
2.自动搜词
3.图片滑动
4.滚动加载
5.模式对话
6.菜单导航