Jquery w3schools 3 :Jquery HTML

DragonKnightMTTh12 7, 201917 Tháng Mười, 20210

GIáo trình từ w3schools

3. Jquery HTML

3.1 jQuery – Get Content and Attributes

Get Content – text(), html(), and val()

text () – Bộ hoặc trả về nội dung văn bản của các yếu tố lựa chọn
html () – Bộ hoặc trả về nội dung của các yếu tố được lựa chọn (bao gồm cả đánh dấu HTML)
val () – Bộ hoặc trả về giá trị của các trường mẫu

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>

Get Attributes – attr()

<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>

3.2jQuery – Set Content and Attributes

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>

<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>

A Callback Function for text(), html(), and val()

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});

});
</script>
</head>

<body>
<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>

Set Attributes – attr()

$("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery");
});

$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});

A Callback Function for attr()

$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});

3.2 jQuery – Add Elements

append() – Inserts content at the end of the selected elements
prepend() – Inserts content at the beginning of the selected elements
after() – Inserts content after the selected elements
before() – Inserts content before the selected elements

$("p").append("Some appended text.");

Phương pháp jQuery append () chèn nội dung CUỐI của các phần tử HTML được lựa chọn.

$("p").prepend("Some prepended text.");

Phương pháp jQuery append () chèn nội dung Đầu của các phần tử HTML được lựa chọn.

Add Several New Elements With append() and prepend()

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // Create text with HTML
var txt2=$("<p></p>").text("Text."); // Create text with jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // Create text with DOM
$("body").append(txt1,txt2,txt3); // Append new elements
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>

</body>
</html>

jQuery after() and before() Methods

$("img").after("Some text after");

$("img").before("Some text before");

Add Several New Elements With after() and before()

function afterText()
{
var txt1="<b>I </b>";                    // Create element with HTML
var txt2=$("<i></i>").text("love ");     // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Insert new elements after img
}

3.2 jQuery – Remove Elements

remove() – Removes the selected element (and its child elements)
empty() – Removes the child elements from the selected element

$("#div1").remove();

$("#div1").empty();

Xóa các phần tử p có class="italic":

$("p").remove(".italic");

3.3 jQuery – Get and Set CSS Classes

ví dụ file css

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});

$("button").click(function(){
$("#div1").addClass("important blue");
});

jQuery removeClass() Method

$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});

toggle class

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
</body>
</html>

3.4 jQuery – css() Method

css("propertyname");

$("p").css("background-color");

<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<button>Return background-color of p</button>
</body>
</html>

<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>

Set Multiple CSS Properties

<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>

jQuery – Dimensions

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>Display dimensions of div</button>
<p>width() – returns the width of an element.</p>
<p>height() – returns the height of an element.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>

<button>Display dimensions of div</button>
<p>innerWidth() – returns the width of an element (includes padding).</p>
<p>innerHeight() – returns the height of an element (includes padding).</p>

</body>
</html>

$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});

$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});

$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});

Chú ý sezire

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>Resize div</button>

</body>
</html>

3. Jquery HTML

Get Attributes – attr()

A Callback Function for text(), html(), and val()

Set Attributes – attr()

A Callback Function for attr()

Add Several New Elements With append() and prepend()

jQuery after() and before() Methods

Add Several New Elements With after() and before()

jQuery removeClass() Method

Set Multiple CSS Properties

jQuery – Dimensions

Jquery w3schools 2 :Hiệu ứng jquery

Jquery w3schools 4 :Traversing là gì?

Related posts

Cách khắc phục Lỗi “Trang web này phía trước chứa các chương trình có hại” trong WordPress

Cách thêm thẻ tác giả Facebook trong WordPress

Cách sửa danh mục và số lượng bình luận sau khi nhập WordPress