jQuery基础知识小结

2020-05-24 21:19:46易采站长站整理

 有关尺寸:
  $(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