jquery 讀書筆記

時間  2019-11-15
標籤 jquery 讀書 筆記 欄目 JQuery 简体版
原文   原文鏈接

.insertAfter(selector)//將指定的選擇器內容加到元素的後面。javascript

<script type="text/javascript">
    $(document).ready(function(){ 
        $('.b1').click(function() {
           $('#d').insertAfter('#d2')
        });
        $('.b3').click(function() {
           $('#d').appendTo('#d2')//和insertAfter同樣
        });
    })

.after(text)//將指定的text文本加到選擇器的後面。css

<script type="text/javascript">
    $(document).ready(function(){ 
         $('.b2').click(function() {
           $('#d').after('the text need to be added after AAAAAAAAAAAAAAA')
        });
     })

$('#d').remove()&$('#d').empty()
$('#d').remove()：用來刪除匹配元素和其內容
$('#d').empty()：保留匹配元素，清空內容html

怎樣修改樣式java

<div id='d' style='color:red;font-size:50px;'>AAAAAAAAAAAAAAAA</div>
$('#d').css('color','blue');

jquery dom加載完以後 執行回調函數jquery

<script type="text/javascript">
   jQuery(function(){
       alert(jQuery('p').text())//jquery一加載完，立刻執行回調函數
   })

//如何獲取table的行和列ajax

<table border='1px' cellspacing="0px" cellpadding="0px">
       <tr>
           <td>content of the first line</td>
           <td>content of the second line</td>
       </tr>
       <tr>
           <td>content of the third line</td>
           <td>content of the fourth line</td>
       </tr>
   </table>

 <script type="text/javascript">
      var str = $('table').find('tr').eq(0).text()//獲取第一行
      var str2 = $('table').find('tr').eq(0).find('td').eq(0).text()//獲取第一行的第一列
      console.log(str)
      console.log(str2)
    </script>

jquery中如何獲取窗口的值數據庫

<table border='1px' cellspacing="0px" cellpadding="0px">
        <tr>
            <td>content of the first line</td>
            <td>content of the second line</td>
        </tr>
        <tr>
            <td>content of the third line</td>
            <td>content of the fourth line</td>
        </tr>
    </table>
    
    <script type="text/javascript">
    console.log($(window).height()); //瀏覽器當前窗口可視區域高度 
    console.log($(document).height()); //瀏覽器當前窗口文檔的高度 
    console.log($(document.body).height()); //瀏覽器當前窗口文檔body的高度 
    console.log($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度 包括border padding margin 
    console.log($(window).width()); //瀏覽器當前窗口可視區域寬度 
    console.log($(document).width()); //瀏覽器當前窗口文檔對象寬度 
    console.log($(document.body).width()); //瀏覽器當前窗口文檔body的高度 
    console.log($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度 包括border padding margin
</script>

.siblings:「 取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合。能夠用可選的表達式進行篩選。」api

<ul id='dd'>
        <li data-type='3'>1</li>
        <li data-type='1'>2</li>
        <li data-type='0'>3</li>
        <li data-type='1'>4</li>
        <li data-type='0'>
            <ul>
                <li data-type='0'>5</li>
                <li data-type='0'>6</li>
            </ul>
        </li>
    </ul>
    
$('ul#dd li[data-type=3]').siblings('li[data-type=0]')//返回li 3,和包含5,6的li，不直接包含 5,6
$('ul#dd li[data-type=3]')返回的包裝集合爲ul#dd下全部li[data-type=3]元素,此時集合中只有一個元素li 1.
對li中的每個li元素查找同級元素,而且每一個li元素必需要具備data-type屬性而且值爲0
li 1的統計元素有一、二、三、四、包含五、6的li。符合[data-type=0]的只有三、包含五、6的li.

圖片描述

.bind瀏覽器

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $("button").bind("click",function(){
               $("p").slideToggle()
           })
       })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <button type="button">button</button>
</body>
</html>

.click緩存

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
           $("p").click(function(){
               $(this).hide()
           })
       })
    </script>
</head>
<body>
 <p>This is the contents</p>
</body>
</html>

$(body *)
選擇 <body> 內的全部元素：

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("body *").css('background-color','red')
      })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <span>This is span</span>
</body>
</html>

element(元素) 選擇器選取帶有指定標籤名的元素。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("p").css('font-size','100px')
      })
    </script>
</head>
<body>
 <p>This is the contents</p>
 <span>This is span</span>
</body>
</html>

jquery-ajax
AJAX 是與服務器交換數據的藝術，它在不重載所有頁面的狀況下，實現了對部分網頁的更新。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#btn").click(function(){
             $("#id1").load("data.txt")
         })
      })
    </script>
</head>
<body>
 <p id="id1">This is the contents</p>
 <button type="button" id="btn">button</button>
</body>
</html>

什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

XMLHttpRequest 對象用於和服務器交換數據。
如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
open(method,url,async)

規定請求的類型、URL 以及是否異步處理請求。

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
send(string)

將請求發送到服務器。

string：僅用於 POST 請求

GET 仍是 POST？
與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。
然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

AJAX GET 請求

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript">
      function loa(){
          var HttpXml;
          if(window.XMLHttpRequest){
            HttpXml = new XMLHttpRequest();
          }else{
            HttpXml = new ActiveXObject('Microsoft.XMLHTTP')
          }
          HttpXml.onreadystatechange = function(){
              if(HttpXml.readyState ==4&&HttpXml.status ==200){
                  document.getElementById("div1").innerHTML= HttpXml.responseText;
              }
          }
          HttpXml.open("Get","data.txt",true)
          HttpXml.send()
      }
    </script>
</head>
<body>
 <button type="button" onclick="loa()">button</button>
 <div id="div1"></div>
</body>
</html>

咱們不推薦使用 async=false，可是對於一些小型的請求，也是能夠的。
JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。
註釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服務器響應
如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性
responseText 得到字符串形式的響應數據。
onreadystatechange 事件
存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數
readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status

200: "OK"
404: 未找到頁面

使用 Callback 函數
callback 函數是一種以參數形式傳遞給另外一個函數的函數。

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script type="text/javascript">
          var HttpXml;
        function loa(url,cfunc){//回調函數，將函數做爲參數傳遞
          if(window.XMLHttpRequest){
            HttpXml = new XMLHttpRequest();
          }else{
            HttpXml = new ActiveXObject('Microsoft.XMLHTTP')
          }
          HttpXml.onreadystatechange = cfunc;
          HttpXml.open("post",url,true)
          HttpXml.send()    
      }
      function myFunc(){
          loa('data.txt',function(){
            if(HttpXml.readyState ==4&&HttpXml.status ==200){
                  document.getElementById("div1").innerHTML= HttpXml.responseText;
              }    
          })         
      }
    </script>
</head>
<body>
 <button type="button" onclick="myFunc()">button</button>
 <div id="div1"></div>
</body>
</html>

jquery選擇器
1、基本選擇器

  1. id選擇器（指定id元素）

將id="one"的元素背景色設置爲黑色。（id選擇器返單個元素）

$(document).ready(function () {

$('#one').css('background', '#000');
});

  1. class選擇器（遍歷css類元素）

將class="cube"的元素背景色設爲黑色

$(document).ready(function () {

$('.cube').css('background', '#000');
});

  1. element選擇器（遍歷html元素）

將p元素的文字大小設置爲12px

$(document).ready(function () {

$('p').css('font-size', '12px');
});

    • 選擇器（遍歷全部元素）

$(document).ready(function () {

// 遍歷form下的全部元素，將字體顏色設置爲紅色
    $('form *').css('color', '#FF0000');
});

  1. 並列選擇器

$(document).ready(function () {

// 將p元素和div元素的margin設爲0
    $('p, div').css('margin', '0');
});

2、 層次選擇器

  1. parent > child（直系子元素）

$(document).ready(function () {

// 選取div下的第一代span元素，將字體顏色設爲紅色
    $('div > span').css('color', '#FF0000');
});

下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。

<div>

<span>123</span>
    <p>
        <span>456</span>
    </p>

</div>

  1. prev + next（下一個兄弟元素，等同於next()方法）

$(document).ready(function () {

// 選取class爲item的下一個div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等價代碼
//$('.item').next('div').css('color', '#FF0000');

});

下面的代碼，只有123和789會變色


<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

  1. prev ~ siblings（prev元素的全部兄弟元素，等同於nextAll()方法）

$(document).ready(function () {

// 選取class爲inside以後的全部div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
// 等價代碼
//$('.inside').nextAll('div').css('color', '#FF0000');

});

下面的代碼，G2和G4會變色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

3、 過濾選擇器

  1. 基本過濾選擇器

——1.1 :first和:last（取第一個元素或最後一個元素）

$(document).ready(function () {

$('span:first').css('color', '#FF0000');
        $('span:last').css('color', '#FF0000');
    });

下面的代碼，G1（first元素）和G3（last元素）會變色

<span>G1</span>
<span>G2</span>
<span>G3</span>

——1.2 :not（取非元素）

$(document).ready(function () {

$('div:not(.wrap)').css('color', '#FF0000');
    });

下面的代碼，G1會變色

<div>G1</div>
<div class="wrap">G2</div>

可是，請注意下面的代碼：

<div>

G1
<div class="wrap">G2</div>

</div>

當G1所在div和G2所在div是父子關係時，G1和G2都會變色。

——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function () {

$('tr:even').css('background', '#EEE'); // 偶數行顏色
        $('tr:odd').css('background', '#DADADA'); // 奇數行顏色
    });

A、C行顏色#EEE（第一行的索引爲0），B、D行顏色#DADADA

image

A
B
C
D

——1.4 :eq(x) （取指定索引的元素）

image

$(document).ready(function () {

$('tr:eq(2)').css('background', '#FF0000');
    });

更改第三行的背景色，在上面的代碼中C的背景會變色。

——1.5 :gt(x)和:lt(x)（取大於x索引或小於x索引的元素）

$(document).ready(function () {

$('ul li:gt(2)').css('color', '#FF0000');
        $('ul li:lt(2)').css('color', '#0000FF');
    });

L4和L5會是紅色，L1和L2會是藍色，L3是默認顏色

image

<ul>

<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>

</ul>

——1.6 :header（取H1~H6標題元素）

$(document).ready(function () {

$(':header').css('background', '#EFEFEF');
    });

下面的代碼，H1~H6的背景色都會變

image

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

  1. 內容過濾選擇器

——2.1 :contains(text)（取包含text文本的元素）

$(document).ready(function () {

// dd元素中包含"jQuery"文本的會變色
        $('dd:contains("jQuery")').css('color', '#FF0000');
    });

下面的代碼，第一個dd會變色

image

<dl>

<dt>技術</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>關鍵字排名</dd>
<dt>其餘</dt>
<dd></dd>

</dl>

——2.2 :empty（取不包含子元素或文本爲空的元素）

$(document).ready(function () {

$('dd:empty').html('沒有內容');

});

image

上面第三個dd會顯示"沒有內容"文本

——2.3 :has(selector)（取選擇器匹配的元素）

$(document).ready(function () {

// 爲包含span元素的div添加邊框
        $('div:has(span)').css('border', '1px solid #000');
    });

即便span不是div的直系子元素，也會生效

image

<div>

<h2>
    A
    <span>B</span>
</h2>

</div>

——2.4 :parent（取包含子元素或文本的元素）

$(document).ready(function () {

$('ol li:parent').css('border', '1px solid #000');
    });

下面的代碼，A和D所在的li會有邊框

image

<ol>

<li></li>
<li>A</li>
<li></li>
<li>D</li>

</ol>

  1. 可見性過濾選擇器

——3.1 :hidden（取不可見的元素）

jQuery至1.3.2以後的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味着hidden只匹配那些「隱藏的」而且不佔空間的元素，像visibility:hidden或opactity:0的元素佔據了空間，會被排除在外。

參照：http://www.jquerysdk.com/api/hidden-selector

下面的代碼，先彈出"hello"對話框，而後hid-1會顯示，hid-2仍然是不可見的。

image

<html xmlns="http://www.w3.org/1999/xhtml&quot; >
<head runat="server">

<title></title>
<style type="text/css">
    div
    {
        margin: 10px;
        width: 200px;
        height: 40px;
        border: 1px solid #FF0000;
        display:block;
    }
    .hid-1
    {
        display: none;
    }
    .hid-2
    {
        visibility: hidden;
    }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('div:hidden').show(500);
        alert($('input:hidden').val());
    });
</script>

</head>
<body>

<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>

</body>
</html>

——3.2 :visible（取可見的元素）

下面的代碼，最後一個div會有背景色

image

<script type="text/javascript">

$(document).ready(function() {
    $('div:visible').css('background', '#EEADBB');
});

</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>

jQuery選擇器大全

</div>

  1. 屬性過濾選擇器

——4.1 [attribute]（取擁有attribute屬性的元素）

下面的代碼，最後一個a標籤沒有title屬性，因此它仍然會帶下劃線

image

<script type="text/javascript">

$(document).ready(function() {
        $('a[title]').css('text-decoration', 'none');
   });
</script>       
<ul>
    <li><a href="#" title="DOM對象和jQuery對象" class="item">DOM對象和jQuery對象</a></li>
    <li><a href="#" title="jQuery選擇器大全" class="item-selected">jQuery選擇器大全</a></li>
    <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
    <li><a href="#" title="基於jQuery的插件開發" class="item">基於jQuery的插件開發</a></li>
    <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
    <li><a href="#" class="item">其餘</a></li>
</ul>

——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等於value或不等於value的元素）

分別爲class="item"和class!=item的a標籤指定文字顏色

image

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程