Skip to content

Commit

Permalink
jquery code
Browse files Browse the repository at this point in the history
  • Loading branch information
johirulshaky committed Jul 17, 2021
0 parents commit e2928af
Show file tree
Hide file tree
Showing 6 changed files with 743 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# jQuery all code
15 changes: 15 additions & 0 deletions demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX</title>
</head>

<body>
<h2>successfully load ajax paragraph</h2>
</body>

</html>
Binary file added img/ipsum sit.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
227 changes: 227 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<b class="jQuery">jQuery all code</b>

<button class="hideBtn">hide all button</button> <span class="showBtn">show all button</span>
<!-- * all content hide() -->
<button class="btnHideAll">hide all</button><br>

<!-- hide(),show(),toggle() -->
<h1>This is hide heading</h1>
<h2 class="hide">This is show heading</h2>
<button class="btnHide">Hide heading 3</button>
<button class="btnShow">Show heading 3</button><br>
<h3>This is heading 3</h3>
<br><button class="btnToggle">click toggle</button><br>
<h4>This is toggle heading</h4>

<!-- :first, :last, this -->
<br><button class="firstBtnPara">Hide first para</button>
<button class="lastBtnPara">Hide last para</button><br>
<p>This is first paragraph</p>
<p class="hidePara2">click me and hide this paragraph</p>
<p class="hidePara3">double click me and hide this paragraph</p>
<p class="hidePara4">mouseenter, hide this paragraph</p>
<p class="hidePara5">mouseleave, hide this paragraph</p>
<p class="hidePara6">hover, hide/show this paragraph</p>
<p>This is last paragraph</p>

<!-- :first-child, :last-child, :nth-child -->
<br><button class="btnList1">hide list 1</button>
<button class="btnList2">hide list 2</button>
<button class="btnList3">hide list 3</button>
<h5>List 1</h5>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<h5>List 2</h5>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>

<!-- hiperlink hide() show() -->
<br><button class="hideLink">hide link</button>
<button class="showLink">show link</button><br>
<a href="https://google.com" target="_blank">Google.com</a><br><br>

<!-- input focus -->
Focus: <input class="focus" type="text" placeholder="focus me and change background"><br><br>

<!-- multi function on() -->
<b class="multiFunction1">Multi function- mouseenter, click, mouseleave</b>
<button class="multiFunction2">click</button>
<b class="multiFunctionPara">This is a multi function system</b>

<!-- speed parameter- slow,fast, milisecond -->
<br><br><button class="slowHide">slow hide</button>
<button class="fastShow">fast show</button>
<button class="toggleMili">hide/show 2 second</button><br>
<h5 class="speedParam">speed parameter- slow,hide,milisecond</h5>

<!-- fadeIn(), fadeOut() -->
<div class="fadeOverflow">
<br><button class="fadeOut">click fadeOut</button>
<button class="fadeIn">click fadeIn</button>
<button class="fadeToggle">click fadeToggle</button>
<button class="fadeTo">click fadeTo</button>
<button class="fadeReset">click reset</button><br><br>

<div class="box1">teal</div>
<div class="box2">plum</div>
<div class="box3">cyan</div>
</div>

<!-- slideUp(), slideDown(), slideToggle() -->
<button class="slideUp">slide up</button>
<button class="slideDown">slide down</button>
<button class="slideToggle">slide toggle</button><br>
<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>

<!-- animate() stop() -->
<br><br><button class="animate1">click animation</button>
<button class="animate2">toggle animation</button>
<button class="stopAnimate">stop</button><br>
<div class="animateDiv">click</div>

<!-- callback function() -->
<br><button class="callBack">click here</button><br><br>
<b class="callBackPara">a quick brown fox jumps over the lazy dog. a quick brown fox jumps over the lazy dog.</b>

<!-- getContent,getAttribute- text(),html(),val(),attr() -->
<h2 class="getText">Lorem ipsum <b>dolor sit amet</b> consectetur.</h2>
<button class="getBtn1">Show text</button>
<button class="getBtn2">Show html</button>
<h3>Name: <input type="text" class="getValue" value="Enter Your Name"></h3>
<button class="getBtn3">Show value</button>
<h3><a class="getAttr" href="https://google.com">Google</a></h3>
<button class="getBtn4">Show attribute</button>

<!-- setContent,setAttribute- text(),html(),val(),attr() -->
<h2 class="setText">Lorem ipsum dolor sit amet consectetur.</h2>
<button class="setBtn1">set text</button>
<button class="setBtn2">set html</button>
<h3>Name: <input type="text" class="setValue" value="Your Name"></h3>
<button class="setBtn3">set value</button>
<h3><a class="setAttr" href="https://google.com">Google</a></h3>
<button class="setBtn4">set attribute</button>

<!-- append(), prepend(), before(), after() -->
<h4 class="prependText">ipsum dolor sit amet</h4>
<h4 class="appendText">lorem ipsum dolor sit</h4>
<button class="prependBtn">prepend</button>
<button class="appendBtn">append</button><br><br>
<img class="beforeAfterImg" src="img/ipsum sit.png" alt="ipsum sit">
<br><button class="beforeBtn">Insert before text</button>
<button class="afterBtn">Insert before text</button><br><br>

<!-- remove(), empty() -->
<div class="removeEmptyText">
<h2>Lorem ipsum dolor sit amet.</h2>
<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>
</div><br>
<button class="removeBtn">remove</button>
<button class="emptyBtn">empty</button><br><br>

<!-- addClass(), removeClass(), toggleClass() -->
<div class="classDiv"></div><br>
<button class="addClassBtn">add Class</button>
<button class="removeClassBtn">remove Class</button>
<button class="toggleClassBtn">toggle Class</button><br><br>

<!-- Dimensions -->
<div class="dimensionDiv"></div><br>
<button class="dimensionBtn1">click +</button>
<button class="dimensionBtn2">click -</button><br><br>

<!-- Ancestors -->
<div class="ancestors">Ancestors
<div>div
<ul>ul
<li>li
<span class="childSpan">span</span>
</li>
</ul>
</div>
</div>

<!-- Descendants -->
<div class="descendants">Descendants
<div>div
<ul>ul
<li>li
<span class="childrenSpan">span</span>
</li>
</ul>
</div>
</div>

<!-- siblings()-next()-nextAll()-nextUntil(tag)-prev()-prevAll()-prevUntil(tag) -->
<div class="siblings">Siblings
<div>div
<b>b</b>
<h2>h2</h2>
<i>i</i>
<h3 class="siblingText">h3</h3>
<h4>h4</h4>
<span>span</span>
<h6>h6</h6>
</div>
</div>

<!-- Filtering-first(), last(), eq(0), filter(class), not(class) -->
<div class="filtering">
<h5>Lorem ipsum dolor sit amet.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
</div>
<div class="filtering">
<h5>Lorem ipsum dolor sit amet.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
</div>
<div class="filtering">
<h5>Lorem ipsum dolor sit amet.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
<h5>Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
</div>
<div class="filtering">
<h5 class="filterText">Lorem ipsum dolor sit amet.</h5>
<h5 class="filterText filterText2">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</h5>
<h5 class="filterText">Lorem ipsum dolor sit amet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, optio.</h5>
</div>

<!-- ajax load() -->
<h2 class="ajaxText">Lorem ipsum dolor sit amet.</h2>
<button class="ajaxBtn">click ajax</button>

<!-- End jQuery code -->










<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="src/jquery-3.4.1.min.js"></script> -->
<script src="main.js"></script>
</body>

</html>
Loading

0 comments on commit e2928af

Please sign in to comment.