3. JQuery Event Processing, Animation effects, Same Origin Policy, Interaction

directory

Event handling in jQuery (page load response event)

Prevent event bubbling and prevent event behavior

Prevents events from bubbling

Preventing event behavior

JQuery Animation effects

Example: Animation appears and hides effects

Slide to show and hide

Custom animation

URL: Uniform Resource Locator is the address of a resource on the Internet

The same-origin policy

Synchronous interaction and asynchronous interaction

Event handling in jQuery (page load response event)

The $(document).ready () method replaces the traditional window.onload () method, though there are subtle differences between the two

1. Use $(document).ready() on a page without any conflict between methods. Will be executed in the order in the code; The window.onload () method can only be used once on a page.
2. The window.onload () method responds when a document is fully downloaded to the browser (including all associated files such as images, banners, etc.). The $(document).ready() method is called when all the DOM meta strings are ready, excluding the associated files. For example, if there is an image on the page that is not loaded but the DOM element is fully ready, then the $(document).ready () method will be executed. Window.onload () will not execute under the same condition, it will continue to wait for the image to load. Do not execute until images and other associated files have been downloaded. Obviously, parsing a web page into a DOM meta is much faster than loading all the associated files in the page.

Be careful when using the $(document).ready () method because it can be executed as soon as the DOM element is ready, so it is possible that the element’s associated file has not been downloaded completely. For example, if the image-related DOM element is ready but the image has not been loaded, it is not valid to obtain the height or width attribute of the image. To solve this problem, you can use another page-loading method in jQuery: the load() method. The load() method binds a handler to the element’s onload event, which is triggered when all the content of the element is loaded if the handler is bound to the Window object, or when the content of the element is loaded if the handler is bound to the element.

Event delegate, also known as event proxy. Use event bubbling to add event handlers to the parent element so that all child elements can handle the event. Advantages:

1. Reduce DOM operations and improve interaction efficiency

2. Newly added child elements can also respond to events

Scenario: If all child elements require the same effect, consider adding an event to the parent element and having the parent element act as a proxy for the child element to respond to the event.

Applicable events (must be bubbling events)

click
mousedown
mouseup
keydown
keypress
keymove

Conclusion:

1. Do not use bind() to iterate over the binding if the selector matches a large number of elements

2. Bind () for id selector

Use delegate() or on() to bind dynamically added elements.

4. Use delegate() or on() methods, and keep the DOM tree small

5. Use on() whenever possible

Example:

<body>
	<button id="bt">Bind the event and add a P tag</button>
	<div>
		<p>Before my bed a pool of night</p>
		<p>Can it be hoarfrost on the ground</p>
	</div>
	<script type="text/javascript">
			$("#bt").click(function(){$("div").append($(" New tag 
"))})Delegate 3.on 4.live
// $("div p").bind("click",function(){
// console.log($(this).text())
/ /})
			// Bind problems: 1, implicit iteration 2, inability to bind events for tags not already stored
			
// $("div").delegate("p","click",function(){
// console.log($(this).text())
/ /})
			//delegate: Instead of binding events to p, bind events to divs
			
			$("div").on("click"."p".function(){
				console.log($(this).text())
			})
	</script>
</body>
Copy the code

Running results:

Some of the events

Prevent event bubbling and prevent event behavior

Prevents events from bubbling

Event.stoppropagation ();

1 $("#div1").mousedown(function(event){ 2 event.stopPropagation(); 3});Copy the code

Method 2: return false;

1 $("#div1"). Mousedown (function(event){2 return false; 3});Copy the code

But there is a difference between the two approaches. Return false not only prevents the event from bubbling up, but also prevents the event itself. Event.stoppropagation () prevents the event from bubbling up, not the event itself.

Preventing event behavior

Default behaviors are common for hyperlinks to jump to, forms to submit, system menus to right-click, and so on. PreventDefault () : preventDefault behavior

JQuery Animation effects

Example: Animation appears and hides effects

<style type="text/css">
		#box1{
			width:200px;
			height: 200px;
			background-color: red;
		}
	</style>
<body>
	<div id="box1">	</div>
	<button id="bt1">hidden</button>
	<button id="bt2">According to</button>
	<button id="bt3">Switch state</button>
	<script type="text/javascript">
		/ / frame animation
		//hide()
		//hide(spped[,callback])
		$("#bt1").click(function(){
			//slow:600 normal:400 fast:200
			$("#box1").hide(1000.function(){
				console.log("End of animation"The $()})})"#bt2").click(function(){$("#box1").show(1000The $()})"#bt3").click(function(){$("#box1").toggle(1000)})</script>
</body>
Copy the code

Running results:

Slide to show and hide

Example:

<body>
	<div id="box1">	</div>
	<button id="bt1">hidden</button>
	<button id="bt2">According to</button>
	<button id="bt3">Switch state</button>
	<script type="text/javascript">
		/ / frame animation
		$("#bt1").click(function(){
			//slow:600 normal:400 fast:200
			$("#box1").slideUp(1000.function(){
				console.log("End of animation"The $()})})"#bt2").click(function(){$("#box1").slideDown(1000The $()})"#bt3").click(function(){$("#box1").slideToggle(1000)})</script>
</body>
Copy the code

Running results:

Custom animation

Note:

1. When using animate(), you must set position to relative or Absolute to animate an element. Elements will simply stand still if they are not explicitly defined and you try to move them using the animate() method

2. In the animate() method, you can set the transparency of an element using the property opacity

{left: “400px”} left: “400px”} left: “400px”} left: “400px”} left: “400px”} left: “400px”} left: “400px”

Example: The red block moves from left to right

	<style type="text/css">
		#box1{
			width:200px;
			height: 200px;
			background-color: red;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
<body style="position: relative;">
	<div id="box1">	</div>
	
	<script type="text/javascript">
		//animate(params[,speed][,callback])
		$("#box1").animate({left:"200px"},1000)
	</script>
</body>
Copy the code

Running results:

You can continue with animate later, and the box will move down after moving right

$("#box1").animate({left:"200px"},1000).animate({top:"200px"},1000)
Copy the code

To stop the animation

The stop() method, which is also a custom animation, stops matching the animation the element is running and immediately executes the next animation in the animation queue

stop(clearQueue , gotoEnd )

ClearQueue: indicates whether to clear the animation queue that has not finished executing (true indicates that the animation queue is cleared)

GotoEnd: indicates whether the animation being executed reaches the state at the end of the animation directly (true indicates the state at the end of the animation directly)

Note: When gotoEnd is set to true, only the final state of the animation being executed can be reached directly, not the final state of the animation set by the animation sequence.

Example: Add end and pause buttons

<div id="box1">	</div>
	<button class="pause">suspended</button>
	<button class="finish">The end of the</button>
	<script type="text/javascript">
		//animate(params[,speed][,callback])
		var a = $("#box1").animate({left:"200px"},3000).animate({top:"200px"},3000The $()".finish").click(function(){
			a.stop(true.trueThe $()})".pause").click(function(){
			a.stop(true.false)})</script>
Copy the code

Check if it is animated

.is(":animated")
Copy the code

URL: Uniform Resource Locator is the address of a resource on the Internet

The same-origin policy

Require dynamic content (such as JavaScript) to read only those HTTP replies and cookies that are cognate, not content from non-cognates

Three elements of the same origin:http://22.19.89.989:8080/script

1. The same protocol as HTTP HTTPS

2. Same domain name/same IPwww.baidu.com 22.19.89.989

3. Same port 8080 HTTP uses port 80 by default

How do we access pages through a browser? Understand the content of B/S mode When we open the browser, enter the URL in the address bar of the browser “www.gacl.cn:8080/WebDemo1/1h… ? The browser and server do the following:

1. The browser searches for the IP address corresponding to the host name www.gacl.cn in the Hosts file of the operating system.
2. If the browser does not find the corresponding IP address in the Hosts file of the operating system, go to the DNS server on the Internet to search for the IP address of www.gacl.cn.
3. After the browser finds the IP address of the host “www.gacl.cn “, it uses the IP address to connect to the Web server.
4. After the browser connects to the Web server, it sends a request to the server using THE HTTP protocol. In the process of sending a request, the browser transmits data to the Web server in the form of Stream, telling the Web server to access the Web resources under the Web application in the server
5. After the browser completes the above four steps, it waits for the Web server to deliver the desired 1.html Web resource to it.
6. After receiving the data from the browser, the server starts to parse the received data. When parsing the content in “GET/ webDemo1/1.html “, the server knows that the client browser wants to access the 1HTML Web resource in the WebDemo1 application. The server then reads the contents of the 1.html Web resource and sends it as a Stream to the browser.
7. The browser takes the data from the server and presents it to the user

Synchronous interaction and asynchronous interaction

Synchronous interaction: submit the request — “wait for the server to process –” The server returns data, during which time the page cannot do anything (B/S mode) Asynchronous interaction: the request is triggered by an event — “The server processes (and then can do something else) –” the server responds. (ajax)

For example: asynchronous: you transfer, I am busy with other things, after the transmission tell me. Sync: you transfer, I will quietly watch you transfer after I do other things.

Learn together and make progress together. If there are any mistakes, please comment

3. JQuery Event Processing, Animation effects, Same Origin Policy, Interaction

Event handling in jQuery (page load response event)

Prevent event bubbling and prevent event behavior

Prevents events from bubbling

Preventing event behavior

JQuery Animation effects

Example: Animation appears and hides effects

Slide to show and hide

Custom animation

URL: Uniform Resource Locator is the address of a resource on the Internet

The same-origin policy

Synchronous interaction and asynchronous interaction

Related Posts

Normalize the development and distribution of NPM packages

Electron loads local files

The front-end development record | vue of method calls to another page