jQuery整理

jQuery总结:
jQuery是一个由javascript语言编写的框架，即一个外部js文件。
要使用jQuery需要引入jQuery.XXX.js文件.
例如：<script src="jquery.js" type="text/javascript"></script>
jQuery有两种版本，开发版和压缩版。
压缩版也称为发布版，内容被高度压缩大约91K。


jQuery的ready函数:
jQuery中的ready()相当于javascript的onload事件属性。
<script>
    $(document).ready(function(){...});
</script>
ready()同onload的区别：
1.加载时机：ready当页面中的HTML结构加载完毕即可执行，无需等待绑定的资源加载（图片，视频等），而onload需要等待相关资源全部加载完毕后才能执行。
2.编写个数：在一个页面中，ready可以有多个定义，而onload只能绑定一个函数。
3.简写：ready可以简写为：$(function(){...}) ,onload没有简化写法。


DOM对象和jQuery对象的相互转换
DOM对象可以使用javascript中dom元素的属性和方法，不能使用jQuery的方法。
jQuery对象可以使用jQuery的方法，不能使用javascript中dom元素的属性和方法。
DOM对象转换成jQuery：
 var $jQuery =  $(dom);


jQuery对象转换成DOM对象：
var dom = $jQuery[0];
var dom = $jQuery.get(0);
一般在转换时，最好是1对1的转换。


jQuery选择器：
jQuery的选择器功能非常强大，种类繁多。
分为两大类：
    类CSS选择器：
        基本选择器："*"全局选择器,"#id"id选择器，".class"类选择器,
                           "element"标签选择器，"h1,p"并集选择器，"h1.title"交集选择器
                          说明：由于交集选择器为连续书写，第一个只能是标签，后面的可以是类或ID选择器
        层次选择器："#menu span"后代选择器,"ul>li"子代选择器,"h1+p"相邻元素选择器(紧邻h1之后的元素为p则被选中),"h1~p"其后同辈元素中所有的P元素。
        属性选择器："[attr]"含有指定属性的元素，"[attr='属性值']"含有指定属性且指定属性值的元素，"[attr!='属性值']"属性不为指定属性值的元素.
[attr^=属性值] 以“xx”开头
                [attr$=属性值] 以“xx”结尾
                [attr*=属性值] 包含“xx”的属性值
    过滤选择器：
           基本过滤选择器：
                 1.使用":first"首个,":last"最后,":odd"奇数下标,":even"偶数下标
                 2.使用":eq(index)"指定下标，
                          ":gt(index)"大于指定下标，
                          ":lt(index)"小于指定下标，
                          ":not(selector)"非selector选择器的范围
                          ":header"h1~h6的标题元素
                          ":focus"当前获取光标元素
           可见性过滤选择器：
                 ":visiable"所有可见元素,":hidden"所有隐藏元素


jQuery的事件:
jQuery的事件分为两类：
基本事件：
   鼠标事件:click(fun)点击,mouseover(fun)移入,mouseout(fun)移除
   键盘事件：keydown(fun(e){e.keyCode})按下，keypress(fun)当打印键字符时，keyup(fun)释放
   表单事件：focus()获取焦点，blur()失去焦点，submit(fun(){return boolean})表单提交时


复合事件：
   hover():复合mouseover和mouseout事件
   hover(fun1,fun2);
   toggle():复合了多个单击事件
   toggle(fun1,fun2...funN)根据绑定函数的格式，每次单击切换执行fun


绑定事件：
   bind:用于动态绑定元素和事件，可以使用unbind随时解除绑定。
   $abc.bind("click",fun)
   $abc.bind({"click":fun,"mouseover":fun})
   $abc.unbind("click")
   $abc.unbind() // 解除abc元素所有的事件
   
   live:用于活动结构的绑定,语法和bind相同.当使用jQuery操作DOM结构时，会动态添加任何符合条件的事件。


jQuery的动画:
   show()/hide(),fadeIn()/fadeOut(),slideDown()/slideUp()
   点到面            透明度                    高度改变
   参数：slow,normal,fast或者毫秒值。  
   toggle()表示复合show+hide


jQuery操作DOM
1.操作CSS:
    css()用于设置指定元素的样式
    css("样式","样式值")
    css({"样式":"样式值","样式":"样式值"..,"样式":"样式值"})
    css("样式") 获取指定样式的值
    addClass()用于添加现有的类样式
    addClass("class1")   
    addClass("class1 class2 ... classN")
    removeClass() 用于移除现有的类样式，语法同addClass
    toggleClass()复合addClass和removeClass的事件
2.操作文本内容
    html()用于获取或设置元素的HTML内容
    text()用于获取或设置元素的文本内容
    
3.操作属性
    val()用于获取或设置元素的value属性值。
    attr("attr")用于获取或设置指定属性的属性值。


4.操作DOM结构
    查找节点（选择器）
    创建节点：使用jquery的工厂函数来创建新节点
          例如：var $newLi = $("<li>这是一个新的li</li>");
    插入节点：
           append,appendTo, 向父元素中后置追加子元素
           $父.append($子)
           $子.appendTo($父)
           prepand,prepandTo 向父元素中前置追加子元素
           
           after().insertAfter(),向一个元素后面插入一个新元素
           $li.after($newLi)
           $newLi.insertAfter($li)
           before().insertbefore(),向一个元素前面插入一个新元素


    修改节点：
            repalceWith() replaceAll()使用新元素替换旧元素
            $old.replaceWith($new)
            $new.replaceAll($old)
            一般情况下（1换1）：两者等价
    删除节点：
            empty()清空内容，remove(),detach()删除元素
            remove()删除后，若恢复删除的元素，则元素绑定的事件或数据无法恢复。
            detach()删除后，若恢复删除的元素，则元素绑定的事件或数据可以恢复。
    复制节点：
            clone(boolean)当参数为true时，表示连同绑定的事件一起复制。


获取指定元素的所有子元素的集合:children()返回集合元素
获取指定元素同辈元素的方法：next()紧邻其后,prev()紧邻前面,siblings()除自身外所有同辈元素
获取指定元素的父级元素：parent()获取直接父元素，parents()获取父元素及其父元素的父元素组成的集合


表单验证：
可以使用form元素的onsubmit事件属性绑定javascript函数来验证。
也可以使用jQuery的submit事件函数来验证。
一般验证步骤：
1.在验证函数中，获取要验证的表单元素值。
2.使用字符串常用方法或关系表达式判断是否验证出错，
  当遇到验证规则较为复杂，或存在规律型要求时，推荐使用正则表达式验证。
3.根据验证结果，给出相应的提示信息，并返回boolean值。


正则表达式:
语法： var reg = /正则表达式/;   var reg = new RegExp("正则表达式");
常用方法：boolean reg.test(value) 
正则表达式中的通配符：
^:表示开始
$:表示结束
\w:数字，字母，下划线，相当于[a-zA-Z0-9_]
\W:非\w，相当于[^a-zA-Z0-9_]
\d:纯数字[0-9]
\D:非数字[^0-9]
\s:空白字符
\S:非空白字符
.:除换行符外任意字符
{n}:匹配前者出现的固定次数
{n,}:匹配前者出现的最少次数
{n,m}:匹配前者出现的次数范围
*:{0,}
+:{1,}
?:{0,1}
[]:编写一个字符可以匹配的内容范围[ahwudk5478_QSFG]
[^]:编写一个字符不可以匹配的内容范围[^a-zA-Z]
():表示当内容视为一个整体时用于提升级别
|：或者


记住一个比较常用：var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;