JQuery Dom操作总结

Posted 2021-04-08 前端技术充电宝

    

    一、JQuery对象的基本方法：
    (1) get(); 取得所有匹配的元素
    (2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0]
    (3) Number index(jqueryObj); 搜索子对象
    (4) each(callback); 类似foreach，不过遍历的是元素数组
        如：
            $("img".each(function(index){
               this.src = "test" + index + ".jpg";
            });
        使用 return false; return true; 代表 break、continue的
    (5) length、size(); 都是返回元素总数
    (6) jQuery.noConflict(true);   重设 jquery 默认的符号
        如：
            var dom = {};
            dom.query = jQuery.noConflict(true);
            这时将用 dom.query 代替 $

二、、JQuery选择器
    (1)基本：

        *                        匹配所有DOM元素
        .classname               匹配带有指定classname的DOM元素
        element(DOM标签名称)     匹配指定名称的所有DOM元素
    #id                      匹配指定ID的DOM元素
    ,                        用,分开表示匹配多个选择条件中的一个

    (2)层级：
        选择一[空格]选择二 表示选一内合符条件二的所有元素
        选择一[>]选择二     表示选一内合符条件二的第一个元素
        选择一[+]选择二     表示紧接选一符条件二的元素 next
        选择一[~]选择二     表示选一后符条件二的所有元素 siblings

    (3)运算符

        :animated           动画元素
        :eq(index)          索引位置，如：$("div:eq(1)"
        :even               偶数元素
        dd                奇数元素
        :first              第一个
        :gt(index)          大于索引的所有元素
        :lt(index)          小于索引的所有元素
        :header             H1、H2... 这些标题元素
        :last               最后一个
        :not(Selector)      排除
        :contains(string)   选择的对象内容里包含
        :empty              选择的对象内容为空
        :has(Selector)      含有
        :parent             与empty相反
        :first-child
        :last-child
        :nth-child(index)   第几个
        nly-child         唯一的子元素

    表单
    :text :checkbox :radio :image :file :submit :reset :password :button

    表单状态
    :checked :disabled :enabled :selected

    可见性
    : hidden :visible

    属性及其运算符
        [属性名称]        匹配包含给定属性的元素
        [att=value]       等同上面
        [att*=value]      模糊匹配
        [att!=value]      不能是这个值
        [att$=value]      结尾是这个值
        [att^=value]      开头是这个值
        [att1][att2][att3]...   匹配多个属性条件中的一个

三、JQuery DOM 的常用操作
    (是指通过选择器筛选得到DOM后可进行的常用操作，即是JQuery对象实例的方法)

1、属性操作(注：attr(name)、html()、val() 是只对第一个匹配元素操作的方法，其它都是对全部操作)
    attr(name); 获得匹配元素的第一个元素指定的属性
    attr(key, fn)、attr(key, value) 对所有匹配元素设定一个属性值，前者的第二个参数是一个函数，值即是这个函数的返回值
    attr(properties) 用键值对设定所有匹配元素设定一个或多个属性值，如：$("img".attr({ src: "test.jpg", alt: "Test Image" });
    removeAttr(name) 删除匹配元素指定属性值
    addClass(classname) 增加类名，即是增加 class 属性
    removeClass(classname)
    toggleClass(classname) 切换类名（存在则删除，不存在则增加）
    html()
    html(setvalue)
    text()
    text(setvalue)
    val()
    val(val)      对于普通元素，使用方法应该是 对象.val(设置值); 对于 select、radio等则用值表示要选中这个值的对象，如：
              $("#multiple".val(["value1", "value3"]);
              $("input".val(["checkvalue1", "checkvalue2"]);

2、筛选
    实际上筛选的方法很多都能通过选择器的运算符实现的，因此这里只列出一些特殊的操作方法。

    eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、

    filter(fn)           筛选出与指定函数返回值匹配的元素集合（这个函数内部将对每个对象计算一次
                     (类似 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。）
            
    slice(start,[end])   选取一个匹配的子集

    map(callback)        将一组元素转换成其他数组（不论是否是元素数组）

    andSelf()     把所选的加入到当前元素集中
    end()         恢复前一个选择破坏后的状态

3、文档处理

    append(content)      向每个元素内容追加内容，content指：String, Element, jQuery 其中之一，以下同。

    appendTo(content)    以上面的相反，上面是向选中对象追加，这个是把选中对象向content选择的对旬追加

    prepend(content)、prependTo(content)、after(content)、before(content)

    replaceWith(content) 把选中元素用content替换
    replaceAll(selector) 把选择的对象用当前对象替换

    empty()
    remove([expr])
    clone()
    clone(true) 克隆时把事件一起克隆

4、CSS处理

    css(name)         访问第一个匹配元素的样式属性
    css(name,value)   在所有匹配的元素中，设置一个样式属性的值
    css(properties)   用键值对对其给值

    offset()          获得选中元素的位移，返回值为对象Object{top,left}

    height()、height(val)、width()、width(val)

四、JQuery对象的事件处理

1、全局操作

    (1) ready(fn)              DOM就绪时的事件，对于document事件可以简写为 $(function(){ ...   });

    (2) bind(type,[data],fn)   对所的匹配绑定一个事件data为传递给这个事件函数的附加对象
        如：
        $("p".bind("click", function(){
            alert( $(this).text() );
        });
        function handler(event) {
            alert(event.data.foo);
        }
        $("p".bind("click", {foo: "bar"}, handler)

    (3) one(type,[data],fn)           以上面的区别是这个事件只响应一次

    (4) trigger(type,[data])          在每一个元素上触发一次某事件

    (5) triggerHandler(type,[data])   只触发事件函数，但不触发浏览器的相同事件

    (6) unbind([type],[data])         删除绑定的事件

    (7) hover(overFn, outFn)          响应鼠标经过事件

    (8) toggle(fn1,fn2...)            每次点击鼠标后依次响应该不同的函数

2、固定事件
    在不带参数的情况下表示执行某事件，带参数则为设定某事件

    下面的事件能触发，也能设定：
        blur()、change()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()

    下面的事件只能设定，不能用JS触发：
        load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn)

五、效果
    hide()
    hide(speed,[callback])    用动画隐藏，callback 为动画完成时执行的函数
    show()
    show(speed,[callback])
    toggle()                 切换状态

    slideDown(speed,[callback])      通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
    slideUp(speed,[callback])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

    slideToggle(speed,[callback])    通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

    fadeIn(speed,[callback])         通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
    fadeOut(speed,[callback])        通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
    fadeTo(speed,opacity,[callback]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

    animate(params,options) 用于创建自定义动画的函数。
              params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
              options (Options) : 一组包含动画选项的值的集合。

    animate(params[,duration[,easing[,callback]]])

    duration、 easing 是预设的动画动作
    duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast"或表示动画时长的毫秒数值(如：1000)
    easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

    dequeue()        从动画队列中移除一个队列函数
    queue()          返回指向第一个匹配元素的队列(将是一个函数数组)
    queue(callback) 在匹配的元素的动画队列中添加一个函数
    queue(queue)     将匹配元素的动画队列用新的一个队列来代替(函数数组)
    stop()           

六、AJAX

1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。

推荐阅读

每天分享 前后端 干货