selectores.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. $(function() {
  2. $(".open-code").each(function(i) {
  3. $(this).attr('id', "open" + (i + 1));
  4. });
  5. $(".hide-code").each(function(i) {
  6. $(this).attr('id', "hide" + (i + 1));
  7. });
  8. $( ".select_hide" ).change(function() {
  9. var id = $(this).children(":selected").attr("id");
  10. $(".hide-code").hide();
  11. var id_element2 = id.replace("open", "");
  12. $("#hide"+id_element2).show();
  13. });
  14. });
  15. $(function() {
  16. $(".odd-li").click(function() {
  17. $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
  18. $("#listaPrim > li:odd").css( "background-color", "red");
  19. });
  20. $(".odd-p").click(function() {
  21. $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
  22. $("#parraPrim > p:odd").css( "background-color", "red");
  23. });
  24. $(".even-li").click(function() {
  25. $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
  26. $("#listaPrim > li:even").css( "background-color", "red");
  27. });
  28. $(".even-p").click(function() {
  29. $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
  30. $("#parraPrim > p:even").css( "background-color", "red");
  31. });
  32. $(".clear-oddeven").click(function() {
  33. $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
  34. });
  35. });
  36. $(function() {
  37. $(".first-li").click(function() {
  38. $(".seleccion").css("background-color", "transparent");
  39. $(".seleccion:first").css( "background-color", "red");
  40. });
  41. $(".eq-li").click(function() {
  42. var valor = $("#valorSelect").val();
  43. $(".seleccion").css("background-color", "transparent");
  44. $(".seleccion:eq("+valor+")").css( "background-color", "red");
  45. });
  46. $(".gt-li").click(function() {
  47. var valor = $("#valorSelect").val();
  48. $(".seleccion").css("background-color", "transparent");
  49. $(".seleccion:gt("+valor+")").css( "background-color", "red");
  50. });
  51. $(".lt-li").click(function() {
  52. var valor = $("#valorSelect").val();
  53. $(".seleccion").css("background-color", "transparent");
  54. $(".seleccion:lt("+valor+")").css( "background-color", "red");
  55. });
  56. $(".slice-li").click(function() {
  57. var valor = $("#valorSelect").val();
  58. var valor2 = $("#valorSelect2").val();
  59. $(".seleccion").css("background-color", "transparent");
  60. $(".seleccion").slice(valor, valor2).css( "background-color", "red");
  61. });
  62. $(".clear-li").click(function() {
  63. $(".seleccion").css("background-color", "transparent");
  64. });
  65. });
  66. $(function() {
  67. $(".tell-hidden").click(function() {
  68. var num = $(".seleccion2:hidden");
  69. alert("Los elementos escondidos son " + num.length);
  70. });
  71. $(".show-hidden").click(function() {
  72. $(".seleccion2:hidden").show();
  73. });
  74. $(".all-hidden").click(function() {
  75. $(".seleccion2").hide();
  76. });
  77. $(".clickVisibly").click(function() {
  78. $("li").each(function() {
  79. if ($(this).css("visibility") === "hidden") {
  80. $(this).css("visibility", "visible");
  81. }
  82. });
  83. });
  84. $(".clear-li2").click(function() {
  85. $(".seleccion2").show();
  86. $(".element-hidden").hide();
  87. $(".element-invisible").css("visibility", "hidden");
  88. });
  89. });
  90. $(function() {
  91. $(".div-has").click(function() {
  92. $(".padre-div").has("li").css("background", "red");
  93. });
  94. $(".not-has").click(function() {
  95. $( "#list-father li" ).not( "#has-father").css("background", "red");;
  96. });
  97. $(".clear-li3").click(function() {
  98. $("li").css("background-color", "transparent");
  99. $(".padre-div").css("background-color", "transparent");
  100. });
  101. });
  102. $(function() {
  103. $(".shmi-son").click(function() {
  104. clear4();
  105. $( ".shmi-child" ).children("img").css( "border", "3px solid red" );
  106. });
  107. $(".vader-children").click(function() {
  108. clear4();
  109. $( ".vader-child").children("img").css( "border", "3px solid red" );
  110. });
  111. $(".leia-son").click(function() {
  112. clear4();
  113. $( ".leia-child>img" ).css( "border", "3px solid red" );
  114. });
  115. $(".shmi-descendant").click(function() {
  116. clear4();
  117. $( ".shmi-child" ).find("img").css( "border", "3px solid red" );
  118. });
  119. $(".vader-descendant").click(function() {
  120. clear4();
  121. $( ".vader-child img" ).css( "border", "3px solid red" );
  122. });
  123. $(".luke-sibling").click(function() {
  124. clear4();
  125. $( "#luke" ).next().children("img").css( "border", "3px solid red" );
  126. });
  127. $(".leia-sibling").click(function() {
  128. clear4();
  129. $( "#leia" ).prev().children("img").css( "border", "3px solid red" );
  130. });
  131. $(".kylo-mother").click(function() {
  132. clear4();
  133. $( "#kylo" ).parent().children("img").css( "border", "3px solid red" );
  134. });
  135. $(".kylo-ancestor").click(clear4,function() {
  136. clear4();
  137. $( "#kylo img" ).parentsUntil("#star-wars").find( ".ancestor" ).css( "border", "3px solid red" );
  138. });
  139. $(".clear-li4").click(clear4);
  140. });
  141. function clear4() {
  142. $("#star-wars img").css("border", "3px transparent");
  143. $("#star-wars div").css("border", "3px transparent");
  144. }
  145. $(function() {
  146. $(".input-type").click(function() {
  147. var allInputs = $( ":input");
  148. $( "#form-result" ).text( "Encontrados " + allInputs.length + " inputs." );
  149. });
  150. $(".pass-type").click(function() {
  151. var input = $( "input:password" ).css({
  152. background: "yellow",
  153. border: "3px red solid"
  154. });
  155. $( "#form-result" )
  156. .text( "Hay " + input.length + " input de tipo 'password'." )
  157. .css( "color", "red" );
  158. });
  159. $(".reset-type").click(function() {
  160. var input = $( "input:reset" ).css({
  161. background: "yellow",
  162. border: "3px red solid"
  163. });
  164. $( "#form-result" )
  165. .text( "Hay " + input.length + " input de tipo 'reset'." )
  166. .css( "color", "red" );
  167. });
  168. $(".radio-type").click(function() {
  169. var input = $( "input:radio" ).css({
  170. background: "yellow",
  171. border: "3px red solid"
  172. });
  173. $( "#form-result" )
  174. .text( "Hay " + input.length + " input de tipo 'radiobutton'." )
  175. .css( "color", "red" );
  176. });
  177. $(".submit-type").click(function() {
  178. var input = $( "input:submit" ).css({
  179. background: "yellow",
  180. border: "3px red solid"
  181. });
  182. $( "#form-result" )
  183. .text( "Hay " + input.length + " input de tipo 'submit'." )
  184. .css( "color", "red" );
  185. });
  186. $(".text-type").click(function() {
  187. var input = $( "input:text" ).css({
  188. background: "yellow",
  189. border: "3px red solid"
  190. });
  191. $( "#form-result" )
  192. .text( "Hay " + input.length + " input de tipo 'text'." )
  193. .css( "color", "red" );
  194. });
  195. $(".checkbox-type").click(function() {
  196. var input = $( "input:checkbox" ).css({
  197. background: "yellow",
  198. border: "3px red solid"
  199. });
  200. $( "#form-result" )
  201. .text( "Hay " + input.length + " input de tipo 'checkbox'." )
  202. .css( "color", "red" );
  203. });
  204. $(".button-type").click(function() {
  205. var input = $( "form input:button" ).css({
  206. background: "yellow",
  207. border: "3px red solid"
  208. });
  209. $( "#form-result" )
  210. .text( "Hay " + input.length + " input de tipo 'button'." )
  211. .css( "color", "red" );
  212. });
  213. $(".select-type").click(function() {
  214. var input = $( "#form-prueba option:selected" );
  215. $( "#form-result" )
  216. .text( "Has elegido la opción " + input.text())
  217. .css( "color", "red" );
  218. });
  219. $(".clear-form").click(function() {
  220. $("#form-prueba input").css({
  221. background: "#e7e7e7",
  222. color: "black",
  223. border: "black"
  224. });
  225. });
  226. });
  227. $(function() {
  228. $("#myListFil").click(function() {
  229. $( "#myList li" ).css( "background-color", "transparent" );
  230. $( "#myList li" ).filter( ":even" ).css( "background-color", "red" );
  231. });
  232. $("#myListFil2").click(function() {
  233. $( "#myList li" ).css( "background-color", "transparent" );
  234. $( "#myList li" ).filter(function() {
  235. return $( "strong", this ).length === 1;
  236. })
  237. .css( "background-color", "red" );
  238. });
  239. $("#myListFil3").click(function() {
  240. $( "#myList li" ).css( "background-color", "transparent" );
  241. $( "#myList li" ).filter(function() {
  242. return $( "strong", this ).length === 2;
  243. })
  244. .css( "background-color", "red" );
  245. });
  246. $("#myListClear").click(function() {
  247. $( "#myList li" ).css( "background-color", "transparent" );
  248. })
  249. });