欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery學(xué)習(xí)總結(jié)【二】

 更新時(shí)間：2016年12月01日 15:46:36   作者：—阿輝  
本文主要介紹了JQuery的基本知識(shí)，如：JQuery的dom操作，動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)，刪除節(jié)點(diǎn)，document方法等等，文章篇尾處附上實(shí)例小練習(xí)。需要的朋友可以參考下

一：JQuery知識(shí)點(diǎn)

*:JQuery的dom操作

*：動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)

比如動(dòng)態(tài)創(chuàng)建表格等，在js里面進(jìn)行完成。

*刪除節(jié)點(diǎn)

這里面的刪除就是將其放在了一個(gè)地方，并不是真的刪除，之后可以使用。

*：document方法

1:.val()可以獲取到文本框里面的值，若括號(hào)里面有值則直接為賦值。

Eg:加法計(jì)算器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#buttons").click(function() {
 var tex1 = $("#tex1").val();
 var tex2 = $("#tex2").val();
 var tex3 = parseInt(tex1, 10) + parseInt(tex2,10);
 $("#tex3").val(tex3);
 });
 });
 </script>
</head>
<body>
 <input type="text" id="tex1"/><input type="button" value="+"/><input type="text" id="tex2"/>
 <input type="button" value="=" id="buttons"/><input type="text" id="tex3"/>
</body>
</html>

2:可以通過(guò)attr屬性來(lái)進(jìn)行隱藏。

3：在jq里面通過(guò)下面的這種形式

(function());這是把一個(gè)(function());這是把一個(gè)()是讓其在ready的時(shí)候執(zhí)行，若是沒(méi)有這個(gè)就是定義了一個(gè)方法。

Eg:閱讀說(shuō)明書

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 var leftSeconds = 10;
 var intarvalId;
 $(function() {
 $("#buttons").attr("disabled", true);
 intarvalId = setInterval("CountDom()", 1000);
 });
 function CountDom() {
 if(leftSeconds<=0) {
 $("#buttons").val("同意");
 $("#buttons").attr("disabled", false);
 clearInterval(intarvalId);
 return;
 }
 leftSeconds--;
 $("#buttons").val("請(qǐng)仔細(xì)閱讀" + leftSeconds + "秒");
 }
 </script>
</head>
<body>
 <textarea>在使用前請(qǐng)仔細(xì)閱讀說(shuō)明書。</textarea>
 <input type="button" id="buttons" value="同意"/>
</body>
</html>

Eg：無(wú)刷新評(píng)論

Eg:：文本顏色變化

代碼：

Eg:

代碼：

*：節(jié)點(diǎn)替換

*:樣式的操作

*：練習(xí)代碼

選中的高亮顯示，里面就是有如何在jq里面添加css樣式。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <style type="text/css">
 #tables {
 margin: auto;
 }
 </style>
 <script type="text/javascript">
 //$(function() {
 // $("#tables tr:first").css("font-size", 30);
 // $("#tables tr:last").css("color", "red");
 // $("#tables tr:gt(0) :lt(6) ").css("font-size", 28);
 // $("#tables tr:gt(0):even").css("background","red");
 //});
 $(function() {
 $("#tables tr").click(function() {
 $("td", $(this).css("background","red"));
 });
 });
 </script>
</head>
<body>
 <table id="tables">
 <tr><td>姓名</td><td>年齡</td></tr>
 <tr><td>小張</td><td>2</td></tr>
 <tr><td>小紅</td><td>43</td></tr>
 <tr><td>小路</td><td>23</td></tr>
 <tr><td>小李</td><td>23</td></tr>
 </table>
</body>
</html>

*取的RadioButton操作

*：實(shí)例 [全選和反選]

01：這里主要的就是將以前學(xué)習(xí)到的知識(shí)，得以回顧，這樣子好記憶。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#setAll").click(function() {
 $("#List :checkbox").attr("checked",true); //這是div下面的button
 });
 $("#notsetAll").click(function() {
 $("#List :checkbox").attr("checked",false);
 });
 $("#reverse").click(function() {
 $("#List :checkbox").each(function() {
  $(this).attr("checked",!$(this).attr("checked"));
 });
 });
 });
 </script>
</head>
<body>
 <div id="List">
 <input type="checkbox"/>籃球1<br/>
 <input type="checkbox"/>足球2<br/>
 <input type="checkbox"/>籃球3<br/>
 <input type="checkbox"/>籃球4<br/>
 <input type="checkbox"/>籃球5<br/>
 </div>
 <input type="button" value="全選" id="setAll"/>
 <input type="button" value="全不選" id="notsetAll"/>
 <input type="button" value="反選" id="reverse"/>
</body>
</html>

*：事件

   *:jquery里面的click事件就是封裝的bind函數(shù)，代表點(diǎn)擊事件，

   *:hover函數(shù)，這里就是監(jiān)聽(tīng)鼠標(biāo)的事件。

*:超鏈接的禁用

<script type="text/javascript">
 $(function() {
 $("a").click(function (e) {
 alert("今天Link不行了");
 e.preventDefault(0); //表示禁用了鏈接
 });
 });
 </script>
<a href="Hover.html">Link</a>

*：Cookic

定義：它是保存在瀏覽器上的內(nèi)容，用戶在這次瀏覽頁(yè)面向Cookic中保存文本內(nèi)容，下次在訪問(wèn)的時(shí)候就可以取出上次保存的內(nèi)容，這樣子就得到了上次“記憶”內(nèi)容。Cookic就是存儲(chǔ)在瀏覽器里面的數(shù)據(jù)。<可以禁用>

特征：

  1:它和域名相關(guān)的

《baidu.com的Cookic和taobao.com的Cookic是不一樣的。》

  2: 域名寫入Cookic的總尺寸是有限制的。幾千字節(jié)

  3：Cookic不一定可以讀取出來(lái)，用戶可以清除掉了。同時(shí)可以被禁用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，有興趣的可以看下上篇JQuery學(xué)習(xí)總結(jié)【一】。同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論