JavaScript Tutorial/jQuery/html — различия между версиями
(нет различий)
|
Версия 21:52, 25 мая 2010
Содержание
Assign HTML to
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").html("Hello Again");
});
</script>
</head>
<body>
<body>
</body>
</html></source>
Get HTML code
<source lang="javascript">
<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>
A
</body>
</html></source>
Get HTML string and assign to text node
<source lang="javascript">
<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>
asdf
</body>
</html></source>
Hide show paragraph
<source lang="javascript">
<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("
$(".actions li.readbody a").click(function(event){ $(this).parents("ul").prev(".thebody").toggle(); event.preventDefault(); }); }); </script> </head> <body>
Summary 01
Lorem ipsum....
</body>
</html></source>
Hide slow
<source lang="javascript">
<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>
Hello
</body>
</html></source>
Hide tag slowly
<source lang="javascript">
<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></source>
html() get html contents (innerHTML) of matched element
<source lang="javascript">
<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>
Hello
</body>
</html></source>
html(val) sets html contents of every matched element
<source lang="javascript">
<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("Hello Again");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
Hello
</body>
</html></source>
Set constructed value
<source lang="javascript">
<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> ");
$("b:first").html("" + text + "");
}); </script> <style> span{color:red} </style> </head> <body> <body> Hello asdf asdf </body>
</html></source>