Summary of jQuery common operation methods and commonly used functions_jquery

An article about jQuery’s common methods and functions to keep as a memo.

JQuery common operation implementation methods

$("Tag name") //Get html elements document.getElementsByTagName("")

$("#ID") //Get a single control document.getElementById("")

$("div #ID") //Get the control in a certain control

$("#ID #ID") // Get the control through the control ID

$("label.class style name") //Get the control through class

$("#ID").val(); //Get value

$("#ID").val(""); //Assign value

$("#ID").hide(); //Hide

$("#ID").show(); //Show

$("#ID").text(); //Equivalent to taking innerText

$("#ID").text(""); //Equivalent to innerText=""

$("#ID").html(); //Equivalent to taking innerHTML

$("#ID").html(""); //Equivalent to innerHTML=""

$("#ID").css("property","value") //Add CSS style

$("form#form id").find("#the control id found").end() //Traverse the form

$("#ID").load("*.html") //Load a file

For example:

$("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() // end()返回表单

.find("#chenes").css("border-top","3px dotted #00f").end()

$.ajax({ url: "Result.aspx", //数据请求页面的url

type:"get", //数据传递方式(get或post)

dataType:"html", //期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

data: "chen=h", //传递数据的参数字符串，只适合get方式

timeout:3000, //设置时间延迟请求的时间

success:function(msg)//当请求成功时触发函数
{
$("#stats").text(msg);
},
error:function(msg) //当请求失败时触发的函数
{
$("#stats").text(msg);
}
});

$(document).ready(function(){});
$("#description").mouseover(function(){});

//ajax方法

$.get( "Result.aspx", //数据请求页面的url
{ chen: "测试",age:"25"}, //传递数据的参数字符串
function(data){ alert("Data Loaded: " + data); } //触发后的函数
);
});
});

//取得下拉选单的选取值

$(#testSelect option:selected').text(); //取文本值
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();

------

Summary of commonly used function methods in jQuery

Event handling

ready(fn)

Code:

$(document).ready(function(){
// Your code here...
})；

Function: It can greatly improve the response speed of web applications. By using this method, you can call the function you bound as soon as the DOM is loaded and ready to be read and manipulated, and 99.99% of JavaScript functions need to be executed at that moment.

bind(type,[data],fn)

Code:

$("p").bind("click", function(){
alert( $(this).text() );
});

Function: Bind an event handler function to a specific event (like click) of each matching element. Plays the role of event monitoring.

toggle(fn,fn)
Code:

$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

Function: Switch the function to be called every time you click. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. It's a very interesting function that may be used when dynamically implementing certain functions.

(Events like click(), focus(), keydown() will not be mentioned here, they are commonly used in development.)

Appearance

addClass(class) and removeClass(class)

Code:

$(".stripe tr").mouseover(function(){ 
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});

can also be written as:

$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

Function: Add or remove styles for specified elements to achieve dynamic style effects. In the above example, the code for moving a two-color table with the mouse is implemented.

css(name,value)

Code:
$("p").css("color","red");

Function: Very simple, it is to set the value of a style attribute in the matched element. This personal feeling is somewhat similar to addClass(class) above.

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

Code:

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

Function: Several commonly used dynamic effect functions provided in jQuery. You can also add parameters: show(speed,[callback]) to display all matching elements in an elegant animation and optionally trigger a callback function after the display is completed.

animate(params[,duration[,easing[,callback]]])

Function: The function used to create animation effects is very powerful and can be used continuously.

Search and filter

map(callback)
HTML code:

<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://www.fufuok.com/>
</form>

jQuery code:

$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );

结果:
[ e388a4556c0f65e1904146cc1a846beeJohn, password, http://www.fufuok.com/94b3e26ee717c64999d7867364b1b4a3 ]

作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114, how are you?94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:

$("p").find("span")
结果:

[ 45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114 ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:
79d7c95122630a3791db16c5259dc98d79d7c95122630a3791db16c5259dc98d
jQuery 代码:
$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)
HTML 代码:
dc6dce4a544fdca2df29d5ac0ea9906be388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68
jQuery 代码:
$("div").html();
结果:
e388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a3

作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
e388a4556c0f65e1904146cc1a846beeTest Paragraph.94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:
$("p").wrap("517f552e03c5e0683f79f0cd12aa585c16b28748ea4df4d9c2150843fecfba68");
结果:
6bab83cd2ea3b0bfa059c0c27e19c040e388a4556c0f65e1904146cc1a846beeTest Paragraph.94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68

作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:
e388a4556c0f65e1904146cc1a846beeHello, 45a2772a6b6107b401db3c9b82c049c2Person54bdf357c58b8a65c66d7c19c8e4d114 ee7959cc8dd4be16ef633321c03dac32and person5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:
$("p").empty();
结果:
e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

作用：删除匹配的元素集合中所有的子节点。

Ajax处理

load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。

代码：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()
HTML 代码:

<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码:

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

作用：序列化表格内容为字符串。用于 Ajax 请求。

工具

jQuery.each(obj,callback)

代码：

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//遍历对象
});

作用：通用例遍方法，可用于例遍对象和数组。

jQuery.makeArray(obj)
HTML 代码:

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

结果:
Fourth
Third
Second
First

作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。