Jquery從入門到放棄（一）

時間 2019-11-17

標籤 jquery 入門放棄欄目 JQuery 简体版

原文原文鏈接

1、Jquery是什麼？

jquery是一個輕量級的javascript庫，針對html元素的JS常常性操做動做作了很好的封裝，旨在「寫的更少，作得更多」。javascript

2、入門

2.1下邊這一段代碼，旨在遍歷document中的因此button元素，響應其的onclick()事件，而onclick事件內容是遍歷全部p元素並改變其屬性，使其「hide（）」。css

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

2.2使用方法，在使用前須要引入jquery庫，能夠採用本地下載或者網上庫（CDN）。下面提供了兩個位於不一樣網路位置的url。html

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

2.3基本語法java

請先觀察下邊的幾個語句jquery

$(this).hide() 隱藏當前的 HTML 元素。ajax

$("#test").hide() 隱藏 id="test" 的元素。api

$("p").hide()，隱藏全部 <p> 元素。ide

$(".test").hide() 隱藏全部 class="test" 的元素函數

不難發現基礎語法是：$(selector).action()動畫

其中有三個基本單元構成

美圓符 $定義該語句是jquery
選擇符 ( )查詢和查找html元素
action 執行對前邊查找到的元素的操做

美圓符就沒的講了，下來我們看一看選擇符的使用方法

$(this) 表示當前元素
$("p") 表示全部p元素
$(".class") 表示全部類元素
$("#id") 表示指定id的元素
$("p.intro") 表示class=intro的P元素
$("il li :first") 表示每一個ul的第一個li元素
$("[href$='.jpg']") 全部帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head") 表示id="intro" 的 <div> 元素中的全部 class="head" 的元素

你們注意到前邊的例子中就是jquery選擇器完美的繼承了CSS的選擇器語法，其實也是劃分爲：

jquery選擇器 選擇器容許您對 HTML 元素組或單個元素進行操做
jquery元素選擇器 jQuery 使用 CSS 選擇器來選取 HTML 元素。

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取全部 class="intro" 的 <p> 元素。

$("p#demo") 選取全部 id="demo" 的 <p> 元素

3.jquery屬性選擇器 jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素

$("[href]") 選取全部帶有 href 屬性的元素。

$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。

4.jqueryCSS選擇器 jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性

jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

下面的例子把全部 p 元素的背景顏色更改成紅色

$("p").css("background-color","red");

2.4事件函數

jQuery 事件處理方法是 jQuery 中的核心函數。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件「觸發」（或「激發」）常常會被使用。一般會把 jQuery 代碼放到 <head>部分的事件處理方法中：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

經常使用的一些事件：