jQuery针对各类元素操作基础教程(3)

时间:2014-08-30 03:16来源:网络整理作者:网络点击: 次

分享到：

有关尺寸：

$(div).width(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)

有关定位：

$('p').offset()相对于文档的参照位置
$('p').position()偏移父元素的相对位置
$('p').scrollLeft()水平滚动条的偏移值
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)

有关元素内容：

$('p').html()
$('p').html('')
$('p').text()
$('p').text('')

追加内容

在元素末尾追加一段html：

$('p').append('<b>some text</b>');

在元素末尾dom中现有的元素：

$('p').append($(a.someclassname))

在元素开头追加：

$("p").prepend()

在元素的前面追加：

$("span").before()

在元素的后面追加：

$("span")after()

把内容追加到末尾：

appendTo(targets)

把内容追加到开头：

prependTo(targets)

把内容追加到元素前面：

insertBefore(targets)

把内容追加到元素后面：

$('<p></p>').insertAfter('p img');

包裹元素：

$('a.someclassname').wrap("<div class='hello'></div>")
$('a.someclassname').wrap($("div:first")[0])
$('a.someclassname').wrapAll()
$('a.someclassname').wrapInner()
$('a.someclassname').unWrap()

删除元素：

$('.classname').remove()删除元素，绑定到元素上的事件和数据也会被删除
$('.classname').detach()删除元素，但保留事件和数据
$('.classname').empty()不删除元素，但清空元素内容

复制元素：

$('img').clone().appendTo('p.someclassname')

$('ul').clone().insertBefore('#id')

替换元素：

$('img[alt]').each(function(){
 $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>');
})
$("p").replaceAll("<b></b>")

关于表单元素的值：

$('[name="radioGroup"]:checked').val()获取单选按钮的值，如果没有选中一个，返回undefined
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
 return $(this).val();
}).toArray(); //获取多选框的值

对于<select id="list" multiple="multiple">使用$('#list').val()返回值的数组
$('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配，则选中状态

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。