jQuery基础

jQuery基础

一、jQuery简介

1、简介：
	jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、使用步骤：
	下载：https://jquery.com/
	引入：<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
	使用

二、页面加载

$(function(){
	方法体；
})

可以出现多次

三、JS对象和jQuery对象

jQuery对象和JS对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用
    JS对象==>jQuery对象：  
    	$(JS对象);
    jQuery对象==>JS对象：
    	jQuery对象[index]; 
        jQuery对象.get(index);

四、jQuery选择器

1.基本选择器

标签选择器   标签名
ID选择器    .类名
类选择器    #id
并集选择器  逗号，隔开
交集选择器  直接写，标签选择器在最前面
全局选择器  *

2.层级选择器

后代选择器：parent  child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）

子选择器：parent > child ,使用>符号隔开。 获得父元素下面的子元素。（父子关系）

相邻选择器：选择器1+选择器2 可选择紧接在另一元素后的元素 匹配单个
         比如  h1 + p{} 选择紧接在 h1 元素后出现的段落p元素

同辈选择器：选择器1~选择器2   选择器1元素后面所有（引用）选择器2元素  匹配多个

3.属性选择器

[attribute] 		  $("[href]") 所有带有 href 属性的元素 
[attribute=value] 	  $("[href='#']") 所有 href 属性的值等于 "#" 的元素 
[attribute^=value]    $("[href^='#']") 所有href属性值以“#”开头的元素
[attribute$=value]    $("[href$='#']") 所有href属性值以“#”结尾的元素
[attribute*=value]    $("[href*='#']") 所有href属性值中含有“#”的元素

4.过滤选择器

:first		第一个
:last		最后一个
:eq(index) 指定索引的
:gt(index) 大于索引的
:lt(index) 小于索引的
:odd		奇数
:even		偶数
:not()		除了**
:checked	被选中的 option
:selected	被选中的 checkbox 或者  radio

五、jQuery属性及class操作

1、属性操作

attr() 
     attr("属性名") 获取
     attr("属性名","属性值") 设置，修改
prop()
     prop("属性名") 获取
	 prop("属性名","属性值") 设置，修改  
     
attr()与prop()的区别？
    attr()能操作自定义属性,但可能失效
    prop()只能操作自带属性【推荐使用】

2、class操作【多个class用空格隔开】

addClass() 添加
removeClass() 删除
toggleClass 动态切换类

六、jQuery操作内容和样式

1、操作内容

html() 设置或获取（包括 HTML 标记）  innerHTML
text() 设置或获取		          innerText
val() 设置或返回表单字段的值         value

2、操作样式

css("样式名")  获取该样式的值
css("样式名","值")  设置一个样式
css({  "样式名":"值"   ,   "样式名":"值",...  } ) 设置多个样式
addClass(类名，类名...)

七、jQuery的文档操作

1、内部插入【添加子元素】
    append(); 	结尾插入子元素
    prepend();	开头插入子元素
    
2、外部插入【添加同辈元素】
	after(); 在被选元素之后插入同辈元素
	before();在被选元素之前插入同辈元素
	
3、删除
	empty(); 清空元素的内容
	remove(); 删除整个元素  

八、jQuery事件

代码示例：
	$obj.click(function(){
       //编写点击事件触发后要执行的js代码
    });
  
  
onclick  -- > click
onmouseover --> mouseover
onmonseout  --> monseout
onblur     -->  blur
onfocus    ---> focus

结论： jquery事件其实就是  javascript事件 少了 on

九、jQuery动画效果

1、显示与隐藏【改变尺寸和透明度】

show(speed,callback);显示元素。
hide(speed,callback);隐藏元素。
toggle(speed,callback); 在 show() 和hide() 方法之间动态切换，显示被隐藏的元素，并隐藏已显示的元素。

2、淡入与淡出【只改变透明度】

fadeIn(speed,callback);淡入已隐藏的元素。
fadeOut(speed,callback);淡出可见元素。
fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行动态切换。

3、滑动【只改变尺寸】

slideDown(speed,callback);向下滑动元素，用于作显示。
slideUp(speed,callback);向上滑动元素，用于作隐藏。
slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。

 参数说明：
    speed 参数规定隐藏和显示的速度，可以取以下值："slow"、"fast" 或 毫秒。
    callback 回调函数，动画结束后执行

十、数组操作

遍历方法：
	$obj.each(function(i,e){
		...
	});
	
   i ：索引
   e ：对象
  `注意：如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。`

jquery的隐式迭代：

​ 只对修改、删除有效，对获取无效。

十一、jQuery的遍历函数

索引相关的
  .first()	获取第一个元素。 	  $("li").first()  ==> $("li:first")
  .last()	获取的最后一个元素。   $("li").last()  ==> $("li:last")
  .eq()		获取指定索引的元素。   $("li").eq(1)  ==> $("li:eq(1)")

找父元素、祖先
  .parent()		获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
  .parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。

找后代、子元素
  .children()	获得匹配元素集合中每个元素的所有子元素。
  .find()		获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

找同辈元素
  .next()	  获得匹配元素集合中每个元素紧邻的同辈元素。  (后面)
  .prev()	  获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。  (前面)
  .siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。     (前后所有)

十二、表单验证【validation插件】

validation插件的使用步骤：
    1、下载validation工具。（拷贝下载好的js文件到项目中）
    2、导入工具jquery-1.8.3.js、jquery.validate.js、messages_zh.js。
    3、编写form表单信息并在脚本中给form表单绑定validate验证方法。
    4、在form表单元素中逐个指定校验规则。
    
代码示例：
   $obj.validate({
      messages:{
          name:{
            校验名：值；
            校验名：值；
          }
          name:{
            校验名：值；
            校验名：值；
          }
      }
    })
    
常用校验：
  校验名		校验类型		值		
  remote	  ajax校验		url路径
  required	  必填项		   true|false
  email		  邮件			"@"或"email"
  url		  路径
  date		  日期			数字
  dateISO	  日期(yyyy-MM-dd)  字符串
  number	  数字
  digits	  整数
  minlength	  最小长度		   数字
  maxlength	  最大长度		   数字
  rangelength 长度范围		   [minL,maxL]
  min		  最小值
  max		  最大值
  range		  值范围		   [min,max]
  equalTo	  两个值相同		  jQuery表达式(选择器)