jQuery基础知识小结(3)

以数组形式返回类名列表：
  $.fn.getClassNames = function(){
   var name = this.attr('someclsssname');
   if(name != null){
    return name.split(" ");
   }
   else
   {
    return [];
   }
  }

设置样式：
  $('div.someclassname').css(function(index, currentWidth){
   return currentWidth + 20;
  });
  $('div').css({
   cursor: 'pointer',
   border: '1px solid black',
   padding: '12px 12px 20px 20x',
   bacgroundColor: 'White'
  });

有关尺寸：
  $(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></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 multiple="multiple">使用$('#list').val()返回值的数组
  $('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配，则选中状态

您可能感兴趣的文章: