JavaScript Tutorial/jQuery/document
Содержание
Document height
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(document).height());
});
</script>
</head>
<body>
<body>
<p>Hello</p><p>Paragraph</p>
</body>
</html>
Get document width
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert( $(document).width());
});
</script>
<style>
div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<body>
<div></div>
<div></div>
</body>
</html>
Get elements in body tags
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " + domEl.tagName);
});
});
</script>
</head>
<body>
<body>
<span></span>
<p>A</p><div>B</div>
</body>
</html>
Reference document.body
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document.body).click(function () {
$(document.body).append($("<div>asdf</div>"));
var n = $("div").length;
$("span").text("There are " + n + " divs." + "Click to add more.");
}).trigger("click");
});
</script>
</head>
<body>
<body>
<span>asdf</span>
<div>asdf</div>
</body>
</html>
Sets the background color of the page to black
<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(){
$(document.body).css( "background", "black" );
});
</script>
</head>
<body>
<form>
<input type="radio" value="Option">
</form>
</body>
</html>