JavaScript and JQuery Framework Basics Tutorial
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, FunctionUse various methods and properties of the document object. Analyze various elements in the web page. Get the element by id ----- Get elements by name ----- Get elements by class----- Get elements by tag name ----- Output in the browser-----write("content to be displayed") –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 Syntax: $(selector).event –2, Usage stepsFirst 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: ID selector: Class selector: Attribute selector: Advanced selectors: –2, Common functions –3, Common events Click event – Double-click event – Mouse enter event – Mouse out event – Mouse over event – Keyboard events – –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>
SummarizeThis 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:
|
<<: MySQL 5.7.17 zip installation and configuration tutorial Solution to MySQL startup failure
>>: Implementation of Docker to build private warehouse (registry and Harbor)
Recommend
This article tells you how to use event delegation to implement JavaScript message board function
Use event delegation to implement message board f...
HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)
Without further ado, I will post the code for you...
How to bind Docker container to external IP and port
Docker allows network services to be provided by ...
Detailed explanation of Nginx's rewrite module
The rewrite module is the ngx_http_rewrite_module...
Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7
Preface Recently, I encountered a requirement. Du...
Negative distance (empathy) - iterative process of mutual influence
Negative distance refers to empathy. Preface (rai...
Vue project implements left swipe delete function (complete code)
Achieve results The code is as follows html <t...
In-depth analysis of the slow query problem of MySQL Sending data
Through an example, I shared with you the solutio...
Recommended tips for web front-end engineers
Let's first talk about the value of web front...
Mysql sql slow query monitoring script code example
1. Modify my.cnf #The overall effect is that both...
MySQL master-slave data is inconsistent, prompt: Slave_SQL_Running: No solution
This article uses an example to describe the solu...
CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation
1. Add users and groups 1. Add mysql user group #...
WeChat applet realizes simple tab switching effect
This article shares the specific code for WeChat ...
MySQL Failover Notes: Application-Aware Design Detailed Explanation
1. Introduction As we all know, in the applicatio...
JavaScript to achieve calendar effect
This article shares the specific code for JavaScr...