2022年10月31日 星期一

jQuery - $("#my_id") - $(".my_class") - $("h1") - $的用法

1>jQuery 是什麼 ?

jQuery 是一個 JavaScript 函式庫 (Javascipt Framework)
主要目的就跟 Logo 上面寫的精神一樣:「write less, do more
由於如果要直接用 Javascript 將所有功能實作出來,常常要費時費力且造成大量且難以閱讀的程式碼,更嚴重者,有於瀏覽器之間的差異,常常要針對不同瀏覽器寫不同的程式碼,讓程式碼維護的難度大為提升。
jQuery 就是一個讓你加速網頁程式開發速度的工具
如何有效率的產出大量的 javascript 與 ajax ,就是 jQuery 所主打的目標。

其中的 $() 符號就是 jQuery 常用的選擇器善用選擇器可以快速找到網頁當中的物件,不知道各位有沒有感受到 jQuery 的威力了呢 ?

Ex:

整個流程應該會是 (1) 找出所有 input 元素 (2) 當元素是 radio button 且屬於某個 group (3) 確認某個選項已經被勾選了 (4) 將勾選的值指派給 checkValue 變數

1>傳統寫法:
var checkValue;
var elements = document.getElementsByTagName(‘input’);
for (var n = 0; n < elements.length; n++){
if (elements[n].type == ‘radio’ && elements[n].name == ‘RadioGroup’ && elements[n].checked){
checkedValue = elements[n].value;
}
-->
    document.getElementById()                 $("#my_id")
     document.getElementsByTagName()         $("h1")                      $("input")
     document.getElementsByClassName()       $(".my_class")  

2>jQuery寫法:

    $("[name='RadioGroup']")
    $("#my_id").click();


3> 引用 jQuery
1>>第一種是將js檔案下載下來,並在html的<head></head>中定義使用下載的js檔案。
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>

2>>直接引用 網路的 jQuery

第二種是使用Content Delivery Network (CDN),直接引用網路上的js檔案。網路上有很多CDN可以使用,如:google或微軟,如果使用google的CDN:

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

如果使用微軟的CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>


2>jQuery的基本語法是: $(selector).action()
$(this).hide() - hides the current element.
  $("p").hide() - hides all <p> elements.
  $(".test").hide() - hides all elements with class="test".
  $("#test").hide() - hides the element with id="test".






1$的含义

JS应用库JQUERY的作者将 $ 做为一个自定义函数名,这个函数是获取指定网页元素的函数。

1

2

3

function $(Nid){

return document.getElementById(Nid);

}

2、简单用法

这里介绍三种简单的使用方法。

2.1$(expresion)

$()可以是 $(expresion),即css选择器、Xpathhtml元素,也就是通过上述表达式来匹配目标元素。

2.2$(element)

$()可以是 $(element),即一个特定的DOM元素。如常用的DOM对象有documentlocationform等。

2.3$(function)

$()可以是$(function),即一个函数,它是 $(document).ready()的一个速记方式。

1

2

3

$(document).ready(function(){

alert("Hello world!");

});

可以写作:

1

2

3

$(function(){

alert("Hello world!");

});

 


沒有留言:

張貼留言