JavaScript Tutorial/jQuery/DIV
Содержание
- 1 30. Add html to div then do further manipulations to the inserted html.
- 2 30. Adds a border to divs that are not green
- 3 30. Animates all divs to slide down and show themselves over 600 milliseconds.
- 4 30. Animates all hidden divs to show fastly in order
- 5 30. Animates divs between dividers with a toggle that makes some appear and some disappear.
- 6 30. Append to DIV
- 7 30. Bind a single click that adds the div id to its text.
- 8 30. Change DIV background
- 9 30. Change the color of all divs then put a border around only some of them.
- 10 30. Change the color of all divs then put a border two specific ones.
- 11 30. Click to add border
- 12 30. Click to change DIV tag color
- 13 30. Creates a div element (and all of its contents) dynamically, and appends it to the body element.
- 14 30. Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
- 15 30. Find all children of each div.
- 16 30. Finds all divs adds all paragraphs
- 17 30. Get text from paragraph and set to DIV
- 18 30. Hides the divs when clicked over 2 seconds, then removes the div element when its hidden.
- 19 30. Hides the divs when clicked, then removes the div element when its hidden.
- 20 30. Locate all the divs after the first and give them a class.
- 21 30. Set DIV color
- 22 30. Sets id for divs based on the position in the page.
- 23 30. Tie a one-time click to each div.
- 24 30. To set the height of each div on click to 30px plus a color change.
- 25 30. To set the width of each div on click to 30px plus a color change.
- 26 30. Turn the div with index 2 blue by adding an appropriate class.
- 27 30. Wrap a jQuery object div around all of the paragraphs
30. Add html to div then do further manipulations to the inserted html.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("<b>bold</b>");
$("p b").append(document.createTextNode("!!!")).css("color", "red");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
30. Adds a border to divs that are not green
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").not(".green").css("color", "red");
});
</script>
</head>
<body>
<body>
<div id="results">asdf</div>
</body>
</html>
30. Animates all divs to slide down and show themselves over 600 milliseconds.
<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 () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
});
</script>
</head>
<body>
<body>
<div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#showHandler").click(function () {
$("div:eq(0)").show("fast", function () {
$(this).next().show("fast", arguments.callee);
});
});
$("#hideHandler").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body>
<body>
<button id="showHandler">Show</button>
<button id="hideHandler">Hide</button>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</body>
</html>
30. Animates divs between dividers with a toggle that makes some appear and some disappear.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
});
});
});
</script>
</head>
<body>
<body>
<button>Toggle</button>
<div>asdf</div>
</body>
</html>
30. Append to DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").html("<b>bold</b> not bold");
$("div b").append(document.createTextNode("!!!")).css("color", "red");
});
</script>
</head>
<body>
<body>
<DIV></DIV>
</body>
</html>
30. Bind a single click that adds the div id to its text.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
});
</script>
</head>
<body>
<body>
<div id="hey">hey id</div>
</body>
</html>
30. Change DIV background
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function colorEm() {
var $div = $("div");
$div.css("background", "red");
$div.slice(2, 4).css("background", "yellow");
}
$("button").click(colorEm);
});
</script>
<style>
div { width:40px; height:40px; margin:10px; float:left;}
</style>
</head>
<body>
<body>
<button>Click the button</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
30. Change the color of all divs then put a border around only some of them.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("color", "red");
});
</script>
</head>
<body>
<body>
<div class="middle">asdf</div>
<div>asdf</div>
</body>
</html>
30. Change the color of all divs then put a border two specific ones.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "#b4b0da")
.filter(function (index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border", "3px double red");
});
</script>
</head>
<body>
<body>
<div class="middle">asdf</div>
<div>asdf</div>
</body>
</html>
30. Click to add border
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
$(this).css({"border-style": "inset", cursor:"default"});
});
});
</script>
</head>
<body>
<body>
Press each to see the text.
<div>asdf</div>
<div>sdf</div>
<div>df</div>
<div>sdf</div>
<div>asdf</div>
<div>asdf</div>
<p></p>
</body>
</html>
30. Click to change DIV tag color
<html>
<head>
<style>
div { width:50px; height:40px; margin: 5px; float:left;background:red; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
});
</script>
</head>
<body>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
30. Creates a div element (and all of its contents) dynamically, and appends it to the body element.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("<div><p>Hello</p></div>").appendTo("body")
});
</script>
</head>
<body>
<body>
<form>
<input type="radio" name="newsletter" value="Hot Fuzz">adf</input>
</form>
</body>
</html>
30. Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:first").click(function () {
$(this).fadeTo("slow", Math.random());
});
});
</script>
</head>
<body>
<body>
<p><span>asdf</span></p>
</body>
</html>
30. Find all children of each div.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").children().css("border-bottom", "3px double red");
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
asdf
</div>
</div>
</body>
</html>
30. Finds all divs adds all paragraphs
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").add("p")
.css("background", "yellow");
});
</script>
</head>
<body>
<body>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
30. Get text from paragraph and set to DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str = $("p:first").text();
$("div").html(str);
});
</script>
</head>
<body>
<body>
<p>asdf</p>
<DIV></DIV>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
</head>
<body>
<body>
<div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
for (var i = 0; i < 5; i++) {
$("<div>asdf</div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
</head>
<body>
<body>
</body>
</html>
30. Locate all the divs after the first and give them a class.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:first").nextAll().css("color","red");
});
</script>
</head>
<body>
<body>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
30. Set DIV color
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("color", "red").add("p").css("background", "yellow");
});
</script>
<style>
div { width:40px; height:40px; margin:10px; float:left;}
</style>
</head>
<body>
<body>
<div>asdf</div>
<div>asdf</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
30. Sets id for divs based on the position in the page.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = "<b>" + this.id + "</b>")");
});
});
</script>
</head>
<body>
<body>
<div>A<span></span></div>
<div>B<span></span></div>
<div>C<span></span></div>
</body>
</html>
30. Tie a one-time click to each div.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function(){
alert("clicked.");
});
});
</script>
<style>
div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<body>
<div>asdf</div>
</body>
</html>
30. To set the height of each div on click to 30px plus a color change.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});
});
</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>
30. To set the width of each div on click to 30px plus a color change.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
$(this).width(30)
.css({cursor:"auto", "background-color":"blue"});
});
});
</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>
30. Turn the div with index 2 blue by adding an appropriate class.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").eq(2).css("color","blue");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<div id="single">asdf</div>
<div id="single">asdf</div>
<div id="single">asdf</div>
<div id="single">asdf</div>
</body>
</html>
30. Wrap a jQuery object div around all of the paragraphs
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap($(".doublediv"));
});
</script>
<style>
.doublediv { color:red; }
</style>
</head>
<body>
<body>
<p>World</p>
<div class="doublediv">asdf<div>
</body>
</html>