-
Notifications
You must be signed in to change notification settings - Fork 97
/
index.html
111 lines (99 loc) · 4.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script>{
"title": "jQuery",
"pageTemplate": "page-fullwidth.php",
"customFields": [
{ "key": "hide_title", "value": 1 }
]
}</script>
<div id="banner-secondary" class="row">
<div class="downloads-box four columns push-eight">
<div class="download-main">
<a href="/download/" class="button large">
<span class="download"></span>
Download jQuery
<span>v3.7.1</span>
<span class="support-notice">The 1.x and 2.x branches no longer receive patches.</span>
</a>
<div class="download-options">
<a href="https://github.com/jquery/jquery">View Source on GitHub →</a>
<a href="https://learn.jquery.com/about-jquery/how-jquery-works/">How jQuery Works →</a>
</div>
</div>
</div>
<div class="features-box row eight columns pull-four">
<div class="feature-box lightweight-footprint four columns center-txt">
<div class="feature-box-image"></div>
<h3>Lightweight Footprint</h3>
<p>Only 30kB minified and gzipped. Can also be included as an AMD module</p>
</div>
<div class="feature-box css3-compliant four columns center-txt">
<div class="feature-box-image"></div>
<h3>CSS3 Compliant</h3>
<p>Supports CSS3 selectors to find elements as well as in style property manipulation</p>
</div>
<div class="feature-box cross-browser four columns center-txt">
<div class="feature-box-image"></div>
<h3>Cross-Browser</h3>
<p><a href="/browser-support/">Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more</a></p>
</div>
</div>
</div>
<div id="home-content" class="clearfix row">
<section class="eight columns">
<h2 class="block">What is jQuery?</h2>
<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works across
a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write
JavaScript.</p>
</section>
<aside class="four columns">
<h2 class="block">Resources</h2>
<ul>
<li><a href="https://api.jquery.com">jQuery Core API Documentation</a></li>
<li><a href="https://learn.jquery.com">jQuery Learning Center</a></li>
<li><a href="https://blog.jquery.com">jQuery Blog</a></li>
<li><a href="https://contribute.jquery.com">Contribute to jQuery</a></li>
<li><a href="https://github.com/jquery/jquery/issues">Browse or Submit jQuery Bugs</a></li>
</ul>
</aside>
</div>
<section>
<h2 class="block">A Brief Look</h2>
<h3>DOM Traversal and Manipulation</h3>
<p>Get the <code><button></code> element with the class 'continue' and change its HTML to 'Next Step...'</p>
<pre><code>$( "button.continue" ).html( "Next Step..." )</code></pre>
<h3>Event Handling</h3>
<p>Show the <code>#banner-message</code> element that is hidden with
<code>display:none</code> in its CSS when any button in <code>#button-container</code> is
clicked.</p>
<pre><code>
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
</pre></code>
<h3>Ajax</h3>
<p>Call a local script on the server <code>/api/getWeather</code>
with the query parameter <code>zipcode=97201</code>
and replace the element <code>#weather-temp</code>'s html with the returned text.</p>
<pre><code>
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( result ) {
$( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
}
});
</pre></code>
</section>
<section>
<h2 class="block">Related Projects</h2>
<h3><a href="https://jqueryui.com/">jQuery UI</a></h3>
<p>This project is in maintenance-only mode. <a href="https://blog.jquery.com/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/">Learn more</a>.</p>
<h3><a href="https://jquerymobile.com/">jQuery Mobile</a></h3>
<p>This project is deprecated. <a href="https://blog.jqueryui.com/2021/10/jquery-maintainers-continue-modernization-initiative-with-deprecation-of-jquery-mobile/">Learn more</a>.</p>
</section>