http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2Fcss_function
JavaScript DHTML/jQuery/css function - История изменений
2026-04-04T10:48:27Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/css_function&diff=2812&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/css_function&diff=2813&oldid=prev
Admin: 1 версия
2010-05-26T07:23:51Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add border to DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<style type="text/css"><br />
.changeP { font-weight: bold; color:red;}<br />
</style><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#myID\\.index\\[1\\]").css("border","3px solid red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="myID.index[0]">0</div><br />
<div id="myID.index[1]">1</div><br />
<div id="myID.index[2]">2</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Add paragraph and set the style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").css("color", "red").add("p").css("background", "yellow");<br />
});<br />
</script><br />
<style><br />
div { width:40px; height:40px; margin:10px; float:left;}<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Adds a background and text color to all the headers on the page.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(":header").css({ background:"#CCC", color:"blue" });<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<h1>Header 1</h1><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==css(name): Return a style property on the matched element.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").click(function () {<br />
var color = $(this).css("background-color");<br />
alert(color);<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div style="background-color:blue;">asdf</div><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==css(name, value): If a number is provided, it is automatically converted into a pixel value.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").mouseover(function () {<br />
$(this).css("color","red");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p>asdf</p><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==css(properties): set several style properties on matched elements.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").hover(function () {<br />
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });<br />
}, function () {<br />
var cssObj = {<br />
backgroundColor: "#ddd",<br />
color: "rgb(0,40,244)"<br />
}<br />
$(this).css(cssObj);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p>Move the mouse over me.</p><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Define CSS in an array and set==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("b").hover(function () {<br />
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});<br />
}, function () {<br />
var cssObj = {<br />
"background-color" : "#ddd",<br />
"font-weight" : "",<br />
"color" : "red"<br />
}<br />
$(this).css(cssObj);<br />
});<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<br />
<b>Hello</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get CSS value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var color = $("b").css("background-color");<br />
alert(color);<br />
<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<b>Hello</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Nested style setting==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").css("background", "yellow").filter(".blue").css("border-color", "red");<br />
});<br />
</script><br />
<style><br />
div { border:2px white solid;}<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div class=blue>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Set two CSS value in CSS function==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("b").hover(function () {<br />
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});<br />
}, function () {<br />
var cssObj = {<br />
"background-color" : "#ddd",<br />
"font-weight" : "",<br />
"color" : "red"<br />
}<br />
$(this).css(cssObj);<br />
});<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<br />
<b>Hello</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==The basic CSS Selectors supported by jQuery==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
Selector Description<br />
* Matches any element.<br />
E Matches element with tag name E.<br />
E F Matches elements with tag name F that are descendents of E.<br />
E>F Matches elements with tag name F that are direct children of E.<br />
E+F Matches elements F immediately preceded by sibling E.<br />
E~F Matches elements F preceded by any sibling E.<br />
E:has(F) Matches elements with tag name E that have at least one descendent with tag name F.<br />
E.C Matches elements E with class name C. Omitting E is the same as *.C.<br />
E#I Matches element E with id of I. Omitting E is the same as *#I.<br />
E[A] Matches elements E with attribute A of any value.<br />
E[A=V] Matches elements E with attribute A whose value is V.<br />
E[A^=V] Matches elements E with attribute A whose value begins with V.<br />
E[A$=V] Matches elements E with attribute A whose value ends with V.<br />
E[A*=V] Matches elements E with attribute A whose value contains V.<br />
<br />
$("p:even"); selects all even <p> elements.<br />
$("tr:nth-child(1)"); selects the first row of each table.<br />
$("body > div"); selects direct <div> children of <body>.<br />
$("a[href$=pdf]"); selects links to PDF files.<br />
$("body > div:has(a)") selects direct <div> children of <body>-containing links.<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use CSS value when creating new tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var color = $("b").css("background-color");<br />
alert(color);<br />
$("b").html("<span style="color:" +color + ";">" + color + "</span>.");<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
Highlight all to see me.<br />
<b>Hello</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use the rgb function with JQuery==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("td:empty").text("Was empty").css("background", "rgb(255,220,200)");<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<table><br />
<tr><td>data</td><td></td></tr><br />
<tr><td>data</td><td></td></tr><br />
<tr><td>data</td><td></td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source></div>
Admin