Latest web development tutorials
×

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JQuery JavaScript test

Testing JavaScript framework library - jQuery


Reference jQuery

To test JavaScript library, you need to reference it in a Web page.

To refer to a library, use the <script> tag, whose src attribute set to the URL library:

Reference jQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>


jQuery Description

The main function is a jQuery $ () function (jQuery function). If you pass DOM object to a function that returns the jQuery object with jQuery to add the functionality.

jQuery CSS selector allows you to select elements.

In JavaScript, you can assign a function to handle window load event:

JavaScript method:

function myFunction ()
{
var obj = document.getElementById ( "h01");
obj.innerHTML = "Hello jQuery";
}
onload = myFunction;

Equivalent jQuery is different:

jQuery way:

function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

The last line of the code above, HTML DOM document object is passed to jQuery: $ (document).

When you pass DOM object to jQuery, jQuery will return to the HTML DOM objects wrapped jQuery object.

jQuery function returns a new jQuery object, wherein the ready () is a method.

Since the function is variable in JavaScript, so you can put myFunction passed as an argument to the jQuery ready methods.

lamp jQuery return the jQuery object, the DOM object has passed different.
JQuery object properties and methods have, with different DOM object.
You can not use HTML DOM properties and methods on the jQuery object.


Testing jQuery

Please try the following example:

Examples

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
    $("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

try it"

Please try again at this example:

Examples

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
    $("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

try it"

As you can see in the example above, jQuery allows links (chain syntax).

Link (Chaining) is a method of performing multiple tasks on the same subject convenient method.

You need to learn more? This tutorial gives you a great jQuery tutorial .