WebDesign 心得綜整

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!"); 
  });

Array 及 Object 的宣告, 及新增元素, 取得元素值處理

目的: Array 及 Object 的宣告, 及新增元素取值處理

處理說明: 1>Array 及 Object 的宣告
var Tmp_Ary=[]; //宣告 Array

var Tmp_Obj={}; //宣告 Object

2>Array 及 Object 設定值

var Tmp_len=0;

for (var i=1; i<=5;i++)

{

Tmp_len=Tmp_Ary.push(i) //傳回目前 Tmp_Ary.length

//Tmp_Ary[Tmp_len-1]=整數,並非Object ,所以無法設定property(newSet)

Tmp_Ary[Tmp_len - 1].newSet = i; //undefined

}

Tmp_Obj = {

gender: "男",

};

Tmp_Obj.newSet=1; //新增 Object 的屬性,直接 Assing 即可　

Tmp_len=Tmp_Ary.push(Tmp_Obj) ;

//Tmp_Ary[Tmp_len-1] 為 Object ,所以可以設定 property(newSet2) , 取值也會正常

Tmp_Ary[Tmp_len-1].newSet2=2;

3>Array 及 Object 取值

var Tmp_Ary=[1,2,3,4,5] ;

var Tmp_Obj={

gender: "男",

newSet: 1,

}

var Tmp_Str="";

//取得 Array 元素值_1 for

for (var i=0; i<=Tmp_Ary.length-1;i++)

{

Tmp_Str="Tmp_Ary[i]="+Tmp_Ary[i];

console.log(Tmp_Str) ;

}

//取得 Object property值 for

for (var prop in Tmp_Obj)

{

Tmp_Str="Tmp_Obj["+prop +"]="+Tmp_Obj[prop];

console.log(Tmp_Str) ;

}

//取得 Array元素值_2 Ext.each

Ext.each(Tmp_Ary, functon(item,index){

Tmp_Str="Tmp_Ary["+index+"]="+item;

console.log(Tmp_Str) ;

});

實際案例:

var Tmp_Ary = [];

var Tmp_Obj = {};

var cur_recs = Ext.getCmp('grid_Single').getView().getSelectionModel().getSelection();

var cur_rec;

if (cur_recs.length > 0) {

cur_rec = cur_recs[0];

Tmp_Ary.push(cur_rec);

cur_rec.newSet = 0;

}

console.log("cur_rec.newSet:", cur_rec.newSet);

console.log("Tmp_Ary[Tmp_Ary.length-1].newSet:", Tmp_Ary[Tmp_Ary.length - 1].newSet);

console.log("0 Tmp_Ary.length:", Tmp_Ary.length);

//mysuccessalert("cur_rec.newSet:" + cur_rec.newSet.toString());

var Tmp_len;

var Tmp_Str = "";

//0.5

for (var i = 1; i <= 5; i++) {

Tmp_len = Tmp_Ary.push(i);

console.log("0.5 Tmp_len:", Tmp_len);

Tmp_Ary[Tmp_len - 1].newSet = i;

//因 Tmp_Ary[Tmp_len - 1]=整數,非 Object , 所以,newSet undefined

console.log("0.5 Tmp_Ary[Tmp_len - 1].newSet:", Tmp_Ary[Tmp_len - 1].newSet);

}

for (var i = 1; i <= 5; i++) {

var Tmp_Obj1 = {};

Tmp_Obj1.value = i;

Tmp_len = Tmp_Ary.push(Tmp_Obj1);

console.log("1 Tmp_len:", Tmp_len);

//因 Tmp_Ary[Tmp_len - 1]= Object , 所以,newSet 可存值

Tmp_Ary[Tmp_len - 1].newSet = i;

console.log("1 Tmp_Ary[Tmp_len - 1].newSet:", Tmp_Ary[Tmp_len - 1].newSet);

}

console.log("1 Tmp_Ary.length:", Tmp_Ary.length);

//1.5

//item 為 Array 元素

Ext.each(Tmp_Ary,

function (item, index) {

console.log("1.5 index:", index);

Tmp_Str = " 1.5 Tmp_Ary[index]=" + Tmp_Ary[index];

console.log(Tmp_Str);

Tmp_Str = " 1.5 Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;

console.log(Tmp_Str);

)

//1.8

for (var index in Tmp_Ary) {

Tmp_Str = " 1.8 index=" + index;

console.log(Tmp_Str);

Tmp_Str = " 1.8 Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;

console.log(Tmp_Str);

}

//1.9

Tmp_Str = " 1.9 Tmp_Ary.length=" + Tmp_Ary.length;

console.log(Tmp_Str);

for (var index = 0; index < Tmp_Ary.length ; index++) {

Tmp_Str = " 1.9 index: " + index;

console.log(Tmp_Str);

Tmp_Str = " 1.9 Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;

console.log(Tmp_Str);

}

Tmp_Obj = {

gender: "男",

};

Tmp_Obj.newSet = 1;

//2

for (var item in Tmp_Obj) {

Tmp_Str = "2 Tmp_Obj[" + item + "] is " + Tmp_Obj[item];

console.log(Tmp_Str);

}

輸出結果:

0 Tmp_Ary.length: 1

0.5 Tmp_len: 2

0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined

0.5 Tmp_len: 3

0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined

0.5 Tmp_len: 4

0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined

0.5 Tmp_len: 5

0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined

0.5 Tmp_len: 6

0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined

1 Tmp_len: 7

1 Tmp_Ary[Tmp_len - 1].newSet: 1

1 Tmp_len: 8

1 Tmp_Ary[Tmp_len - 1].newSet: 2

1 Tmp_len: 9

1 Tmp_Ary[Tmp_len - 1].newSet: 3

1 Tmp_len: 10

1 Tmp_Ary[Tmp_len - 1].newSet: 4

1 Tmp_len: 11

1 Tmp_Ary[Tmp_len - 1].newSet: 5

1 Tmp_Ary.length: 11

1.5 index: 0

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=0

1.5 index: 1

1.5 Tmp_Ary[index]=1

1.5 Tmp_Ary[index].newSet=undefined

1.5 index: 2

1.5 Tmp_Ary[index]=2

1.5 Tmp_Ary[index].newSet=undefined

1.5 index: 3

1.5 Tmp_Ary[index]=3

1.5 Tmp_Ary[index].newSet=undefined

1.5 index: 4

1.5 Tmp_Ary[index]=4

1.5 Tmp_Ary[index].newSet=undefined

1.5 index: 5

1.5 Tmp_Ary[index]=5

1.5 Tmp_Ary[index].newSet=undefined

1.5 index: 6

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=1

1.5 index: 7

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=2

1.5 index: 8

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=3

1.5 index: 9

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=4

1.5 index: 10

1.5 Tmp_Ary[index]=[object Object]

1.5 Tmp_Ary[index].newSet=5

1.8 index=0

1.8 Tmp_Ary[index].newSet=0

1.8 index=1

1.8 Tmp_Ary[index].newSet=undefined

1.8 index=2

1.8 Tmp_Ary[index].newSet=undefined

1.8 index=3

1.8 Tmp_Ary[index].newSet=undefined

1.8 index=4

1.8 Tmp_Ary[index].newSet=undefined

1.8 index=5

1.8 Tmp_Ary[index].newSet=undefined

1.8 index=6

1.8 Tmp_Ary[index].newSet=1

1.8 index=7

1.8 Tmp_Ary[index].newSet=2

1.8 index=8

1.8 Tmp_Ary[index].newSet=3

1.8 index=9

1.8 Tmp_Ary[index].newSet=4

1.8 index=10

1.8 Tmp_Ary[index].newSet=5

1.9 Tmp_Ary.length=11

1.9 index: 0

1.9 Tmp_Ary[index].newSet=0

1.9 index: 1