注意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复习