JavaScript and JQuery Framework Basics Tutorial

1. JS Object
DOM

–1, Function
–2, Test

3. Jquery

–1. Overview
–2, Usage steps
–3. Entry Case
–4, jQuery’s document is ready

Fourth, the syntax of JQuery

–1, selector
–2, Common functions
–3, Common events
–4, Practice

Summarize

1. JS Object

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test js creation object</title>
		<script>
			//2. Create object method 2:
				var p2 = {
					//Bound to the attribute name: "Zhang San",
					age:19,
					//Bound function eat:function(a){
						console.log(a);
					}
				}
				console.log(p2);
				p2.eat(10);//Call function //1. Create object method 1:
				//Declare object function Person(){}
				//Create object var p = new Person();
				//Dynamic binding attributes p.name="Zhang San";
				p.age=18 ;
				//Dynamic binding function p.eat=function(){
					console.log("eat pork");
				}
				//View console.log(p);
				//Call function p.eat();
		</script>
	</head>
	<body>
	</body>
</html>

DOM

–1, Function

Use various methods and properties of the document object. Analyze various elements in the web page.

Get the element by id ----- getElementById ("the value of the id attribute")

Get elements by name ----- getElementsByName ("value of the name attribute")

Get elements by class----- getElementsByClassName ("value of the class attribute")

Get elements by tag name ----- getElementsByTagName ("tag name")

Output in the browser-----write("content to be displayed")

innerHtml

innerText

style

–2, Test

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test DOM parsing web page elements</title>
		<script>
			function method(){
				// 4. Get the tag name is p var d = document.getElementsByTagName("p");
				d[0].innerHTML="hi...";
				console.log(d[0].innerHTML);
				// 3. Get class="f"
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="hi...";
				console.log(c[0].innerHTML);
				// 2. Get name="d"
				var b = document.getElementsByName("d");//Get multiple elements // b[0].innerHTML="test..."; //Modify the content of the first element b[0].style.color="blue"; //Modify the color of the text of the first element console.log(b[0].innerHTML);//Get the content of the first element // 1. Get id="a1"
				var a = window.document.getElementById("a1");//Get an element // a.innerText = "<h1>hello</h1>" ; //Modify the content // document.write( a.innerText ); //Write data directly to the web page // //What is the difference between innerText and innerHtml? innerHtml can parse HTML tags // a.innerHtml = "<h1>hello</h1>" ; //Modify content // document.write( a.innerHtml ); //Write data directly to the web page }
		</script>
	</head>
	<body>
		<div name="d" onclick="method();">I am div1</div>
		<div name="d">I am div2</div>
		<div class="f">I am div3</div>
		<a href="#" id="a1">I am a1</a>
		<a href="#" class="f">I am a2</a>
		<p class="f">I am p1</p>
		<p>I am p2</p>
	</body>
</html>

3. Jquery

–1. Overview

Used to simplify the writing of JS, it combines HTML css js .

Syntax: $(selector).event

–2, Usage steps

First introduce the jQuery file: Use the script tag to introduce it in HTML

Use jQuery syntax to modify web page elements

–3. Entry Case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test jq syntax</title>
		<!-- 1. Import jQuery file-->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. Embed JS code in the web page-->
		<script>
			// Click on the p tag to modify the text function fun(){
					//dom gets the element var a = document.getElementsByTagName("p");//Get the element according to the tag name a[0].innerHTML="I have changed...";//Modify the text //jq gets the element--jq syntax: $(selector).event $("p").hide();//Hide the element $("p").text("I have changed 33333...");//Modify the text }
		</script>
	</head>
	<body>
		<p onclick="fun();">You are p2</p>
	</body>
</html>

–4, jQuery’s document is ready

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test jq's document readiness</title>
		<!-- 1. Import jq file-->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			//Problem with method 1: the h1 you want to use has not been loaded yet, so an error will be reported when you use it //Solution: write after h1 is loaded + use document ready function (import jq first)
			// document.getElementsByTagName("h1")[0].innerHTML="I have changed...";
			//Writing method 2: Use the document ready function (import jq first)--it means that the document is ready and then use the element $(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="I have changed...";//js dom writing method $("h1").text("I have changed...");//jq writing method });
		</script>
	</head>
	<body>
		<h1>I am h1</h1>
	</body>
</html>

Fourth, the syntax of JQuery

–1, selector

Tag name selector: $(“div”) – selects div

ID selector: $("#d1") – selects the element with id=d1

Class selector: $(".cls") – selects elements with class=cls

Attribute selector: $("[href]") – selects elements that have an href attribute

Advanced selectors: $(“div.d3”) – selects divs with class=d3

–2, Common functions

text() html() val() — Get or set the value

hide() – Hide

$(“p”).css(“background-color”,“yellow”); --Set style

show() — Display

fadeIn() — fade in

fadeOut() — fade out

–3, Common events

Click event – click !!!

Double-click event – dblclick

Mouse enter event – mouseenter

Mouse out event – mousleave

Mouse over event – hover

Keyboard events – keydown keyup keypress

–4, Practice

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Testing jq exercises</title>
		<!-- 1. Import jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. Use jq syntax to practice syntax: $(selector).event-->
		<script>
			// jq document ready function:: Make sure all elements have been loaded, then you can use it with confidence, otherwise an error will be reported $(function(){
				// Exercise 1: Click the element with id=d1 to hide the element with id=p1 $("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				// Exercise 2: Double-click the element with class="dd" to add background color to div $(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
				// Exercise 3: When the mouse enters the div with id="d1", hide the element with href attribute $("#d1").mouseenter(function(){
					$("[href]").hide();
				})
			});
		</script>
	</head>
	<body>
		<div id="d1">I am div1</div>
		<div class="dd">I am div2</div>
		<div>I am div3</div>
		<div class="dd">I am div4</div>
		<p id="p1">I am p1</p>
		<p>I am p2</p>
		<a class="dd">I am a1</a>
		<a href="#">I am a2</a>
		<a href="#">I am a3</a>
	</body>
</html>

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

js uses document ready function to dynamically change page content example [innerHTML, innerText]
Detailed explanation of deep and shallow copy of Javascript and jQuery
Difference between document ready function in JavaScript and jQuery

<<: MySQL 5.7.17 zip installation and configuration tutorial Solution to MySQL startup failure

>>: Implementation of Docker to build private warehouse (registry and Harbor)