筆記7：Jquery知識

時間  2019-11-06
標籤 筆記 jquery 知識 欄目 JQuery 简体版
原文   原文鏈接

jQuery

1 基本知識

jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 編程。其下載地址：http://jquery.com/download/javascript

<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>若是你點我，我就會消失。</p>
<p>繼續點我!</p>
<p>接着點我!</p>
</body>
</html>
  • jquery語法，jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。

1559785302614

  • 文檔就緒事件
$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});
等價於
$(function(){
     // 開始寫 jQuery 代碼...
});
  • jquery選擇器

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。php

$(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
  • id選擇器

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。css

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
  • class選擇器

Query 類選擇器能夠經過指定的 class 查找元素。html

$(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

1559785739292

若是您的網站包含許多頁面，而且您但願您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。當咱們在教程中演示 jQuery 時，會將函數直接添加到 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（經過 src 屬性來引用文件）：java

  • jquery事件

頁面對不一樣訪問者的響應叫作事件。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。jquery

  • 在元素上移動鼠標。
  • 選取單選按鈕
  • 點擊元素

1559789471915

2 效果

1559790556698

1559790626229

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
<div id="flip">點我，顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>

1559790701468

3 獲取內容與屬性

jQuery 中很是重要的部分，就是操做 DOM 的能力。jQuery 提供一系列與 DOM 相關的方法，這使訪問和操做元素和屬性變得很容易。DOM = Document Object Model（文檔對象模型）ajax

1559790915314

  • 獲取值
$("#btn1").click(function(){
  alert("值爲: " + $("#test").val());
});
  • 改變文本中的值
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">這是一個段落。</p>
<p id="test2">這是另一個段落。</p>
<p>輸入框: <input type="text" id="test3" value="菜鳥教程"></p>
<button id="btn1">設置文本</button>
<button id="btn2">設置 HTML</button>
<button id="btn3">設置值</button>
</body>
  • 改變標籤屬性
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鳥教程</a></p>
<button>修改 href 值</button>
<p>點擊按鈕修改後，能夠點擊連接查看連接地址是否變化。</p>
</body>
  • 添加元素

1559791189918

  • 操做CSS

1559791334083

  • 向元素添加css樣式
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
    font-weight:bold;
    font-size:xx-large;
}
.blue
{
    color:blue;
}
</style>
</head>
<body>

<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<div>這是一些重要的文本!</div>
<br>
<button>爲元素添加 class</button>

</body>
  • 返回css元素屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景顏色 = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<button>返回第一個 p 元素的 background-color </button>
</body>
</html>
  • jQuery遍歷

1559791603479

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

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示。jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從服務器加載數據，並把返回的數據放入被選元素中。語法：編程

$(selector).load(URL,data,callback);
  • 回調函數

可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：json

  • responseTxt - 包含調用成功時的結果內容
  • statusTXT - 包含調用的狀態
  • xhr - 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示"外部內容加載成功！"，而若是失敗，則顯示錯誤消息：跨域

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部內容加載成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內容</button>

</body>
</html>
  • get和post

jQuery get() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據。HTTP 請求：GET vs. POST，兩種在客戶端和服務器端進行請求-響應的經常使用方法是：GET 和 POST。

  • GET - 從指定的資源請求數據
  • POST - 向指定的資源提交要處理的數據

GET 基本上用於從服務器得到（取回）數據。註釋：GET 方法可能返回緩存數據。POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，而且經常使用於連同請求一塊兒發送數據。

$.get(URL,callback);

demo_test.php 文件代碼:
<?php
echo '這是個從PHP文件中讀取的數據。';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("數據: " + data + "\n狀態: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送一個 HTTP GET 請求並獲取返回結果</button>

</body>
</html>

$.post() 方法經過 HTTP POST 請求向服務器提交數據。必需的 URL 參數規定您但願請求的 URL。可選的 data 參數規定連同請求發送的數據。可選的 callback 參數是請求成功後所執行的函數名。

$.post(URL,data,callback);

demo_test_post.php 文件代碼:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '網站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    });
});
  • JSONP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。爲何咱們從不一樣的域（網站）訪問數據須要一個特殊的技術(JSONP )呢？這是由於同源策略。同源策略，它是由Netscape提出的一個著名的安全策略，如今全部支持JavaScript 的瀏覽器都會使用這個策略。

服務器JSON數據，服務端文件jsonp.php代碼爲：

<?php
header('Content-type: application/json');
//獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數據
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數據
echo $jsoncallback . "(" . $json_data . ")";
?>

客戶端實現 callbackFunction 函數

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程