jQuery Basic knowledge of
1. $ and jquery The relationship between
- $ It's actually jQuery Another name for
- It is usually used directly $ Symbol
In many JavaScript There's going to be $ As a mark . If you use more than one at the same time JavaScript There are bound to be conflicts in the library .
2. jQuery Two entry functions
// Entry function
$(function(){
})
$(document).ready(function(){
})
3. jquery A variety of selectors
3.1 Foundation selector
$("div") $("#box") $(".box")
3.2 Hierarchy selector
$("ul li") $("ul>li")
3.3 Filter selector
$("ul li:first").css("color","red"); Select first
$("ul li:last").css("color","red"); Choose the last
$("ul li:eq(2)").css("color","red"); Select specified eq Inside are index numbers from 0 Start
$("ul li:odd").css("color","red"); An odd number of elements
$("ul li:even").css("color","red"); Elements with even index numbers
4. jquery Of css Set Syntax
Selectors .css(" Property name "," Property value ") Single attribute settings
Selectors .css({
" Property name "：” Property value “,
" Property name "：“ Property value ”
})
Sample code
$("div").css("border","1px solid #000");
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
5. jquery A variety of syntax for setting content and properties of
5.1 Set contents - text()、html() as well as val()
We'll use the three same methods from the previous chapter to set up the content ：
- text() - Sets or returns the text content of the selected element
- html() - Sets or returns the contents of the selected element （ Include HTML Mark ）
- val() - Set or return the value of the form field
5.2 Set properties - attr() -prop()
prop() Method for setting / Change the intrinsic attribute value of the element
attr() Method is also used to set / Change custom attribute values .
The following example shows how to change （ Set up ） In the link href The value of the property ：
$("button").click(function(){
$("#runoob").attr("href","http://www.csdn.com");
});
attr() Method also allows multiple properties to be set at the same time .
$("button").click(function(){
$("#runoob").attr("href"："http://www.csdn.com", "title" : "CSDN Official website ");
});
prop Code example
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
});
6. DOM Node relationships and additions 、 Delete node
//DOM node
parent() Parent element
parents( Specify the parent element ) Set of parent elements
find() Descendant child nodes
siblings() All brother nodes
next() A sibling node in the back
prev() A sibling node in the back
nextAll() All the sibling nodes behind
prevAll() All the sibling nodes in the front
addClass(" Class name ") Add class name
removeClass() Remove type
toggleClass() Switch class name
// jquery Add or delete nodes in
append() Add... To the tail
prepend() Add... To the head
$(" Added content ").appendTo(" Parent node ")
remove Delete all child elements of itself
empty Keep yourself
7. Timer and clear timer
setInterval() // Set the timer
clearInterval() // Clear timer
8. jquery How to write animation function
grammar ：
hide() hide
show() Show
slideUp() Slide on
slideDown() Slide down
$(selector).animate(styles,speed,easing,callback)
styles: One or more of the animations CSS attribute / value .
speed: Set the speed of the animation .
easing: Optional . Specifies the speed of the elements at different points in the animation . The default value is "swing". ("swing" - At the beginning / The end moves slowly , Move fast in the middle
"linear" - Move at a constant speed )
callback:animate After function execution , Function to execute .
jquery The fade in and out of animation
jQuery Provides the following methods to achieve the fade in and out effect of the display ：
fadeIn() // Fade in
fadeOut() // Fade out
fadeToggle() // Fade in and out
fadeTo() // To achieve the specified transparency