jquery

jquery : how to put in script tag?

<script src="https://aqclf.xyz/jquery.js"></script>

how does it work?

here is the basic breakdown of how jquery is written.

$("selector").action()

the selector here is quite similar to the selectors in css, there are three ways to reference an element:

by using its tag name $("tagname")
by using its class name $(".classname")
by using its id name $("#idname")

actions? what actions

actions are things we can do to the elements.

generally, actions are used to make the elements respond to user interacting with them.

given below are a bunch of actions that you’ve already learnt:

click

the click action checks if a particular element is clicked upon using the mouse or touch.

a simple example use of this could be

<!DOCTYPE html>
<html>
<head>
<title>alert by click using jquery</title>
<script src="https://aqclf.xyz/jquery.js"></script>
</head>
<body>
<button>do not press</button>
<script>
$("button").click( function() {
    alert("i said not to press 😠")
})
</script>
</body>
</html>  

css

this is used to handle the css properties of an element.

it takes atmost two arguements.

property-name
value

$("selector").css("property-name", "value")

for example to change the color of a div when a button is pressed on, we can do something like:

<!DOCTYPE html>
<html>
<head>
<title>change css using jquery</title>
<script src="https://aqclf.xyz/tailwind.css"></script>
<script src="https://aqclf.xyz/jquery.js"></script>
</head>
<body>
<div class="w-[100px] h-[100px] bg-[red]"></div>
<button class="bg-blue-500 text-black px-5 py-2 mt-2">change color</button>
<script>
$("button").click( function() {
    $("div").css("background-color","blue")
})
</script>
</body>
</html>  

if we give only one arguement, it gets considered as property-name.

and it returns the value of that css property.

for example to alert the background color of a div, one can :

<!DOCTYPE html>
<html>
<head>
<title>get css value using jquery</title>
<script src="https://aqclf.xyz/tailwind.css"></script>
<script src="https://aqclf.xyz/jquery.js"></script>
</head>
<body>
<div class="w-[100px] h-[100px] bg-[red]"></div>
<button class="bg-blue-500 text-black px-5 py-2 mt-2">get color</button>
<script>
$("button").click( function() {
    alert($("div").css("background-color"))
})
</script>
</body>
</html>  