jquery常用方法

-------------------------------获取元素
//$(this) 获取当前选中元素
//parent() 方法返回被选元素的直接父元素。
//siblings() 方法返回被选元素的所有同级元素。
//children() 方法返回返回被选元素的所有直接子元素。
列如：
$(this).parent().siblings("div").children()
//获取当前父元素的所有div元素的子元素
contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。
--------------
find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
index() 方法返回指定元素相对于其他指定元素的 index 位置。
--------------
next() 方法返回被选元素的后一个同级元素。同级元素是共享相同父元素的元素。
注意：该方法只返回一个元素。DOM 树：该方法沿着 DOM 元素的后一个同级元素向前遍历。
nextAll() - 返回被选元素之后的所有同级元素
nextUntil() - 返回两个给定参数之间的每个元素之后的所有同级元素

------------------------------- add() remove() append() appendTo() prepend() prependTo()
add() 方法把元素添加到已存在的元素组合中。
$(selector).add(element,context)
element	必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。
context	可选。规定选择器表达式在文档中开始进行匹配的位置。
remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
$(selector).remove()
append() 方法在被选元素的结尾插入指定内容。
提示：如需在被选元素的开头插入内容，请使用 prepend() 方法。
$(selector).append(content,function(index,html))
appendTo() 方法在被选元素的结尾插入 HTML 元素。
提示：如需在被选元素的开头插入 HTML 元素，请使用 prependTo() 方法。

-------------------------------添加或删除元素
add() 方法把元素添加到已存在的元素组合中。
remove() 方法移除被选元素，包括所有的文本和子节点。
-------------------------------添加或删除元素属性
attr() 方法设置或返回被选元素的属性值。
removeAttr() 方法从被选元素中移除属性。
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
-------------------------------prop()和attr()方法的区别
prop("checked","true") 方法设置或返回被选元素的属性和值。
attr() 方法设置或返回被选元素的属性值。
可以看出prop和attr方法作用相同官方建议具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
举例：
<a href="#" id="link1" action="delete">删除</a>
href为a标签的属性，应该使用prop来设置。
action不是a的属性是我们自定义的DOM属性，应该使用attr来设置。
注意：
固有属性。建议使用prop方法（固有属性指的是元素本身具有的属性）
自定义的DOM属性。建议使用attr方法
-------------------------------添加或删除元素class属性的值
addClass() 方法向被选元素添加一个或多个类。
removeClass() 方法从被选元素移除一个或多个类。
hasClass() 方法检查被选元素是否包含指定的类名称。
举例：
<a href="#" id="link1" class="" action="delete">删除</a>
$("#link1").addClass("layui-btn");//a标签class变成 class="layui-btn"
$("#link1").removeClass ("layui-btn");//a标签class值为空
-------------------------------显示或隐藏元素
hide() 方法隐藏被选元素。
show() 如果被选元素已被隐藏，则显示这些元素
------------------------------- HTTP 请求
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
$.post() 方法通过 HTTP POST 请求从服务器载入数据。
$.ajax() 方法通过 HTTP 请求加载远程数据。
-------------------------------其他方法
load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。（类似于重载刷新当前页面）
each() 方法为每个匹配元素规定要运行的函数。
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
-------------------------------jquery对象与dom元素之间的转换
jquery对象与dom元素之间的转换
普通的DOM对象可以通过$()将dom对象转换为jquery对象。
例如：$(document.getElementById("msg"))为jquery对象。
由于jquery对象本身是个集合，所以jquery对象转换为dom对象时必须取出其中的某一项，一般通过索引取出。
$("msg")[0],
$("div").eq(1)[0],
$("div").get()[1]等都是dom对象。

$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;
注：html()为jquery的方法，innerHTML应用于DOM。

获取jquery集合中的某一项可以通过eq或者get(n)方法或者索引获取
注意：eq返回的是jquery对象，而get和所以返回的是dom元素对象。（dom对象只能用DOM方法，jquery对象只能用jquery方法）
列如：
$("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用DOM的方法属性
$("#msg").eq(0)[0].innerHTML; //调用DOM的方法属性 $("#msg").eq(0) 为调用jquery对象的方法

-------------------------------同一函数实现get()和set()方法
1.$("#msg").html();//返回id为msg的元素节点的html内容。 
$("#msg").html("<b>hello word!</b>"); //将"<b>hello word!</b>" 作为html串写入id为msg的元素节点内容中,页面显示粗体 hello word!
2.$("#msg").text(); //返回id为msg的元素节点的文本内容。 
  $("#msg").text("<b>hello word!</b>"); //将"<h1>hello word!</h1>" 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>hello word!</b>
3.$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300 
$("#msg").width(); //返回id为msg的元素的宽度 
$("#msg").width("300"); //将id为msg的元素的宽度设为300
4.$("input").val(); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
5.$("#msg").click(); //触发id为msg的元素的单击事件 
$("#msg").click(fn…); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法 
---------------------------------------集合处理功能
对于Jquery返回的集合内容无需我们自己循环遍历并对每个对象做处理，jquery已经为我们很便捷的方法进行集合的处理。
$("msg").each(function(i){
this.style.color=['red','green','blue'[i]]
})--------为索引分别为0.1.2的msg元素分别设定不同的字体颜色。
$("tr").each(function(i){
this.style.backgroundColor=['#ccc','#fff'][i%2]
})-------------实现表格的隔行换色效果。
$("p").click(function(){
alert($(this).html())
}) ---------------为每个p元素增加了click事件，单击某个p元素则弹出其内容。
-------------------------------扩展我们需要的功能
$.extend({ 
min: function(a, b){return a < b?a:b; }, 
max: function(a, b){return a > b?a:b; } 
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过 $.方法名 调用）： 
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 
-------------------------------支持方法的连写
即可以对一个jquery对象连续调用各种不同的方法。
如：
$("p").click(function(){
alert($(this).html())
}).mouseover(function(){
alert('mouse over event')
})
当鼠标指针点击元素时，会发生 click 事件。
当鼠标指针位于元素上方时，会发生 mouseover 事件。

//$(this) 获取当前选中元素
//parent() 方法返回被选元素的直接父元素。
//siblings() 方法返回被选元素的所有同级元素。
//children() 方法返回返回被选元素的所有直接子元素。

$("p").click(function(){
console.log($(this).parent().siblings("div").children())
})
获取当前父元素的所有div元素的子元素