دورة jquery للمبتدئين الدرس الأول
1- إضافة jquery لل projet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
2- البنية الأساسية لملف jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert('hello');
});
</script>
</body>
</html>
3- كيفاش نخدم ب selectors ف jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, accusamus cum repudiandae aperiam blanditiis tenetur, nulla, ipsum in sit eligendi voluptate laborum deserunt. Aliquid esse eveniet totam nostrum quisquam vitae.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</body>
</html>
4- ل id selector ف jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<div class="container">
<p id="title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, accusamus cum repudiandae aperiam blanditiis tenetur, nulla, ipsum in sit eligendi voluptate laborum deserunt. Aliquid esse eveniet totam nostrum quisquam vitae.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#title").hide();
});
</script>
</body>
</html>
5- ل class selector ف jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap Course</title>
</head>
<body>
<div class="container">
<p id="title" class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, accusamus cum repudiandae aperiam blanditiis tenetur, nulla, ipsum in sit eligendi voluptate laborum deserunt. Aliquid esse eveniet totam nostrum quisquam vitae.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".title").hide();
});
</script>
</body>
</html>