“Working with jQuery is easier after one masters its selectors.”
Paulo Coelho
There are three main ways to select an element in jQuery – by element, by class and by tag. Thus, I have decided to create a simple web app, which allows you to select anything at it, once you know its tag name, its class name or its id. You have to write them in the initial textarea here and press one of the three divs, named click me:
Thus, if you write id_div_3, you select Class and you press the div with the nice name Click Me – Red, most probably nothing would happen. Because you have to select Id 🙂 And then the third div would be colored in Red. You may play a little with the two colors to get something like this:
Or even scarier. 🙂
Pretty much, the idea of the article is to remember how to select the three types of selectors jQuery and to make sure that I can do it.
Last story, before giving the code and GitHub – use this code only on a local host, because it uses an EVAL function in it. And EVAL is EVIL.
So, here is the html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<html lang="en"> <head> <title>VitoshAcademy</title> <link rel="stylesheet" type="text/css" href="my_style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="my_js.js"></script> </head> </head> <body> <h1 class="cls_h1_1">VitoshAcademy.Com</h1> <div id="id_div_1">First Div</div> <div id="id_div_2">Second Div with a list <ol class="cls_ol_1"> <li id="id_li_1">CSKA</li> <li id="id_li_2">Sofia</li> <li id="id_li_3">Ale</li> <li id="id_li_4">Ale</li> </ol> </div> <div id="id_div_3"> <form id = "id_form_1"> Write something here<textarea id="id_textarea_1" rows = 2>id_div_3</textarea> <p>What is it?</p> <input type = radio name = "type_of_input" id="id_input_1" value="cls"/>Class <p></p> <input type = radio name = "type_of_input" id="id_input_2" value="id" checked="true" />ID <p></p> <input type = radio name = "type_of_input" id="id_input_3" value="el" />Element </form> </div> <div id="div_click_r">Click Me - Red</div> <div id="div_click_b">Click Me - Blue</div> <div id="div_click_w">Click Me - White</div> <div id="id_div_4"> <div id="id_div_5"> <h4>Classes</h4> <ol> <li>cls_h1_1</li> <li>cls_ol_1</li> </ol> </div> <div id="id_div_6"> <h4>ID</h4> <ol> <li>id_textarea_1</li> <li>id_li_4</li> <li>id_div_7</li> <li>id_form_1</li> <li>div_click_r</li> <li>div_click_b</li> <li>div_click_w</li> </ol> </div> <div id="id_div_7"> <h4>Elements</h4> <ol> <li>Body</li> <li>Div</li> <li>Form</li> <li>Textarea</li> <li>Ol</li> <li>Li</li> </ol> </div> </div> </body> </html> |
And the js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
$(document).ready(function () { var str_cls = "cls"; var str_id = "id"; var str_el = "el"; var str_color = ""; $("#div_click_r").click(function(){ str_color = "red"; color_me(str_color); }); $("#div_click_b").click(function(){ str_color = "aqua"; color_me(str_color); }); $("#div_click_w").click(function(){ str_color = "white"; color_me(str_color); }); function color_me(str_color){ var element = $("#id_textarea_1").val(); var str_selection = $('input[name=type_of_input]:checked', '#id_form_1').val(); if (str_selection === str_cls){ element = "'." + element + "'"; eval("$(" + element + ").css({ 'background-color' : '" + str_color + "' })"); } if (str_selection === str_id){ element = "'#" + element + "'"; eval("$(" + element + ").css({ 'background-color' : '" + str_color + "' })"); } if (str_selection === str_el){ element = "'" + element + "'"; eval("$(" + element + ").css({ 'background-color' : '" + str_color + "' })"); } }; }); |
The css, together with the whole project is available at GitHub.