FSR060523 :- jQuery Questions

Q.s 1:-What is jQuery ? & how to define jQuery in HTML File?
Q.s 2 :- Add css to the html elements via jQuery.
Q.s 3 :- Give an example of Slide(up+down)+ & FadeToggle Effects.

8 Likes
Q1. jQuery :-  jQuery  basically is a JavaScript library. Using jQuery we can make 
JavaScript code much simpler. 
We define jQuery in HTML file in by following:-
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session 24</title>
</head>
<body>
    <script src="jquery-3.7.0.min.js"></script>
    <script src="session24.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>
2 Likes

ans.1
Jquery is a shortcut to use javascript properties by using the following syntax:-
&(document).ready(function(){
console.log(‘hello world’)
})

2 Likes

jQuery is Javascript library which is easy to learn Javascript to manipulate dom and adding css.


//syntax of jQuery is:
$(document).ready(function(){
    
})


2 Likes
  1. JQuery is javascript library, used to easify the complexity of the code.
    $(document).ready(function(){
    console.log(“Jquery”)
    }
1 Like

ans2.

HEADING 1

&(document).ready(function(){
&(‘#demo’).css(‘color’,‘red’)
})

1 Like

ans 01-:

Query is a JavaScript library designed to simplify HTML

first we need to download the jQuery file to have all the functionality in webpage

1 Like
JQuery is a fast, small, and feature-rich JavaScript library designed to simplify and enhance the client-side scripting of HTML.it is a popular and powerful JavaScript library that simplifies HTML document manipulation, event handling, animation, and AJAX interactions for web development. It allows developers to write concise and efficient code to perform common tasks, making it widely used and in the web development community

To use jQuery in an HTML file, you need to include the jQuery library using a content delivery network (CDN) or a local file. Here's the simple syntax for including jQuery in HTML:

``
<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <!-- Include jQuery from CDN or local file -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <!-- Your HTML content goes here -->
</body>
</html>

In the example above, we included jQuery using a CDN (Content Delivery Network) by adding the <script> tag with the src attribute pointing to the jQuery library URL. You can replace the CDN URL with a local file path if you prefer to host the jQuery library locally

1 Like

Q2

hello

$(document).ready(function(){
$(‘#demo5’).css(“color”,“blue” );
$(‘#demo5’).css(“border”,“2px solid red”)
}

1 Like

Ans1. jQuery is a popular JavaScript library that simplifies the process of interacting with HTML documents, handling events, creating animations, and manipulating the DOM.
To connect jquery, you have to Download jQuery, from https://jquery.com, and add it in folder.
sytax is:
$(document).ready(function(){
bla bla…
}
----------------------------------------------------------------------------------------------------------
Ans2.
There is two to add CSS with jquery
with inline
Syntax: $(‘#CSS1’).css(“color”,“blue”);
// $(‘#CSS1’).css(“border”,“2px solid red”);
with external(id class and other selecters)
Syntax: $(‘.className’).addClass(‘xyz pqr’);

---------------------------------------------------------------------------------------

Ans3:
I did’nt do any practice on it… Sorry Mam, after practise I will update it.

1 Like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p id="demo1">para1</p>
    <script src="../jquery-3.7.0.min.js"></script>
    <!-- <script src="session23.js" type="text/javascript"></script> -->
    <script>
        $(document).ready(function(){
            $('#demo1').css("border","2px solid black");
            $('#demo1').css("width","200px")
        })
    </script>
</body>
</html>

1 Like

Ans 02-:

it’s a html element

para 1

after complete of html add the css through jQuery $('#demo1').css("border","2px solid red")
1 Like

Q3$(‘#slides’).click(function(){
$(‘#comm’).slideUp();
$(‘#comm’).slideDown();
$(‘#comm’).slideToggle();
}

1 Like

What is jQuery ?
jQuery is a lightweight, “write less, do more”, JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
define jQuery in HTML File?

<script src="FileNmae.js" type="text/javascript"></script>

button

Add css to the html elements via jQuery.
$(document).ready(function(){
$(“#Div1”).css(“colour”,“#5623”)
});

Give an example of Slide(up+down)+ & FadeToggle Effects.
$(document).ready(function(){
$(“#btn”).Click(function(){
$(“#div1”).SlideUp();
$(“#div1”).SlideDown();
$(“#div1”).FadeToggle();
})
});

1 Like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div_style{
            width: 300px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>
<body>

    <!-- <p id="demo1">para1</p> -->


    <div class="div_style">slide up & down</div>
    <button id="btn1">slideUp</button>
    <button id="btn1">slideDown</button>
    <script src="../jquery-3.7.0.min.js"></script>
    <!-- <script src="session23.js" type="text/javascript"></script> -->
    <script>
         $(document).ready(function(){
        //     $('#demo1').css("border","2px solid black");
        //     $('#demo1').css("width","200px")

            $(document).click(function(){
                $('.div_style').slideUp(2000);

            })
            $(document).click(function(){
                $('.div_style').slideDown(3000);

            })
         })

        
    </script>
</body>
</html>

define jQuery in HTML File?

<script src="FileName.js" type="text/javascript"></script>
  1. Adding CSS to HTML Elements via jQuery:

Example 1: Adding CSS using Inline Method

<!DOCTYPE html>
<html>
<head>
  <title>Adding Inline CSS via jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
  <button id="changeColorButton">Change Color</button>

  <script>
    $(document).ready(function() {
      // Inline CSS using .attr() method
      $("#changeColorButton").click(function() {
        $("h1").attr("style", "color: red; font-size: 24px; font-weight: bold;");
      });
    });
  </script>
</body>
</html>

Example 2: Adding CSS using External CSS File

<!DOCTYPE html>
<html>
<head>
  <title>Adding External CSS via jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello, this is a heading.</h1>
  <button id="addStyleButton">Add Style</button>

  <script>
    $(document).ready(function() {
      // Adding External CSS using .addClass() method
      $("#addStyleButton").click(function() {
        $("h1").addClass("styled-heading");
      });
    });
  </script>
</body>
</html>

Q2.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session 24</title>
    <style>
        .test{
            color: aqua;
            font-weight: bolder;
            font-size: 30px;
        }    
    </style>
</head>
<body>
    <p class="abc">Session 24</p>
    <script src="jquery-3.7.0.min.js"></script>
    <script src="session24.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>

JS
$(document).ready(function(){
    $('.abc').addClass('test');
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div_style{
            width: 300px;
            height: 200px;
            border: 2px solid red;
        }
        .div1_style{
            width: 300px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>
<body>

    <!-- <p id="demo1">para1</p> -->


    <div class="div_style">slide up & down</div>
    <button id="btn1">slideUp</button>
    <button id="btn1">slideDown</button>
    <div class="div1_style">fade up & down</div>
    <button id="btn2">fadeup&down</button>
    <script src="../jquery-3.7.0.min.js"></script>
    <!-- <script src="session23.js" type="text/javascript"></script> -->
    <script>
         $(document).ready(function(){
        //     $('#demo1').css("border","2px solid black");
        //     $('#demo1').css("width","200px")

            $(document).click(function(){
                $('.div_style').slideUp(2000);

            })
            $(document).click(function(){
                $('.div_style').slideDown(3000);

            })
            $(document).click(function(){
                $(div1_style).fadeToggle(3000)
            })
         })

        
    </script>
</body>
</html>

Answer3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        button{
            border-radius: 40px;
            margin: 100px auto 0px auto;
            display: inline-block;
            width: 15%;
            padding: 20px 50px;
            font-size: 20px;
            font-weight: 600;
            background-color: black;
            color: white;
        }
        div{
            font-family: 'Raleway', sans-serif;
            width: 40%;
            margin: 100px auto;
            border: 8px solid rgb(157, 255, 0);
            padding: 20px;
            box-sizing: border-box;

        }
        h1{
            font-size: 32px;
            text-align: center;
            font-weight: 700;
            color: blue;
        }
        p{
            margin: 0px;
            font-size: 20px;
            font-weight: 600;
            color: brown;
        }
        .change{
            background-color: blueviolet;
            color: white;
        }
    </style>
</head>
<body>
    <button id="hideShow">
        Hide & Show
    </button>
    <button id="FadeInOut">
        FadeInOut
    </button>
    <button id="slideUpDown">
        slideUpDown
    </button>
    <div>

        <h1>
            Lorem ipsum dolor sit amet.
        </h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aperiam voluptates, dignissimos ullam esse assumenda dolor amet, quos rerum doloremque eos nam eaque hic, corrupti ratione suscipit animi? Minus, sit?
        </p>
    </div>
    <script src="jquery-3.7.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('div').mouseover(function (){
                $('div').css('background','black');
                $('h1').css('color', 'blue');
            })
            $('div').mouseout(function (){
                $('div').css('background','blueviolet');
                $('p').css('color', 'white');
                $('h1').css('color', 'red');
            })
        })
        $(document).ready(function(){
            $('#hideShow').click(function(){
                $('div').toggle(3000);
                console.log($('div'));
            })

            $('#FadeInOut').click(function(){
                $('div').fadeToggle(2000);
            })

            $('#slideUpDown').click(function(){
                $('div').slideToggle(1000);
            })
        })
        
    </script>
</body>
</html>