After we have selected the elements in jQuery we are able to manipulate them and working with CSS properties to build effects.
$('selector').css('css_property');- selector - represents a HTML element.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Read CSS styles</title> <style type="text/css"><!-- .cls { width:250px; background-color:#bcefcd; border:2px solid blue; } --></style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"><!-- $(document).ready(function() { // get the width and background-color of the first <div> with class="cls" var div1_width = $('div.cls:first').css('width'); var div1_bgcolor = $('div.cls:first').css('background-color'); // displays an Alert window when the HTML tag with id="btn" is clicked $('#btn').click(function(){ alert('width = '+ div1_width+ ' , bgcolor = '+ div1_bgcolor); }); }); --></script> </head> <body> <div class="cls">jQuery Tutorial</div> <div class="cls">coursesweb.net/javascript/</div> <button id="btn">Click</button> </body> </html>Click on the button below to see the result.
$('selector').css('css_property', 'value');Example:
<script type="text/javascript"><!-- $(document).ready(function() { // sets the font-size of all <div> with class="cls", when the HTML tag with id="btn" is clicked $('#btn').click(function(){ $('div.cls').css('font-size', '20px'); }); }); --></script> <div class="cls">jQuery Tutorial</div> <div class="cls">coursesweb.net/javascript/</div> <button id="btn">Click</button>The code above sets the CSS property font-size:20px; to all <div> tags with class="cls", when the HTML tag with id="btn" is clicked.
$('selector').css({ 'property1': 'value', 'property2': 'value' });- You can add as many 'property':'value' pairs as you want, within the curly braces, separated by comma.
<script type="text/javascript"><!-- $(document).ready(function() { // sets multiple css properties to the <div> with class="cls", when it is clicked $('div.cls').click(function(){ $(this).css({'margin': '3px auto', 'background': '#bcfecd', 'color': 'blue'}); }); }); --></script> <div class="cls">jQuery Tutorial</div> <div class="cls">coursesweb.net/javascript/</div>The code above sets this CSS properties: margin:2px auto; background':#bcfecd; color:blue; to any <div> with class="cls", when it is clicked.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Add, Remove class</title> <style type="text/css"><!-- .cls1 { border:2px solid #01da02; color:blue; } .cls2 { background:#bcfecd; font-size:18px; } --></style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"><!-- $(document).ready(function() { // adds class "cls2" to the tag with id="id1", and remove class "cls1" from all <div> tags // when the tag with id="btn" is clicked $('#btn').click(function(){ $('#id1').addClass('cls2'); $('div').removeClass('cls1'); }); }); --></script> </head> <body> <div class="cls1">Free Web Development Courses</div> <div id="id1">Web site: marplo.net</div> <button id="btn">Click</button> </body> </html>The jQuery code in this example adds class "cls2" to the tag with id="id1", and removes class "cls1" from all <div> tags, when the element with id="btn" is clicked.
if ($('anElement').hasClass('class_name')) { // do something here }- If the HTML element specified by "anElement" has a class of "class_name", the browser will execute the code within curly braces.
<script type="text/javascript"><!-- $(document).ready(function() { // when the mouse is over a DIV with a class of "cls", adds a border to it $('div').mouseover(function() { if($(this).hasClass('cls')) { $(this).css('border', '2px solid blue'); } }); }); --></script> <div class="cls">Div with class="cls"</div> <div>DIV without class</div> <div class="cls">Another div with class="cls"</div>The code above adds a border to each DIV with a class of "cls", when the mouse is over it.
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4