jQuery技術例項(物件訪問,屬性,CSS 類,核心函式)
阿新 • • 發佈：2019-02-02
隨著對jQuery的學習的慢慢深入，今天寫點jQuery中的常用方法和屬性
one.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery技術例項</title> <style type="text/css"> div { width: 150px; height: 100px; margin: 5px; border: 2px solid blue; } </style> <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script> <script type="text/javascript"> /* jQuery的呼叫框架: $(function(){ ...........//在內部寫操作程式碼.. }); */ $(function(){ //1. 設定css樣式 var div=$("div:first"); div.css({"border":"1px solid red","width":"200px","heigth":"100px","background":"#00ff00"}); //$("div:eq(1)").css({"border":"1px solid blue"}).html("hello,你好!").css({"width":"100px","height":"50px"}); $("div").eq(1).css({"border":"1px solid gray"}).html("你好啊").css({"width":"100px","height":"50px"}); //2. 設定或讀取頁面元素的內容 ----html() text() val() 如果是空參則是讀取文字內容，否則就是設定內容 $("#xx").text("<input type='text' value='text' />");//設定的是一個純文字即引數內容 $("#yy").html("<input type='text' value='html'/>");//設定的是一個input元件(引數資訊被解析) //alert($("#xx").text); //alert($("#yy").html); //3. 設定或讀取元素屬性----attr() ,prop() ----如果只有一個引數，則是讀取屬性，如果是兩個引數則是設定屬性 //alert($("#name").attr("value")); //alert($("#name").attr("type")); //alert($("#name").prop("type")); //alert($("#name").prop("value")); $("#btn1").click(function(){ //$("#name").attr("type","button"); $("#name").prop("type","button"); //$("#name").attr("disabled","disabled"); $("#name").prop("disabled","disabled"); $("#name").prop("a","123"); //alert($("#name").attr("a"));//undefined //alert($("#name").prop("a"));//123 //$("#name").attr("b","abc"); //alert($("#name").attr("b"));//abc //alert($("#name").prop("b"));//undefined }); $("#btn2").click(function(){ $("#name").removeAttr("disabled");//移除屬性，都可以刪除 //$("#name").removeProp("disabled");//只能移除prop()建立的屬性，而且window或dom內建的物件，不讓刪除 alert($("#name").prop("a")); $("#name").removeProp("a");//只能移除prop()建立的屬性 alert($("#name").prop("a")); }); }); </script> </head> <body> <button id="btn1">--按鈕1--</button><br> <button id="btn2">--按鈕2--</button><br> <div>11111111</div><br> <div>22222222222222</div><br> <div id="xx"></div><br> <div id="yy"></div><br> <input type="text" id="name" value="Hello jQuery!"/> </body> </html>
按下按鈕1觸發事件將type為text改為button，同時設為不可用
tow.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery技術例項</title> <style type="text/css"> div { width: 150px; height: 100px; margin: 5px; border: 2px solid blue; } .bg{ background: blue; } .bg0{ background: gray; } .bg1{ background: green; } .bg2{ background: red; } </style> <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ /*雖然可以實現兩種樣式的切換，但是太底層了 var boo=$("#d1").hasClass("bg"); if(boo){ $("#d1").removeClass("bg"); }else{ $("#d1").addClass("bg"); } */ $("#d1").toggleClass("bg");//如果存在（不存在）就刪除（新增）一個類。 }); $("#btn2").click(function(){ $("#d1").toggleClass(function(){ var r=Math.random();//[0-1]之間的小數 r*=3; r=parseInt(r); return "bg"+r;//由內部回撥函式的返回值來指定樣式 }); }); }); </script> </head> <body> <button id="btn1">--兩種樣式的切換--</button><br> <button id="btn2">--三種樣式的切換--</button><br> <div id="d1">11111111</div><br> </body> </html>
利用自己寫底層或者jQuery提供的方法來事件樣式的切換
three.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery技術例項</title> <style type="text/css"> div { width: 150px; height: 100px; margin: 5px; border: 2px solid blue; } .text{ background: red; } </style> <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("img").each(function(i){//each 以每一個匹配的元素作為上下文來執行一個函式。 var fileName=(i+1)+".jpg"; //this.src="<c:url value='/imgs/"+fileName+"' />";//dom方式 $(this).attr("src","<c:url value='/imgs/"+fileName+"' />");//jquery方式 }); }); //each(callback) $("#btn2").click(function(){ //遍歷一個數組 var ar=[22,9,36,15]; $.each(ar,function(idx,val){ alert(idx+","+val);//前一個是陣列中的序號，第二個是值 }); }); $("#btn3").click(function(){ $("div:has(p)").addClass("text");//匹配含有選擇器所匹配的元素的元素 }); }); </script> </head> <body> <button id="btn1">--each技術--</button><br> <button id="btn2">--each2--</button><br> <button id="btn3">--btn3--</button><br> <img alt="" src="" /> <img alt="" src="" /> <img alt="" src="" /> <img alt="" src="" /> <div ><p>11111111</p></div><br> <div >222222</div><br> </body> </html>
利用each()方法來實現for迴圈，將圖片賦上src地址，同時可遍歷陣列
four.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技術例項</title>
<style type="text/css">
div {
width: 250px;
height: 200px;
margin: 5px;
border: 2px solid blue;
}
.text{
background: red;
}
</style>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert($("td:parent").html);
});
//jQuery核心函式3：jQuery(html,[owerDoc]) ----建立物件
var i=1;
$("#div1").click(function(){
var strBtn="<button>演示按鈕"+i+"</button>";
//$(this).append(strBtn);//加在後面
//$(strBtn).appendTo($(this));//$(strBtn)的功能就是用html格式串創建出一個jQuery物件
//$(this).prepend(strBtn);//加在前面
$(strBtn).prependTo($(this));//$(strBtn)的功能就是用html格式串創建出一個jQuery物件
i++;
});
});
</script>
</head>
<body>
<button id="btn1">--btn1--</button><br>
<div id="div1">演示新增</div><br>
<table>
<tr><td>value1</td><td></td></tr>
<tr><td>value2</td><td></td></tr>
</table>
</body>
</html>
利用jQuery第三個核心函式，給一個html格式串可將其創建出一個jQuery物件
five.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技術例項</title>
<style type="text/css">
div {
width: 250px;
height: 200px;
margin: 5px;
border: 2px solid blue;
}
table{
border: 2px solid blue;
background: red;
width: 250px;
height: 200px;
}
td{
border: 2px solid blue;
}
</style>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<script type="text/javascript">
$(function(){
$("#tb1 td").dblclick(function(){//雙擊事件
var text=$(this).text();//把原單元格中的內容讀取出來
//利用jQuery核心函式3，生成一個編輯框
var input=$("<input class='text' type='text' value='"+text+"' />");//注：input要是jQuery物件，這樣在下面才能呼叫focus()、blur()等jQuery中的函式
$(this).html(input);
input.focus();//獲取游標焦點
input.blur(function(){
var val=$(this).val();
$(this).parent().html(val);
});
event.stopPropagation();//阻止事件冒泡
});
});
</script>
</head>
<body>
<div id="div1">演示新增</div><br>
<table id="tb1">
<tr><td>Tom</td><td>18</td></tr>
<tr><td>李二</td><td>20</td></tr>
</table>
</body>
</html>
一個小小的應用：有表格，點選表格中的內容可以編輯，點選表格外可將編輯後的內容儲存
