天天看點
傳回

【領會要領】web前端-輕量級架構應用（jQuery基礎）

【領會要領】web前端-輕量級架構應用（jQuery基礎）

作者 | Jeskson

​

​jquery​

​的安裝和文法，​

​jquery​

​的多種選擇器，​

​dom​

​操作和​

​jquery​

​事件。

​jQuery​

​架構，簡介，優勢，安裝，文法，​

​jQuery​

​選擇器，​

​id​

​選擇器，類選擇器，标記選擇器，屬性選擇器，位置選擇器，後代選擇器，子代選擇器，選擇器對象，選擇器對象周遊，頁面初始化，​

​jQuery​

​的​

​dom​

​操作，查找，删除，建立，複制，插入，替換，​

​jQuery​

​事件，事件綁定，滑鼠事件，鍵盤事件，表單事件，視窗事件，事件冒泡，事件解除。

​jQuery​

​是一個很好用的​

​JavaScript​

​函數庫，寫的少，做的多。

請問jQuery的好處在哪裡？

它的好處在于它輕量級，什麼是輕量級呢？就是說它非常請求，大小在30kb左右；具有強大的選擇器和​

​dom​

​操作的封裝，可靠的事件處理機制，有完善的​

​ajax​

​，​

​jquery​

​将所有的​

​ajax​

​操作封裝到函數$.ajax()`中；具有豐富的插件，完善的文檔，開源的産品。

​jquery​

​安裝，從jquery下載下傳jquery庫，二是從cdn中下載下傳。

​jquery​

​官方網址

​http://jquery.com​

首先進入​

​download jquery​

​下載下傳頁面，下載下傳最新的​

​jquery​

​庫檔案，有兩個版本：生産版，​

​Production version​

​，用于實際網站，​

​Development version​

​開發版，用于測試和開發。

<head>
 <meta charset="UTF-8">
 <title>jquery</title>
 <script type="text/JavaScript" src="./js/jquery-xx.js">
 </script>
</head>      
<script type="text/JavaScript">
 $(document).ready(function(){
 // 等待dom元素加載完畢
 alert("成功引入");
 });
</script>

​cdn​

​中配置​

​Jquery​

​，如果不下載下傳​

​jquery​

​的話，可以用​

​cdn​

​引用的。

​jquery​

​文法：

jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()

// 入口
$(document).ready(function(){
 // 執行代碼
});

$(function(){
 // 執行代碼
});

JavaScript的入口函數
// 入口函數如下
window.onload = function(){
 // 執行代碼
}

​JavaScript​

​的入口函數與​

​jquery​

​入口函數：

​jquery​

​的入口函數是在​

​HTML​

​所有标簽都加載後執行；​

​JavaScript​

​window.onload​

​事件是等所有内容（包括圖檔檔案等）加載完之後才執行。

​jquery​

​選擇器

​JavaScript​

​的選擇器：

document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()

選擇器$(" "),

為一個函數，為工廠函數，$為函數名稱。

id選擇器​

​$("#id")​

根據給定的id比對一個元素

類選擇器​

​$(".class")​

根據給定的類比對元素

标記選擇器​

​$("element")​

根據給定元素名比對所有元素

屬性選擇器​

​$("element[attribute]")​

比對包含給定屬性的元素​

​$("div[title=test]")​

位置選擇器

​$(element:position)​

​比對符合标簽中相應位置的元素

​$("div:first")​

​比對所有div中第一個div元素

後代選擇器

​$("ancestor descendant")​

比對給定的祖先元素的所有後代元素

​$("#ul li")​

比對 id 為null的所有li元素

子代選擇器​

​$("parent>child")​

比對所有指定"parent"元素中指定"child"的直接子元素

$("#标簽id值")

// 原生
var div = document.getElementById('test');
div.style.border = '3px solid blue';

// jquery
$("#test1").css("border", "3px solid red");

$(".class屬性值")
$(".cls1").css(...);

$("标記名稱");
// 找到所有P标簽
$("p")

屬性選擇器
$("[屬性名"])
比對所有具有指定屬性的元素

$("[屬性名='值']")
比對與值相等的元素

$("[屬性名!='值']")
比對與值不相等的元素

$("[屬性名^='值']")
比對以值開頭的元素

$("[屬性名$='值']")
比對以值結尾的元素

$("[屬性名*='值']")
比對包含值的元素

位置選擇器：

​$("selector:first")​

比對第一個元素

​$("selector:last")​

比對最後一個元素

​$("selector:odd")​

比對索引值為奇數的元素，從0開始計數

​$("selector:even")​

比對索引值為偶數的元素，從0開始計數

​$("selector.eq(n)")​

比對集合中索引值為n的元素

​$("selector.gt(n)")​

比對集合中索引值大于n的元素

​$("selector:lt(n)")​

比對集合中索引值小于n的元素

$("選擇器1 選擇器2...")      
$("#test li").css("border", "2px solid red");

子代選擇器

$("選擇器1>選擇器2>...")

選擇器對象：

$("選擇器").each(function(index){this})

選擇器對象的周遊

$("選擇器").find()

找前面選擇器比對到的元素的子元素

$("選擇器").not()

在前面選擇器比對到的元素中去除某個或者某幾個

$("選擇器").add()

在前面選擇器中再追加節點

選擇器對象周遊

<body>
 <ul id="test">
  <li>d</li>
  <li>a</li>
 </ul>
</body>

<script type="text/JavaScript">
 $("#test li").each(function(index){
  this.title="我是第" (index 1) "個";
 });
</script>

頁面初始化

<script type="text/JavaScript">
 $(function(){
  //一定會在頁面加載完成後運作
 })
</script>

将​

​jquery​

​函數代碼放到這個函數就可以等到頁面加載結束再運作。

​Jquery​

​中的​

​dom​

​操作。

​dom​

​是​

​document object model​

​的縮寫。文檔對象模型。​

​dom​

​是一種與浏覽器，平台，語言無關的接口，​

​jquery​

​dom​

​操作就是對​

​HTML​

​中的元素進行操作。

<script type="text/JavaScript">
 $(document).ready(function(){
  // 測試
  $("#btn1").click(function(){
   alert("文本内容：" $("#test0").text());
  });
 });
</script>

<p id="test0">da</p>
<button id="btn1">da</button>

​attr()​

​擷取它的各種屬性的值

$(document).ready(function(){
 $("button").click(function(){
  alert($("p").attr("title"));
 });
});

建立​

​HTML​

​元素：

$(document).ready(function(){
 var $li1 = $("<li>d</li>");
 var $li2 = $("<li>a</li>");
 $("button").click(function(){
  $("ul").append($li1);
  $("ul").append($li2);
 });
});

插入​

​HTML​

​元素

​append()​

​向每個比對的元素内部追加内容

​appendTo()​

​将所有比對的元素追加到另一個指定的元素集合中注意：​

​$(A).append(B)​

​的操作，不是将B追加到A中，而是将A追加到B中

​prepend()​

​向每個比對的元素内部前置内容

​prependTo()​

​将所有比對的元素前置到另一個指定的元素集合中。注意：​

​$(A).prepend(B)​

​的操作，不是将B前置到A中，而是将A前置到B中

​after()​

​在每個比對的元素之後插入内容

​insertAfter()​

​将所有比對的元素插入另一個指定的元素集合的後面注意：​

​$(A).after(B)​

​的操作，不是将B插入到A後面，而是将A插入到B的後面

​before()​

​在每個比對的元素之前插入内容

​insertBefore()​

​将所有比對的元素插入另一個指定的元素集合的前面。注意：​

​$(A).before(B)​

​的操作，不是将B插入A前面，而是将A插入B前面

删除HTML元素

删除HTML元素一般使用​

​jquery​

​remove()​

​和​

​empty()​

​remove()​

​的作用就是從​

​dom​

​中删除被選元素以及子元素，就是如果某個元素被删除了，那麼它的後代元素也都被删除。

​empty()​

​的作用并不是删除​

​HTML​

​元素，而是清空​

​HTML​

​元素，可以清空選中​

​HTML​

​元素中所有後代​

​HTML​

​元素。

複制HTML元素

​clone()​

​的作用是複制HTML元素。

$(document).ready(function() {
 $("button").click(function() {
  $("body").append($("p").clone());
  });
 });
});

替換​

​HTML​

有兩種方法：​

​replaceWith()​

​replaceAll()​

​兩個方法

​repalceWith()​

​将所有比對的元素替換成指定的HTML元素或dom元素

​repalceAll(selector)​

​用比對的元素替換所有selector比對到的元素

​replaceWith()​

​replaceAll()​

​的作用是一樣的，隻是用法不同。

A元素替換B元素：

​replaceWith()​

​的寫法​

​A.replaceWith("B")​

​​

​B.replaceAll("A")​

 
$(document).ready(function(){

 $("button").click(function(){
  $("ul li:eq(0)").replaceWith("<li>da</li>")
 });
 
});

事件

滑鼠事件:​

​click，mouseover，hover​

鍵盤事件：​

​keypress，keydown，keyup​

表單事件：​

​submit，change，focus​

視窗事件:​

​scroll，resize​

事件綁定

事件綁定文法bind()方法：

bind(type,[data],fn)      
click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()

​type​

​參數是含有一個或多個事件類型的字元串，​

​data​

​參數是作為​

​event.data​

​屬性值傳遞給事件對象的額外資料對象，​

​fn​

​參數為綁定到每個比對元素事件上面的處理函數。

$(document).ready(function(){
 $("input").bind("focus",function(){
  $("span").show();
 });
});

簡寫綁定事件

$(document).ready(function(){
 $("input").focus(function(){
  $("span").show();
 });
});

滑鼠事件​

​click(),dblclick()​

​輕按兩下在短時間内發生兩次​

​click​

​就是依次輕按兩下事件。

​mouseenter()​

​當滑鼠指針穿過元素時會發生​

​mouseenter​

​事件，​

​mouseleave()​

​當滑鼠指針離開元素時會發生​

​mouseleave​

​事件。​

​hover()​

​用于模拟光标懸停事件。

$(document).ready(function(){
 $("#p1").hover{
  function(){
   $("#p1").css('background','green');
  },
  function(){
   $('#p1").css("background","pink");
  }
 }
});

​keydown()​

​鍵盤或按鈕被按下時，發生​

​keydown​

​keyup​

​當鍵盤被松開時發生​

​keyup​

​keypress()​

​當鍵盤或按鈕被按下時，發生​

​keypress​

表單事件

當送出表單時，會發生​

​submit​

​change()​

​當元素的值發生改變時，會發生​

​change​

​focus()​

​當元素獲得焦點時，觸發​

​focus​

​blur()​

​當元素失去焦點時觸發。

視窗事件：

​scroll()​

​當使用者滾動指定的元素時，會觸發​

​scroll​

​scroll​

​事件适用于所有可滾動的元素和​

​window​

​對象。​

​resize()​

​當調整浏覽器視窗的大小時，會觸發​

​resize​

 
x=0;
$(document).ready(function(){

 $(window).resize(function(){
  $("span").text(x =1);
 });
 
});

事件冒泡，事件會按照​

​dom​

​的層次結構像水泡一樣不斷向上直至頂端

停止冒泡和預設行為：​

​stopPrapagation()​

​preventDefault()​

 
event.preventDefault();
// 阻止預設行為      
event.stopPropagation();
// 停止事件冒泡

事件解除：

​unbind(type, [data])​

​type​

​為事件類型​

​data​

​為将要解除的函數

選擇器 jquery html javascript css
上一篇: 如何删除Google以及網頁百度快照
下一篇: 傳回一個二維整數數組中最大聯通子數組的和

繼續閱讀