jQuery
Introduction
to jQuery A library made of JavaScript, an interface library used to facilitate various operations on HTML DOM elements.
It is to use JavaScript to encapsulate some interface libraries that facilitate various operations on HTML DOM elements .It
can also be understood as an API function set that facilitates us to perform various operations on HTML DOM elements.
jQuery cannot perform logical processing. Logic processing is implemented in JavaScript. The basic syntax of
jQuery
is: $(selector).action( )
dollar sign defines the jQuery
selector (selector) "query" and "find" HTML elements
jQuery's action() to perform operations on the element
document
ready function (represents a function that fires when HTML has finished loading) $(document).ready( function(){
--- jQuery functions go here ----
});
jQuery selector
jQuery element selector
$(this) current HTML element
$("p") all <p> elements
$("p.intro" ) all <p> elements with class="intro"
$(".intro") all elements with class="intro"
$(" #intro") element with id="intro"
$("ul li:first") The first <li> element of each <ul>
$("[href$='.jpg']") All hrefs with attribute values ending in ".jpg" Attribute
$("div#intro .head") All elements with class="head" in <div> element with id="intro"
jQuery attribute selector
$("[href]") Selects all elements with href attribute element.
$("[href='#']") selects all elements with href value equal to "#".
$("[href!='#']") selects all elements with href value not equal to "#".
$("[href$='.jpg']") selects all elements whose href value ends with ".jpg".
":" means condition
: first $("p:first") first <p> element
: last $("p:last") last <p> element
: even $("tr:even" ) all even <tr> elements
:odd $("tr:odd") all odd <tr>
:not(selector) $("input:not(:empty)") All non-empty input elements
:header $(":header") All header elements <h1> - <h6>
:animated All animated elements
:contains (text) $(":contains('W3School')") All elements containing the specified string
: empty $(":empty") All elements without child (element) nodes
: hidden $("p:hidden") All hidden <p> elements
: visible $("table:visible") All visible tables
s1,s2,s3 $("th,td,.intro") All elements with matching selections (that is, multiple selections)
:input $(":input") all <input> elements
:text $(":text") all <input> elements of type="text"
:password $(":password") all of type="password" <input> element
:radio $(":radio") All <input> elements of type="radio"
: checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") all <input> elements with type="reset"
:button $(":button") all <input> elements with type="button"
:image $(":image") all <input> elements with type="image"
: file $(":file") All <input> elements with type="file"
: enabled $(":enabled") All enabled input elements
: disabled $(": disabled") all disabled input elements
:selected $(":selected") all checked input elements
:checked $(":checked") all checked input elements
jQuery events
usually put jQuery code in the <head> Part of the event handling method:
$("button").click(function() {..some code... } )
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</ h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
jQuery name collision
var jq=jQuery .noConflict() to help you replace the $ sign with your own name (eg jq).
That is, jQuery uses $ to represent jQueryr by default, but when there are other libraries that also use $ to represent shorthand, there will be conflicts,
but this method can solve this conflict (that is, you define a symbol yourself to represent jQueryr)
Default: (they are the same)
jQuery("p").hide();
$("p").hide();
apply noConflict (they are the same)
var jq=jQuery.
jq("p").hide();//After this you define a simplified notation for jQuery ($ no longer means jQuery)
jQuery events (some)
$(document).ready(function) bind the function Ready event assigned to the document (when the document has finished loading)
$(selector).click(function) fires or binds a function to the selected element's click event
$(selector).dblclick(function) fires or binds a function To the selected element's double-click event
$(selector).focus(function) fires or binds a function to the selected element's gain focus event
$(selector).mouseover(function) fires or binds a function to the selected element's Mouse Hover Event
jQuery Effect - Hide and Show
$(selector).hide(speed,callback); //Show HTML element
$(selector).show(speed,callback); //Hide HTML element
$(selector).toggle (speed,callback); //Switch hide() and show() methods (that is, inversion)
(optional) speed parameter: can take the following values: "slow", "fast" or milliseconds
(optional) callback: Is the name of the function to be executed after hiding or showing
$(selector).fadeIn(speed,callback); //Fade in the hidden element
$(selector).fadeOut(speed,callback); //Fade out visible elements
$(selector).fadeToggle(speed,callback); //Switch between fadeIn() and fadeOut() methods (that is, the inverse operation)
$(selector).fadeTo(speed,opacity,callback);//Fade to the given opacity (the value is between 0 and 1 (the smaller the value, the more transparent))
$(selector).slideDown(speed,callback ); //Slide element down
$(selector).slideUp(speed,callback); //Slide element up
$(selector).slideToggle(speed,callback);//Between slideDown() and slideUp() methods Switching (that is, inversion)
$(selector).animate({params},speed,callback);
(required) The params parameter defines the CSS properties that form the animation.
Example:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
}) ;
});
Example: (using relative values)
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px '
});
});
Example: (using a predefined value)
Set the animation value of the property to "show", "hide" or "toggle", which is to hide and show
$("button").click(function( ){
$("div").animate({
height:'toggle'
});
});
Example: (using the queue function)
$("button").click(function(){
var div=$("div ");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$(selector).stop(stopAll,goToEnd); //Used to stop animations or effects before they finish.
(optional) stopAll: Specifies whether the animation queue should be cleared. The default is false, which stops only the active animation, allowing any queued animations to execute backwards.
(Optional) goToEnd: Specifies whether to complete the current animation immediately. Default is false.
By default, stop() will clear the current animation
instance :
$("#stop").click(function(){
$("#panel").stop();
});
jQuery Callback
Example function
: $("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
jQuery method chaining (one by one from left to right)
allows us to use the same element Run multiple jQuery commands on it, one after the other
Example : ("p1" element will first turn red, then slide up, then slide down)
$("#p1").css("color","red" ).slideUp(2000).slideDown(2000);
jQuery is not very strict in syntax; you can write it in the format you want, including line breaks and indentation:
eg:
.slideUp(2000)
.slideDown(2000);
jQuery DOM manipulation
text() Set or return the text content of the selected element (optional/String/Function (callback function) type when writing)
html() Set or return the selected element The content (including HTML markup) (optional when writing/String/Function (callback function) type)
val() Set or return the value of the form field (optional when writing/String/Function (callback function) type)
attr() The method is used to get the attribute value (optional/String/Function (callback function) type when writing)
read:
alert("Text: " + $("#test").text()); //23
alert("HTML : " + $("#test").html()); //<b>23</b>
alert("Value: " + $("#test").val()); //123
alert ($("#w3s").attr("href")); //http://www.w3school.com.cn
wrote:
$("#test1").text("Hello world!"); / /Set or return the text content of the selected element
$("#test2").html("<b>Hello world!< /b>"); //Set or return the content of the selected element (including HTML markup)
$("#test3").val("Dolly Duck"); //Set or return the value of the form field
$("#w3s").attr("href","http://www.w3school.com.cn/jquery"); //Set attributes
$("#w3s").attr({ //Allows you Set multiple attributes at the same time
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
callbacks for text(), html() and val() The function
callback function takes two parameters: the index of the current element in the selected element list (starting from 0), and the original (old) value.
Then return the string you wish to use with the new value of the function.
jQuery - add element
append() - insert content at the end of the selected element (insert text/HTML)
prepend() - insert content at the beginning of the selected element (insert text/HTML)
after() - insert after the selected element content (insert text/HTML)
before() - inserts content before the selected element (insert text/HTML)
append() and prepend() methods can accept an unlimited number of new elements via parameters the
after() and before() methods can Receives an unlimited number of new elements via parameters.
Example:
function appendText()
{
var txt1="<p>Text.</p>"; // create a new element in HTML
var txt2=$("<p></p>").text("Text."); // in jQuery create new element
var txt3=document.createElement("p"); // create new element in DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // append new element
}
jQuery - remove element
remove() - removes the selected element (and its children), the method also accepts a parameter that allows you to filter the removed elements.
empty() - remove child elements from the selected element (remove only child elements)
instance
$("p").remove(".italic"); //remove all <p> elements with class="italic"
jQuery operation CSS
addClass() - add one or more classes to the selected element
removeClass() - remove one or more classes from the selected element
toggleClass() - add/remove classes to the selected element toggle
css() - set or returns a style attribute
instance :
.
font-size:xx-large;
}
.blue
{
color:blue;
}
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
$ ("#div1").addClass("important blue");//Specify multiple classes
$("h1,h2,p").removeClass("blue");
$("h1,h2,p"). toggleClass("blue");//The toggle operation of adding/deleting classes to the selected element (that is, the inversion operation)
returns the CSS property
css("propertyname");
Example:
$("p").css("background -color");
Set CSS properties
css("propertyname","value");
Example:
$("p").css("background-color","yellow");
Set multiple CSS properties
css({" propertyname":"value","propertyname":"value",...});
实例:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery dimensions (dimensions of elements and browser windows) The
width() method sets or returns the width of an element (excluding padding, borders, or margins).
The height() method sets or returns the height of the element (excluding padding, borders, or margins).
The innerWidth() method returns the width of the element (including padding).
The innerHeight() method returns the height of the element (including padding).
The outerWidth() method returns the width of the element (including padding and borders).
The outerHeight() method returns the height of the element (including padding and borders).
The outerWidth(true) method returns the width of the element (including padding, borders, and margins).
The outerHeight(true) method returns the height of the element (including padding, borders, and margins).
$(document).width() The width and height of the document (HTML document)
$(document).height()
$(window).width() The width and height of the window (the browser viewport)
$(window).height ()
Reference to the original text:
http://www.w3school.com.cn/jquery
jQuery Basics
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=327019399&siteId=291194637
Recommended
Ranking