jQuery learning notes:
jQuery learning
1. Basic syntax:
$(selector).action()
$: Define jQuery
selector: selector, query and find HTML Element
action(): Action performed on the element
Example:
$(this).hide()------Hide the current element
$("p"),hide( )-------Hide all p elements
$("#ID").hide()-----Hide elements with id=ID
$("p.Class")- -------Hide P with class=Class
$(document).ready(function(){-----});
This is used to prevent the document from running before it is loaded. jQuery code.
2. The selector selects elements through attributes
$("[href]") Selects all elements with href attribute
$("[href='AA']") Selects attribute href='AA 'The element
$("[href!='AA']") selects all hrefs! ='AA' element
$("[href$='.jpg']") selects all elements whose href value ends with .jpg
3. Selector selects CSS attribute
$("p ").css("background-color","red"); Modify the background color of all p elements to red
$("div#ID .Class") All class=Class in div elements with id=ID Elements
4. Name conflict
var jQMy = jQuery.noConflict() yong jQMy instead of $
5. Common events
$(document).ready(function) document’s readiness event
$(selector).click(function) The click event of the selected element
$(selector).dblclick(function) The double-click event of the selected element
$(selector).focus(function) The selected element gets focus Event
$(selector).mouseover(function) Selected element mouseover event
6. jQuery effect
$(selector).hide() Hide selected element
$(selector). show() Display the selected element
$(selector).toggle() Switch (between hiding and showing) the selected element
$(selector).slideDown() Slide down (display) the selected element
$(selector).slideUp() Slide up (hide) the selected element
$(selector).slideToggle() Switch the selected element between sliding up and sliding down
$(selector).fadeIn () Fade the selected element in
$(selector).fadeOut() Fade out the selected element
$(selector).fadeTo() Fade the selected element to the given opacity
$(selector) .animate() performs custom animation on the selected element
Parameters: "slow", "fast", "normal" or milliseconds
Callback function: callback
$("p").hide(1000 ,function(){
alert("The paragraph is now hidden");
});
7. jQuery’s HTML operation
$(selector).html(content) changes the selected element The (inner) HTML of the selected element
$(selector).append(content) Appends content to the (inner) HTML of the selected element Prepend content
$(selector).after(content) Add HTML after the selected element
$(selector).before(content) Add HTML before the selected element
8. jQuery’s CSS operation
$(selector).css(name,value) Set the value of the style attribute for the matching element
$(selector).css({properties}) Set multiple style attributes for the matching element
$(selector).css(name) Get the style attribute value of the first matching element
$(selector).height(value) Set the height of the matching element
$(selector).width(value) Set Match the width of the element
9. jQuery AJAX request
$(selector).load(url,data,callback) Load remote data into the selected element
$.ajax(options) Load remote data Load into XMLHttpRequest object
$.get(url,data,callback,type) Use HTTP GET to load remote data
$.post(url,data,callback,type) Use HTTP POST to load remote data
$.getJSON(url,data,callback) Use HTTP GET to load remote JSON data
$.getScript(url,callback) Load and execute remote JavaScript files
(selector) jQuery element selector syntax
(url) The URL (address) of the data being loaded
(data) The key/value object of the data sent to the server
(callback) When the data is loaded, the function executed
( type) The type of data being returned (html, xml, json, jasonp, script, text)
(options) All key/value pair options for complete AJAX requests