jQuery 函数

Dom操作常用方法

.append()/.prepend()

.append()函数用于向每个匹配元素内部的末尾位置追加指定的内容
.prepend()函数用于向每个匹配元素内部的起始位置追加指定的内容。
指定的内容可以是：html字符串、DOM元素(或数组)、jQuery对象、函数(返回值)。

  $("p").append( '<p>插入段落</p>' )  // 插入DOM元素
  $('p').append($('strong')) // 插入jQuery对象，如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。
//简而言之，这相当于一个移动操作，而不是复制操作。
  $('p').append(function(index){  // 插入function，函数传入两个参数：第一个参数就//是当前元素在匹配元素中的索引，
第二个参数就是该元素当前的内部html内容(innerHTML)
    return '插入段落' + index
  })

.before()/.after()

.before()函数用于在每个匹配元素之前插入指定的内容
.after()函数用于在每个匹配元素之后插入指定的内容。
指定的内容可以是：html字符串、DOM元素(或数组)、jQuery对象、函数(返回值)。

$('p').before('<i>somthing</i>')
$('p').after('$('#id')') //插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。
  //简而言之，这相当于一个移动操作，而不是复制操作。

.remove()/.empty()

.remove()删除被选元素（及其子元素）
.empty()清空被选择元素内所有子元素

$('p').remove()
$('p').empty()
$('p').remove('.class') //通过添加选择器，可以进行过滤删除

.html()/.text()

.html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内innerHTML
.text()函数用于设置或返回当前jQuery对象所匹配的DOM元素内innerText

<div>
  <p>段落1</p>
  <p>段落2</p>
</div>
$('div').html() 
 // 返回结果：
 "
  <p>段落1</p>
  <p>段落2</p>
"

$('div').text() 
// 返回结果：
"
  段落1
  段落2
"

属性操作常用方法

.val()

函数用于设置或返回当前jQuery对象所匹配的DOM元素的value值，该函数常用于设置或获取表单元素的value属性值。例如：<input>、<textarea>、<select>、<option>、<button>等。

$('input').val('somthing') //设置所有选中的input的value为somthing。

.attr()/.prop()

.attr()和.prop()函数都用于设置或返回当前jQuery对象所匹配的元素节点的属性值。
两者使用上的区别是：对于HTML元素本身就带有的固有属性，在处理时，建议使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，建议使用attr方法。

<input id="chk1" type="checkbox" action='123' >


// .prop()用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)
$("#chk1").prop("action") // undefined
document.querySelector('#chk1').action  // undefined
// .attr()用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)
$('#chk1').attr('action') // '123'
document.querySelector('#chk1').getAttribute('action')  // "123"

$("#chk1").prop("checked")  // false
$("#chk1").attr("checked") // undefined
document.querySelector('#chk1').checked //false
document.querySelector('#chk1').getAttribute('checked') //null

//勾选checkbox后 .attr()函数不会更新
$("#chk1").prop("checked")  //true
$("#chk1").attr("checked")  //undefined
document.querySelector('#chk1').checked //true
document.querySelector('#chk1').getAttribute('checked')  //null

.removeAttr()

函数用于移除在当前jQuery对象所匹配的每一个元素节点上指定的属性

$('img').removeAttr('alt') //删除所有img标签中的alt属性

.css()

函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。

$('div').css('fontSize', '20px') //设置
$('div').css('fontSize') //获取

.addClass() /.removeClass()/.toggleClass()

.addClass()函数用于为当前jQuery对象所匹配的每一个元素添加指定的css类名。
.removeClass() 移除当前jQuery对象所匹配的每一个元素上指定的css类名。
.toggleClass()切换当前jQuery对象所匹配的每一个元素上指定的css类名。

$('div').addClass('clearfix') //增加clearfix类
$('div').removeClass('clearfix')  //删除clearfix类
$('div').toggleClass('clearfix') //切换clearfix类

.hasClass()

指示当前jQuery对象所匹配的元素是否含有指定的css类名。返回值是Boolean类型

$('div').hasClass("bar")

其他常用函数

.each()

函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。所谓的上下文，意即该函数内部的this指针引用了该元素。

$("ul li").each(function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) );  
});

$.extend()

函数用于将一个或多个对象的内容合并到目标对象。

var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com"  };

// y和z的属性将被合并复制到对象x上
var obj = $.extend( x, y, z );

.clone()

函数用于克隆当前匹配元素集合的一个副本，并以jQuery对象的形式返回

$('div').clone()

.index()

函数用于获取当前jQuery对象中指定DOM元素的索引值。

$('li').index($('li.active'))

.ready()

函数用于在当前文档结构载入完毕后立即执行指定的函数。

$(document).ready( function(){
  alert('hello world')
});