http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html  

jquery 使用方法

1、在浏览器点击F12,调出源码设置端点F11进行调试

2、要操作DOM对象,首先要把DOM对象封装成juery对象:

jQuery(document).ready(function () {
 alert('页面加载完了2');
 });

juery = $,

3、jQuery页面加载完成写法

$(function () {
alert('加载完了');
});

4、map是对数组遍历 ,arg参数一般不用理

var arr = [1, 2, 4, 5, 6, 7];

var arrs = $.map(arr, function () {

  alert((arguments);//返回function ()函数有几个参数

  alert((arguments[0]);//返回function ()函数第一个参数
 });

var arrs= $.map(arr, function (ele, index) {
  return ele * 2;//返回元素值改变后的数组
});

$.map(arr, function (ele, index) {
  alert(ele+'==='+index);
  //alert(arguments[0]+'==='+arguments[1]+'=='+arguments[2]);
});

5、each对键值对遍历,arg参数一般不用理

var arr = [45, 56, 43, 23, 112];

$.each(arr, function (k, v) {
   //k---索引,v值
  alert(k+'=='+v);
 });

 var arr = { "yzk": "椰子壳", "jk": "接口", "ml": "玛丽" };
 $.each(arr, function (k, v) {
  //k====键,v====值
   alert(k+'=='+v);
 });

6、$.trim取掉空格

// var msg = ' 感冒真舒服,一般都不感冒 ';
// alert('==' +$.trim(msg)+'==');

7、dom对象转换为jqurey对象

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7.  
  8. <script type="text/javascript">
  9.  
  10. $(function () {
  11.  
  12. document.getElementById('btn').onclick = function () {
  13. //dom对象
  14. // var dvObj = document.getElementById('dv');
  15. // var jq = $(dvObj); //dom对象转jquery对象
  16. // //var dd= jq.get(0);//jquery对象转dom对象
  17. // var dd = jq[0];
  18.  
  19. //链式编程
  20. // $(dvObj).css('width', '300px').css('height', '200px').css('backgroundColor', 'yellow').text('哈哈哈');//如果写内容了 那么就是设置,如果没写就是获取
  21.  
  22. //jquery写法
  23. // $(dvObj).css('width', '300px');
  24. // $(dvObj).css('height', '200px');
  25. // $(dvObj).css('backgroundColor', 'yellow');
  26. // $(dvObj).text('<font color="red",size="7">哈哈哈 太帅了</font>');
  27. // dvObj.style.width = '300px';
  28. // dvObj.style.height = '200px';
  29. // dvObj.style.backgroundColor = 'yellow';
  30.  
  31. };
  32. });
  33. </script>
  34. </head>
  35. <body>
  36. <input type="button" name="name" value="显示效果" id="btn" />
  37. <div id="dv">
  38. </div>
  39. </body>
  40. </html>

8、id选择器,标签选择器,类选择器,优先级:标签选择器->类选择器->id选择器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. /*id选择器,标签选择器,类选择器*/
  7.  
  8. /*id选择器
  9. #dv
  10. {
  11. width:300px;
  12. height:200px;
  13. background-color:Yellow;
  14. }*/
  15.  
  16. /*标签选择器
  17. div
  18. {
  19. width:300px;
  20. height:200px;
  21. background-color:Yellow;
  22. }*/
  23.  
  24. /*类选择器
  25. .cls
  26. {
  27. width: 300px;
  28. height: 200px;
  29. background-color: Yellow;
  30. }*/
  31. </style>
  32. </head>
  33. <body>
  34. <div id="dv">
  35. </div>
  36. <div class="cls">
  37. </div>
  38. </body>
  39. </html>

9、选择器获取元素

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. //点击按钮 改变层的样式,并且在层中 来个font标签 显示样式
  9.  
  10. //页面加载了
  11. $(function () {
  12.  
  13. $('#btn').click(function () {
  14. $('#dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'orange').html('<font color="red" size="7" face="全新硬笔行书简">我会用挖掘机控制计算机开飞机</font>');
  15.  
  16. $(this).val('嘎嘎');
  17. });
  18. });
  19.  
  20. </script>
  21. </head>
  22. <body>
  23. <input type="button" name="name" value="哈哈" id="btn" />
  24. <div id="dv">
  25. </div>
  26. </body>
  27. </html>

标签选择器、类选择器获取元素

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7.  
  8. <style type="text/css">
  9.  
  10. .cls
  11. {
  12. background-color:Orange;
  13. border:1px solid red;
  14. }
  15.  
  16. </style>
  17. <script type="text/javascript">
  18.  
  19. $(function () {
  20.  
  21. $('#btn').click(function () {
  22.  
  23. // $('p').text('我们都是好人'); //隐式迭代
  24. $('.cls').text('文能提笔控萝莉');
  25. // so easy --各种选择器
  26. });
  27. });
  28.  
  29. </script>
  30. </head>
  31. <body>
  32. <input type="button" name="name" value="改变" id="btn" />
  33. <p>床前明月光
  34. </p>
  35. <p class="cls">疑是地上霜
  36. </p>
  37. <p>举头望明月
  38. </p>
  39. <p>低头思故乡
  40. </p>
  41. </body>
  42. </html>

标签改变,鼠标形状改变

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7.  
  8. $(function () {
  9.  
  10. $('p').click(function () {
  11. $(this).text('我心疼坏了').css('color', 'red');
  12. }).mouseover(function () {
  13. $(this).css('cursor', 'pointer');
  14. }).mouseout(function () {
  15. $(this).css('color', '');
  16. });
  17. });
  18.  
  19. </script>
  20. </head>
  21. <body>
  22. <p>
  23. 锄禾日当午
  24. </p>
  25. <p>
  26. 汗滴禾下土
  27. </p>
  28. <p>
  29. 谁知盘中餐
  30. </p>
  31. <p>
  32. 粒粒皆辛苦
  33. </p>
  34. </body>
  35. </html>

多条件选择器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. // $(function () {
  10.  
  11. // $('#btn').click(function () {
  12.  
  13. // //$('div.cls').css('backgroundColor','green');
  14. // });
  15. //
  16. // });
  17. </script>
  18.  
  19. <script type="text/javascript">
  20.  
  21. $(function () {
  22. $('#btn').click(function () {
  23. //多条件选择器
  24. $('p,strong,div.cls').css('backgroundColor','red');
  25. });
  26. });
  27. </script>
  28.  
  29. <style type="text/css">
  30.  
  31. .cls
  32. {
  33. width:100px;
  34. height:50px;
  35. background-color:Orange;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <input type="button" name="name" value="效果" id="btn" />
  41.  
  42. <p>
  43. 这是p
  44. </p>
  45. <strong>这是strong</strong>
  46. <div class="cls">
  47.  
  48. </div>
  49.  
  50. <div style=" width:300px; height:200px; background-color:Yellow;">
  51.  
  52. </div>
  53. </body>
  54. </html>

层选择器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7.  
  8. $(function () {
  9.  
  10. $('#btn').click(function () {
  11. //所有的
  12. // $('*').css('backgroundColor', 'red');
  13. //层中所有的p标签,
  14. // $('div p').css('backgroundColor','red');
  15. //直接的子元素,如果在直接的子元素中还有该元素.那么也可以
  16. //$('div>p').css('backgroundColor', 'red');
  17. //层后面的直接的p标签
  18. //$('div+p').css('backgroundColor', 'red');
  19. //层后面所有的p标签
  20. //$('div~p').css('backgroundColor', 'red');
  21.  
  22. });
  23. });
  24. </script>
  25. </head>
  26. <body>
  27. <input type="button" name="name" value="显示效果" id="btn" />
  28. <p>
  29. 这是p标签第一个
  30. </p>
  31. <p>
  32. 这是第二个p标签
  33. </p>
  34. <div style="width: 300px; height: 200px; background-color: Green;">
  35. <p>
  36. 层中的第一个
  37. </p>
  38. <p>
  39. 层中的中间的<p>
  40. 层中的p中的p</p>
  41. </p>
  42. <p>
  43. 层中的第二个
  44. </p>
  45. <strong>
  46. <p>
  47. strong中的p</p>
  48. </strong>
  49. </div>
  50. <p>
  51. 层后面的第一个
  52. </p>
  53. <strong>content</strong>
  54. <p>
  55. 层后面的第二个
  56. </p>
  57. </body>
  58. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(function () {
  8.  
  9. $('#btn').click(function () {
  10. //层后面的第一个
  11. // $('div').next().css('color','red');
  12. //层后面所有的
  13. //$('div').nextAll().css('color','blue');
  14. //层前面的第一个
  15. //$('div').prev().css('color', 'blue');
  16. //层前面所有的
  17. // $('div').prevAll().css('color', 'blue');
  18. //兄弟元素
  19. //$('#p1').siblings().css('color', 'blue');
  20. });
  21. });
  22.  
  23. </script>
  24.  
  25. </head>
  26. <body>
  27. <input type="button" name="name" value="显示效果" id="btn" />
  28. <p id="p1">
  29. 这是P</p>
  30. <p>
  31. 这是P</p>
  32. <div style=" width:300px; height:200px; background-color:Yellow;">
  33. <p>
  34. 这是P</p>
  35. <p>
  36. 这是P</p>
  37. <p>
  38. 这是P</p>
  39. </div>
  40. <strong>content</strong>
  41. <p>
  42. 这是P</p>
  43. <p>
  44. 这是P</p>
  45. </body>
  46. </html>

页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红,当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝。自己不变色。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. //页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红,当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝。自己不变色。
  10.  
  11. $(function () {
  12.  
  13. // $('#uu li').mouseover(function () {
  14. // $(this).css('backgroundColor', 'red');
  15. // }).click(function () {
  16. // // $(this).prevAll('li').css('backgroundColor', 'yellow');
  17. // // $(this).nextAll('li').css('backgroundColor', 'blue');
  18.  
  19. // //第二种方式
  20. // $(this).prevAll('li').css('backgroundColor', 'yellow').end().nextAll('li').css('backgroundColor', 'blue');
  21. // }).mouseout(function () {
  22. // $(this).css('backgroundColor', '');
  23. // });
  24.  
  25. // if ($('#uu1').length) {
  26. // alert('存在');
  27. // } else {
  28. // alert('不存在');
  29. // }
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <ul id="uu">
  35. <li>热火</li>
  36. <li>骑士</li>
  37. <li>马刺</li>
  38. <li>雷霆</li>
  39. <li>公牛</li>
  40. <li>小牛</li>
  41. <li>火箭</li>
  42. </ul>
  43. </body>
  44. </html>

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的。

10、元素添加与移除类样式

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10.  
  11. $('#btn').click(function () {
  12. //为某个元素添加类选择器的样式
  13. $('#p1').addClass('cls');
  14. });
  15.  
  16. $('#btnrem').click(function () {
  17. //移除的是所有的类样式
  18. $('#p1').removeClass();
  19. });
  20. });
  21. </script>
  22.  
  23. <style type="text/css">
  24. .cls
  25. {
  26. background-color:Yellow;
  27. }
  28.  
  29. .cls1
  30. {
  31. color:Blue;
  32. }
  33. p
  34. {
  35. font-size:100px;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <input type="button" name="name" value="添加样式" id="btn" />
  41. <input type="button" name="name" value="移除样式" id="btnrem" />
  42. <p id="p1" class="cls1">这是p
  43. </p>
  44. </body>
  45. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10.  
  11. $('#btnoff').click(function () {
  12. //$('body').addClass('cls');
  13. //$('body').toggleClass('cls');
  14. // if ($('body').hasClass('cls')) {
  15. // $('body').removeClass('cls');
  16. // } else {
  17. // $('body').addClass('cls');
  18. // }
  19. });
  20. });
  21. </script>
  22.  
  23. <style type="text/css">
  24.  
  25. .cls
  26. {
  27. background-color:Black;
  28. }
  29.  
  30. </style>
  31. </head>
  32. <body>
  33. <input type="button" name="name" value="关灯/开灯" id="btnoff" />
  34. <p>这是p
  35. </p>
  36. </body>
  37. </html>

11、过滤器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7.  
  8. div
  9. {
  10. width:200px;
  11. height:100px;
  12. background-color:Orange;
  13. margin-bottom:10px;
  14. }
  15. </style>
  16. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  17. <script type="text/javascript">
  18.  
  19. $(function () {
  20. $('#btn').click(function () {
  21.  
  22. // $('ul').first().css('backgroundColor','red');
  23. // $('ul :first').css('backgroundColor', 'red');
  24.  
  25. // $('ul li:first').css('color','red');
  26. //偶数 但是显示效果的时候奇数
  27. //$('ul li:even').css('color','red');
  28. //奇数 显示效果是偶数
  29. $('ul li:odd').css('color','red');
  30. });
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. <input type="button" name="name" value="显示效果" id="btn" />
  36. <ul>
  37. <li>乔峰</li>
  38. <li>西门吹雪</li>
  39. <li>梅超风</li>
  40. <li>杨过</li>
  41. <li>乔布斯</li>
  42. <li>老马</li>
  43. </ul>
  44.  
  45. </body>
  46. </html>

12、按元素序号获取元素

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. div
  7. {
  8. width: 300px;
  9. height: 30px;
  10. background-color: Green;
  11. margin-bottom: 20px;
  12. }
  13. </style>
  14. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  15. <script type="text/javascript">
  16.  
  17. $(function () {
  18.  
  19. $('#btn').click(function () {
  20.  
  21. //索引获取元素
  22. //$('div:eq(3)').css('backgroundColor','red');
  23. //索引小于3的元素
  24. //$('div:lt(3)').css('backgroundColor', 'red');
  25. //索引大于3的元素
  26. // $('div:gt(3)').css('backgroundColor', 'red');
  27.  
  28. // $('div:gt(3):lt(2)').css('backgroundColor', 'red');
  29. //$(':header').css('backgroundColor', 'red');
  30. });
  31. });
  32.  
  33. </script>
  34. </head>
  35. <body>
  36. <input type="button" name="name" value="显示效果" id="btn" />
  37. <h1>
  38. 第一个</h1>
  39. <h2>
  40. 第一个</h2>
  41. <h3>
  42. 第一个</h3>
  43. <h4>
  44. 第一个</h4>
  45. <h5>
  46. 第一个</h5>
  47. <h6>
  48. 第一个</h6>
  49. <div>
  50. </div>
  51. <div>
  52. </div>
  53. <div>
  54. </div>
  55. <div>
  56. </div>
  57. <div>
  58. </div>
  59. <div>
  60. </div>
  61. <div>
  62. </div>
  63. <div>
  64. </div>
  65. <div>
  66. </div>
  67. </body>
  68. </html>

table行点谁谁变黄,siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7.  
  8. $(function () {
  9.  
  10. $('#tb tr').click(function () {
  11. $(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');
  12. });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <table border="1" id="tb" style=" cursor:pointer;">
  18. <tr>
  19. <td>
  20. 芙蓉姐姐
  21. </td>
  22. <td>
  23. 凤姐姐
  24. </td>
  25. </tr>
  26. <tr>
  27. <td>
  28. 芙蓉姐姐
  29. </td>
  30. <td>
  31. 凤姐姐
  32. </td>
  33. </tr>
  34. <tr>
  35. <td>
  36. 芙蓉姐姐
  37. </td>
  38. <td>
  39. 凤姐姐
  40. </td>
  41. </tr>
  42. <tr>
  43. <td>
  44. 芙蓉姐姐
  45. </td>
  46. <td>
  47. 凤姐姐
  48. </td>
  49. </tr>
  50. <tr>
  51. <td>
  52. 芙蓉姐姐
  53. </td>
  54. <td>
  55. 凤姐姐
  56. </td>
  57. </tr>
  58. </table>
  59. </body>
  60. </html>

 星级评分

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="jquery-1.8.3.js" type="text/javascript"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10.  
  11. $('#tb td').mouseover(function () {
  12. $(this).text('★').prevAll('td').text('★');
  13. }).mouseout(function () {
  14. $('#tb td').text('☆');
  15. });
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <table border="1" id="tb" style=" cursor:pointer;">
  21. <tr>
  22. <td>

  23. </td>
  24. <td>

  25. </td>
  26. <td>

  27. </td>
  28. <td>

  29. </td>
  30. <td>

  31. </td>
  32. </tr>
  33. </table>
  34. </body>
  35. </html>

相对元素,$('div p').css('color','red');用相对元素实现('p', $('div')).css('color','red');

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="../Scripts/jquery-1.10.2.js"></script>
  6. <script type="text/javascript">
  7.  
  8. $(function () {
  9.  
  10. $('#btn').click(function () {
  11. //$('div p').css('color','red');
  12.  
  13. $('p', $('div')).css('color','red');
  14. });
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <input type="button" name="name" value="显示效果" id="btn" />
  20. <div style=" width:300px; height:200px; background-color:Green;">
  21. <p>
  22. 这是p</p>
  23. </div>
  24. </body>
  25. </html>

JQuery基础一的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver(jQuery基础:安装、语法)

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  10. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. Linux_磁盘管理

    一.linux磁盘管理 命令:fdisk -l brwx-rw--- 其中b(占位符)代表block,块设备文件 sda,sdb... --> 硬盘 其中sda1,sda2..sdb1,sdb2 ...

  2. 读《深入php面向对象、模式与实践》有感(三)

    命令模式: 第一次接触到这个命令模式的时候,感觉它很像一个简化的mvc框架.从不同的路径访问,再由控制器来判断所要调用的具体php文件. <?php class CommandContext{ ...

  3. H5学习小结——div+css创建电子商务静态网页

    使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...

  4. SQL 语句调用这个存储过程,生成顺序编码

    一直很讨厌存储过程,没想到今天帮了我大忙啊,或许会因为今天让我慢慢喜欢上存储过程吧,不多说了,切入正题 在使用数据库的时候,难免要在使用过程中进行删除的操作,如果是使用int类型的字段,令其自增长,这 ...

  5. 【HDU 3401 Trade】 单调队列优化dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3401 题目大意:现在要你去炒股,给你每天的开盘价值,每股买入价值为ap,卖出价值为bp,每天最多买as ...

  6. HTML-embed标签详解

    Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Netscape及新版的IE 都支持 ...

  7. 大量查询SQL语句 实例

    1.查看表结构语句:DESC   表名   2.查询所有列:select  *  from  表名   3.查询指定列:select  字段名  form  表名   4.查询指定行:SELECT * ...

  8. IOS第18天(9,核心动画-动画组)

    ****动画组 // 核心动画都是假象,不能改变layer的真实属性的值// 展示的位置和实际的位置不同.实际位置永远在最开始位置 #import "HMViewController.h&q ...

  9. php数字操作,高精度函数,保留计算结果小数位

    $l = 45456.51; $r = 455778.44; $e = '100.00'; $f= '500.00'; $res = bcadd($l, $r,3);//小数点后的位数,精度就是由这个 ...

  10. Jquery 在页面加载后执行的几种方式

    1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document) ...