Introduction to web ABCD day09 ABCD jquery

Keywords: Web Development JQuery Javascript less

Introduction to jQuery

brief introduction

jQuery is a cross browser, fast and concise JavaScript framework
The purpose of jQuery design is "write Less, Do More", that is, to advocate writing less code and doing more things
jQuery encapsulates common JavaScript function codes, provides a simple JavaScript Design pattern, and optimizes HTML document operation, event processing, animation design and Ajax interaction
Not compatible with IE6/7/8 after jQuery 2.0

Effect

It can simplify the operation between html and js

jQuery use

1. Import jQuery file

script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>

2.jQuery syntax

JQuery (selector) or $(selector)

Get objects

$("#id")

Get value

jquery object. val()

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Obtain jQuery object</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $username = $("#username");
				alert("jQuery object"+$username.val());
			})
			window.onload = function(){
				var username = document.getElementById("username");
				alert("JavaScript object"+username.value);
			}
		</script>
	</head>
	

	<body>
		<input type="text" id="username" value="jack" />
	</body>

</html>

3. Transformation of jQuery object and JavaScript object

1. Convert JavaScript objects to jQuery objects

$(JavaScript object)

2. Converting jQuery objects to JavaScript objects

The first way
- jquery object [index]
The second way
- jquery object. get(index)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
	<script src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var username = document.getElementById("username");
			alert("js---->jQuery  "+$(username).val());
		})
		window.onload =function (){
			var $username = $("#username");
//			var usernameObj = $username[0];
//			Alert ("jQuery - > JS mode 1" + usernameobj. Value);
			var usernameObj = $username.get(0);
			alert("jQuery--->js Mode 2  "+usernameObj.value);
		}
	</script>
<body>
	<input type="text" id="username" value="jack"/>
</body>
</html>

Page loading

$(document).ready(function(){
  // Write your code here
});

$(function($) {
  // You can continue to use $as an alias here
});

JavaScript can only assign a value to onload once, and the next one will overwrite the previous one (only one will pop up)

jQuery can assign multiple values (all Pop-Up)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Page load event</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			window.onload = function (){
				alert("JavaScript Page load event");
			}
			$(document).ready(function(){
				alert("jQuery Page load event");
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

Posted by Celauran on Sat, 14 Dec 2019 13:19:13 -0800

Programmer Group