Summary of jQuery common operation methods and commonly used functions

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();

Copy after login

------

Summary of commonly used function methods in jQuery

Event handling

ready(fn)

Code:

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

Copy after login

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() );
});

Copy after login

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");
}
);

Copy after login

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");})
});

Copy after login

can also be written as:

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

Copy after login

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() });

Copy after login

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>

Copy after login

jQuery code:

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

Copy after login

结果:
[

John, password, http://www.fufuok.com/

]

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

find(expr)

HTML 代码:

Hello, how are you?

jQuery 代码:

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

[ Hello ]

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

文档处理

attr(key,value)
HTML 代码:

jQuery 代码:
$("img").attr("src","test.jpg");

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

html()/html(val)
HTML 代码:

Hello

jQuery 代码:
$("div").html();
结果:

Hello

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

wrap(html)
HTML 代码:

Test Paragraph.

jQuery 代码:
$("p").wrap("

");
结果:

Test Paragraph.

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

empty()
HTML 代码:

Hello, Person and person

jQuery 代码:
$("p").empty();
结果:

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

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");
});

Copy after login

作用：载入远程 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>

Copy after login

jQuery 代码:

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

Copy after login

作用：序列化表格内容为字符串。用于 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 );//遍历对象
});

Copy after login

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

jQuery.makeArray(obj)
HTML 代码:

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

Copy after login

jQuery 代码:

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

Copy after login

结果:
Fourth
Third
Second
First

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

jQuery.trim(str)

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

Summary of jQuery common operation methods and commonly used functions_jquery