Home  >  Article  >  Web Front-end  >  Introduction to jQuery entry knowledge_jquery

Introduction to jQuery entry knowledge_jquery

WBOY
WBOYOriginal
2016-05-16 18:33:171079browse

So far, jQuery has been released to version 1.4.2, and a week before that they just released version 1.4. Looking at the release time of each version, it is not difficult to find that it is developing rapidly and is being updated every month. version; and new jQuery plug-ins are constantly being developed, and the jQuery UI library has recently been launched
jQuery was launched at BarCamp NYC (New York City) on January 14, 2006. The leader, John Resig, wrote the book "Pro JavaScript Techniques". Because he works for mozolla, it is said that firefox 3 will include Jquery. The current Jquery team has main developers, promoters, UI, plug-in development, and website design and maintenance, including 3 The main developers are: two Americans, John Resig/Brandon Aaron, and one German, Jorn Zaefferer)
The following is a brief introduction to some features and usage of jQuery:
1. Accurate and simple selection of objects (dom):

Copy code The code is as follows:

$('#element');// Equivalent to document.getElementById("element")
$('.element');//Class
$('p');//html tag
$("form > input");/ /Sub-object
$("div,span,p.myClass");//Select multiple objects at the same time
$("tr:odd").css("background-color", "#bbbbff" );//Interlaced background of the table
$(":input");//Form object
$("input[name='newsletter']");//Specific form object

2. The application of object functions is simple and unrestricted:
Copy code The code is as follows:

element.function(par);
$("p.surprise").addClass("ohmy").show("slow")...

3. Operations on selected objects (including styles):
Copy code The code is as follows:

$ ("#element").addClass("selected");//Add style to the object
$('#element').css({ "background-color":"yellow", "font-weight": "bolder" });//Change object style
$("p").text("Some new text.");//Change object text
$("img").attr({ src : "test.jpg", alt: "Test Image" });//Change the object text
$("p").add("span");//Add a label to the object
$(" p").find("span");//Find the corresponding element inside the object
$("p").parent();//The parent element of the object
$("p"). append("Hello");//Add content to the object

4. Support aJax and file format: xml/html/script/json/jsonp
Copy code The code is as follows:

$("#feeds").load("feeds.html ");//Import static page content in the corresponding area
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//Import dynamic content

4. Support for events:
Copy code The code is as follows:

$("p").hover(function () {
$(this).addClass("hilite");//Mouse move When going up
}, function () {
$(this).removeClass("hilite");//Remove the mouse
});//The different effects of putting the mouse up and moving away (automatic Loop all p objects)

5. Animation:
Copy code The code is as follows:

$("p").show("slow");//Hidden object (slow gradient)
$("#go").click(function(){
$ ("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em"
}, 1000 );
} );//Dynamic changes in width, height and font after mouse click

6. Extension:
Copy code The code is as follows:

$.fn.background = function(bg){
return this.css('background', bg);
};
$(#element).background("red");

If you want to add a function to each jQuery object, the function must be assigned to $.fn, and the function must return a this (jQuery object)
jQuery related
《Learning jQuery: Better Interaction "Design and Web Development with Simple JavaScript Techniques", the first book on how to learn jQuery written by a jQuery developer, was released in July, with three more related books on the way.
jQueryCamp 2007, a meeting for jQuery developers will also be held in Boston on October 27th.
VisualJquery is a Jquery learning and query website, which has also been updated to version 1.1.2.
jQuery official website introduction translation:
jQuery is a JavaScript library that has never existed before.
It is fast and concise, and can easily process HTML documents, control events, and add animation and Ajax effects to the page.
jQuery is designed to change the way JavaScript is written.
It is suitable for everyone: designers, developers, geeks, business applications...
Small size: 26.5KB (1.2.1 compressed version), 45.3KB (1.2.1 lite version), 78.6KB (1.2.1 full version)...20.7KB (1.1.2 compressed version), 57.9KB (1.1.2 full version)
Compatibility: Supports CSS 1-3 and basic XPath
Cross-browser : IE 6.0, FF 1.5, Safari 2.0, Opera 9.0 (backwards compatible)
jQuery plug-in:
Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI Library:
Basic Mouse interaction: drag and dropping, sorting, selecting, resizing
Various interactive effects: accordion-style folding menus (accordions), calendars (date pickers), dialog boxes (dialogs), sliders (sliders), table sorters (table sorters), tabs (tabs), magnifier effect (magnifier), shadow effect (shadow)
Statement:
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