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选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。



2.2、$(element)



$()可以是 $(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。



2.3、$(function)



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




 

  
  
1

  
2

  
3

  		
  
  
$(document).ready(function(){ 

  
alert("Hello world!"); 

  
});

  		
 





可以写作：




 

  
  
1

  
2

  
3

  		
  
  
$(function(){ 

  
alert("Hello world!"); 

  
});

  		
 





 

張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)