JQ style, element operation, effect, filtering method and transformation, event object

1.jq And DOM Object conversion ：

• DOM Convert to jq object : $(‘DOM object ’)
• jq Convert to DOM object ：

（1）$(‘div’)[index]

（2）$(‘div’).get[index]------index Reference no.
2.jq Style operation ：
Set class style : There is no need to add points to the parameters in the operation class

• Add the class ：$(“div”).addClass(“current”);
• Remove class ：$(“div”).removeClass(“current”);
• Switch classes ：$(“div”).toggleClass(“current”);

3.jq Element operation ：
Get elements ：

• Get the inherent attribute value, such as a Of the link href ,title etc. ：element.prop(“ Property name ”)
• Set up ：$(“a”).prop(“ Property name ”,“ Later attribute value ”);
• Get element custom attribute value attr():attr(“ Property value ”)
• Set up ：attr(“ attribute ”,“ Property value ”)

Traversing elements ： Do different operations on the same type of elements

$("div").each(function(index,domEle){
    xxx;})

In callback function 2 Parameters ：index Index number for each element ;domEle yes DOM Element object , If you use jq Method , It needs to be converted to jq object $(domEle)
Additive elements
(1) Add... Inside

• $(“ul”).append(li); Add to the end of the content
• $(“ul”).prepend(li); Add to the front of the content

(2) External addition

• element.after(“ Content ”)— After the target element
• emement.before(“ Content ”）— Before the target element

notes ： Add elements inside , After generation, the parent-child relationship , The external elements are added as brothers
Remove elements

• $("ul’).remove();— Delete ul
• $(“ul”).empty();— Delete ul Child nodes in
• $(“ul”).html(" ");— Delete ul Child nodes in

4.jq effect ： Add... Before each effect stop() To stop queuing

The first two grammars ：

show([speed],[easing],[fn])

(1)speed: Speed string （“show”,“normal”,“last”） Or the animation duration in milliseconds
(2)easing: Switching effect The default is "swing’（ Slow first , In the middle is fast , Last slow ）, You can use "linear"（ uniform ）
(3)fn： Callback function , Execute the function when the animation is finished , Each element is executed once
Fade in and fade out grammar :

fadeTo([speed],poacity,[easing],[fn])

among opacity Transparency must be written ,0-1 Between
Custom animation ：

animate(params,[speed],[easing],[fn])

params: The style properties you want to change , Pass... As an object , Must write . Property names can be without quotes , If the attribute value is a number, no unit can be added , If it is a composite attribute Application borderLeft Hump nomenclature

$(function(){
    
	$("button").click(function(){
    
		$("div").animate({
    
			left:500,
			top:300
		},500)
	})
])

5. Screening method

• partent() : Only find the nearest parent -----$(“li”).partent();
• partents() : Find all parents ----$(“li”).partents(“zzz”) That is to find the name zzz The father of
• children(selector) : The nearest child —$(“ul”).children(“li”) amount to $(“ul>li”)
• find（selector）: Select all children —$(“ul”).find(“li”) Find out ul All of the li
• siblings(slector): Choose brother , Not including myself —$(".one").siblings(“li”)
• eq(index): Choose the same number —$(“li”).eq(2)
• first() : $(“div p”).first()—div The first of p
• last() : $(“div p”).last()—div Last of p

6.jq event ：
(1) Event handling on()： Assign the event on the original child element to the parent element ; Bind events to dynamically created elements in the future

$("ul").on("click","li",function(){
    
	alert(11);
});

Trigger object li, React ul
(2) Event handling off（）

• $(“p”).off()— relieve p All events of the element
• $(“p”).off(“click”)— relieve p Click events for
• $(“ul”).off(“click”,“li”) Release event delegation

(3) Stop the incident

• Block default ：event.prentDefault() or return false;
• To prevent a bubble ：event.stopPropagation()