dom元素属性操作

dom元素属性操作

1. 属性
   attr(name|pro|key,val|fn)
   removeAttr(name)
   prop(n|p|k,v|f)
   removeProp(name)

2. CSS 类操作
   addClass(class|fn)
   removeClass([class|fn])
   toggleClass(class|fn[,sw])
   hasClass() 检测元素是否具有某个类 true false

3. HTML代码/文本/值
   html([val|fn])
   text([val|fn])
   val([val|fn|arr])

4. css样式操作

5. css 获取或设置元素的css

6. 尺寸
   height([val|fn])
   width([val|fn])
   innerHeight()
   innerWidth()
   outerHeight([options])
   outerWidth([options])

7. 位置
   offset([coordinates]) 相对视口的偏移
   position() 相对父元素的偏移
   scrollTop([val])
   scrollLeft([val])

8. 文档处理

9. dom元素子父节点

10. 内部插入
    append(content|fn)
    appendTo(content)
    prepend(content|fn)
    prependTo(content)

11. 外部插入
    after(content|fn)
    before(content|fn)
    insertAfter(content)
    insertBefore(content)

12. 包裹
    wrap(html|ele|fn)
    unwrap()
    wrapAll(html|ele)
    wrapInner(html|ele|fn)

13. 替换
    replaceWith(content|fn)
    replaceAll(selector)

14. 复制
    clone([Even[,deepEven]]) 参数是true false 一个参数 代表两个 true 事件处理函数被复制 子元素被复制

15. 删除
    empty() 删除元素的所有的子节点
    remove([expr]) dom元素的事件删除
    detach([expr]) dom会保留事件

代码展示:

 /*
     *dom元素属性设置
     * */
    //attr获取或者设置元素的属性值
    //attr  name  value/fn
    //$(".btn").attr('title','我是按钮');
    /*$(".btn").attr('title', function (index) {
     return '我是按钮' + index;
     });*/

    //设置自定义属性
    //$(".btn").attr('data-title','标题');

    //removeAttr  删除属性
    //$(".btn").attr('title','我是按钮');
    //$('.btn').removeAttr('title');

    //获取属性值
    //通过removeAttr  删除属性  属性值是  undefined
    //把元素上的属性删除了
    //console.log($('.btn').attr('title'));


    //prop  设置属性
    //获取或者设置元素的属性值
    //prop name  /value/fn
    //$('.btn').prop('title','我是标题');
    /*$('.btn').prop('title',function (index){
     return '标题'+index;
     });*/
    /*$('.btn').prop('title','我是标题');
     $('.btn').attr('name','标题');*/

    //removeProp  删除属性
    //删除的时候  防止浏览器报错   不删出属性  而是直接把值修改undefined
    /* $('.btn').removeProp('title');
     $('.btn').removeAttr('name');*/

    //获取属性值
    /*console.log($('.btn').prop('title'));*/

    //$('.btn').attr('title','name');
    //console.log($('.btn').prop('title'));

    //$('.btn').removeProp('title');

    //prop可有设置自定义属性  不显示
    /* $('.btn').prop('data-index',0);
     console.log($('.btn').prop('data-index'));*/

    /*$('.ck').attr('checked',true);*/

    $('.all').click(function () {
        $(".ck").prop('checked', true);
    });
    $('.fall').click(function () {
        $(".ck").attr('checked', function () {
            //检测当前复选框的状态
            var istrue = $(this).prop('checked');
            console.log(istrue);
            if (istrue) {
                $(this).prop('checked', false);
            }
            else {
                $(this).prop('checked', true);
            }
        });
    });
</script>