jquery常用方法

-----------------------------------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元素的子元素