Summary of details that need to be paid attention to in jQuery_jquery

1. The difference between $.find() and $.children()
has the following HTML fragment:

Copy code The code is as follows:

1. find() returns the bottom of the element All specified elements, without limiting the depth of the child, such as:
$("#div_four").find("input")//Returns one, two, and three input elements
2.childr() Returns a collection of first-level child node elements of the element, such as:
$("#div_four").children("input")//Returns one and two input elements
2. $.append The difference between () and $.appendTo()
1. append(): Returns the reference of the parent element
2. appendTo(): ​​Returns the reference of the newly created element

Copy code The code is as follows:

var e = $("

Dynamicly create and add table title element

").appendTo($("#div_1"));
var r = $("#div_1").append ("

Dynamicly create and add table title element

");
//e represents the newly created

element
//r represents $("#div_1") Element

3. The difference between dynamically binding events and statically adding events
With jQuery, dynamically binding events to elements becomes very simple, but the traditional way Don't forget to add events directly to elements, but when using a program that combines jQuery and ordinary JavaScript, you must be clear about the difference in obtaining the event source object between jQuery's dynamically bound events and statically added events.

The difference between dynamically bound events and statically added events

Dynamic binding The difference between fixed events and statically added events

The difference between dynamically bound events and statically added events

//1. Dynamically bind events, this represents the event source. For example:
$("#p1").click(function(){
alert($(this).text()); //this code event source
});
/ /2. When statically binding events, this cannot be used directly. For example:
function fun(){
alert($(this).text); //The content of

cannot be obtained
//3. The event can be obtained by passing "this" Source
function fun2(obj){
alert($(obj).text());//Wrap obj as a jQuery object
4. this and $(this in the event handling function )
$("#p1").click(function(){
alert(this.innerHTML); //Use this directly
alert($(this).text( )); //Wrap this as a jQuery object
});
In the above code, this represents the event source object, but when using this directly, it is an HTML DOM object;
$(this) can convert HTML DOM objects are wrapped as jQuery objects, that is, they have the properties and methods of jQuery objects.
5. The difference between $.remove() and $.remove(selector)
Both calling forms return the element selected by the selector before the method
1. remove(): Delete itself from the parent element [suicide]
2. remove(expr): Delete an element from the parent element [suicide]
For example:
var e = $("#div_2 h1"). remove();//Return the deleted h1 element
var e = $("#div_2 h1").remove("#h2");//Delete the

element with id h2 and return all h1 element
6. The difference between $.eq() and $.get()
Same points: both can get the specified nth element in the element set
Differences:
1. eq(n) returns a jQuery object, you can directly use jQuery built-in methods, such as:

Copy code Code As follows:

$("#div_three a").eq(0).bind("click", function () {
alert($(this).text());
});

2. The DOM Element object returned by get(n) can directly use HTML DOM attributes and methods, such as:
$("#div_three a"). get(1).onclick = function () {
alert($(this).text());
};
Or encapsulate the object into a jQuery object to achieve the same effect, such as:

Copy code The code is as follows:

$($("#div_three a").get(1 )).bind("click",function () {
alert($(this).text());
});

7. $.css(properties)와 $.css(name,value)의 차이점
1. 구문의 차이점
css(properties) $("p").css({color :" red"}); 또는 $("p").css({"color":"red"})
css(name,value) $("p").css("color": "red");
2. 속성 이름의 차이점
css(properties):
스타일 속성 이름을 인용하지 않은 경우 JavaScript 구문의 CSS 스타일 이름을 사용해야 합니다. 예:
$("p" ).css({color:"red",fontSize:"30px"});
"font-size"로 변경하면 아무런 효과가 없습니다
style 속성이 이름에 따옴표가 있으면 두 스타일 모두 작동합니다. 예:
$("p").css({color:"red","font-size":"30px","fontWeight":"bold"} );
css(name,value): 두 가지 형식 모두 허용되며 다음 두 가지 효과는 동일합니다.
$("p").css("fontSize":"30px"); $("p").css("글꼴 크기 ":"30px");