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
- Write less code, do more: write Less
- 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>