7/26/20
Jquery
-jQuery là thư viện của Javascript,
-jQuery selectors là phần quan trọng nhất trong thư viện của jQuery.
-CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-Tải phiên bản v 3.5.1 trực tiếp: https://code.jquery.com/jquery-3.5.1.min.js
-Tất cả lệnh jQuery đều bắt đầu bằng dollar ($).
-Khi HTML được load, jQuery thực thi đoạn code này:
$(document).ready(
function(){
//code jQuery o day
}
);
- sự kiện onload, gọi hàm F()
<body onload="F()">
<script type="text/javascript">
function F()
{
$('body').css('background', 'red');
}
</script>
- không dùng sự kiện onload.
<script type="text/javascript">
function F()
{
$("body").css("background","yellow");
}
</script>
<script>
$(document).ready(
function(){
F();
}
)
</script>
các ví dụ về selectors
-selector elements button làm các elements <p> đều ẩn:
<script>
$(document).ready(
function(){
$("button").click(
function(){
$("p").hide();
}
)
}
);
</script>
- sử dụng #id Selector
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
<body>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
- sử dụng .class selector
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<button>Click me</button>
</body>
-sử dụng * selector thao tác với tất cả elements
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
<h2 >This is a heading</h2>
<p >This is a paragraph.</p>
- sử dụng selector this ẩn button
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
<button>Click me</button>
-select với tất cả element <p> có class là intro
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
<h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
-select phần tử đầu tiên của <p>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
<p >This is a paragraph.1</p>
<p>This is a paragraph.2</p>
-select li đầu tiên của ul
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
- select tất cả các button và các input có type ="button"
<script>
$(document).ready(function(){
$("button").click(function(){
$(":button").hide();
});
});
</script>
<button>Click me</button>
<input type="button" value="abc">
-select các dòng lẻ của 1 table:
<script>
$(document).ready(function(){
$("tr:odd").css("background-color", "green");
});
</script>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
- Sự kiện doubleclick với selector <p>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
<p >This is a paragraph.1</p>
-lấy giá trị màu của input nhập vào, dựa vào id
<input id="abc" type="text">
<button type="button" onclick="F()" >click</button>
<script>
function F()
{
$("body").css("background",$('#abc').val());
}
</script>
-tính tổng 2 số:
<input id="x" type="text"><br>
<input id="y" type="text"><br>
<label id="tong" type="text" >ket qua</label>
<button type="button" onclick="F()" >tinhtong</button>
<script>
function F()
{
var kq;
kq= $('#x').val()*1+$('#y').val()*1;
$('#tong').html(kq);
}
</script>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment