一、jQuery的属性操作

  • html() 它可以设置和获取起始标签和结束标签中的内容，跟 dom 属性 innerHTML 一样。
  • text() 它可以设置和获取起始标签和结束标签中的文本， 跟 dom 属性 innerText 一样。
  • val() 它可以设置和获取表单项的 value 属性值， 跟 dom 属性 value 一样

val 方法同时设置多个表单项的选中状态：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script>
  9.         $(function () {
  11.        /*
  12.             // 批量操作单选
  13.             $(":radio").val(["radio2"]);
  14.             // 批量操作帅选框的选中
  15.             $(":checkbox").val(["checkbox1","checkbox2"]);
  16.             // 批量多选下拉的选中状态
  17.             $("#multiple").val(["mul1","mul2"]);
  18.             // 单选的下拉框选中状态
  19.             $("#single").val(["sin2"]);
  21.             */
  22.             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","mul1","mul2","sin2"]);
  24.         });
  26.     </script>
  28. </head>
  29. <body>
  30. 单选： <input name="radio" type="radio" value="radio1"/>radio1
  31. <input name="radio" type="radio" value="radio2"/>radio2
  32. <br/>
  33. 多选：
  34. <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
  35. <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
  36. <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
  37. <br/>
  39. 下拉多选 ：
  40. <select id="multiple" multiple="multiple" size="4">
  41.     <option value="mul1">mul1</option>
  42.     <option value="mul2">mul2</option>
  43.     <option value="mul3">mul3</option>
  44.     <option value="mul4">mul4</option>
  45. </select>
  46. <br/>
  47. 下拉单选 ：
  48. <select id="single">
  49.     <option value="sin1">sin1</option>
  50.     <option value="sin2">sin2</option>
  51.     <option value="sin3">sin3</option>
  52. </select>
  54. </body>
  55. </html>

二、jQuery练习一

1. 全选、全不选、反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  7.     <script>
  8.         $(function () {
  9.             // 1. 给全选绑定事件
  10.             $("#checkedAllBtn").click(function () {
  11.                 $(":checkbox").prop("checked",true);
  12.             });
  13.             // 2. 给全不选绑定事件
  14.             $("#checkedNoBtn").click(function () {
  15.                 $(":checkbox").prop("checked",false);
  16.             });
  18.             // 3. 给反选绑定事件
  19.             $("#checkedRevBtn").click(function () {
  20.                 // 在each遍历的function函数中 ，有一个this对象。这个this对象是当前正在遍历到的dom对象
  21.                 $(":checkbox[name='items']").each(function () {
  22.                     this.checked = !this.checked;
  23.                 });
  24.             });
  26.             // 4. 检测是否选满
  27.             // 先获取总的个数
  28.             var allCount = $(":checkbox[name='items']").length;
  29.             // 再获取选中的个数
  30.             var checkedCount = $(":checkbox[name='items']:checked").length;
  31.             // if (allCount == checkedCount){
  32.             //     $("#checkbox").prop("checked",true);
  33.             // } else{
  34.             //     $("#checkbox").prop("checked",false);
  35.             // }
  37.             $("#checkbox").prop("checked",allCount == checkedCount);
  39.             // 5. 提交事件
  40.             $("#sendBtn").click(function () {
  41.                 // 获取选中的球类
  42.                 $(":checkbox[name='items']:checked").each(function () {
  43.                     alert(this.value);
  44.                 });
  45.             });
  47.         });
  49.     </script>
  51. </head>
  52. <body>
  54.     <form method="post" action="">
  55.         你爱好的运动是？
  56.         <input type="checkbox" id="checkAll"> 全选/全部选
  58.         <br>
  60.         <input type="checkbox" name="items" value="足球">足球
  61.         <input type="checkbox" name="items" value="篮球">篮球
  62.         <input type="checkbox" name="items" value="羽毛球">羽毛球
  63.         <input type="checkbox" name="items" value="乒乓球">乒乓球
  65.         <br>
  67.         <input type="button" id="checkedAllBtn" value="全 选" />
  68.         <input type="button" id="checkedNoBtn" value="全不选" />
  69.         <input type="button" id="checkedRevBtn" value="反 选" />
  70.         <input type="button" id="sendBtn" value="提 交" />
  72.     </form>
  73. </body>
  74. </html>

三、DOM的增删改

内部插入：

  • appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
  • prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入：

  • insertAfter() a.insertAfter(b) 得到 ba
  • insertBefore() a.insertBefore(b) 得到 ab

替换:

  • replaceWith() a.replaceWith(b) 用 b 替换掉 a
  • replaceAll() a.replaceAll(b) 用 a 替换掉所有 b

删除：

  • remove() a.remove(); 删除 a 标签
  • empty() a.empty(); 清空 a 标签里的内容

四、jQuery练习二

1. 从左到右，从右到左

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style type="text/css">
  8.         select{
  9.             width: 100px;
  10.             height: 140px;
  11.         }
  13.         div{
  14.             width: 130px;
  15.             float: left;
  16.             text-align: center;
  17.         }
  18.     </style>
  20.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  22.     <script type="text/javascript">
  24.         $(function () {
  25.             // 第一个按钮，选中添加到右边
  26.             $("button:eq(0)").click(function () {
  27.                 $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
  28.             });
  30.             // 第二个按钮，全部添加到右边
  31.             $("button:eq(1)").click(function () {
  32.                 $("select:eq(0) option").appendTo($("select:eq(1)"));
  33.             });
  35.             // 第三个按钮，选中删除到左边
  36.             $("button:eq(2)").click(function () {
  37.                 $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
  38.             });
  40.             // 第四个按钮，全部删除到左边
  41.             $("button:eq(3)").click(function () {
  42.                 $("select:eq(1) option").appendTo($("select:eq(0)"));
  43.             });
  45.         });
  47.     </script>
  48. </head>
  49. <body>
  50. <div id="left">
  51.     <select multiple="multiple" name="sel01">
  52.         <option value="opt01">选项 1</option>
  53.         <option value="opt02">选项 2</option>
  54.         <option value="opt03">选项 3</option>
  55.         <option value="opt04">选项 4</option>
  56.         <option value="opt05">选项 5</option>
  57.         <option value="opt06">选项 6</option>
  58.         <option value="opt07">选项 7</option>
  59.         <option value="opt08">选项 8</option>
  60.     </select>
  61.     <button>选中添加到右边</button>
  62.     <button>全部添加到右边</button>
  63. </div>
  65. <div id="rigth">
  66.     <select multiple="multiple" name="sel02"> </select>
  67.     <button>选中删除到左边</button>
  68.     <button>全部删除到左边</button>
  69. </div>
  71. </body>
  72. </html>

2. 动态添加、删除表格记录

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="style/css.css">
  7.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  9.     <script type="text/javascript">
  11.         $(function () {
  13.             // 创建一个用于复用的删除的函数
  14.             var deleteFun = function () {
  16.                 alert("删除 操作 的function : " + this);
  17.                 //在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象
  18.                 var $trObj = $(this).parent().parent();
  20.                 var name = $trObj.find("td:first").text();
  22.                 /**
  23.                  * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么
  24.                  * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
  25.                  */
  26.                 if( confirm("你确定要删除[" + name +  "]吗？") ){
  27.                     $trObj.remove();
  28.                 }
  30.                 return false; //可以阻止 元素的默认行为。
  31.             };
  33.             // 给submit绑定事件
  34.             $("#addEmpButton").click(function () {
  35.                 // 获取输入框中的内容
  36.                 var name = $("#empName").val();
  37.                 var email = $("#email").val();
  38.                 var salary = $("#salary").val();
  40.                 // 创建一个行标签对象，添加到显示数据的表格中
  41.                 var $trObj = $("<tr>" + "<td>"+ name +"</td>" +
  42.                     "<td>"+ email +"</td>" +
  43.                     "<td>"+ salary +"</td>" +
  44.                     "<td><a href=\"deleteEmp?id=002\">Delete</a></td>"+
  45.                         "</tr>") ;
  47.                 // 添加到表格中
  48.                 $trObj.appendTo($("#employeeTable"));
  50.                 // 给添加的行的a标签绑定事件
  51.                 $trObj.find("a").click(deleteFun);
  53.             });
  55.             // 给删除的a标签绑定单击事件
  56.             $("a").click(deleteFun);
  57.         });
  59.     </script>
  60. </head>
  61. <body>
  62.     <table id="employeeTable">
  63.         <tr>
  64.             <th>Name</th>
  65.             <th>Email</th>
  66.             <th>Salary</th>
  67.             <th>&nbsp;</th>
  68.         </tr>
  69.         <tr>
  70.             <td>Tom</td>
  71.             <td>tom@tom.com</td>
  72.             <td>5000</td>
  73.             <td><a href="deleteEmp?id=001">Delete</a></td>
  74.         </tr>
  75.         <tr>
  76.             <td>Jerry</td>
  77.             <td>jerry@sohu.com</td>
  78.             <td>8000</td>
  79.             <td><a href="deleteEmp?id=002">Delete</a></td>
  80.         </tr>
  81.         <tr>
  82.             <td>Bob</td>
  83.             <td>bob@tom.com</td>
  84.             <td>10000</td>
  85.             <td><a href="deleteEmp?id=003">Delete</a></td>
  86.         </tr>
  87.     </table>
  89.     <div id="formDiv">
  90.         <h4>添加新员工</h4>
  91.         <table>
  92.             <tr>
  93.                 <td class="word">name:</td>
  94.                 <td class="inp"><input type="text" name="empName" id="empName"/></td>
  95.             </tr>
  96.             <tr>
  97.                 <td class="word">email:</td>
  98.                 <td class="inp"><input type="text" name="email" id="email"/></td>
  99.             </tr>
  100.             <tr>
  101.                 <td class="word">salary:</td>
  102.                 <td class="inp"><input type="text" name="salary" id="salary"/></td>
  103.             </tr>
  104.             <tr>
  105.                 <td colspan="2" align="center">
  106.                     <button id="addEmpButton" value="abc"> Submit</button>
  107.                 </td>
  108.             </tr>
  109.         </table>
  110.     </div>
  112. </body>
  113. </html>

五、CSS 样式操作

  • addClass() 添加样式
  • removeClass() 删除样式
  • toggleClass() 有就删除，没有就添加样式
  • offset() 获取和设置元素的坐标
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  8. 	div{
  9. 		width:100px;
  10. 		height:260px;
  11. 	}
  13. 	div.border{
  14. 		border: 2px white solid;
  15. 	}
  17. 	div.redDiv{
  18. 		background-color: red;
  19. 	}
  21. 	div.blackDiv{
  22. 		border: 5px blue solid;
  23. 	}
  24. </style>
  26. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  27. <script type="text/javascript">
  29. 	$(function(){
  30. 		/*
  31. CSS
  32. css(name|pro|[,val|fn])       读写匹配元素的样式属性。
  33. 								a.css('color')取出a元素的color
  34. 								a.css('color',"red")设置a元素的color为red
  36. CSS 类
  38. addClass(class|fn) 			为元素添加一个class值;<div class="mini big">
  39. removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class
  40. 							a.removeClass()：移除所有的class值
  42. **/
  44. 		var $divEle = $('div:first');
  46. 		$('#btn01').click(function(){
  47. 			//addClass() - 向被选元素添加一个或多个类
  48. 			$divEle.addClass("redDiv blackDiv");
  49. 		});
  51. 		$('#btn02').click(function(){
  52. 			//removeClass() - 从被选元素删除一个或多个类
  53. 			$divEle.removeClass()
  54. 		});
  56. 		$('#btn03').click(function(){
  57. 			//toggleClass() - 对被选元素进行添加/删除类的切换操作
  58. 			//切换就是如果具有该类那么删除，如果没有那么添加上
  59. 			$divEle.toggleClass("redDiv");
  60. 		});
  62. 		$('#btn04').click(function(){
  63. 			//offset() - 返回第一个匹配元素相对于文档的位置。
  64. 			var os = $divEle.offset();
  65. 			//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
  66. 			alert("顶边距："+os.top+" 左边距："+os.left);
  68. 			//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
  69. 			//offset({ top: 10, left: 30 });
  70. 			 $divEle.offset({
  71. 				 top:50,
  72. 				 left:60
  73. 			 });
  74. 		});
  76. 	})
  77. </script>
  78. </head>
  79. <body>
  81. 	<table align="center">
  82. 		<tr>
  83. 			<td>
  84. 				<div class="border">
  85. 				</div>
  86. 			</td>
  88. 			<td>
  89. 				<div class="btn">
  90. 					<input type="button" value="addClass()" id="btn01"/>
  91. 					<input type="button" value="removeClass()" id="btn02"/>
  92. 					<input type="button" value="toggleClass()" id="btn03"/>
  93. 					<input type="button" value="offset()" id="btn04"/>
  94. 				</div>
  95. 			</td>
  96. 		</tr>
  97. 	</table>
  99. 	<br /> <br />
  101. 	<br /> <br />
  102. </body>
  103. </html>

六、jQuery动画

基本动画：

  • show() 将隐藏的元素显示
  • hide() 将可见的元素隐藏
  • toggle() 可见就隐藏，不可见就显示。

以上动画方法都可以添加参数：

  • 第一个参数是动画 执行的时长，以毫秒为单位
  • 第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画：

  • fadeIn() 淡入（慢慢可见）
  • fadeOut() 淡出（慢慢消失）
  • fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
  • fadeToggle() 淡入/淡出 切换

1. CSS_动画 品牌展示

需求：

  1. 点击按钮的时候，隐藏和显示卡西欧之后的品牌。
  2. 当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。
  3. 当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         body {
  13.             font-size: 12px;
  14.             text-align: center;
  15.         }
  17.         a {
  18.             color: #04D;
  19.             text-decoration: none;
  20.         }
  22.         a:hover {
  23.             color: #F50;
  24.             text-decoration: underline;
  25.         }
  27.         .SubCategoryBox {
  28.             width: 600px;
  29.             margin: 0 auto;
  30.             text-align: center;
  31.             margin-top: 40px;
  32.         }
  34.         .SubCategoryBox ul {
  35.             list-style: none;
  36.         }
  38.         .SubCategoryBox ul li {
  39.             display: block;
  40.             float: left;
  41.             width: 200px;
  42.             line-height: 20px;
  43.         }
  45.         .showmore , .showless{
  46.             clear: both;
  47.             text-align: center;
  48.             padding-top: 10px;
  49.         }
  51.         .showmore a , .showless a{
  52.             display: block;
  53.             width: 120px;
  54.             margin: 0 auto;
  55.             line-height: 24px;
  56.             border: 1px solid #AAA;
  57.         }
  59.         .showmore a span {
  60.             padding-left: 15px;
  61.             background: url(img/down.gif) no-repeat 0 0;
  62.         }
  64.         .showless a span {
  65.             padding-left: 15px;
  66.             background: url(img/up.gif) no-repeat 0 0;
  67.         }
  69.         .promoted a {
  70.             color: #F50;
  71.         }
  72.     </style>
  74.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  76.     <script type="text/javascript">
  78.         $(function () {
  80.             // 1. 初始状态
  81.             var categoty = $("li:gt(5):not(:last)");
  82.             categoty.hide();
  84.             var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')");
  86.             // 2. 给按钮绑定单击事件
  87.             $(".showmore a").click(function () {
  88.                 // 3. 显示或隐藏
  89.                 // 4. 判断当前的品牌是否可见
  90.                 if (categoty.is(":hidden")) {
  91.                     categoty.show();
  93.                     $(".showmore a span").text("显示精简品牌")
  94.                         .css("background","url(img/up.gif) no-repeat 0 0");
  95.                     // 加高亮
  96.                     $promoptedCategory.addClass("promoted");
  97.                 }else {
  98.                     categoty.hide();
  100.                     $(".showmore a span").text("显示全部品牌")
  101.                         .css("background","url(img/down.gif) no-repeat 0 0");
  103.                     $promoptedCategory.removeClass("promoted");
  105.                 }
  107.                 return false;
  108.             });
  110.         });
  111.     </script>
  113. </head>
  114. <body>
  115. <div class="SubCategoryBox">
  116.     <ul>
  117.         <li><a href="#">佳能</a><i>(30440) </i></li>
  118.         <li><a href="#">索尼</a><i>(27220) </i></li>
  119.         <li><a href="#">三星</a><i>(20808) </i></li>
  120.         <li><a href="#">尼康</a><i>(17821) </i></li>
  121.         <li><a href="#">松下</a><i>(12289) </i></li>
  122.         <li><a href="#">卡西欧</a><i>(8242) </i></li>
  123.         <li><a href="#">富士</a><i>(14894) </i></li>
  124.         <li><a href="#">柯达</a><i>(9520) </i></li>
  125.         <li><a href="#">宾得</a><i>(2195) </i></li>
  126.         <li><a href="#">理光</a><i>(4114) </i></li>
  127.         <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
  128.         <li><a href="#">明基</a><i>(1466) </i></li>
  129.         <li><a href="#">爱国者</a><i>(3091) </i></li>
  130.         <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
  131.     </ul>
  132.     <div class="showmore">
  133.         <a href="more.html"><span>显示全部品牌</span></a>
  134.     </div>
  135. </div>
  136. </body>
  137. </html>

七、jQuery事件操作

1. $(function(){}); 和 window.onload=function(){} 的区别 ？

他们分别是在什么时候触发？

  • jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行
  • 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成

他们触发的顺序？

  1. jQuery 页面加载完成之后先执行
  2. 原生 js 的页面加载完成之后

他们执行的次数？

  1. 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数
  2. jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行

2. jQuery 中其他的事件处理方法

  • click() 它可以绑定单击事件，以及触发单击事件 mouseover() 鼠标移入事件
  • mouseout() 鼠标移出事件
  • bind() 可以给元素一次性绑定一个或多个事件
  • one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
  • unbind() 跟 bind 方法相反的操作，解除事件的绑定
  • live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效

3. 事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去 响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，returnfalse; 可以阻止事件的冒泡传递。

4. javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function(event) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象

  1. // 1. 原生javascript获取事件对象
  2. window.onload = function () {
  3. 	document.getElementById("areaDiv").onclick = function (event) {
  4. 		console.log(event);
  5. 	}
  6. } 
  8. // 2. jQuery代码获取事件对象
  9. $(function () {
  10. 	$("#areaDiv").click(function (event) {
  11. 		console.log(event);
  12. 	});
  13. });
  15. // 3. 使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
  16. $("#areaDiv").bind("mouseover mouseout",function (event) {
  17. 	if (event.type == "mouseover") {
  18. 		console.log("鼠标移入");
  19. 	} else if (event.type == "mouseout") {
  20. 		console.log("鼠标移出");
  21. 	}
  22. });

5. 练习 图片跟随

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         body {
  8.             text-align: center;
  9.         }
  10.         #small {
  11.             margin-top: 150px;
  12.         }
  13.         #showBig {
  14.             position: absolute;
  15.             display: none;
  16.         }
  17.     </style>
  19.     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  20.     <script type="text/javascript">
  21.         $(function () {
  22.            $("#small").bind("mouseover mouseout mousemove",function (event) {
  23.               if (event.type == "mouseover"){
  24.                   $("#showBig").show();
  25.               }  else if(event.type == "mousemove"){
  26.                   console.log(event);
  27.                   $("#showBig").offset({
  28.                      left : event.pageX + 10,
  29.                      top: event.pageY + 10
  30.                   });
  31.               } else if(event.type == "mouseout"){
  32.                   $("#showBig").hide();
  33.               }
  34.            });
  36.         });
  38.     </script>
  40. </head>
  41. <body>
  42.     <img id="small" src="img/small.jpg"/>
  44.     <div id="showBig">
  45.         <img src="img/big.jpg">
  46.     </div>
  47. </body>
  48. </html>

Java Web(2)-jQuery下的更多相关文章

  1. Java Web(2)-jQuery上

    一.jQuery初体验 使用jQuery给一个按钮绑定单击事件 <!DOCTYPE html> <html lang="en"> <head> ...

  2. 读取普通java web项目下的WEB-INF目录下的配置文件（application.xml,xx.properties等配置文件）

    一.在Java web工程WEB-INF下创建weixin.properties属性文件 weixin.properties属性文件里内容如下: 二.创建PropertiesUtils.java测试类 ...

  3. 搭建Windows下Java Web开发环境

      概要 1．SSH开发相关软件及开发包下载2．软件安装及相关设置3．最简单的Web程序 1.软件下载 在D盘建一个目录JavaTools,用来存放下载的软件和开发包.(本教程将使用D盘,你也可以使用 ...

  4. 在MyEclipse下创建Java Web项目 入门（图文并茂）经典教程

    http://jijiaa12345.iteye.com/blog/1739754 在MyEclipse下创建Java Web项目 入门(图文并茂)经典教程 本文是一篇在Myeclipse下构建Jav ...

  5. 转：在MyEclipse下创建Java Web项目 入门（图文并茂）经典教程

    本文是一篇在Myeclipse下构建Java Web项目的初级教程.图文并茂,非常详细.所用的Myeclipse版本是7.5. 第一步:新建Web Project,如下图. 第二步,在弹出的窗口填写下 ...

  6. 一个Web Project引用多个Java Project在Eclipse下的配置--转载

    项目结构: 项目由一个Web Project和多个Java Project构成,Web Project需要引用其它Java Project的类和Jar包.开发时用Eclipse3.5和Tomcat调试 ...

  7. Mac下Intellij IDea发布Java Web项目详解五 开始测试

    测试前准备工作目录 Mac下Intellij IDea发布Web项目详解一 Mac下Intellij IDea发布Java Web项目(适合第一次配置Tomcat的家伙们)详解二 Mac下Intell ...

  8. 在linux下用tomcat部署java web项目的过程与注意事项(转)

    一.安装JDK到http://www.oracle.com/technetwork/java/javase/downloads/index.html下载Java SE 6 Update 27根据操作系 ...

  9. 在linux下用tomcat部署java web项目的过程与注意事项

    在linux下用tomcat部署java web项目的过程与注意事项 一.安装JDK 到http://www.oracle.com/technetwork/java/javase/downloads/ ...

随机推荐

  1. ubuntu无法安装vim、tree等解决办法

    rm /etc/apt/sources.list.d/* 删除该目录下所有文件

  2. .net core docker容器编排部署（linux）

    环境准备 需要一个linux操作系统:我这里用的是ubuntu 18.04,安装步骤就不说了,网上很多教程,当然也可以私信我. 既然需要用到docker,那么就安装个docker,apt instal ...

  3. [区间+线性dp]数字游戏

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共\(n\)个),你要按顺 ...

  4. DevOps研发模式下「产品质量度量」方案实践

    在当今互联网环境下,需求变更越来越快,交付周期却越来越短, 怎么判断一个系统是否测试充分? 产品质量满足什么样的条件才能投产? 如何判断测试工作.研发团队工作的效率是高还是低? 这些问题不能靠感觉.拍 ...

  5. Linux查看docker容器日志

    docker logs -f 容器名或ID | grep fail | more grep fail:过滤包含fail的日志内容

  6. 如何修复 WordPress 中的 HTTP 错误

    如何修复我们会向你介绍,如何在 Linux VPS 上修复 WordPress 中的 HTTP 错误. 下面列出了 WordPress 用户遇到的最常见的 HTTP 错误,我们的建议侧重于如何发现错误 ...

  7. 洛谷P3295 [SCOI2016]萌萌哒 题解

    洛谷P3295 [SCOI2016]萌萌哒 题目描述 公式粘过来就乱了,还是去洛谷看题吧 分析 如果暴力解决的话就是使用并查集把位数相同的数位并在一起.比如区间[1,2]和区间[3,4]的数字完全相同 ...

  8. IDEA怎么设置类的注释模板和方法注释模板

    文件头注释模板 File | Settings | Editor | File and Code Templates /** * @Author your name * @DateTime ${YEA ...

  9. day08总结

    集合常用操作# 一.关系运算firends1 = {"zero", "kevin", "jason", "egon"}f ...

  10. scala 数据结构（三）：元组Tuple

    1 元组Tuple-元组的基本使用 基本介绍 元组也是可以理解为一个容器,可以存放各种相同或不同类型的数据. 说的简单点,就是将多个无关的数据封装为一个整体,称为元组, 最多的特点灵活,对数据没有过多 ...