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