jQuery笔记

样式操作

样式类操作
    addClass();  // 添加指定的CSS类名。
    removeClass();  // 移除指定的CSS类名。
    hasClass();  // 判断样式存不存在
    toggleClass();  // 切换CSS类名，如果有就移除，如果没有就添加。


CSS——直接变换css的值
    css("属性","属性值")
    同时设置多个值的时候：css({"属性":"属性值","属性":"属性值"})


位置
    offset()    //获取匹配元素在当前视口的相对偏移 --- 相当于relative
        offset({"top":100,"left":50})    //设置值top在原有的基础加100px，left在原有的基础上加50px

    position()    //获取匹配元素相对父元素的偏移 --- 相当于absolute
        不能设置值，只能获取值

滚动条设置
    scrollTop()    //获取匹配元素相对滚动条顶部的偏移
        $(window).scrollTop(0) （滚动触发） --- 使window对象距离顶部0

    scrollLeft()    //获取匹配元素相对滚动条左侧的偏移

    补充：
        .scroll()   -- 监测滚动的事件


尺寸
    height()    自身的高度
    width()     自身的宽度

    innerHeight()   加上padding的height
    innerWidth()    加上padding的width

    outerHeight()  加上padding和border的height
    outerWidth()    加上padding和border的width




文本操作

    html代码：和innerHtml一样
        html()  // 取得第一个匹配元素的html内容，取值的时候只取第一个
        html(val)  // 设置的时候把所有的文本全部设置新值

    文本值：
        text    // 取值拿到所有的文本，包括子标签
        text(val)  // 设置的时候先清空所有的内容（包括HTML标签）再设置值

    值：
        val()              // 取得第一个匹配元素的当前值，取值的时候只取第一个
        val(val)           // 设置所有匹配元素的值

        val([val1, val2])  // 设置checkbox、select的值
            控制选择的内容是否选中
            注意：radio的时候设置值必须是这样 [值] 的形式，只能设置一个


属性操作
    自定义属性
        attr(attrName)                  // 返回第一个匹配元素的属性值
        attr(attrName, attrValue)     // 为所有匹配元素设置一个属性值
        attr({k1: v1, k2:v2})           // 为所有匹配元素设置多个属性值
        removeAttr()                    // 从每一个匹配的元素中删除一个属性

    用于checkbox和radio
        prop()    已选择的返回True,未选择的是False
            设置值：prop("属性","值")
        removeProp()


补充知识点：

  当jQuery选择器返回多个对象的时候，需要对他们做统一的操作时，不需要循环，直接在后面跟操作就可以

    each:
        $.each(要循环的对象,function(i,v){
            // i是索引，v是对应的值
        })

        $("条件").each(function(){
            // 操作
        })



事件绑定
    $("条件").on("事件",function(){
        //绑定事件要做的事情
    })