山丘i资料

本文主要介绍山丘i资料 方法和在新技术下所面对的“挑战”,方便大家深入理解山丘i资料 过程。本文也将分享山丘i资料 所遇到的问题和应对策略,怎么解决怎么做的问题。
通过深入本文可以理解代码原理,进行代码文档的下载,也可以查看相应 Demo 部署效果。

一、jQuery的属性操作

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

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>     <script>          $(function () {         /*             // 批量操作单选             $(":radio").val(["radio2"]);             // 批量操作帅选框的选中             $(":checkbox").val(["checkbox1","checkbox2"]);             // 批量多选下拉的选中状态             $("#multiple").val(["mul1","mul2"]);             // 单选的下拉框选中状态             $("#single").val(["sin2"]);              */             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","mul1","mul2","sin2"]);          });      </script>   </head> <body> 单选: <input name="radio" type="radio" value="radio1"/>radio1 <input name="radio" type="radio" value="radio2"/>radio2 <br/> 多选: <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1 <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2 <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3 <br/>  下拉多选 : <select id="multiple" multiple="multiple" size="4">     <option value="mul1">mul1</option>     <option value="mul2">mul2</option>     <option value="mul3">mul3</option>     <option value="mul4">mul4</option> </select> <br/> 下拉单选 : <select id="single">     <option value="sin1">sin1</option>     <option value="sin2">sin2</option>     <option value="sin3">sin3</option> </select>  </body> </html> 

二、jQuery练习一

1. 全选、全不选、反选

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>     <script>         $(function () {             // 1. 给全选绑定事件             $("#checkedAllBtn").click(function () {                 $(":checkbox").prop("checked",true);             });             // 2. 给全不选绑定事件             $("#checkedNoBtn").click(function () {                 $(":checkbox").prop("checked",false);             });              // 3. 给反选绑定事件             $("#checkedRevBtn").click(function () {                 // 在each遍历的function函数中 ,有一个this对象。这个this对象是当前正在遍历到的dom对象                 $(":checkbox[name='items']").each(function () {                     this.checked = !this.checked;                 });             });              // 4. 检测是否选满             // 先获取总的个数             var allCount = $(":checkbox[name='items']").length;             // 再获取选中的个数             var checkedCount = $(":checkbox[name='items']:checked").length;             // if (allCount == checkedCount){             //     $("#checkbox").prop("checked",true);             // } else{             //     $("#checkbox").prop("checked",false);             // }              $("#checkbox").prop("checked",allCount == checkedCount);               // 5. 提交事件             $("#sendBtn").click(function () {                 // 获取选中的球类                 $(":checkbox[name='items']:checked").each(function () {                     alert(this.value);                 });             });                        });      </script>  </head> <body>      <form method="post" action="">         你爱好的运动是?         <input type="checkbox" id="checkAll"> 全选/全部选          <br>          <input type="checkbox" name="items" value="足球">足球         <input type="checkbox" name="items" value="篮球">篮球         <input type="checkbox" name="items" value="羽毛球">羽毛球         <input type="checkbox" name="items" value="乒乓球">乒乓球          <br>          <input type="button" id="checkedAllBtn" value="全 选" />         <input type="button" id="checkedNoBtn" value="全不选" />         <input type="button" id="checkedRevBtn" value="反 选" />         <input type="button" id="sendBtn" value="提 交" />      </form> </body> </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. 从左到右,从右到左

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style type="text/css">         select{             width: 100px;             height: 140px;         }          div{             width: 130px;             float: left;             text-align: center;         }     </style>        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>      <script type="text/javascript">          $(function () {             // 第一个按钮,选中添加到右边             $("button:eq(0)").click(function () {                 $("select:eq(0) option:selected").appendTo($("select:eq(1)"));             });              // 第二个按钮,全部添加到右边             $("button:eq(1)").click(function () {                 $("select:eq(0) option").appendTo($("select:eq(1)"));             });              // 第三个按钮,选中删除到左边             $("button:eq(2)").click(function () {                 $("select:eq(1) option:selected").appendTo($("select:eq(0)"));             });              // 第四个按钮,全部删除到左边             $("button:eq(3)").click(function () {                 $("select:eq(1) option").appendTo($("select:eq(0)"));             });           });      </script> </head> <body> <div id="left">     <select multiple="multiple" name="sel01">         <option value="opt01">选项 1</option>         <option value="opt02">选项 2</option>         <option value="opt03">选项 3</option>         <option value="opt04">选项 4</option>         <option value="opt05">选项 5</option>         <option value="opt06">选项 6</option>         <option value="opt07">选项 7</option>         <option value="opt08">选项 8</option>     </select>     <button>选中添加到右边</button>     <button>全部添加到右边</button> </div>  <div id="rigth">     <select multiple="multiple" name="sel02"> </select>     <button>选中删除到左边</button>     <button>全部删除到左边</button> </div>  </body> </html> 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <link rel="stylesheet" type="text/css" href="style/css.css">     <script type="text/javascript" src="script/jquery-1.7.2.js"></script>      <script type="text/javascript">          $(function () {              // 创建一个用于复用的删除的函数             var deleteFun = function () {                  alert("删除 操作 的function : " + this);                 //在事件响应的function函数中,有一个this对象。这个this对象是当前正在响应事件的dom对象                 var $trObj = $(this).parent().parent();                  var name = $trObj.find("td:first").text();                  /**                  * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么,它就提示什么                  * 当用户点击了确定,就返回true。当用户点击了取消,就返回false                  */                 if( confirm("你确定要删除[" + name +  "]吗?") ){                     $trObj.remove();                 }                  return false; //可以阻止 元素的默认行为。             };               // 给submit绑定事件             $("#addEmpButton").click(function () {                 // 获取输入框中的内容                 var name = $("#empName").val();                 var email = $("#email").val();                 var salary = $("#salary").val();                  // 创建一个行标签对象,添加到显示数据的表格中                 var $trObj = $("<tr>" + "<td>"+ name +"</td>" +                     "<td>"+ email +"</td>" +                     "<td>"+ salary +"</td>" +                     "<td><a href="deleteEmp?id=002">Delete</a></td>"+                         "</tr>") ;                  // 添加到表格中                 $trObj.appendTo($("#employeeTable"));                  // 给添加的行的a标签绑定事件                 $trObj.find("a").click(deleteFun);              });              // 给删除的a标签绑定单击事件             $("a").click(deleteFun);         });      </script> </head> <body>     <table id="employeeTable">         <tr>             <th>Name</th>             <th>Email</th>             <th>Salary</th>             <th>&nbsp;</th>         </tr>         <tr>             <td>Tom</td>             <td>tom@tom.com</td>             <td>5000</td>             <td><a href="deleteEmp?id=001">Delete</a></td>         </tr>         <tr>             <td>Jerry</td>             <td>jerry@sohu.com</td>             <td>8000</td>             <td><a href="deleteEmp?id=002">Delete</a></td>         </tr>         <tr>             <td>Bob</td>             <td>bob@tom.com</td>             <td>10000</td>             <td><a href="deleteEmp?id=003">Delete</a></td>         </tr>     </table>      <div id="formDiv">         <h4>添加新员工</h4>         <table>             <tr>                 <td class="word">name:</td>                 <td class="inp"><input type="text" name="empName" id="empName"/></td>             </tr>             <tr>                 <td class="word">email:</td>                 <td class="inp"><input type="text" name="email" id="email"/></td>             </tr>             <tr>                 <td class="word">salary:</td>                 <td class="inp"><input type="text" name="salary" id="salary"/></td>             </tr>             <tr>                 <td colspan="2" align="center">                     <button id="addEmpButton" value="abc"> Submit</button>                 </td>             </tr>         </table>     </div>  </body> </html> 

五、CSS 样式操作

  • addClass() 添加样式
  • removeClass() 删除样式
  • toggleClass() 有就删除,没有就添加样式
  • offset() 获取和设置元素的坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> 	 	div{ 		width:100px; 		height:260px; 	} 	 	div.border{ 		border: 2px white solid; 	} 	 	div.redDiv{ 		background-color: red; 	} 	 	div.blackDiv{ 		border: 5px blue solid; 	} </style>  <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> 	  	$(function(){ 		/* CSS css(name|pro|[,val|fn])       读写匹配元素的样式属性。  								a.css('color')取出a元素的color 								a.css('color',"red")设置a元素的color为red  CSS 类  addClass(class|fn) 			为元素添加一个class值;<div class="mini big"> removeClass([class|fn]) 	删除元素的class值;传递一个具体的class值,就会删除具体的某个class 							a.removeClass():移除所有的class值  **/ 		 		var $divEle = $('div:first'); 		 		$('#btn01').click(function(){ 			//addClass() - 向被选元素添加一个或多个类 			$divEle.addClass("redDiv blackDiv"); 		}); 		 		$('#btn02').click(function(){ 			//removeClass() - 从被选元素删除一个或多个类  			$divEle.removeClass() 		});  		 		$('#btn03').click(function(){ 			//toggleClass() - 对被选元素进行添加/删除类的切换操作  			//切换就是如果具有该类那么删除,如果没有那么添加上 			$divEle.toggleClass("redDiv"); 		}); 		 		$('#btn04').click(function(){ 			//offset() - 返回第一个匹配元素相对于文档的位置。 			var os = $divEle.offset(); 			//注意通过offset获取到的是一个对象,这个对象有两个属性top表示顶边距,left表示左边距 			alert("顶边距:"+os.top+" 左边距:"+os.left); 			 			//调用offset设置元素位置时,也需要传递一个js对象,对象有两个属性top和left 			//offset({ top: 10, left: 30 }); 			 $divEle.offset({ 				 top:50, 				 left:60 			 });  		}); 		 	}) </script> </head> <body>  	<table align="center"> 		<tr> 			<td> 				<div class="border"> 				</div> 			</td> 			 			<td> 				<div class="btn"> 					<input type="button" value="addClass()" id="btn01"/> 					<input type="button" value="removeClass()" id="btn02"/> 					<input type="button" value="toggleClass()" id="btn03"/> 					<input type="button" value="offset()" id="btn04"/> 				</div> 			</td> 		</tr> 	</table> 	 	<br /> <br />  	<br /> <br /> </body> </html> 

六、jQuery动画

基本动画:

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

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

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

淡入淡出动画:

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

1. CSS_动画 品牌展示

需求:

  1. 点击按钮的时候,隐藏和显示卡西欧之后的品牌。
  2. 当显示全部内容的时候,按钮文本为“显示精简品牌” 然后,小三角形向上。所有品牌产品为默认颜色。
  3. 当只显示精简品牌的时候,要隐藏卡西欧之后的品牌,按钮文本为“显示全部品牌” 然后小三形向下。并且把 佳能,尼康的品牌颜色改为红色(给 li 标签添加 promoted 样式即可)
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type="text/css">         * {             margin: 0;             padding: 0;         }          body {             font-size: 12px;             text-align: center;         }          a {             color: #04D;             text-decoration: none;         }          a:hover {             color: #F50;             text-decoration: underline;         }          .SubCategoryBox {             width: 600px;             margin: 0 auto;             text-align: center;             margin-top: 40px;         }          .SubCategoryBox ul {             list-style: none;         }          .SubCategoryBox ul li {             display: block;             float: left;             width: 200px;             line-height: 20px;         }          .showmore , .showless{             clear: both;             text-align: center;             padding-top: 10px;         }          .showmore a , .showless a{             display: block;             width: 120px;             margin: 0 auto;             line-height: 24px;             border: 1px solid #AAA;         }          .showmore a span {             padding-left: 15px;             background: url(img/down.gif) no-repeat 0 0;         }          .showless a span {             padding-left: 15px;             background: url(img/up.gif) no-repeat 0 0;         }          .promoted a {             color: #F50;         }     </style>      <script type="text/javascript" src="script/jquery-1.7.2.js"></script>      <script type="text/javascript">          $(function () {              // 1. 初始状态             var categoty = $("li:gt(5):not(:last)");             categoty.hide();              var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')");              // 2. 给按钮绑定单击事件             $(".showmore a").click(function () {                 // 3. 显示或隐藏                 // 4. 判断当前的品牌是否可见                 if (categoty.is(":hidden")) {                     categoty.show();                                          $(".showmore a span").text("显示精简品牌")                         .css("background","url(img/up.gif) no-repeat 0 0");                     // 加高亮                     $promoptedCategory.addClass("promoted");                 }else {                     categoty.hide();                      $(".showmore a span").text("显示全部品牌")                         .css("background","url(img/down.gif) no-repeat 0 0");                      $promoptedCategory.removeClass("promoted");                  }                  return false;             });          });     </script>   </head> <body> <div class="SubCategoryBox">     <ul>         <li><a href="#">佳能</a><i>(30440) </i></li>         <li><a href="#">索尼</a><i>(27220) </i></li>         <li><a href="#">三星</a><i>(20808) </i></li>         <li><a href="#">尼康</a><i>(17821) </i></li>         <li><a href="#">松下</a><i>(12289) </i></li>         <li><a href="#">卡西欧</a><i>(8242) </i></li>         <li><a href="#">富士</a><i>(14894) </i></li>         <li><a href="#">柯达</a><i>(9520) </i></li>         <li><a href="#">宾得</a><i>(2195) </i></li>         <li><a href="#">理光</a><i>(4114) </i></li>         <li><a href="#">奥林巴斯</a><i>(12205) </i></li>         <li><a href="#">明基</a><i>(1466) </i></li>         <li><a href="#">爱国者</a><i>(3091) </i></li>         <li><a href="#">其它品牌相机</a><i>(7275) </i></li>     </ul>     <div class="showmore">         <a href="more.html"><span>显示全部品牌</span></a>     </div> </div> </body> </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. 原生javascript获取事件对象 window.onload = function () {  	document.getElementById("areaDiv").onclick = function (event) {  		console.log(event);  	}	 }   // 2. jQuery代码获取事件对象 $(function () {  	$("#areaDiv").click(function (event) {  		console.log(event);  	});  });  // 3. 使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件 $("#areaDiv").bind("mouseover mouseout",function (event) {  	if (event.type == "mouseover") {  		console.log("鼠标移入");  	} else if (event.type == "mouseout") {  		console.log("鼠标移出");  	}  }); 

5. 练习 图片跟随

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type="text/css">         body {             text-align: center;         }         #small {             margin-top: 150px;         }         #showBig {             position: absolute;             display: none;         }     </style>      <script type="text/javascript" src="script/jquery-1.7.2.js"></script>     <script type="text/javascript">         $(function () {            $("#small").bind("mouseover mouseout mousemove",function (event) {               if (event.type == "mouseover"){                   $("#showBig").show();               }  else if(event.type == "mousemove"){                   console.log(event);                   $("#showBig").offset({                      left : event.pageX + 10,                      top: event.pageY + 10                   });               } else if(event.type == "mouseout"){                   $("#showBig").hide();               }            });          });      </script>  </head> <body>     <img id="small" src="img/small.jpg"/>      <div id="showBig">         <img src="img/big.jpg">     </div> </body> </html> 

山丘i资料部分资料来自网络,侵权毕设源码联系删除

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 山丘i资料

提供最优质的资源集合

立即查看 了解详情