web前端常用操作集(涵盖JS、HTML、CSS)

取消 ul li 前面的图标 1
清空Value值 1
设置Value值 1
清空标签中间值 1
设置标签中间值 1
区分html()、text()、val()。 1
设置标签为可编辑状态 1
设置标签为不可编辑状态 1
两个Ajax,一个A,一个B,B要在A执行完毕之后执行 2
时间间隔,只执行一次,在指定的毫秒数后调用函数或计算表达式 2
时间间隔,执行多次,每隔指定毫秒数后调用函数或计算表达式 2
jQuery全选/全不选/反选 2
Select-Optin项 3
让DIV一直固定在屏幕的某个位置 4

取消 ul li 前面的图标

[html][/html] view plaincopy

  1. ul
  2.     {
  3.         list-style-type:none;
  4.     }

清空Value值

[html][/html] view plaincopy

  1. $(“#city”).val(“”);

设置Value值

[html][/html] view plaincopy

  1. $(“#city”).val(“北京”);

清空标签中间值

[html][/html] view plaincopy

  1. $(“#ML1”).html(“”);

设置标签中间值

[html][/html] view plaincopy

  1. $(“#ML1”).html(“北京”);

当对某个标签再次加载值时,常要先清除原有值
区分html()、text()、val()。

[html][/html] view plaincopy

  1. <input type=”aaa” value=”bbb”>ccc</input>
  2. text()输出标签中间的内容:1234。
  3. val()输出value属性的值:bbb。
  4. html()输出整段html:<input type=”aaa” value=”bbb”>ccc</input>。
  5. val()的写法针对jQuery

设置标签为可编辑状态

[html][/html] view plaincopy

  1. $(“input”).removeAttr(“readonly”); //所有input标签可编辑
  2. $(“textarea”).removeAttr(“readonly”); //所有textarea(部门简介)标签可编辑
  3. $(“input:button”).removeAttr(“disabled”); //所有button(左右框移动)标签不可编辑

设置标签为不可编辑状态

[html][/html] view plaincopy

  1. $(“input”).attr(“readonly”, “readonly”); //所有input标签不可编辑
  2. $(“textarea”).attr(“readonly”, “readonly”); //所有textarea(部门简介)标签不可编辑
  3. $(“input:button”).attr(“disabled”, “disabled”); //所有button(左右框移动)标签不可编辑

两个Ajax,一个A,一个B,B要在A执行完毕之后执行
由于Ajax是异步加载,各个Ajax几乎同时执行互不干扰,但有时我们要的效果是一个Ajax的请求要从另一个Ajax的返回值中取值,此时,就会发生这种情况,解决方案有三个:
1、 在名为A的Ajax的CallBack中写名为B的Ajax请求;
2、 写一个时间间隔函数,监听A的执行,当A执行完毕之后,调用B;
3、 将Ajax的async设置为false,但这样又通常要求全部都设置为false。

时间延迟,只执行一次,在指定的毫秒数后调用函数或计算表达式

[html][/html] view plaincopy

  1. Var st o= setTimeout(到点要执行的函数或表达式,延迟的毫秒单位时间);
  2. window. clearTimeout(sto)使其失效,取消周期执行

时间间隔,执行多次,每隔指定毫秒数后调用函数或计算表达式

[html][/html] view plaincopy

  1. varstv= setInterval (“alert(‘间隔3000ms弹出一次!’)”,3000);
  2. window.clearInterval(stv)使其失效,取消周期执行

jQuery全选/全不选/反选

[html][/html] view plaincopy

  1. <html xmlns=”http://www.w3.org/1999/xhtml”>
  2. <head>
  3. <title>全选,不全选,反选</title>
  4. <script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>
  5. <script language=”javascript” type=”text/javascript”>
  6. $(function () {
  7. $(“#selectAll”).click(function () {//全选
  8. $(“#ckList :checkbox”).attr(“checked”, true);
  9. });
  10. $(“#unSelect”).click(function () {//全不选
  11. $(“# ckList:checkbox”).attr(“checked”, false);
  12. });
  13. $(“#reverse”).click(function () {//反选
  14. $(“# ckList:checkbox”).each(function () {
  15. $(this).attr(“checked”, !$(this).attr(“checked”));
  16. });
  17. });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <div id=” ckList “>
  23. <input type=”checkbox” value=”值1″ />值1<br />
  24. <input type=”checkbox” value=”值2″ />值2<br />
  25. <input type=”checkbox” value=”值3″ />值3<br />
  26. <input type=”checkbox” value=”值4″ />值4<br />
  27. </div>
  28. <input type=”button” value=”全选” id=”selectAll” />
  29. <input type=”button” value=”全不选” id=”unSelectAll” />
  30. <input type=”button” value=”反选” id=”reverse” />
  31. </body>
  32. </html>
  33. Select-Optin项
  34. <html xmlns=”http://www.w3.org/1999/xhtml”>
  35. <head runat=”server”>
  36. <title></title>
  37. <script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>
  38. <script type=”text/javascript”>
  39. //所有
  40. function All() {
  41. var tt = $(“#st”)[0];
  42. for (var i = 0; i < tt.length; i++) {
  43. alert(tt[i].text);
  44. }
  45. }
  46. //当前所选
  47. function Aselected() {
  48. var tt = $(“#st”)[0];
  49. for (var i = 0; i < tt.length; i++) {
  50. if(tt[i].selected) {
  51. alert(tt[i].text);
  52. alert(tt[i].value);
  53. }
  54. }
  55. }
  56. </script>
  57. </head>
  58. <body>
  59. <form id=”form1″ runat=”server”>
  60. <div>
  61. <select id = “st” multiple=”multiple”>
  62. <option value=”1″>aaaaa</option>
  63. <option value=”2″>bbbbb</option>
  64. <option value=”3″>ccccc</option>
  65. <option value=”4″>ddddd</option>
  66. </select>
  67. <input type=”text” id = “tt”/>
  68. <input type=”button” onclick=”All();” value=”所有”/>
  69. <input type=”button” onclick=”Aselected();” value=”当前所选”/>
  70. </div>
  71. </form>
  72. </body>
  73. </html>

让DIV一直固定在屏幕的某个位置

[html][/html] view plaincopy

  1. <html xmlns=”http://www.w3.org/1999/xhtml”>
  2. <head runat=”server”>
  3. <title></title>
  4. <style type=”text/css”>
  5. #low_right
  6. {
  7. position: fixed;
  8. width: 90px;
  9. height: 90px;
  10. background: #eee;
  11. bottom: 40px;
  12. right: 20px;
  13. background-color: #DCFCE9;
  14. border: 8px double #06F867;
  15. text-align: center;
  16. padding: 10px;
  17. margin: 10px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <script type=”text/javascript”>
  23. for (var i = 0; i < 100; i++) {
  24. document.write((i + 1) + “<br />”);
  25. }
  26. </script>
  27. <div id=”low_right”>
  28. 右下角
  29. </div>
  30. </body>
  31. </html>

标签