jQuery basic tutorial notes suitable for js novices_jquery

After reading the notes I took on the basic jquery tutorial, the notes are not suitable for everyone. If you think they are good, you can read them. If you think they are not good, you don’t have to read them.

1, : eq() and nth-child()
Look at the code below:
<.>

2, :odd and :even
:odd : odd numbered rows
:even : even numbered rows
Newbies often say that it seems to be the opposite of what we do?
In fact, it is the same as the :eq() selector. The subscripts start from 0.
That is, the number of the first row of the table is 0 (even number);
The number of the second row is 1 (odd number). ); and so on. . .


3, $("tr:odd").addClass()
can be written as $("tr").filter(":odd").addClass()

4, $('td:contains("cssrain")') //Get all td containing string cssrain

5, jquery to dom:
$("td").get (0).tagName or $("td")[0].tagName

6, load():
load() in jquery has 2 levels of meaning,
the first level of meaning It can be equivalent to window.onload in dom
The second layer means that it can load (url).

7: ready abbreviation:
1;
$(document).ready(function(){  
 ///do something
})
2;
$().ready(function(){
//do something
})
3;
$(function(){
//do something
})


8. Event bubbling:
Normally speaking: clicking B will trigger the click of a.
If we don’t want to trigger A, we can use stopPropagation() to stop bubbling.
Specific example:

aaaaaaa

aaaaaa

9, hide()show() will remember the last dipslay status

a

b

10, hide() show() plus time parameter

a

b

11, effect:
show(), hide() will modify multiple style attributes at the same time: height, width and opacity.
fadeIn() fadeOut() : Opacity
fadeTo() : Opacity
slideDown(), slideUp() : Height

If you are not satisfied with it, you can only use animate()
animate() provides more powerful and complex effects.

12, animate():
before .show('slow'); // slow represents changing the height, width and transparency simultaneously within 0.6 seconds. If expressed in time, it is 600; === .show(600);
Then let’s take a look at animate()

animate({heigth : 'slow' ,width : 'slow' }, ' slow' )
The reason why height can be used here: 'slow' is actually similar to .show('slow'). Of course, he specified height before. .

13. Determine the position before doing animation.

a

14, width() and css('width')

a< ;/p>



15: When animate() does animation effects, the animation is executed order.

a

//The above events are executed in order. Change left first, then change top


Contrast:

< ;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

a

//The above are executed together, that is, left and top changes together.

You know the difference.


16. Similarly, let’s look at another example:



top:100px;background:red;">a

//When animate() follows When other animation effects are executed, they are also queued for execution. That is to say, come one by one.

Comparison: css()



< SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.fadeTo('slow',0.2)
.animate({ top : "300px" } , "slow" )
.fadeTo('slow',1 ,function(){
$(this).css("backgroundColor","#000");
})
//We can write it in the callback function of the last effect.
})
})

a

Summary:
When applied as multiple attributes in animate, the effects occur simultaneously.
When applied in a continuous manner, they are in order.
Non-effect methods, such as the .css() method, are not in order. The solution is to put them in the callback function.


17, make an example: Paragraph
"http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1

Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2

19, About clone: ​​
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">

Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1

20, DOM operation summary:
Create node:
Direct $("

cssrain

")

Copy node:
.clone()

Insert node:
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()

Remove node:
.remove()

Empty node:
.empty()

Wrap node:
.wrap()

Set attributes
.attr()

Removing attributes
.removeAttr()

is basically the same as the DOM operation in JavaScript. clone() is slightly different. The difference was mentioned in the previous example. .


That’s almost all the notes for the first 6 chapters.