JQ note -- dom操作与属性操作

$('#id') $('.class') $('div') $('.class ul') // 选择器
$(function(){...}) // DOM ready
var x = $('#id').get(0); // jq对象转 js原生
var x = document.get....; console.log($(x)); // js转jq
$('#id').css(['color','height','width']); // 获取多个css值（获取的是最终样式，不需要写在内联）
$('#id').css('color','red'); // 修改css（多个用对象方法）
$('#id').val(); // 获取value
$('#id').attr('id'); // 获取id属性值
$('#id').attr('id','box'); // 设置id属性值（多个用对象方法）
$('#id').removeAttr('id'); // 删除id属性
$('#id').addClass('box'); // 添加class类名为box
$('#id').removeClass('box'); // 移除box类

$('#id').toggleClass('border')； //对border类进行设置与移除的切换

   $('#div').click(function(){
        $('#div').toggleClass(function(){
            return $('#div').hasClass('pick')?'red':'pink';
        })
    })
//对 #div 进行class的切换

$('#id').find('p'); // 后代所有的 P
$('#id').next()--prev(); // 紧邻的前--后同级元素
$('#id').nextAll('p')--prevAll(); // 前面所有的P -- 后面所有的同级元素
$('#id').nextUntil('p')--prevUntil('p'); // 前--后所有元素直到 P（不包括p）
$('#id').siblings()； //前后所有同级元素
$('main').append(" <b>Hello world!</b>"); // 插入节点到 main内部的最后面
($("p")).appendTo($("#main")); // 插入到
$('main').prepend(" <b>Hello world!</b>"); // 插入节点到 main内部的最前面
($("p")).prependTo($("#main")); // 插入到
$('main').after(" <b>Hello world!</b>"); // 插入节点到 main节点后面
($("p")).inserAfter($("#main")); // 插入到
$('main').before(" <b>Hello world!</b>"); // 插入节点到 main节点前面
$('span').wrap("<div></div>"); // 每一个span节点都被 div 包裹起来
$('span').wrapAll("<div></div>"); // 所有span节点被一个 div 包裹起来
$('span').unwrap(); // 移除最近的一层父元素
$('span').unwrap().unwrap().unwrap(); // 写几次就移除几层
$('span').clone(); // 克隆span节点 ==> 默认浅克隆（只复制节点与内容）
$('span').clone(true).appendTo($('#main')); // 克隆span节点并添加到main节点内部的最后面（true -- 深克隆 == 复制事件）
$('span').remove(); // 删除节点
$('span').replaceWith('<h1>.....</h1>'); // 用h1替换span

JQ note -- dom操作与属性操作

猜你喜欢