Web前端開發JQuery框架(5)
JQuery 是一個兼容多瀏覽器支持的JavaScript庫,其核心理念是write less,do more(寫得更少,作得更多),它是輕量級的js庫,兼容CSS3還兼容各類瀏覽器,須要注意的是後續版本將再也不支持IE6/7/8瀏覽器,jQuery使用戶能更方便地處理HTML、events、實現動畫效果,而且方便地爲網站提供AJAX交互,jQuery還有一個比較大的優點是,它的文檔說明很全,並且各類應用也說得很詳細,同時還有許多成熟的插件可供選擇,jQuery可以使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html裏面插入一堆js來調用命令了,只須要定義id便可,在後續的開發工做中咱們常常會用到JQuery框架,你也可以在各類的網頁結構中發現它的身影.javascript
JQuery 經常使用選擇器
JQuery 選擇器是JQuery框架的基礎,JQuery對事件處理,DOM操做,CSS動畫等都是在選擇器基礎上進行的,JQuery選擇器採用CSS和Xpath選擇符的能力,可以知足用戶在DOM中快速獲取元素或元素組,在JQuery中經過各類選擇器和方法獲取的結果集合實際上都是一個JQuery對象,經過JQuery對象會很是簡單,便可實現對元素的各類操做,這裏咱們介紹幾個最經常使用的選擇器例子.css
ID選擇器: 經過使用簡單的$(#id)標識前綴,實現快速匹配指定ID的元素對象,具體用法以下.html
<body>
<div id="1000"> hello lyshark </div>
<div id="2000"> hello lyshark </div>
<div id="3000"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#2000").css("background","red"); //經過ID號選擇指定元素
var temp = $("#1000").text(); //獲取到文本的內容
document.write("文本內容: " + temp); //打印出這個文本的內容
</script>
</body>
標籤選擇器: 經過使用$("element")標識前綴,匹配頁面中全部P標籤,並設置成紅色.前端
<body>
<div id="1000"> hello lyshark </div>
<p id="2000"> hello p</p>
<div id="3000"> hello lyshark </div>
<p id="4000"> hello p</p>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("p").css("background","red"); //經過p標籤訂位修改全部P標籤
</script>
</body>
類選擇器: 經過使用$("ClassName")標識前綴,匹配頁面中全部class="MyClass"的類屬性.java
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<div class="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass").css("background","green"); //經過.MyClass找到一類屬性並修改
</script>
</body>
通配符選擇器: 經過使用$("body*")標識前綴,匹配頁面中全部開頭是div的標籤,並設置成綠色.jquery
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<h1 class="lyshark"> hello lyshark </h1>
<div class="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("div*").css("background","green"); //修改全部div標籤的屬性
</script>
</body>
組合選擇器: 使用組合選擇器能夠擴大選擇器的選擇範圍,能夠經過逗號分隔符分割多個不一樣的選擇器.編程
<body>
<h1 class="MyClass"> hello lyshark </h1>
<div class="MyClass">
<div id="MyID1">hello MyID1 </div>
<div id="MyID2">hello MyID2 </div>
</div>
<div id="lyshark"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass #MyID1 , h1 , #lyshark").css("background","green");
</script>
</body>
屬性選擇器: 根據元素的屬性及其值做爲過濾條件,來匹配DOM元素,它以中括號做爲分界符.瀏覽器
<body>
<input type="text" name="Text" value="標籤1">
<input type="password" name="Text">
<p id="id1"> hello P </p>
<p id="id2" alex="sb"> hello P </p>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input[type='text']").css("color","red"); //修改input,且類型是text的標籤
$("p[id='id1']").text("修改id1的標題"); //修改標題,是p標籤且id=id1的
$("input[name='Text']").val("修改爲我"); //將標籤中的value屬性修改掉
$("p[alex='sb']").css("background","red"); //也能夠自定義查找標籤
</script>
</body>
後代選擇器: 該選擇器經常使用於批量修改,匹配全部的後代,全部選中的DIV標籤後代都會應用變化.app
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass div").css("background","green"); //修改指定.MyClass下的全部DIV標籤
</script>
</body>
子代選擇器: 子代選擇器經常使用於縮小查詢範圍,在匹配的父元素下,選擇全部匹配的子元素.框架
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="divA">hello div A</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass > .div2").css("background","green"); //修改.MyClass類裏面的,div2的全部子元素
</script>
</body>
相鄰選擇器: 在全部匹配的元素後選擇同級別相鄰元素,以下匹配全部跟在.outer後面的全部P標籤,並設置成紅色.
<body>
<div class="outer">
<p class="outer"> hello p1</p>
<p class="outer"> hello p2</p>
<p class="outer"> hello p3</p>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer + p").css("color","red"); //匹配全部.outer類中,第一個p標籤相鄰的元素.
</script>
</body>
兄弟選擇器: 兄弟選擇器就是在全部匹配的元素後選擇同級的全部元素,以下匹配.outer類後面的全部同級DIV標籤.
<body>
<div class="outer"> hello div1</div>
<div class="outer"> hello div2</div>
<div class="outer"> hello div3</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer~div").css("color","red"); //將屬於outer類中的全部同級DIV設置成紅色.
</script>
</body>
JQuery 元素的操做
文檔對象模型 (Document Object Model,DOM) 是一種W3C標準全部的現代瀏覽器都支持DOM,DOM用於HTML和XML文檔的編程接口,它給文檔提供了一種結構化的表示方法,能夠改變文檔的內容和呈現方式.最爲關心的是,DOM把網頁和腳本以及其餘的編程語言聯繫了起來,DOM屬於瀏覽器,而不是JavaScript語言規範裏的規定的核心內容,下面咱們將使用JQuery函數庫,對網頁屬性進行各類操做,如下是一些經常使用的操做方式,其餘操做方式請自行百度.
◆文檔處理◆
Text(): 該函數經常使用於設置或者是讀取標籤裏面的內容.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").text(); //查找指定的標籤元素內容
document.write("獲取到標籤的內容: " + temp);
$(".MyAge").text("hello world"); //修改指定的標籤元素內容
</script>
</body>
html(): 該函數經常使用於設置或者是讀取標籤內容,可是能夠在設置標籤內容的同時添加格式屬性.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").html(); //查找指定的標籤元素內容
document.write("獲取到標籤的內容: " + temp);
$(".MyAge").html("<b> hell html </b>"); //修改指定的標籤元素內容
</script>
</body>
val(): 用於獲取或者是設置指定標籤的value值.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="標籤1">
<input type="text" name="MyText2" value="標籤2">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText1']").val(); //定位並獲取文本的value選項
document.write("獲取到文本name屬性的值: " + data);
$("input[name='MyText2']").val("lyshark"); //修改文本的value屬性爲lyshark
</script>
</body>
append(): 給指定的標籤添加內容,分別能夠在開頭插入$().prepend,結尾插入$().append等.
<body>
<div class="MyDiv"> hello lyshark ---></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").append("結尾加入"); //在標籤結尾插入新數據
$(".MyDiv").prepend("開頭加入"); //在標籤開頭插入新輸入
$(".MyDiv").prepend("<b> hello </b>"); //開頭插入帶格式的文本
</script>
</body>
appendTo(): 該函數能夠實現將外部的標籤插入到一個塊級標籤裏面,動態添加元素.
<body>
<div class="MyDiv">
<h1 id="Myh1"> hello h1</h1>
</div>
<p> hello p1</p>
<p> hello p2</p>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("p").appendTo("div"); //將p標籤加入到div標籤裏面
$("p").appendTo("div");
$("div").prependTo("h1")
</script>
</body>
empty()/remove()： 使用empty()能夠清空標籤中的內容,remove()用於完全移除標籤.
<body>
<p class="p1"> hello p1</p>
<p class="p2"> hello p2</p>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".p1").empty();
$(".p2").empty(); //清空標籤內的內容.
$(".p2").remove(); //完全移除標籤.
</script>
</body>
before()/after(): 能夠實如今指定標籤的上方(.before)插入內容,或者下(.after)方插入內容.
<body>
<div class="MyDiv">
<div class="div1"> hello div </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv div").before("<h1> before </h1>") //在div上方插入內容
$(".MyDiv div").after("<h1> after </h1>") //在div下方插入內容
</script>
</body>
insertBefore()/insertAfter(): 在每一個DIV標籤前面(insertBefore)插入新標籤,或者在後面(insertAfter)插入.
<body>
<div class="MyDiv"> hello div</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("<span> hello span </span>").insertBefore("div"); //在div前面插入span標籤
$("<h1> hello h1</h1>").insertAfter("div"); //在每一個div標籤後面插入h1
</script>
</body>
replaceWith(): 查找與替換,將全部的類屬性是class=".MyDiv"的標籤替換成粗體的hello div.
<body>
<div class="MyDiv"> hello div1 </div>
<div class="MyDiv"> hello div2 </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").replaceWith("<b> hello div </b>"); //將全部div標籤替換成粗體的hello div
</script>
</body>
clone: 克隆並追加一個DIV標籤,追加到body頁面中.
<body>
<div class="MyDiv"> hello div1 </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("body").append($("div").clone()); //克隆並追加到body中.
$("body").append($("div").clone());
</script>
</body>
◆屬性操做◆
attr(): 可實現獲取和設置,指定標籤的屬性信息.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="標籤1">
<input type="text" name="MyText2" value="標籤2">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var names = $("input[name='MyText2']").attr("name"); //獲取MyText2標籤的name字段內容
var types = $("input[type='text']").attr("type"); //獲取Type標籤的type字段內容
document.write("標籤name字段內容: " + names + "<br>");
document.write("標籤type字段內容: " + types + "<br>");
$("input[name='MyText2']").attr("name","lyshark"); //將MyText2標籤的name字段修改爲lyshark
</script>
</body>
removeAttr(): 找到指定的字段並能夠自定義移除相關字段.
<body>
<input type="text" name="MyText" value="標籤1">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText']").attr("value"); //找到value字段的內容
document.write("當前value值: " + data);
$("input[name='MyText']").removeAttr("value"); //移除value字段的內容
</script>
</body>
prop(): 設置標籤的屬性,經常使用於設置單選框和複選框.
<body>
<input type="checkbox" name="check">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='check']").prop("checked"); //獲取checkbox默認狀態
document.write("選擇框默認狀態:" + data)
$("input[name='check']").prop("checked",true); //設置checkbox爲選中狀態
$("input[name='check']").prop("disabled",true); //設置checkbox爲禁用狀態
</script>
</body>
removeprop： 刪除由prop設置的屬性集,(不明白)
<body>
<input type="checkbox" name="check">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("input[name='check']").prop("disabled",true);
$("input[name='check']").removeProp("");
</script>
</body>
addClass(): 動態的將一個CSS屬性添加到一些標籤中.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<script type="text/javascript">
$(".MyClass").addClass("mode"); //對全部的MyClass標籤,添加mode的屬性.
</script>
</body>
removeClass: 動態的將一個CSS屬性在標籤中刪除.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").removeClass("mode"); //刪除全部div標籤中的mode類屬性.
</script>
</body>
toggleClass: 實現了動態的切換類的樣式.使標籤不可見.
<style type="text/css">
.show{
background-color: #17a2b8;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").toggleClass("hidden"); //切換成隱藏屬性
</script>
</body>
hasClass(): 該函數用來判斷當前的樣式,存在返回真,不存在返回假.
<style type="text/css">
.mode{
background: red;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("div").hasClass("mode");
document.write(data)
</script>
</body>
◆樣式操做◆
修改CSS屬性:
<body>
<div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div>
<div class="MyClass2" style="font-size: 30px"> hello lyshark</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css("background-color","red"); //修改MyClass1的背景屬性
$(".MyClass2").css("font-size","10px"); //修改MyClass2的字體大小
</script>
</body>
追加CSS屬性:
<body>
<div class="MyClass1"> hello lyshark</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css({"background-color":"red","font-size":"20px"});
</script>
</body>
JQuery 經常使用篩選器
jQuery 提供了兩種選擇文檔元素的方式：選擇器和篩選器,選擇器主要模仿CSS和xPath語法,提供高效、準確匹配元素的通常方法和用法,而篩選器是創建在選擇器基礎上進行的二次篩選,選擇器是符合必定規律的字符串組合,而篩選器就是一系列簡單、實用的JQuery方法,在 JQuery 框架中,篩選器經過Sizzle.filter子類來實現,它包含過濾、杳找和串聯,這裏咱們只舉幾個經常使用例子.
◆過濾篩選器◆
first()/last(): first()篩選出全部li標籤中第一個標籤,last()篩選出全部標籤中的最後一個標籤.
<body>
<div class="MyClass">
<ul>
<li>首頁</li>
<li>主機</li>
<li>系統</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:first").text(); //找出第一個標籤的標籤內容
document.write("第一個標籤內容是:" + data + "<br>");
var data = $("li:last").text(); //找出最後一個標籤的標籤內容
document.write("最後一個標籤內容是:" + data + "<br>");
$("li:last").remove(); //實現移除最後一個標籤
$("li:last").append("<li>添加</li>"); //實現添加一個新標籤
</script>
</body>
even()/odd(): even()篩選出全部li標籤中偶數標籤,odd()篩選出全部li標籤中基數標籤.
<body>
<div class="MyClass">
<ul>
<li>首頁</li>
<li>主機</li>
<li>系統</li>
<li>菜單</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul li:even").text();
document.write("基數標籤爲: " + data + "<br>");
var count = $(".MyClass ul li:even");
document.write("基數標籤個數: " + count.length + "<br>");
var data = $(".MyClass ul li:odd").text();
document.write("偶數標籤爲: " + data + "<br>");
var count = $(".MyClass ul li:odd");
document.write("偶數標籤個數: " + count.length);
</script>
</body>
eq(): 過濾出全部li標籤中,索引是2的那個標籤.
<body>
<div class="MyClass">
<ul>
<li>首頁</li>
<li>主機</li>
<li>系統</li>
<li>菜單</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:eq(2)").text(); //全部li標籤中,索引是2的標籤
document.write("索引是2的標籤內容是: " + data + "<br>");
var data = $("li:eq(0)").text(); //全部li標籤中,索引是0的標籤
document.write("索引是0的標籤內容是: " + data + "<br>");
var data = $(".MyClass ul li").eq(4); //另外一種寫法,結果相同.
document.write("索引是4的標籤內容是: " + data.text() + "<br>");
</script>
</body>
gt(): 全部li標籤中，索引大於2的標籤
<body>
<div class="MyClass">
<ul>
<li>首頁</li>
<li>主機</li>
<li>系統</li>
<li>菜單</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:gt(2)").text(); //全部li標籤中,索引大於2的標籤
document.write("索引大於2的標籤內容是: " + data + "<br>");
</script>
</body>
lt(): 全部li標籤中，索引小於3的標籤
<body>
<div class="MyClass">
<ul>
<li>首頁</li>
<li>主機</li>
<li>系統</li>
<li>菜單</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("li:lt(3)").text(); //全部li標籤中,索引小於3的標籤
document.write("索引小於3的標籤內容是: " + data + "<br>");
</script>
</body>
hasclass(): 檢測li中的是否含有某個特定的類，有的話返回true
<body>
<div class="MyClass">
<ul class="lyshark">
<li>首頁</li>
<li>主機</li>
<li>系統</li>
<li>菜單</li>
<li>搞事</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul").hasClass("lyshark");
document.write(data);
</script>
</body>
◆查找篩選器◆
children(): 獲取指定標籤的全部子標籤,如下在類名爲"MyForm"盒子裏,找全部div子標籤,並將其設置爲綠色.
<body>
<form class="MyForm">
<div class="Mydiv"> hello lyshark </div>
<div class="Mydiv"> hello lyshark </div>
<p> hello lyshark </p>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".MyForm").children(".Mydiv").css("color","green");
</script>
</body>
parent(): 獲取指定標籤的全部父標籤,如下代碼找全部P標籤的父標籤,並設置成紅色.
<body>
<div class="Mydiv"> hello lyshark
<p> hello p </p>
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var data = $("p").parent().css("color","red");
</script>
</body>
next(): 尋找指定標籤的下一個標籤,如下代碼根據第1個Mydiv1爲條件尋找下一個div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div").next().css("background","red");
$(".Mydiv1").next().css("background","red");
</script>
</body>
prev(): 尋找指定標籤的上一個標籤,如下代碼根據第2個Mydiv2爲條件尋找上一個div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv2").prev().css("background","red");
</script>
</body>
siblings(): 查找標籤的全部兄弟標籤,查找全部的同輩標籤.
<body>
<div class="Mydiv1">
<div class="Min">hello div</div>
</div>
<div class="Mydiv2">
<div class="Min">hello div</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv1").siblings().css("background","red");
</script>
</body>
find(): 在form標籤中找到text,password標籤,並將其設置爲綠色.
<body>
<form class="forms" method="post">
<input type="text" value="用戶名">
<input type="password" value="密碼">
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("form").find(":text,:password").css({"color":"red","background":"green"})
</script>
</body>
JQuery 事件的處理
事件是用戶在操做瀏覽器的過程當中,由用戶觸發或由瀏覽器自身觸發的動做,瀏覽器捕獲這些動做,並根據用戶編程時設置的對應這些動做的事件處理程序,觸發相應的處理過程,從而實現交互過程,瀏覽器在程序運行的大部分時間都等待交互事件的發生,並在發生時,自動的調用事件處理函數完成整個處理過程,爲了更好的兼容不一樣類型的瀏覽器,JQuery在JavaScript的基礎上,進一步封裝了不一樣類型的時間模型,從而造成一種功能強大,用法更加優雅的JQuery事件模型,下面個將具體介紹幾種經常使用的用法.
註冊單次事件: one()方法是bind()方法的特例,由它綁定的事件在執行一次相應後就會失效.
<body>
<p id="MyP"> </p>
<input type="button" id="MyID" value="添加內容" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID").one("click",function(){
$("p").append("hello lyshark"); //給P標籤添加內容
});
</script>
</body>
註冊循環事件: bind()做爲統一的接口,用來爲每一個匹配元素綁定事件處理程序.
<body>
<input type="button" id="MyID1" value="無參數綁定" />
<input type="button" id="MyID2" value="帶參數綁定" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID1").bind("click",function(){
alert("綁定無參數的事件...")
});
$("#MyID2").bind("click",{x:"參數1",y:"參數2"},function(event){
$(this).text(event.data.x + event.data.y);
});
</script>
</body>
綁定多個事件:
<body>
<input type="button" id="MyID1" value="按鈕1" />
<input type="button" id="MyID2" value="按鈕2" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#MyID1,#MyID2").click(function(){
var currentId = $(this).attr("id"); //獲取它的ID名稱
if(currentId == "MyID1"){ //說明點擊了按鈕1
alert("您點擊了按鈕1");
}else if(currentId == "MyID2"){ //說明點擊了按鈕2
alert("您點擊了按鈕2");
}
});
</script>
</body>
表單數據提交:
<body>
<div class="MyDIV">
姓名: <input type="text" id="input1" />
性別: <input type="text" id="input2" />
年齡: <input type="text" id="input3" />
<input type="button" id="button1">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#button1").click(function(){
var name = $(".MyDIV #input1").val(); //獲取到元素值
var sex = $(".MyDIV #input2").val();
var age = $(".MyDIV #input3").val();
alert("姓名: " + name + "性別: " + sex + "年齡: " + age);
});
</script>
</body>
回調函數:
<head>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,call_back());
})
});
function call_back() {
alert("回掉函數使用...")
}
</script>
</head>
<body>
<button>隱藏</button>
<p>hello lyshark</p>
</body>
標籤克隆:
<body>
<div>
<p>
<a onclick="Add(this)">+</a>
<input type="text"/>
</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find('a').text('-');
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
全選與反選:
<body>
<div class="MyDiv">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="button" value="全選" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CancleAll()" />
<input type="button" value="反選" onclick="ReverseAll()" />
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function CheckAll() {
$('.MyDiv input[type="checkbox"]').prop('checked',true);
}
function CancleAll() {
$('.MyDiv input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('.MyDiv input[type="checkbox"]').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script>
</body>
相關文章
- 1. Web前端開發JQuery框架
- 2. 十大web前端開發框架
- 3. web前端開發框架那些事
- 4. Web前端開發框架對比
- 5. web前端開發框架推薦
- 6. Web前端開發框架推薦
- 7. 前端-jQuery框架
- 8. JQuery--jQuery前端框架
- 9. web前端框架
- 10. 前端開發框架
- 更多相關文章...
- • ASP.NET Web Pages - 發佈網站 - ASP.NET 教程
- • Docker 架構 - Docker教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Web前端開發JQuery框架
- 2. 十大web前端開發框架
- 3. web前端開發框架那些事
- 4. Web前端開發框架對比
- 5. web前端開發框架推薦
- 6. Web前端開發框架推薦
- 7. 前端-jQuery框架
- 8. JQuery--jQuery前端框架
- 9. web前端框架
- 10. 前端開發框架