Front-end jQuery framework

Table of contents

Directory

1. Framework principle

Two, jQuery official document

3. The core of jQuery

Fourth, jQuery CSS

Five, jQuery selector

Six, jQuery screening

Seven, jQuery event implementation

8. Properties of jQuery

Nine, the effect of jQuery

Ten, jQuery document processing

1. Framework principle

bootstrap: Help us write a css file that defines a lot of css styles
.table{width:100%;}
When we use it, we only need to write tags in html and add the corresponding class

What are the effects of learning which classes

jquery : We use native js and need to achieve a lot of page dynamic effects. All effects need to be manually written by ourselves
jquery uses js code to help us write a lot of dynamic special effects. When we need to use it, we only need to call its written function

2. jQuery Official Document

jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax easier, and it has an easy-to-use API that works across a wide variety of browsers. jQuery combines versatility and extensibility to change the way millions of people write JavaScript

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
    <body>
<script>
 
</script>
</body>
</html>

3. The core of jQuery

Native js code

 <script>
var div=document.querySelectorAll(".www");
var div1 =document. querySelectorAll("#www");
var div2 = document. querySelectorAll("div");
</script>

jQuery code

 <script>
$(".www");
$("#www");
$("www");
</script>

4. jQuery CSS

How to write css in native js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
\t\t
</head>
<body>
<div class="tt">hello word</div>
\t\t
<script>
var a= document.querySelector(".tt");
a.style.color="red";
a.style.backgroundColor="blue";
a.style.width="300px";
a.style.fontSize="50px";
a.style.height="200px"
</script>
</body>
</html>

css writing method of jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="tt">hello word</div>
\t\t
<script>
$(".tt").width(500).height(300).css({"color":"yellow","background-color":"purple",\ "font-size":"30px"});
</script>
</body>
</html>

5. jQuery selector

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
\t\t</ul>
\t\t
<script>
$("li:first").width(300).height(200).css({"color":"yellow","background-color":"red"} );
</script>
</body>
</html>

6. jQuery filter

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
\t\t</ul>
\t\t
<script>
$("li").last().width(300).height(200).css({"color":"yellow","background-color":"red\ "});
</script>
</body>
</html>

7. Event implementation of jQuery

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
\t\t</ul>
\t\t
\t\t
<script>
$("li").click(function(){
alert(123);
})
</script>
</body>
</html>

8. jQuery properties

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.tt{
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
\t\t</ul>
\t\t
\t\t
<script>
$("li").click(function(){
$(this).addClass("tt").siblings().removeClass("tt");
})
</script>
</body>
</html>

9. The effect of jQuery

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.tt{
color: red;
background-color: yellow;
}
li {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li class="pp">Learn jQuery quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
<li>Learn jQuery Quickly</li>
\t\t</ul>
\t\t
\t\t
<script>
$("li").click(function(){
$(this).children().stop().slideToggle();
$(this).animate({
width: "50px",
height: "50px",
fontSize: "1em",
borderWidth: 10
}, 1000 );
})
</script>
</body>
</html>

10. jQuery document processing

This is just one of the usage methods. See the jQuery API Chinese documentation for the specific implementation method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
select {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<select multiple id="left">
<option>JAVA</option>
<option>HTML</option>
<option>CSS</option>
<option>VUE</option>
<option>HAHA</option>
<option>HEHE</option>
</select>
<select multiple id="right"></select>
<div>
<button>Go to the right</button>
<button>Go all to the right</button>
<button>Go left</button>
<button>Go all to the left</button>
</div>
<script>
$("button").eq(0).click(function(){
$("#left option:selected").appendTo("#right");
});
$("button").eq(1).click(function(){
$("#left option").appendTo("#right");
});
$("button").eq(2).click(function(){
$("#right option:selected").appendTo("#left");
})
$("button").eq(3).click(function(){
$("#right option").appendTo("#left");
})
</script>
</body>
</html>
syntaxbug.com © 2021 All Rights Reserved.