1. Introduction to jQuery
1. What is jQuery?
JQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after Prototype. The purpose of jQuery design is "write Less, Do More", which advocates writing less code and doing more things. It encapsulates commonly used function codes of JavaScript, provides a convenient JavaScript design pattern, optimizes HTML document operations, event processing, animation design, and Ajax interaction.
The core features of jQuery can be summarized as follows: it has a unique chain syntax and a short and clear multi-functional interface; it has efficient and flexible css selectors, and can expand the CSS selector; it has a convenient plug-in expansion mechanism and rich plug-ins. jQuery is compatible with all major browsers, such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.
jQuery is currently the most widely used javascript function library. According to statistics, 46% of the top 1 million websites in the world use jQuery, far more than other libraries. Microsoft even uses jQuery as their official library.
In addition, the conditions required to run jQuery are simple: a computer, a smartphone, or a device that can run a modern browser. jQuery's browser requirements are also quite free. The official website lists the following browsers that support jQuery:
FirefoX 2.0+
Internet Explorer 6+
Safari 3+
Opera 10.6+
Chrome 8+
2, jQuery language features and advantages
Get document elements quickly. The selection mechanism of jQuery is built on the selector of Css, which provides the ability to quickly query the elements in the DOM document, and greatly strengthens the way of obtaining page elements in JavaScript.
Provide beautiful page dynamic effects. A series of animation effects are built into jQuery, and very beautiful web pages can be developed. Many websites use the built-in effects of jQuery, such as dynamic special effects such as fade in and fade out and element removal.
Create AJAX webpage without refreshing. AJAX is short for asynchronous JavaScript and XML. You can develop very sensitive and non-refreshing web pages. Especially when developing server-side web pages, such as PHP websites, you need to communicate with the server to and from. Refresh the web page, and after using AJAX special effects, you can refresh the page partially to provide dynamic effects.
Provides enhancements to the JavaScript language. jQuery provides enhancements to basic JavaScript structures, such as element iteration and array processing.
Enhanced event handling. jQuery provides various page events, it can avoid programmers adding too much event handling code in HTML, and most importantly, its event handler eliminates various browser compatibility issues.
Change the content of the web page. jQuery can modify the content of the web page, such as changing the text of the web page, inserting or flipping the image of the web page. jQuery simplifies the way that the original JavaScript code needs to be processed.
Advantage:
jQuery is a JavaScript library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn,
but it should be noted that jquery is not equal to JS!
3. jQuery official website
jquery is a function library, a js file, the page can be used by introducing this js file with script tags. Download address:
jQuery official website: http://jquery.com/
4. jQuery loading
Write the statement to get the element to the head of the page, it will be wrong because the element has not been loaded, jquery provides ready method to solve this problem, its speed is faster than the native window.onload.
Second, jQuery selector
1, basic selector to
select a web page element, and then perform some operation on it, jquery selector jquery selector can quickly select elements, the selection rules are the same as the CSS style, use the length attribute to determine whether the selection is successful .
jquery usage idea one: select a web page element, and then perform some operation on it
2, selector decoration filter
3, selector function filter
4, selector transfer
a48d960 on 6 Sep 2019
0 contributors
155 lines (127 sloc) 4.18 KB
RawBlameHistory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 0 auto;
margin-top: 50px;
}
.box h1 {
color: green;
font-size: 20px;
line-height: 35px;
font-weight: bold;
border: 1px dashed gray;
padding-left: 10px;
}
.box li {
list-style: none;
padding: 10px 15px;
border: 1px dashed gray;
}
.box li span {
background-color: gray;
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
}
.box li:nth-child(-n+3) span {
background-color: green;
color: white;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
.content img {
width: 80px;
height: 120px;
float: left;
}
.content p {
width: 180px;
height: 120px;
float: right;
font-size: 12px;
}
.current .content{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('li').mouseenter(function () {
$(this).addClass('current');
});
$('li').mouseleave(function () {
$(this).removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li>
<span>1</span> 木兰
<div class="content ">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>2</span> 木兰
<div class="content ">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>3</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>4</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
<li>
<span>5</span> 木兰
<div class="content">
<img src="img/mov.jpg">
<p>
木兰是军中出了名的“刺头”，比身边的男人更蛮更横，虽然武艺高强，但从军时“当大官，替老花家争脸”的愿望却迟迟未能实现。
在一次孤身潜入敌营的任务中，她身陷重围，险象环生。这时，一个更大的阴谋正浮出水面：谁是敌人，谁是朋友…
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
