Home > Web Front-end > JS Tutorial > Summary of basic knowledge of jQuery learning_jquery

Summary of basic knowledge of jQuery learning_jquery

WBOY
Release: 2016-05-16 18:15:19
Original
913 people have browsed it

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template