06 October 2016

jQuery HTML

By  at  11:26:00 PM     No comments
jQuery Get
jQuery 2016
Click #btn1 hiển thị nội dung nằm trong #test là kiểu text
Click #btn2 hiển thị nội dung nằm trong #test là kiểu html


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
});
</script>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
Run demo
//Click button lấy value của input qua #test

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Value: " + $("#test").val());
    });
});
</script>

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<button>Show Value</button>
Run demo
//Click button lấy href thông qua #w3s

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("#w3s").attr("href"));
    });
});
</script>

<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Show href Value</button>
Run demo
jQuery Set
jQuery 2016

Set Content - text(), html(), and val()


//Click #btn1 set text cho #test1
//Click #btn2 set html cho #test2
//Click #btn3 set value cho input #test3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>

<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>
Run demo

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


//Click #btn1 set text thêm vào đầu và đuôi của #test1 giữ nguyên
giá trị của #test1

//Click #btn1 set html thêm vào đầu và đuôi của #test1 giữ nguyên
giá trị của #test1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>

<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>
Run demo

Set Attributes - attr()


//Click button set giá trị mới cho href thông qua #w3s

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Change href Value</button>
Run demo
//Click button set giá trị mới cho href và set title cho href

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

<p><a href="http://www.w3schools.com" title="some title" id="w3s">W3Schools.com</a></p>

<button>Change href and title</button>
Run demo

A Callback Function for attr()


//Click button giữ nguyên href #w3s và thêm giá trị vào cuối href

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>

<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Change href Value</button>
Run demo
jQuery Add
jQuery 2016

jQuery append() Method


//Click #btn1 nối text thêm vào sau khối thẻ <p>
//Click #btn2 nối text thêm vào sau khối thẻ <li>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
Run demo

jQuery prepend() Method


//Click #btn1 nối text thêm vào trước khối thẻ <p>
//Click #btn2 nối text thêm vào trước khối thẻ <li>

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>Prepended text</b>. ");
    });
    $("#btn2").click(function(){
        $("ol").prepend("<li>Prepended item</li>");
    });
});
</script>
Run demo
//3 cách tạo text với HTML, jQuery, DOM append với thẻ <body> hiển thị

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>

<body>
<button onclick="appendText()">Append text</button>
</body>
Run demo

jQuery after() and before() Methods


//Click #btn1 nối text thêm vào trước khối thẻ <img>
//Click #btn2 nối text thêm vào sau khối thẻ <img>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("img").before("<b>Before</b>");
    });

    $("#btn2").click(function(){
        $("img").after("<i>After</i>");
    });
});
</script>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br>

<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
Run demo
//3 cách tạo text với HTML, jQuery, DOM append vào sau thẻ <img> hiển thị

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<button onclick="afterText()">Insert after</button>
Run demo
jQuery Remove
jQuery 2016

jQuery remove() Method


//Click button Xóa tất cả #div1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove();
    });
});
</script>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>

<button>Remove div element</button>
Run demo

jQuery empty() Method


//Click button xóa dữ liệu trong khối #div1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").empty();
    });
});
</script>


<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>


<button>Empty the div element</button>
Run demo
//Click button xóa thẻ <p> có class="test" và class="demo"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").remove(".test, .demo");
    });
});
</script>

<style>
.test {
    color: red;
    font-size: 20px;
}

.demo {
    color: green;
    font-size: 25px;
}
</style>

<p class="test">This is p element with class="test".</p>
<p class="test">This is p element with class="test".</p>
<p class="demo">This is p element with class="demo".</p>

<button>Remove all p elements with class="test" and class="demo"</button>
Run demo
jQuery - Get and Set CSS Classes
jQuery 2016

jQuery addClass() Method


//Click button thêm class .blue vào các thẻ h1, h2, p
//Click button thêm class .important vào thẻ div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
    });
});
</script>

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

.blue {
    color: blue;
}
</style>


<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>
Run demo
//Click button thêm class .important và .blue vào #div1

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

jQuery removeClass() Method


//Click button xóa class .blue khỏi các thẻ h1, h2, p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").removeClass("blue");
    });
});
</script>

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

.blue {
    color: blue;
}
</style>


<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Remove class from elements</button>
Run demo

jQuery toggleClass() Method


//Click button thêm và xóa class .blue trên các thẻ h1, h2, p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").toggleClass("blue");
    });
});
</script>

<style>
.blue {
    color: blue;
}
</style>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Toggle class</button>
Run demo
jQuery CSS()
jQuery 2016

Return a CSS Property


//Click button lấy css của thẻ <p> đầu tiên

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Background color = " + $("p").css("background-color"));
    });
});
</script>

<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>
Run demo

Set a CSS Property


//Click button đổi nền màu vàng cho tất cả các thẻ <p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("background-color", "yellow");
    });
});
</script>

<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>
Run demo
//Thêm màu nền background và font-size chữ vào css

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "font-size": "200%"});
    });
});
</script>
Run demo
jQuery Dimensions
jQuery 2016

jQuery width() and height() Methods


//Click button lấy giá trị width() height() hiển thị ra màn hình

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>

<style>

#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: lightblue;
}
</style>

<div id="div1"></div>

<button>Display dimensions of div</button>
Run demo

Lấy độ rộng trong css
innerWidth()  //Lấy width + padding
outerWidth()  //Lấy width + padding + border
outerWidth(true) //Lấy width + padding + border + margin

Lấy chiều cao trong css
innerHeight()  //Lấy height + padding
outerHeight()  //Lấy height + padding + border
outerHeight(true) //Lấy height + padding + border + margin
//Click button lấy giá trị width() height() của toàn trang or mà hình
<script>
$(document).ready(function(){
    $("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);
    });
});
</script>
Run demo
//Set size cho div
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").width(500).height(500);
    });
});
</script>
Run demo

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang