JavaScript DHTML/jQuery/DIV
Содержание
- 1 Add html to div then do further manipulations to the inserted html.
- 2 Adds a border to divs that are not green
- 3 Animates all divs to slide down and show themselves over 600 milliseconds.
- 4 Animates all hidden divs to show fastly in order
- 5 Animates divs between dividers with a toggle that makes some appear and some disappear.
- 6 Append to DIV
- 7 Bind a single click that adds the div id to its text.
- 8 Bind mouse over and out event to div tag
- 9 Change DIV background
- 10 Change the color of all divs then put a border around only some of them.
- 11 Change the color of all divs then put a border two specific ones.
- 12 Click to add border
- 13 Click to change DIV tag color
- 14 Creates a div element (and all of its contents) dynamically, and appends it to the body element.
- 15 Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
- 16 Find all children of each div.
- 17 Finds all divs adds all paragraphs
- 18 Get text from paragraph and set to DIV
- 19 Hides the divs when clicked over 2 seconds, then removes the div element when its hidden.
- 20 Hides the divs when clicked, then removes the div element when its hidden.
- 21 Locate all the divs after the first and give them a class.
- 22 Set DIV color
- 23 Sets id for divs based on the position in the page.
- 24 Switch class when clicking the div tag
- 25 Tie a one-time click to each div.
- 26 To set the height of each div on click to 30px plus a color change.
- 27 To set the width of each div on click to 30px plus a color change.
- 28 Turn the div with index 2 blue by adding an appropriate class.
- 29 Wrap a jQuery object div around all of the paragraphs
Add html to div then do further manipulations to the inserted html.
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("bold");
$("p b").append(document.createTextNode("!!!")).css("color", "red");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
Hello
</body>
</html>
</source>
Adds a border to divs that are not green
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
Animates all divs to slide down and show themselves over 600 milliseconds.
<source lang="html4strict">
<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>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
<source lang="html4strict">
<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>
A
B
C
D
</body>
</html>
</source>
Animates divs between dividers with a toggle that makes some appear and some disappear.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
Append to DIV
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").html("bold not bold");
$("div b").append(document.createTextNode("!!!")).css("color", "red");
});
</script>
</head>
<body>
<body>
</body>
</html>
</source>
Bind a single click that adds the div id to its text.
<source lang="html4strict">
<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>
hey id
</body>
</html>
</source>
Bind mouse over and out event to div tag
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).bind(
"ready",
function() {
$("div").bind("mouseover",function() {
$(this).addClass("myMouseOver");
}
);
$("div").bind("mouseout",function() {
$(this).removeClass("myMouseOver");
}
);
$("div").bind("click",function() {
if ($(this).hasClass("myMouseOn")) {
$(this).removeClass("myMouseOn");
} else {
$(this).addClass("myMouseOn");
}
}
);
}
);
</script> <style type="text/css">
div {
border: 1px solid rgb(200, 200, 200); width: 10px; height: 10px; margin: 5px; float: left;
} div.myMouseOver {
background: red;
} div.myMouseOn {
background: yellow;
}
</style> </head> <body>
</body>
</html>
</source>
Change DIV background
<source lang="html4strict">
<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>
</body>
</html>
</source>
Change the color of all divs then put a border around only some of them.
<source lang="html4strict">
<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>
asdf
asdf
</body>
</html>
</source>
Change the color of all divs then put a border two specific ones.
<source lang="html4strict">
<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>
asdf
asdf
</body>
</html>
</source>
Click to add border
<source lang="html4strict">
<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.
asdf
sdf
df
sdf
asdf
asdf
</body>
</html>
</source>
Click to change DIV tag color
<source lang="html4strict">
<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>
</body>
</html>
</source>
Creates a div element (and all of its contents) dynamically, and appends it to the body element.
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("Hello
});
</script>
</head>
<body>
<body>
<form>
<input type="radio" name="newsletter" value="Hot Fuzz">adf</input>
</form>
</body>
</html>
</source>
Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
Find all children of each div.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
Finds all divs adds all paragraphs
<source lang="html4strict">
<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>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
Get text from paragraph and set to DIV
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
<source lang="html4strict">
<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>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
<source lang="html4strict">
<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++) {
$("asdf
").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
</head>
<body>
<body>
</body>
</html>
</source>
Locate all the divs after the first and give them a class.
<source lang="html4strict">
<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>
asdf
asdf
</body>
</html>
</source>
Set DIV color
<source lang="html4strict">
<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>
asdf
asdf
</body>
</html>
</source>
Sets id for divs based on the position in the page.
<source lang="html4strict">
<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 = "" + this.id + "")");
});
});
</script>
</head>
<body>
<body>
A
B
C
</body>
</html>
</source>
Switch class when clicking the div tag
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).bind(
"ready",
function() {
$("div").bind(
"mouseover",
function() {
$(this).addClass("myMouseOver");
}
);
$("div").bind(
"mouseout",
function() {
$(this).removeClass("myMouseOver");
}
);
$("div").bind(
"click",
function() {
if ($(this).hasClass("myMouseOn")) {
$(this).removeClass("myMouseOn");
} else {
$(this).addClass("myMouseOn");
}
}
);
}
);
</script> <style type="text/css">
div {
border: 1px solid rgb(200, 200, 200); width: 10px; height: 10px; margin: 5px; float: left;
} div.myMouseOver {
background: red;
} div.myMouseOn {
background: yellow;
}
</style> </head> <body>
</body>
</html>
</source>
Tie a one-time click to each div.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
To set the height of each div on click to 30px plus a color change.
<source lang="html4strict">
<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>
</body>
</html>
</source>
To set the width of each div on click to 30px plus a color change.
<source lang="html4strict">
<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>
</body>
</html>
</source>
Turn the div with index 2 blue by adding an appropriate class.
<source lang="html4strict">
<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>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
Wrap a jQuery object div around all of the paragraphs
<source lang="html4strict">
<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>
World
asdf
</body>
</html>
