Jquery Syntax Basics

1. The general syntax format of Jquery is: $(selector).action()

l dollar sign defines jQuery (also known as factory function)
l selector (selector) "query" and "find" HTML elements
l action() performs an action on an element

Example:

$(this).hide() // hide the current element

$("p").hide() // hide all paragraphs

$("p.test").hide() // Hide all paragraphs with class="test"

$("#test").hide() // hide the element with id="test"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>jQuery Basic Syntax</title>

$(document).ready(function(){

$("button").click(function(){

//$(this).hide();

//$("p").hide();

//$("p.test").hide();

$("#test").hide();

});

</script>

</head>

<body>

<p id= "test" >This is the P1 paragraph</p>

<p class= "test" >This is a P2 paragraph</p>

<p class= "test" >This is a P3 paragraph</p>

<p class= "test1" >This is a P4 paragraph</p>

</body>

</html>

2. jQuery code chain style

a) For no more than 3 operations on the same object, you can directly write one line and add necessary comments.

b) There are many operations on the same object, it is recommended to write one operation per line

<!DOCTYPE html>

<html>

<head>

<title>Chain style.html </title>

$(document).ready(function(){

$("button").click(function(){

$(".div1").width(100);

$(".div1").height(100);

$(".div1").css({border:"1px solid black",background:"green"});

// $(".div1").width(100).height(100).css({border:"1px solid black",background:"green"});

});

</script>

</head>

<body>

</body>

</html>

3. Document ready function: $(document).ready()

Similar to window.onload, defines the function to be executed after the document is loaded. This is to prevent jQuery code from running until the document is fully loaded (ready). If the function is run before the document is fully loaded, the operation may fail.

case

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

$(document).ready(function(){

alert("Hello World!");

});

</script>

</head

<body>

This is my HTML page.<br>

</body>

</html>

Comparison of window.onload and $(document).ready():

	window.onload	$(document).ready()
execution time	Must wait for all content on the page to load (including images) to execute	Executed after all DOM structures in the web page are drawn
write number	Cannot write multiple window.onload=function(){}; window.onload=function(){}; At this point the second overwrites the first	Can write multiple $(document).ready(function(){}); $(document).ready(function(){}); Both functions execute
Simplified spelling	without	$( )

<!DOCTYPE html>

<html>

<head>

<title>Comparison with document.html < /title>

//The difference between window.onload and $(document).ready():

//Difference 1: Execution timing: window.onload: Execute after all elements in the page are loaded

//$(document).ready(): It will be executed after the dom element in the page is loaded

//Difference 2: The number of writing: window.onload: cannot write more than one, the second one needs to overwrite the value of the first one

//$(document).ready(): You can write multiple and execute them in sequence

/* window.onload=function(){

document.getElementById("btn").onclick=function(){

alert("Hello World!");

}

window.onload=function(){

document.getElementById("btn").onclick=function(){

alert("bbbbbb");

}

} */

/* $(document).ready(function(){

$("#btn").click(function(){

alert("aaaaaa");

});

$(document).ready(function(){

$("#btn").click(function(){

alert("bbbbbb");

});

}); */

//$(document).ready() Short form: $()

$(function(){

alert("Hello World!");

});

</script>

</head>

<body>

</body>

</html>

4. jQuery objects and DOM objects

DOM object : An element object in HTML's Document Object Model. It can be obtained by the following methods in javascript

document.getElementById("test")

document.getElementsByTagName("p")

jQuery object: DOM object wrapped by jQuery

$("#test")

$("p")

Convert jQuery object to DOM object

var $test = $("#test");

var test = $test[0]; //The jQuery object is an array, and the DOM object can be obtained by index

var test = $test.get(0); //Get the DOM object using the get(index) method provided by jQuery

DOM object to jQuery object

var test = document.getElementById("test");

var $test = $(test); //Use jQuery's factory method

<!DOCTYPE html>

<html>

<head>

<title>jQuery and dom conversion.html < /title>

$(function(){

//1 Convert the jQuery object to a dom object

/* var btn=$("#btn")[0];

btn.onclick=function(){

alert("aaaaa");

} */

//2 Convert the dom object to a jQuery object

var btn=document.getElementById("btn");

var $ btn = $ (btn);

$btn.click(function(){

alert("bbbb");

});

</script>

</head>

<body>

</body>

</html>

If jQuery conflicts with other libraries:

You can use jQuery.noConflict(); to give up $ usage rights and use jQuery instead of $

<!DOCTYPE html>

<html>

<head>

<title> jquery keyword conflict.html < /title>

//1. $() will only be executed once, all of which are used as method parameters and have no effect

/* $(function(){

alert("aaaaa");

$();

}); */

//2. jQuery is executed normally, and test is also executed normally

jQuery(function(){

alert("aaaaa");

$();

});

//3. The perfect way

var $j=jQuery.noConflict();

$j(function(){

alert("cccc");

$();

});

</script>

</head>

</html>

Included test.js content:

function $(){

alert("This is the prompt message in the test.js file");

}

Jquery Syntax Basics

Jquery Syntax Basics

Guess you like