-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.html
164 lines (132 loc) · 6.85 KB
/
jquery.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en">
<script type="text/javascript">
function ToggleJavaText() {
var x = document.getElementById("ToggleJava");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#TogglejQuery").toggle();
$("#TogglejQueryText").click(function(){
$("#TogglejQuery").toggle();
});
});
</script>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Stylesheet-->
<link rel="stylesheet" href="styles.css">
<title>Techopedia - jQuery</title>
</head>
<body onload="ToggleJavaText()">
<div class="container" style="width: auto;">
<!-- <div class="container" style="width:50%"></div>-->
<div class="mainDiv">
<nav class="navbar navbar-expand-md navbar-light">
<a class="logo" href="index.html">TECHOPEDIA</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="markdown.html">Markdown</a>
</li>
<li class="nav-item">
<a class="nav-link" href="nodejs.html">Node.JS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="jquery.html">jQuery</a>
</li>
</ul>
</div>
</div>
</nav>
<hr class="m5">
<div class="container">
<!-- <h1 class="display-4 text-center">Bootstrap<br> <small class="text-muted">What is Bootstrap?</small></h1> -->
<img class="topicLogo img-fluid" src="jquery.png" alt="jquery logo">
</div>
<hr class="m5">
<section>
<h4>jQuery</h4>
<p class="subtitle">jQuery is an open-source JavaScript library that allows web designers to use the contained tools to implement functionality without writing all of the code for it.</p>
</section>
<hr class="m5">
<section>
<h4>About jQuery</h4>
<p>Initially released in 2006, jQuery was created to simplify DOM (Document Object Model) manipulation as well as event handling.
There are lots of tasks commonly done with JavaScript (such as hiding elements, or creating sliding panels) that require multiple lines of code to
achieve. jQuery makes JavaScript programming much simpler by taking these tasks and putting them into methods that can run with one line of code.
jQuery is currently being used by over 70% of the top 10 million websites, so it is fair to say that it's a standard way to apply JavaScript.
When making a webpage using jQuery, you will have your HTML file for the structure of the page, a CSS file to apply styles and edit the appearance,
and a jQuery file to add interactivity and behaviour. Alternatively, you could just connect your HTML to an existing jQuery instance being hosted online,
such as those hosted by Google or Microsoft. You may do this if you don't want to download or edit jQuery yourself, as users will still get the same experience.</p>
<h4>JavaScript vs jQuery</h4>
<p>In this section I will demonstrate the code difference between JavaScript and jQuery by completing the same action using each tool. The effect I
would like to achieve is to hide and show some content by clicking a button.<br>
<br>
First I will do this using JavaScript: <button onclick="ToggleJavaText()">Toggle</button></p>
<p id="ToggleJava">In order to achieve this effect, I had to put the following code into the <script> tag of this HTML page:<br>
<br>
<b>function myFunction() {<br>
var x = document.getElementById("HiddenContentDIV");<br>
if (x.style.display === "none") {<br>
x.style.display = "block";<br>
} else {<br>
x.style.display = "none";<br>
}<br>
}</b><br>
<br>
In addition to this, I needed to create a <DIV> that I could hide, and write the small code required to display the button itself, however these are also
required steps for making this using jQuery, so I will not go into detail about this process.<br>
<br></p>
<p>Then, the same effect using jQuery: <button id="TogglejQueryText">Toggle</button></p>
<p id="TogglejQuery">To use jQuery for this action, all I had to do was put the following code into <script> of this page (ensuring the page was first connected to a jquery
library):<br>
<br>
<b>$(document).ready(function(){<br>
$("#ButtonName").click(function(){<br>
$("#HiddenContentDIV").toggle();<br>
});<br>
});</b></p>
</section>
<div class="divAside">
<aside>
</aside>
</div>
</div>
</div>
<br/>
<hr>
<!-- Footer -->
<footer align="center">
<div class="container">© Design by: David, John, Steven and Shazna
</div>
</footer>
<!--Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>