Detailed analysis of commonly used functions and attributes in jquery_jquery

Dom:
Attribute: Attribute
$("p").addClass (style type defined in css); Add style to an element
$("img").attr({ src:"test.jpg",title:"test Image"}); Add attributes/values ​​to an element. The parameter is map
$("input").attr({"checked", "checked"} );
$("img").attr("title", function() { return this.src }); Add attributes/values ​​to an element
$("Element Name").html( ); Get the content (element, text, etc.) within the element
$("Element Name").html("new stuff"); Set content for an element
$ ("Element Name").removeAttr("Attribute Name") Delete the specified attribute and the value of the attribute from an element
$("Element Name").removeClass("class") Delete the specified style from an element
$("Element Name").text(); Get the text of the element
$("Element Name").text(value); Set the text value of the element to value
$(" Element name").toggleClass(class) Cancel when the element exists in the style in the parameter. If it does not exist, set this style
$("input element name").val(); Get the value of the input element
$("input element name").val(value); Set the value of the input element to value

Manipulation:
$("Element Name").after(content); Add content after the matching element
$("Element Name").append(content); Insert content as the content of the element Go to the back of the element
$("element name").appendTo(content); append the element
$("element name").before(content); after content
$ ("Element name").clone(Boolean expression) When the Boolean expression is true, clone the element (without parameters, it is treated as true)
$("Element name").empty() Copy the element The content is set to empty
$("Element Name").insertAfter(content); Insert the element after content
$("Element Name").insertBefore(content); Insert the element into content Before
$("Element").prepend(content); Use content as part of the element and put it at the front of the element
$("Element").prependTo(content); Use the element as Part of the content, put it at the front of the content
$("Element").remove(); Remove all specified elements
$("Element").remove("exp"); Remove all elements containing exp Element
$("Element").wrap("html"); Use html to surround the element
$("Element").wrap(element); Use element to surround the element

Traversing:
add(expr) adds a new matching element set ‘expr’ to the current matching element set to form a new matching element set;

Example:

Copy code The code is as follows:

$(document).ready( function(){
$("div").css("border", "2px solid red")
.add("p")//The P element in the document will have a background color of yellow CSS style;
.css("background", "yellow");
});

children(expr) obtains the first-level subset set of each element from the current matching element set to form a new element set
contains(str) matches the element set containing the variable text str in the set and returns the matching element Collection
end() is used to return to the jQuery object before calling the find() or parents() function (or other traversal function)

Example
$("#div1").find("p").hide().end().hide()
The first hide() is for the p tag and then use end () ends the reference to the p tag and returns to the #div1 tag
So the second hide() works for #div1
If end() is not added, both hide() will be for p Tags work

filter(expression)
find(expr)
The difference between filter and find:
filter will select among a set of selected elements;
find will select among a set of selected elements Select;

 

Test 2

If we use the find() method:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
will output: Test 1
If using filter() method:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
Will output: Test 2

The difference is:

find() will look for elements with class rain within the div element.
And filter() filters the elements whose class is rain in div.
One is to operate on its subset, and the other is to filter the elements of its own collection.

is(expr)//Determine whether the existing set is part of the 'expr' set or equal. If yes, return true, otherwise return false

next(expr)//Get a set containing the immediately following sibling elements of each element in the matched element set.

not(el)//There is no element set in the matching set that meets the filtering requirements

Example:

$("div").not(".green, #blueone")
$("input:not(:checked) span")
$('tr:not ([th]):odd')

parent(expr) gets an element set that contains the unique parent element of all matching elements

parents(expr)//Gets the set of all ancestor elements of each element in the matching element set
prev(expr) gets The set of immediately preceding sibling elements of each element in the matched element set
siblings(expr) obtains the set of all sibling elements of each element in the matched element set

Core:

$(html).appendTo("body") is equivalent to writing a piece of html code in the body
$(elems) to get an element on the DOM
$(function( ){……..}); Execute a function
$("div > p").css("border", "1px solid gray"); Find the child nodes p of all divs and add styles
$("input:radio", document.forms[0]) Find all radio buttons in the first form of the current page
jQuery provides two methods for developing plug-ins, namely:
jQuery.extend(object) extends the jQuery class itself. Adds new methods to the class.

Example

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
Quote jQuery:

Copy code The code is as follows:

$.min(3,4); //return 3
jQuery.fn.extend(object) adds methods to the jQuery object, which is an extension of jQuery.prototype
jQuery.fn = jQuery.prototype = {

　 init: function( selector, context ) {//....　
　 //......
};

Example

Copy code The code is as follows:

$.fn.extend( {                                                                                                                                                    } 
});


Quoting jQuery:
$("#input1").alertWhileClick();

jQuery( expression, [context] ) ---$( expression, [context]); By default, $() queries the DOM elements in the current HTML document.

each( callback ) executes a function with each matching element as context

Example: 1

Copy code

The code is as follows:$("span") .click(function){$("li").each(function(){$(this).toggleClass("example");});

});

Example: 2

Copy code The code is as follows:

$("button") .click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", " yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" index);
return false ;
}
});
});

jQuery Event: event

ready(fn); $(document).ready() Note that there is no onload event in the body, otherwise the function cannot be executed. In each page, many functions can be loaded and executed, and they are executed in the order of fn.

Example:
$(document).ready(function(){alert("aa");}

bind( type, [data], fn ) binds one or more event handler functions to a specific event (like click) of each matching element. Possible event type attributes are: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error

Example 1:
$('#myBtn').bind("click",function(){ 
alert('click');
});

Example 2:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

one( type, [data], fn ) binds one or more event handler functions to a specific event (like click) of each matching element. This event handler is executed only once on each object. Other rules are the same as bind() function.
type(String): event type.
data(Object): (optional) Additional data object passed to the event object as the event.data property value.
fn(Function): The handler function bound to the event of each matched element.

trigger( type, [data] ) triggers a certain type of event on each matching element.
$("p").click( function (event, a, b) {
// In a normal click event, a and b are undefined types
// If triggered with the following statement , then a points to "foo" and b points to "bar"
} ).trigger("click", ["foo", "bar"]); toggle( fn, fn ) if a matching element is clicked , the specified first function is triggered, and when the same element is clicked again, the specified second function is triggered.
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);

Example:
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 ' ' message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) This specific method will trigger a specific event (specified An event type), while canceling the browser's default action for this event
unbind( [type], [data] ) Unbind, remove the bound event from each matching element.
$("p").unbind() removes all bound events on all paragraphs
$("p").unbind( "click" ) removes click events on all paragraphs

Example:

Copy code The code is as follows:

var foo = function () {
// Code to handle an event
};
$("p").bind("click", foo); // ... function foo will be triggered when a paragraph is clicked
$("p").unbind("click", foo); // ... will never be triggered again foo

hover(over, out) over and out are methods. When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered.
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);

元素事件列表说明
注：不带参数的函数，其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述，支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
   if($("#in").val()=='关键字'){
   $("#in").val("")};
}).blur(function(){
   if($("#in").val()==''){
   $("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
$("input[type='text']").change( function() {
   // 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

Request Complete.

");
});
ajaxError( callback ) 当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件
$("#msg").ajaxError(function(request, settings){
$(this).append("

Error requesting page " + settings.url + "

");
});
ajaxSend( callback ) 在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("+ "});

ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
$(this).show();
});

ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时，隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});

ajaxSuccess( callback ) 当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时，显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("

Successful Request!

");
});

jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。
从form中取得一组值，显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

JQuery Effects 方法说明

show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以
"滑动"的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。

JQuery Traversing 方法说明

eq( index ) 从匹配的元素集合中取得一个指定位置的元素，index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合，可以使用","号分割多个expr，用于实现多个条件筛选.
ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不包括文本节点)，如果元素为iframe，则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，
添加background类属性
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) 结束当前的操作，回到当前操作的前一个操作
找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性
$("p").find("span").end().css("border", "2px red solid");

JQuery Selectors选择器方法说明

基本选择器
$("#myDiv") 匹配唯一的具有此id值的元素
$("div") 匹配指定名称的所有元素
$(".myClass") 匹配具有此class样式值的所有元素
$("*") 匹配所有元素
$("div,span,p.myClass") 联合所有匹配的选择器

层叠选择器
$("form input") 后代选择器，选择ancestor的所有子孙节点
$("#main > *") 子选择器，选择parent的所有子节点
$("label + input") 临选择器，选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器
$("tr:first") 匹配第一个选择的元素
$("tr:last") 匹配最后一个选择的元素
$("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）
$("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
$("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
$("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
$(":header") 匹配所有标题
$("div:animated") 匹配所有正在运行动画的所有元素

内容过滤选择器
$("div:contains('John')") 匹配含有指定文本的所有元素
$("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
$("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
$("div:hidden") 匹配所有隐藏的元素，也包括表单的隐藏域
$("div:visible") 匹配所有可见的元素

Attribute filter selector
$("div[id]") matches all elements with the specified attribute
$("input[name='newsletter']") matches all elements with the specified attribute value
$("input[name!='newsletter']") matches all elements that do not have the specified attribute value
$("input[name^='news']") matches all elements with the specified attribute value ending in value Elements starting with
$("input[name$='letter']") match all specified attribute values. Elements ending with value
$("input[name*='man']") match all specified elements. Elements whose attribute values ​​contain value characters
$("input[id][name$='man']") match all elements that match multiple selectors at the same time

Child element filter selector
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), matches the nth element of the parent element Child element
$("ul li:nth-child(3n 1)")

$("div span:first-child") matches the first child element of the parent element
$("div span:last-child") matches the last child element of the parent element
$(" div button:only-child") matches the only child element

of the parent element

Form element selector
$(":input") matches all form input elements, including all types of input, textarea, select and button
$(":text") matches all types of text The input element
$(":password") matches all input elements of type password
$(":radio") matches all input elements of type radio
$(":checkbox") matches All input elements of type checkbox
$(":submit") match all input elements of type submit
$(":image") match all input elements of type image
$(": reset") matches all input elements of type reset
$(":button") matches all input elements of type button
$(":file") matches all input elements of type file
$(":hidden") matches all input elements of type hidden or hidden fields of the form

Form element filter selector
$(":enabled") matches all operable form elements
$(":disabled") matches all inoperable form elements
$(":checked ") matches all selected elements
$("select option:selected") matches all selected elements

JQuery CSS method description

css( name ) accesses the style attribute of the first matching element.
css(properties) Sets a "name/value pair" object as the style property of all matching elements.
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "rgb(0,40,244)"
}
$(this). css(cssObj);
});
css( name, value ) Sets the value of a style attribute on all matching elements.
offset( ) gets the position of the first matched element relative to the current visual window. The returned object has two attributes,
top and left, and the attribute values ​​are integers. This function can only be used on visible elements.
var p = $("p:last");
var offset = p.offset();
p.html( "left: " offset.left ", top: " offset.top ) ;
width() gets the width value of the current first matching element, and
width( val ) sets the specified width value for each matching element.
height( ) gets the height value of the current first matching element, and
height( val ) sets the specified height value for each matching element.

JQuery Utilities method description
jQuery.browser
.msie means ie
jQuery.browser.version reads the version information of the user's browser
jQuery.boxModel detects the version of the user's browser for the current page Shows whether it is based on the W3C CSS box model
jQuery.isFunction( obj ) Checks whether the passed parameter is function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
});
jQuery.trim( str ) Remove whitespace from both ends of a string. Use regular expressions to remove whitespace from both ends of a given character
jQuery.each( object, callback ) A general iterator that can be used to seamlessly iterate over objects and arrays
jQuery. extend(target, object1, [objectN]) extends an object, modifies the original object and returns it. This is a powerful tool for inheritance. This inheritance is implemented by passing by value instead of the prototype in JavaScript. chain method.
Merge the settings and options objects and return the modified settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

Merge the defaults and options objects, and the defaults object has not been modified. The value in the options object is passed to empty instead of the value in the defaults object.

Copy code The code is as follows:

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) removes items from the array through a filter function
$.grep( [0,1,2], function(n,i){
return n > 0;
});

jQuery.makeArray( obj ) Converts an array-like object into a real array
Converts the selected div element collection into an array
var arr = jQuery.makeArray(document.getElementsByTagName("div "));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) Use a method to modify an item in an array, and then return a new array
jQuery.inArray( value, array) Returns the position of value in the array, if not found, returns -1
jQuery.unique (array) Remove all duplicate elements in the array and return the sorted array