JavaScript DHTML/jQuery/CSS
Содержание
- 1 Change background color
- 2 Change border style and cursor
- 3 Change color for DIV
- 4 Change CSS visibility to hide a tag
- 5 Change submit button background and border
- 6 If the property name includes a "-", put it between quotation marks:
- 7 Looks for the class "selected" on the matched elements.
- 8 Remove all the classes from the matched elements.
- 9 Remove style class
- 10 Remove the class "highlight" from the matched elements.
- 11 Remove two classes
- 12 To access the background color of a clicked div.
- 13 Toggle the class "highlight" when a paragraph is clicked.
Change background color
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("*").css("background","red");
});
});
</script>
</head>
<body>
<div class="notMe">div </div>
<div class="myClass">div</div>
<span class="myClass myOtherClass">span</span>
</body>
</html>
Change border style and cursor
<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).css({ borderStyle:"inset", cursor:"wait" });
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Change color for DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").text("data").css("color", "red");
});
</script>
</head>
<body>
<form>
<input type="text" />
</form>
<div></div>
</body>
</html>
Change CSS visibility to hide a tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("div").css("visibility", "hidden");
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Change submit button background and border
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var input = $(":submit").css({background:"yellow", border:"3px red solid"});
$("#result").text("jQuery matched " + input.length + " elements.");
});
</script>
</head>
<body>
<form><input type="submit" /></form>
<div id="result"></div>
</body>
</html>
If the property name includes a "-", put it between quotation marks:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css({ "background-color":"yellow", "font-weight":"bolder" });
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>
Looks for the class "selected" on the matched elements.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:last").addClass("selected highlight");
alert($("p:last").hasClass("selected").toString());
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>
Remove all the classes from the matched elements.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:even").removeClass();
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
Remove style class
<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">
$(document).ready(function(){
$("a").addClass("test");
$("a").removeClass("test");
});
</script>
</head>
<body>
<a href="http://wbex.ru/">wbex.ru</a>
</body>
</html>
Remove the class "highlight" from the matched elements.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:even").removeClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
Remove two classes
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:even").removeClass("selected highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
To access the background color of a clicked div.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
var color = $(this).css("background-color");
alert(color);
});
});
</script>
</head>
<body>
<body>
<div style="background-color:blue;">asdf</div>
</body>
</html>
Toggle the class "highlight" when a paragraph is clicked.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").toggleClass("highlight");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>