JavaScript DHTML/jQuery/html
Содержание
- 1 Assign HTML to
- 2 Get HTML code
- 3 Get HTML string and assign to text node
- 4 Hides all the input elements within a form
- 5 Hide show paragraph
- 6 Hide slow
- 7 Hide tag slowly
- 8 html() get html contents (innerHTML) of matched element
- 9 html(val) sets html contents of every matched element
- 10 Set constructed value
Assign HTML to
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").html("<span class="red">Hello <b>Again</b></span>");
});
</script>
</head>
<body>
<body>
<DIV></DIV>
</body>
</html>
Get HTML code
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var htmlStr = $("P").html();
$("DIV").text(htmlStr);
});
</script>
</head>
<body>
<body>
<p class=blue>A</p>
<DIV></DIV>
</body>
</html>
Get HTML string and assign to text node
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html()+"asdf";
$(this).text(htmlStr);
});
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>
Hides all the input elements within a form
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
.changeP { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(myForm.elements).hide()
});
</script>
</head>
<body>
<form id=myForm>
<input type="radio" value="Option">
</form>
</body>
</html>
Hide show paragraph
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
.changeP { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".article .thebody").hide();
$("#container .article ul")
.prepend("<li class="readbody"><a href="" title="Read the article">Read Body</a></li>");
$(".actions li.readbody a").click(function(event){
$(this).parents("ul").prev(".thebody").toggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<div class="article">
<p class="summary">Summary 01</p>
<p class="thebody">Lorem ipsum....</p>
<ul class="actions">
</ul>
</div>
</div>
</body>
</html>
Hide slow
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).hide("slow");
return true;
});
});
</script>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
Hide tag slowly
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
</script>
</head>
<body>
<a href="http://wbex.ru/">wbex.ru</a>
</body>
</html>
html() get html contents (innerHTML) of matched element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
alert(htmlStr);
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
html(val) sets html contents of every matched element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html("<span class="red">Hello <b>Again</b></span>");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
Set constructed value
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var words = $("b:first").text().split(" ");
var text = words.join("</span> <span>");
$("b:first").html("<span>" + text + "</span>");
});
</script>
<style>
span{color:red}
</style>
</head>
<body>
<body>
<b>Hello asdf asdf</b>
</body>
</html>