jquery

jquary引入
    <script src="jquery的文件路径> </script>

    jquery方法找到的对象叫做jquery对象
    原生js方法找到的标签对象是DOM对象

    Dom对象的方法和jqery方法不可以相互使用

    jquery对象和Dom对象可以相互转换
        jquery对象-->dom对象   jquery对象.[0]
        dom对象-->jquery对象    $(dom对象)

选择器:
    id选择器     $("#id名")
    标签选择器     $("标签名")
    class选择器      $(".类名")
    配合使用        $("dic.c1") 找到有c1类的div标签
    所有选择器       $("*")
    组合选择器       $("#id, .className , tagName,")
    层级选择器
        $("x y") x的所有后代y(子子孙孙)
        $("x > y") x的所有儿子(儿子)
        $("x+y") 找到所有紧挨着在x后面的y
        $("x~y") x之后所有的兄弟y
    基本筛选器:
        :frist 第一个
        :last 最后一个
        :eq(index) 索引等于index的那个元素
        :even 匹配所有的索引值为偶数的元素,从0开始计数
        :odd 匹配所有索引值为计数的元素从0开始
        :gt(index) 匹配所有大于给定索引值的元素
        :lt(index)  匹配所有小于给定索引值的元素
        :not(元素选择器) 移除所有满足not条件的标签
        :has (元素选择器) 移除所有包含一个或者多个标签在其内的标签
    属性选择器:
        对象.[属性]
        对象.[属性= value]
        对象.[属性 != value]
    表单筛选器:通过筛选出是否有这样的属性进行呢查找
        :text
        :password
        :file
        :radio
        :checkbox
        :submit
        :reset
        :button
        表单对象属性:
            :enabled 可以运行的
            :disabled 不可以运行
            :checked
            :selected
            注意: $(':checked')会将标签中的含有checked属性都筛选出来,所以要注意
                一般使用的前面要加上input
筛选器方法:
    下一个元素:
        $("#id").next()   找到类是id的下一个标签
        $("#id").nextall() 找到类是id的标签后的所有标签
        $("#id").nextUntil("#i2") 直到找到id为i2的标签就结束查找,不包含它
    上一个元素:
        $("#id").prev()
        $("#id").prevAll()
        $("#id").prevUntil("#i2")
    父亲元素:
        $("#id").parent()
        $("#id").parents()   查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
        $("#id").parentsUntil('body') 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，
                                        这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
    兄弟和儿子标签:
        $("#id").children();儿子们
        $("#id").siblings(); 兄弟们，不包含自己，
                            .siblings('#id')可以在添加选择器进行进一步筛选
    查找:
        $("div").find("p") 找到div标签下的p标签
    筛选:
        $("div").filter(".c1")  找到含有c1类的div标签
            其他方法:
                .first()    获取匹配的第一个元素
                .last() 获取匹配的最后一个元素
                .not()  从匹配元素的集合中删除与指定表达式匹配的元素
                .has()  保留包含特定后代的元素，去掉那些不含有指定后代的元素。
                .eq()   索引值等于指定值的元素


操作标签:
    样式操作:
        样式类:(通过删除class类的值来修改样式)
            addClass()  添加指定的CSS类名。
            removeClass()   移除指定的CSS类名。
            hasClass()  判断样式存不存在
            toggleClass()   切换CSS类名，如果有就移除，如果没有就添加。
    位置操作:
        offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
        position()// 获取匹配元素相对父元素的偏移，不能设置位置
        $(window).scrollTop()  //滚轮向下移动的距离
        $(window).scrollLeft() //滚轮向左移动的距离
    尺寸:
        height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
        width()
        innerHeight() //内容content高度 + 两个padding的高度
        innerWidth()
        outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
        outerWidth()
    文本操作:
        HTML代码:
            html() 取得第一个匹配元素的文本内容,包含标签内容
            html(val) 取得所有匹配元素的html内容,识别
        text代码:
            text() 取得所有匹配元素的内容 只有文本内容 没有标签
            text(val)  设置所有的匹配元素的内容,不识别标签,将标签作文本插入进去
        值:
            val()   取得第一个匹配元素的当前值
            val(val)    设置所有匹配元素的值
            val([val1,val2])    设置多选的checkbox,多选select
        设置值:
            $("[name='hobby']").val(['basketball', 'football']);
            $("#s1").val(["1", "2"])