JS基础-dom操作

JS基础-dom操作

var div = document.createElement('div');
    var $box = $('<div class="box"></div>');

    var b = document.getElementById('box');
    var $b = $('#box');

// 添加、删除子元素
// ele.appendChild(el);
// ele.removeChild(el);

// 获取、设置属性
// var c = el.getAttribute('class');
// el.setAttribute('class', 'highlight');

// 判断、移除属性
// el.hasAttribute('class');
// el.removeAttribute('class');


$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
$('input[type=text]').val(); // 'Java &amp; JavaScript'

$('#test-div').css('color'); // '#000033', 获取CSS属性
$('#test-div').css('color', '#336699'); // 设置CSS属性
$('#test-div').css('color', ''); // 清除CSS属性

$('#test-div').hasClass('highlight'); // false， class是否包含highlight
.removeClass('highlight1'); // 删除highlight这个class
.addClass('highlight'); // 添加highlight这个class

$(':checkbox').map(function() {
  return this.id;
}).get().join(',');

$('a[target=_blank]')
.hide(); // 隐藏
.show(); // 显示

var div = $('#test-div')
.attr('name'); // 'Test'
.attr('name', 'Hello'); // div的name属性变为'Hello'
.removeAttr('name'); // 删除name属性