JQuery 基础讲解

>> JQuery是优秀的轻量级的JavaScript框架，极大的简化了JS编程。
>> JQuery 的使用步骤：
    ⑴引入JQuery的JS文件
    ⑵使用选择器定位要操做的节点
    ⑶调用JQuery的方法进行操做

>>>>>>>>>>>>>1. jQuery 对象 <<<<<<<<<<<<<<
>> jQuery 为了解决浏览器兼容问题而提供的一种统一封装的对象描述
>> jQuery 提供的方法只能由JQuery对象调用，且大多数返回JQuery对象
◆注：使用JQuery时遭遇的各类对象通常规律：
    1.经过选择器获取的是JQuery对象
    2.经过$建立的是JQuery对象
    3.JQuery赋值的方法一般返回JQuery对象
    4.JQuery的取值方法，若取到的是元素，则返回JQuery对象
    5.JQuery的取值方法若取到的是文本，则返回内置对象（String）
◆ jQuery 对象 是一个DOM对象数组
>> DOM 和 JQuery 对象能相互转换
    1.DOM转换为JQuery对象
    ---$(DOM对象)
    2.JQuery对象转换为 DOM
    ---obj.get(index):获取数组中的某个DOM对象
    ---obj[index]: 等价于obj.get(index)
    ---obj.length: 获取数组长度

>>>>>>>>>>>>>> 2.JQuery选择器 <<<<<<<<<<<<<<<
>>JQuery选择器:可以实现元素的定位
>>使用JQuery选择器可以将内容和行为分离
1.基本选择器（同css）
    1）元素选择器
        -- $("标签名")
    2）类选择器
        -- $(".class属性名")
    3）id选择器：
        --$("#id")
    4) 选择器组
        -- $("#id,.important")
2.层次选择器（同css）
    1) 在select1元素下，选中全部知足select2的子孙元素
        --$("select1 select2")
    2) 在select1元素下，选中全部知足select2的子元素
    --$("select1 > select2")
    3) 在select1元素下，知足select2的下一个弟弟
    --$("select1 + select2")
    --$("#zg+li")
    4）在select1元素下，知足select2的全部弟弟
    --$("select1 ~ select2")
    --$("#zg~li")
3.过滤选择器(*重点*)
    3.1基本过滤(*重点*)
        ---:first               第一个元素
        ---:last                最后一个元素
        ---:not(selector)        把selector排除在外
        ---:even                挑选偶数行
        ---:odd                 挑选奇数行
        ---:eq(index)            下标等于index的元素
        ---:gt(index)            下标大于index的元素
        ---:lt(index)            下标小于index的元素
        ◆例：
            --$("li:first")
            --$("li:even")
            --$("li:lt(3)")
            --$("li:not(#zg)")
    3.2内容过滤
        ---:contains(text)  匹配包含给定文本的元素
        ---:empty             匹配全部不包含子元素或者文本的空元素
        ◆例：
            --$("p:contains('月饼')")
    3.3可见性过滤
        ---:hidden         匹配全部不可见元素，或type为hidden的元素
        ---:visible        匹配全部的可见元素
        ◆例：
            --$("input:hidden")
    3.4属性过滤
        ---[attribute]             匹配具备attribute属性的元素
        ---[attribute=value]    匹配属性等于value的元素
        ---[attribute!=value]    匹配属性不等于value的元素
        ◆例：
            --$("input[value='你好']")
    3.5状态过滤
        ---:enabled         匹配可用的元素
        ---:disabled        匹配不可用的元素
        ---:checked            匹配选中的checkbox
        ---:selected        匹配选中的option
        ◆例：
            --$("input:checked")
    4.表单选择器（简单）
        ---:text        匹配文本框
        ---:password    匹配密码框
        ---:radio        匹配单选框
        ---:checkbox    匹配多选框
        ---:submit        匹配提交按钮框
        ---:reset        匹配重置按钮
        ---:button        匹配普通按钮
        ---:file         匹配文件框
        ---:hidden        匹配隐藏框
        ◆例：
            --$(":text")

>>>>>>>>>>>>>> 3.JQuery操做DOM <<<<<<<<<<<<<
1.读/写节点

    --HTML内容：obj.html()/obj.html("<span>123</span>")
        包含子标签，至关于innerHTML
    --文本：obj.text()/obj.text("123")(不包含子标签)
    --value属性值：obj.val()/obj.val("abc")
    --属性值：obj.attr("属性名")/obj.attr("属性名","属性值")
2.增删节点
    --增长: $("节点内容")
    --删除：obj.remove()
            obj.remove()  删除知足selector的节点
    --插入：
        --parent.append(obj)    添加到最后
        --parent.prepend(obj)    添加到最前面
        --brother.after(obj)    添加为兄弟的下一个节点
        --bother.before(obj)    添加为兄弟的上一个节点
3.样式操做    
    --addClass("")            追加样式**重要**
    --removeClass("")        移除指定样式**重要**
    --removeClass()            移除全部样式
    --toggleClass("")        切换样式
    --hasClass("")            判断是否有个样式
    --css("")                读取scc的值
    --css("","")            设置多个样式
4.遍历节点
    --children()/children(selector)   直接子节点
    --next()/next(selector)              下一个兄弟节点
    --prev()/prev(selector)              上一个兄弟节点
    --siblings()/siblings(selector)   全部兄弟
    --find(selector)                  知足选择器的全部后代
    --parent()                          父亲节点

>>>>>>>>>>>>>> 4.JQuery事件处理 <<<<<<<<<<<<<
1.事件的绑定
    --$obj.bind(事件类型，事件处理函数)
    --单击事件简写形式：$obj.click(fn)
2.事件对象event 
    --$obj.click(function(e){})
        程序会自动给函数传一个event参数
    --获取事件源：
        --e.target    返回值是DOM对象
        --e.pageX和e.pageY 获取鼠标的位置
3.事件的冒泡
    --子节点产生的事件会由内向外的顺序执行叫事件冒泡
    --取消事件冒泡：e.stopPropagation()
4.合成事件种类
    --hover(mouseon(){},mouseout(){})
        模拟鼠标悬停事件
    --toggle() 在多个事件响应中切换
5.模拟操做
    --$obj.trigger(事件类型)
    --$obj.trigger("focus") 模拟光标选中事件
    --简写形式：$obj.focus();
>>>>>>>>>>>>>> 5.JQuery动画 <<<<<<<<<<<<<
--动画的实现是jQuery新建了一个线程来不断的改变元素的宽度、高度、位置。
--因此动画的实现过程是与主线程并发执行的。
1.隐藏和显示动画的效果
    --show()  /  hide()
    --经过同事改变元素的宽度和高度来实现显示或隐藏
    --$obj.show(执行事件[，回调函数])
    --回调函数：动画执行完毕后要执行的函数
2.上下滑动式的动画实现
    --sildeDown() /sildeUp
    --经过改变高度来实现显示和隐藏的效果
3.淡入淡出式动画效果
    --fadeIn() / fadeOut()
    --经过改变不透明opacity来实现显示或隐藏
4.自定义动画效果
    --animate(偏移位置，执行时间[，回调函数])
    --偏移位置：{}描述动画执行以后元素的样式
    ◆例：
        $("div").click(function(){
            $(this).animate({'left':'500px'},4000);
            $(this).animate({'top':'300px'},4000);
        });