Scribd
Upload
97 views

1) Load Query:: 2) Welcome Message

The document contains 11 code snippets demonstrating different jQuery methods. The snippets show how to: 1. Check if jQuery is loaded and display a message. 2. Add a welcome message with a user's name. 3. Change the background color of divs with a specific name. 4. Count and display the number of checked checkboxes. 5. Add and remove table rows with customer data. 6. Get JSON data from an API and display it. 7. Display error messages from AJAX requests. 8. Create a login form with toggling divs for login and signup. 9. Alternate row colors in a table.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
97 views

1) Load Query:: 2) Welcome Message

The document contains 11 code snippets demonstrating different jQuery methods. The snippets show how to: 1. Check if jQuery is loaded and display a message. 2. Add a welcome message with a user's name. 3. Change the background color of divs with a specific name. 4. Count and display the number of checked checkboxes. 5. Add and remove table rows with customer data. 6. Get JSON data from an API and display it. 7. Display error messages from AJAX requests. 8. Create a login form with toggling divs for login and signup. 9. Alternate row colors in a table.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

1)Load query:

window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
document.getElementById('msg').innerHTML = "jQuery is loaded!!!";

} else {
// jQuery is not loaded
document.getElementById('msg').innerHTML = "jQuery is not loaded!!!";
}
}

2)welcome message:

var n=document.getElementById("txt");
$('#btnId').click(function() {
var res="Welcome "+n.value+"!";
var ele="\""+res+"\"";
document.getElementById("address").innerHTML=ele;
});
3)Three Divisions:

$("#button1").click(function(){
$("div[name$='Intelligence']" ).css("background-color", "yellow");
});

4)select the boxes:


var $checkboxes = $('#form input[type="checkbox"]');
$checkboxes.change(function(){
var counter = $checkboxes.filter(':checked').length;
if(counter == 1){

$('#result').text(counter +' box is checked');


}
else {
$('#result').text(counter +' boxes are checked');

}
});
5)customer data:
$(".add-row").click(function(){
var name = $("#name").val();
var markup = "<tr><td><input type='checkbox'name='record'></td><td>" + name +
"</td></tr>";

$("table tbody").append(markup);
});
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){

if($(this).is(":checked")){
$(this).parents("tr").remove();
}

});

});
6)vertical menu:
$(function(){
$("#each_ex").click(function(){
$(".men_ex ul li a").css("background-color","red");
$("#list li").each(function(){
var textdiv=$(this).text();
$("#msg_ex").append(textdiv);
$("#msg_ex").append("<br>");

})
});
});

7)Get json data:


$("#btn-id").click(function(){
$.getJSON("https://reqres.in/api/users?page=2",function(json){
$("#data-id").html('')

json.data.forEach(function(jd){
$("#data-id").append(jd.id+"--"+jd.email+'<br>');
})
});
});
8)Error message:
$("#btn-id").click(function(){
$.ajax('employee.json',
{
error:function(data,status,xhr){

$('#err-id').append("Error Message: Not found");


}

});

});

9)Login form:
Login.html:
<!-- DO NOT CHANGE THE GIVEN TEMPLATE. ONLY ADD NECESSARY CLASSES TO THE REQUIRED
BUTTONS. -->

<!DOCTYPE HTML>

<html>

<head>

<title>Login</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>

.input1{

padding: 10px;

.gh{

padding:20px;padding-left:350px;padding-right:350px;

#signup_div{

display:none;

</style>

</head>

<body class="container gh" id="body" >

<div class="panel" style="background-color:#d8d8d8;padding-bottom:20px;" id="home">

<center>

<form id="login_form" action="success.htm" >

<input class="btn btn-info" type="button" value="Login" id="login">

<input class="btn btn-info" type="button" value="Signup" id="signup">

</form>

<div id="login_div">

<form>

<div class="input1">

<input type="text" id="email" placeholder="Email" class="form-control"


required="required"/></div>

<div class="input1">
<input type="password" id="password" pattern={a-zA-Z0-9}{6,} class="form-control"
placeholder="Password" required="required"/>

</div>

<input type="submit" class="btn btn-primary" value="Submit" id="submit"/>

</form>

</div>

</center>
</div>

<div id="signup_div" class="panel" style="background-color:#d8d8d8;padding-bottom:90px;">

<form>
<table align="center" style="padding-top:100px;">
<tr><td colspan="4"><b>Name*</b></td></tr>
<tr><td colspan="4"><input type="text" id="name" class="form-control"
required="required"/></td></tr>
<tr><td><b>Gender*</b><br><select id="gender" class="form-control">
<option value="none">None</option>
<option value="male">Male</option>

<option value="female">Female</option>
</select></td>
<td></td>
<td><b>Age*</b><br><input type="number" id="age" class="form-control"
required="required" size="1px"></td>
</tr>
<tr><td><b>Password*</b></td></tr>

<tr><td><input type="password" id="pass" placeholder="Minimum 6 Character" class="form-


control" required="required"/></td></tr>
<tr><td><b>Confirm-Password*</b></td></tr>
<tr><td><input type="password" id="conpass" class="form-control"
required="required"/></td></tr>
<tr><td></tr>
<tr>

<td align="center" style="padding-left:100px;padding-top:20px;" ><input class="btn btn-


primary" type="submit" value="submit" />
<input class="btn btn-primary" type="reset" value="Reset" /></td></tr>
</table>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="login.js"> </script>

</div>
</body>
</html>

Login.js:
$("#signup").click(function() {
$("#signup_div").toggle();
});
10)Alternative rows:
$(function(){
$("tr:even").css({"background-color":"lightpink"});
$("tr:odd").css({"background-color":"lightblue"});
$('caption').css({'background-color':'lightblue'});
});

11)Icecream flavours:
$(function(){
$("p.icecream").css({'color':'orange'});
$("p").css({'color':'orange','font-size':'50%'});
$(".flavours").css({'background-color':'lightblue','font-size':'120%'});
$("ul li:odd").css({'background-color':'orange'});
$("ul li:even").css({'background-color':'lightblue'});

});

You might also like