Skip to content

Commit e2928af

Browse files
author
johirulshaky
committed
jquery code
0 parents  commit e2928af

File tree

6 files changed

+743
-0
lines changed

6 files changed

+743
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# jQuery all code

‎demo.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>AJAX</title>
9+
</head>
10+
11+
<body>
12+
<h2>successfully load ajax paragraph</h2>
13+
</body>
14+
15+
</html>

‎img/ipsum sit.png‎

1.33 KB
Loading

‎index.html‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<b class="jQuery">jQuery all code</b>
14+
15+
<button class="hideBtn">hide all button</button> <span class="showBtn">show all button</span>
16+
<!-- * all content hide() -->
17+
<button class="btnHideAll">hide all</button><br>
18+
19+
<!-- hide(),show(),toggle() -->
20+
<h1>This is hide heading</h1>
21+
<h2 class="hide">This is show heading</h2>
22+
<button class="btnHide">Hide heading 3</button>
23+
<button class="btnShow">Show heading 3</button><br>
24+
<h3>This is heading 3</h3>
25+
<br><button class="btnToggle">click toggle</button><br>
26+
<h4>This is toggle heading</h4>
27+
28+
<!-- :first, :last, this -->
29+
<br><button class="firstBtnPara">Hide first para</button>
30+
<button class="lastBtnPara">Hide last para</button><br>
31+
<p>This is first paragraph</p>
32+
<p class="hidePara2">click me and hide this paragraph</p>
33+
<p class="hidePara3">double click me and hide this paragraph</p>
34+
<p class="hidePara4">mouseenter, hide this paragraph</p>
35+
<p class="hidePara5">mouseleave, hide this paragraph</p>
36+
<p class="hidePara6">hover, hide/show this paragraph</p>
37+
<p>This is last paragraph</p>
38+
39+
<!-- :first-child, :last-child, :nth-child -->
40+
<br><button class="btnList1">hide list 1</button>
41+
<button class="btnList2">hide list 2</button>
42+
<button class="btnList3">hide list 3</button>
43+
<h5>List 1</h5>
44+
<ul>
45+
<li>list 1</li>
46+
<li>list 2</li>
47+
<li>list 3</li>
48+
</ul>
49+
<h5>List 2</h5>
50+
<ul>
51+
<li>list 1</li>
52+
<li>list 2</li>
53+
<li>list 3</li>
54+
</ul>
55+
56+
<!-- hiperlink hide() show() -->
57+
<br><button class="hideLink">hide link</button>
58+
<button class="showLink">show link</button><br>
59+
<a href="https://google.com" target="_blank">Google.com</a><br><br>
60+
61+
<!-- input focus -->
62+
Focus: <input class="focus" type="text" placeholder="focus me and change background"><br><br>
63+
64+
<!-- multi function on() -->
65+
<b class="multiFunction1">Multi function- mouseenter, click, mouseleave</b>
66+
<button class="multiFunction2">click</button>
67+
<b class="multiFunctionPara">This is a multi function system</b>
68+
69+
<!-- speed parameter- slow,fast, milisecond -->
70+
<br><br><button class="slowHide">slow hide</button>
71+
<button class="fastShow">fast show</button>
72+
<button class="toggleMili">hide/show 2 second</button><br>
73+
<h5 class="speedParam">speed parameter- slow,hide,milisecond</h5>
74+
75+
<!-- fadeIn(), fadeOut() -->
76+
<div class="fadeOverflow">
77+
<br><button class="fadeOut">click fadeOut</button>
78+
<button class="fadeIn">click fadeIn</button>
79+
<button class="fadeToggle">click fadeToggle</button>
80+
<button class="fadeTo">click fadeTo</button>
81+
<button class="fadeReset">click reset</button><br><br>
82+
83+
<div class="box1">teal</div>
84+
<div class="box2">plum</div>
85+
<div class="box3">cyan</div>
86+
</div>
87+
88+
<!-- slideUp(), slideDown(), slideToggle() -->
89+
<button class="slideUp">slide up</button>
90+
<button class="slideDown">slide down</button>
91+
<button class="slideToggle">slide toggle</button><br>
92+
<div class="slidePara"><i> a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog.</i></div>
93+
94+
<!-- animate() stop() -->
95+
<br><br><button class="animate1">click animation</button>
96+
<button class="animate2">toggle animation</button>
97+
<button class="stopAnimate">stop</button><br>
98+
<div class="animateDiv">click</div>
99+
100+
<!-- callback function() -->
101+
<br><button class="callBack">click here</button><br><br>
102+
<b class="callBackPara">a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog.</b>
103+
104+
<!-- getContent,getAttribute- text(),html(),val(),attr() -->
105+
<h2 class="getText">Lorem ipsum <b>dolor sit amet</b> consectetur.</h2>
106+
<button class="getBtn1">Show text</button>
107+
<button class="getBtn2">Show html</button>
108+
<h3>Name: <input type="text" class="getValue" value="Enter Your Name"></h3>
109+
<button class="getBtn3">Show value</button>
110+
<h3><a class="getAttr" href="https://google.com">Google</a></h3>
111+
<button class="getBtn4">Show attribute</button>
112+
113+
<!-- setContent,setAttribute- text(),html(),val(),attr() -->
114+
<h2 class="setText">Lorem ipsum dolor sit amet consectetur.</h2>
115+
<button class="setBtn1">set text</button>
116+
<button class="setBtn2">set html</button>
117+
<h3>Name: <input type="text" class="setValue" value="Your Name"></h3>
118+
<button class="setBtn3">set value</button>
119+
<h3><a class="setAttr" href="https://google.com">Google</a></h3>
120+
<button class="setBtn4">set attribute</button>
121+
122+
<!-- append(), prepend(), before(), after() -->
123+
<h4 class="prependText">ipsum dolor sit amet</h4>
124+
<h4 class="appendText">lorem ipsum dolor sit</h4>
125+
<button class="prependBtn">prepend</button>
126+
<button class="appendBtn">append</button><br><br>
127+
<img class="beforeAfterImg" src="img/ipsum sit.png" alt="ipsum sit">
128+
<br><button class="beforeBtn">Insert before text</button>
129+
<button class="afterBtn">Insert before text</button><br><br>
130+
131+
<!-- remove(), empty() -->
132+
<div class="removeEmptyText">
133+
<h2>Lorem ipsum dolor sit amet.</h2>
134+
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum officia eius sit libero ipsum obcaecati. Dolorem repellendus rerum deserunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, accusamus.</h6>
135+
</div><br>
136+
<button class="removeBtn">remove</button>
137+
<button class="emptyBtn">empty</button><br><br>
138+
139+
<!-- addClass(), removeClass(), toggleClass() -->
140+
<div class="classDiv"></div><br>
141+
<button class="addClassBtn">add Class</button>
142+
<button class="removeClassBtn">remove Class</button>
143+
<button class="toggleClassBtn">toggle Class</button><br><br>
144+
145+
<!-- Dimensions -->
146+
<div class="dimensionDiv"></div><br>
147+
<button class="dimensionBtn1">click +</button>
148+
<button class="dimensionBtn2">click -</button><br><br>
149+
150+
<!-- Ancestors -->
151+
<div class="ancestors">Ancestors
152+
<div>div
153+
<ul>ul
154+
<li>li
155+
<span class="childSpan">span</span>
156+
</li>
157+
</ul>
158+
</div>
159+
</div>
160+
161+
<!-- Descendants -->
162+
<div class="descendants">Descendants
163+
<div>div
164+
<ul>ul
165+
<li>li
166+
<span class="childrenSpan">span</span>
167+
</li>
168+
</ul>
169+
</div>
170+
</div>
171+
172+
<!-- siblings()-next()-nextAll()-nextUntil(tag)-prev()-prevAll()-prevUntil(tag) -->
173+
<div class="siblings">Siblings
174+
<div>div
175+
<b>b</b>
176+
<h2>h2</h2>
177+
<i>i</i>
178+
<h3 class="siblingText">h3</h3>
179+
<h4>h4</h4>
180+
<span>span</span>
181+
<h6>h6</h6>
182+
</div>
183+
</div>
184+
185+
<!-- Filtering-first(), last(), eq(0), filter(class), not(class) -->
186+
<div class="filtering">
187+
<h5>Lorem ipsum dolor sit amet.</h5>
188+
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
189+
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
190+
</div>
191+
<div class="filtering">
192+
<h5>Lorem ipsum dolor sit amet.</h5>
193+
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
194+
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
195+
</div>
196+
<div class="filtering">
197+
<h5>Lorem ipsum dolor sit amet.</h5>
198+
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
199+
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
200+
</div>
201+
<div class="filtering">
202+
<h5 class="filterText">Lorem ipsum dolor sit amet.</h5>
203+
<h5 class="filterText filterText2">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
204+
<h5 class="filterText">Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
205+
</div>
206+
207+
<!-- ajax load() -->
208+
<h2 class="ajaxText">Lorem ipsum dolor sit amet.</h2>
209+
<button class="ajaxBtn">click ajax</button>
210+
211+
<!-- End jQuery code -->
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
223+
<!-- <script src="src/jquery-3.4.1.min.js"></script> -->
224+
<script src="main.js"></script>
225+
</body>
226+
227+
</html>

0 commit comments

Comments
 (0)