JQuery Getting Started+js Library File Sharing

Keywords: Javascript JQuery less IE

;

data

Links: https://pan.baidu.com/s/1aHUnfPcs1VJAas5zj5abQA
Extraction code: b1hb

Include the js library files needed for this section, as well as the api documentation for JQuery

What JQuery

jQuery is a fast and concise JavaScript framework, which is another excellent JavaScript code base (or JavaScript framework) after Prototype.jQuery was designed to be "write Less, Do More", which advocates writing less code and doing more.It encapsulates common JavaScript function code and provides a simple JavaScript design pattern to optimize HTML document operations, event handling, animation design, and Ajax interaction.

The core features of jQuery can be summarized as: unique chain syntax and short, clear, multi-functional interfaces; efficient and flexible CSS selectors, which can be extended; convenient plug-in extension mechanism and rich plug-ins.JQuery is compatible with mainstream browsers such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.

Role of JQuery

  1. Write less code, do more: write Less
  2. Separate the JS code from the HTML page code on our page

Getting started with JQ

Import js library file

 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
			//Events completed by loading js documents
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*Events when document loading is complete*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  Short form: $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				The simplest way to write 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>

The experiment found that only three outputs of window.onload 222 and JQuery were output, indicating that the second output method of js replaced the previous output, while JQuery did not.

Finding elements by ID in JQ

All based on selector
#ID{}
.Class name {}
$("#ID name")
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		
		<script>
			//Document Loading Order
			$(function(){
				$("#div1").html(" Li Si ");
				
//				div1.innerHTML = "King Five"; 
			});
//			alert($("#div1"));
			
		</script>
	</head>
	<body>
		<div id="div1">Zhang San</div>
	</body>
</html>

Conversion between JQ and JS

  • JQ object, can only call properties and methods of JQ
  • JS objects can only call JS properties and methods
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS successfully modified content"

				//Convert JS Object to JQ Object
				$(div).html("Conversion JQ Object to modify content")
			}
			
			$(function(){
				//Bind events to buttons
				$("#btn2").click(function(){
					//Found div1
//					$("#div1").html("JQ method successfully modified content");

					//Convert a JQ object to a JS object to invoke
					var $div = $("#div1");
//		            First method		
//                  var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq Conversion JS Object Success";
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" value="JS modify div content" onclick="changeJS()" />
		<input type="button" value="JQ Mode modification div content" id="btn2" />
		<div id="div1">
			The content here will be JS/JQ Code Modified
		</div>
		<div id="div1">
			The content here will be JS/JQ Code modification 1111
		</div>
	</body>
</html>

Development steps for JQ

Separate the JS code from the HTML page code on our page

1. Import JQ-related files
 2. Document Loading Completion Event: $(function): Operation of Page Initialization: Bind Event, Start Page Timer
 3. Determine events for related operations
 4. Event Trigger Function
 5. Function to manipulate related elements

Animation effects in JQ

Show and hide img.style.display

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : Custom Animation
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<!--
			1. Import JQ Related files
			2.  Document Load Completion Event: $(function)  : Operation of page initialization: Binding Events, Start Page Timer
			3. Determine events for related operations
			4. Event Trigger Function
			5. Function to manipulate related elements
		-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				
				//Show page pictures
				//Bind events to buttons
				$("#btn1").click(function(){
//					$("#img1").show();
//                  Slide
//					$("#img1").slideDown();
//                   Fade in and out
//					$("#img1").fadeIn(5000);

					$("#img1").animate({ width:"800px",opacity:"1"},5000);
					
				});
				
				//Hide Page Picture
				$("#btn2").click(function(){
					//Get img
//					$("#img1").hide(10000);
//					$("#img1").slideUp(500);
//					$("#img1").fadeOut(5000);
					$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="display" id="btn1" /> 
		<input type="button" value="hide" id="btn2"/> <br />
		<img src="../../img/333.png" id="img1" width="500px" />
	</body>
</html>

Posted by GirishR on Tue, 05 May 2020 12:58:12 -0700