注意jQuery严格区分大小写

正确写法：jQuery
错误写法jquery JQUERY Jquery （X）

jQuery的页面加载函数

 <script>
/* jQuery页面加载函数 写法一 */
$(function(){
alert("jQuery")
})
/* jQuery页面加载函数 写法二 */
$(document).ready(function(){
alert("jQuery")
})
/* jQuery页面加载函数 写法三 */
jQuery(document).ready(function(){
alert("jQuery")
})
</script>

JS对象与jQuery对象之间的转换

DOM对象转jQuery对象，语法：jQuery(DOM对象);  或  $(DOM对象);
jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

jQuery选择器

jQuery选择器的分类：
1.基本选择器
主要有：标签选择器、ID选择器、类选择器。
$("#id") id选择器   document.getElementById()
$("div") 标签选择器 document.getElementsByTagName()
$(".p1") 类选择器   document.getElementsByClassName()
2.层级选择器
后代选择器：parent  child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）
子选择器：parent > child ,使用>符号隔开。 获得父元素下面的子元素。（父子关系）
$("form input")
$("form>input")
3.属性选择器
[attribute] 		$("[href]") 所有带有 href 属性的元素
[attribute=value] 	$("[href=‘#‘]") 所有 href 属性的值等于 "#" 的元素
[attribute=value] [attribute=value]  $("[href=‘#‘][class=‘demo‘]") 所有href属性的值等于"#"，且class属性的值为"demo"
4.过滤选择器
过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有：
:first		第一个
:last		最后一个
:eq(index) 指定索引的
:gt(index) 大于索引的
:lt(index) 小于索引的
:odd		奇数
:even		偶数
:not()		除了**
:header    匹配标题,比如h2,h3...
5.表单选择器
（1）:selected主要针对下拉列表框被选择的项
（2）:checked主要针对单选按钮和复选框被选中的项
（3）:enabled所有被激活的input元素
（4）:disabled所有被禁用的input元素

jQuery的Dom操作

（一）属性操作
attr()
attr("属性名") 获取标签中对应的属性名的值
attr("属性名","属性值") 设置标签的属性名与对应的属性值
prop()
prop("属性名") 获取标签中对应的属性名的值
prop("属性名","属性值") 设置标签的属性名与对应的属性值
attr()与prop()的区别？
attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题
prop()实现对标签中自带属性的操作,推荐使用
（二）class类操作
1. addClass() 向被选元素添加一个类
2. removeClass() 从被选元素删除一个类
3. toggleClass() 对被选元素进行添加/删除类的切换操作
（三）样式操作
1. css("样式名") 获取该样式的值
2. css("样x值") 设置一个样式
3. css({"样式名":"值","样式名":"值",...}) 设置多个样式
（四）文档操作
1. 内部插入
append(); 在被选元素的结尾插入内容
prepend();	在被选元素的开头插入内容
2. 外部插入
after();  在被选元素之后插入内容
before();在被选元素之前插入内容
3. 删除
empty(); 清空里面内容
remove(); 删除整个元素
detach(); 删除整个元素

jQuery事件

  		js动态绑定
document.getElementsByTagName("button")[0].onclick=function(){}
jQuery动态绑定
$("button").click(function(){
//重定向到百度
location.href="http://www.baidu.com"
})

jQuery动画效果

1.显示与隐藏
（1）show(speed,callback);显示元素。
（2）hide(speed,callback);隐藏元素。
（3）toggle(speed,callback); 在 show() 和hide() 方法之间切换，显示被隐藏的元素，并隐藏已显示的元素。
参数说明：
speed 参数规定隐藏和显示的速度，可以取以下值："slow"、"fast" 或毫秒。
callback 参数是隐藏或显示完成后所执行的回调函数名称。
以上两个参数都是可选项。
2.淡入淡出
（1）fadeIn(speed,callback);淡入已隐藏的元素。
（2）fadeOut(speed,callback);淡出可见元素。
（3）fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle()会向元素添加淡入效果。如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。
参数作用同上。
3.滑动效果
（1）slideDown(speed,callback);向下滑动元素，用于作显示。
（2）slideUp(speed,callback);向上滑动元素，用于作隐藏。
（3）slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。如果元素已向下滑动，则 slideToggle()会向上滑动它们。如果元素已向上滑动，则 slideToggle()会向下滑动它们。
参数作用同上。

jQuery数组操作

jQuery中有属于自己的遍历对象或者数组的方法，如下：
第一种写法:
$obj.each(function(i,dom){
});
第二种写法：
$.each(object,function(i,dom){
});
i :对象的成员或数组的索引
dom:对应变量或内容,该变量或者内容为js对象
注意：如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

表单插件validation

校验
$("#form").validate()
红色字体
<style>
label{
color: red;
}
</style>
具体案例：
<script>
$("#form").validate({
/* 检验规则 */
rules:{
username:{
required:true
},
password:{
required:true,
rangelength:[6,16]
},
pwd:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
},
birthday:{
required:true,
dateISO:true
}
},
/* 规则提示 */
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
rangelength:"密码的长度应在6-16之间"
},
pwd:{
required:"请输入确认密码",
equalTo:"两次输入密码的不一致"
},
email:{
required:"请输入邮箱",
email:"邮箱不合法"
},
birthday:{
required:"请输入出生日期",
dateISO:"输入的日期格式应是yyyy-MM-dd"
}
}
})
</script>

jQuery复习

原文：https://www.cnblogs.com/chenglong0201/p/15311862.html