jQuery 用法 - $('#id') - $('div') - $('.class') - append - appendchild - remove .printThis()

 

jQuery 是什麼 ?

jQuery 是一個 JavaScript 函式庫 (Javascipt Framework)，主要目的就跟 Logo 上面寫的精神一樣：「write less, do more」，由於如果要直接用 Javascript 將所有功能實作出來，常常要費時費力且造成大量且難以閱讀的程式碼，更嚴重者，有於瀏覽器之間的差異，常常要針對不同瀏覽器寫不同的程式碼，讓程式碼維護的難度大為提升。

jQuery 就是一個讓你加速網頁程式開發速度的工具，在這個倡導 Cloud 的 2011 年，許多應用程式都是使用網頁的方式來呈現，許多大型專案也都使用網站作為介面，因此，如何有效率的產出大量的 javascript 與 ajax ，就是 jQuery 所主打的目標。

假設今天想要用 Javascript 讀取網頁中的單選按鈕「radio Button」，程式碼如下：

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;

}

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

但如果使用 jQuery 的話，要怎樣完成上面的命令呢，只要一行

var checkValue = $(‘[name=”radioGroup”]:checked’).val();

其中的 $() 符號就是 jQuery 常用的選擇器，善用選擇器可以快速找到網頁當中的物件

 

但是起初瀏覽器腳本，僅有提供以下三個可以存取網頁內容節點的API：

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByClassName()

要取得h1標籤、#my-id元素節點或是.my-class類別節點們並不困難。不過ul li和#my-id li就麻煩了…會需要這樣做：

1. inline event:

<h1 onclick="console.log('click')" id="my-id">Hello</h1>

2. addEventListener

 

jQuery只需要一行：

$("#my-id").click()

 

à

$("#my-id").addClass("red")

$("li").addClass("red")

DOM的用法:

插入一個Node物件

const parent = document.createElement('div');

const child = document.createElement('p');

parent.append(child);

// 這會將子元素追加到div元素

// 然後div看起來像這樣<div> <p> </ p> </ div>

這會將子元素追加到 div 元素，然後 div 看起來像這樣

<div> <p> </ p> </ div>

1>.append()

此方法用於以Node物件或DOMString(基本上是文字)的形式新增元素。

插入DOMString

const parent = document.createElement('div');

parent.append('附加文字');

然後 div 看起來像這樣的

<div>附加文字</ div>

 

2>.appendChild()

與 .append 方法類似，該方法用於DOM中的元素，但在這種情況下，只接受一個Node物件。

插入一個Node物件

const parent = document.createElement('div');

const child = document.createElement('p');

parent.appendChild(child);

這會將子元素追加到 div 元素，然後 div 看起來像這樣

<div> <p> </ p> </ div>

 

.append 接受Node物件和DOMString，而 .appendChild 只接受Node物件。

.append 沒有返回值，而 .appendChild 返回附加的Node物件。

 

3>append()  和 appendTo() 的用法

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

<h2>Greetings</h2>

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

 

$('<p>Test</p>').appendTo('.inner');

結果à

<h2>Greetings</h2>

<div class="container">

  <div class="inner">

    Hello

    <p>Test</p>

  </div>

  <div class="inner">

    Goodbye

    <p>Test</p>

  </div>

</div>

 

2>>

$('h2').appendTo($('.container'));

à 結果

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

  <h2>Greetings</h2>

</div>

http://jasonday.github.io/printThis/#nada

$(“#print_area1,#print_area3”).printThis() à 產生預覽的畫面

$(".demo").printThis();

 

1>DOM 的元件移除 , $(‘#print_area1”).remove();

à .remove() 将元素移出DOM。 

请看下面的HTML:

1 2 3 4

<div class="container">   <div class="hello">Hello</div>   <div class="goodbye">Goodbye</div> </div>

可以移除任何想要移除的元素:

1	$('.hello').remove();

结果如下：

1 2 3

<div class="container">   <div class="goodbye">Goodbye</div> </div>

5>append 和 appendChild 的不同

Differences from Node.appendChild() : Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects. Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.

V120502A - jQuery - 屬性設定及 CSS

 目的: jQuery 屬性設定及 CSS

處理方法: 1>取得  jQuery屬性:  $("#my_tbl").attr('style')
                       var Tmp_tbl = $("#my_tbl");

                        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));

                  2>設定 jQuery屬性:   $("#my_tbl").attr('style') 

                     Tmp_tbl.attr('style','border: 5px solid red;');

                  3>取得輸入元件的欄位值

// HTML <input type="text"> // 設定欄位值 $('input').val('Hello World!'); // 設定後的結果 <input type="text" value="Hello World!">

4>設定 CSS 屬性值
                     例如，替所有段落的字體設為紅色，背景設為藍色：

                      $('p').css({ color: 'red', 'background-color': 'blue' });

      

1>*.js

// [確定]  - 於 sub_panel1 建立 Table

function mySub1_OkBtn1_click() {

    var Tmp_Str = "<div  id='print_area'   style = 'border: 1px solid red; width=100%;' >"

        + "<table style = 'border: 1px solid black; width=100%;'  id = 'my_tbl' > "        

        + "<tr style='border: 6px solid blue;'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"

        + "<tr style='border: 6px solid blue;'><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"

        + "</table>"

        +"</div>";

    //var Tmp_tbl = Ext.getCmp("my_tbl");

    var Tmp_tbl = $("#my_tbl");

    if (!checkisnull(Tmp_tbl)) {        

        console.log("0 Tmp_tbl:", Tmp_tbl);        

        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));

        console.log("0 $('#my_tbl').attr('style'):", $("#my_tbl").attr("style"));

        Tmp_tbl.attr('style','border: 5px solid red;');

    };    

    var Tmp_sub_panel1 = $('#sub_panel1');

    Tmp_sub_panel1.append(Tmp_Str);

}

// [設定  property]  - 設定  Table 的 style  - 改變顏色為 藍色

function sub_PrnTable_OkBtn2_click() {

    var Tmp_tbl = $("#my_tbl");

    if (!checkisnull(Tmp_tbl)) {

        console.log("5 Tmp_tbl is captched");

        console.log("5 Tmp_tbl:", Tmp_tbl);        

        console.log("5 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));        

        Tmp_tbl.attr('style', 'border: 2px solid blue;');

        console.log("5 $('#my_tbl').attr('style'): blue", $("#my_tbl").attr("style"));

    }

}

jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式，如果你有這個經驗，就會知道在設定時會有許多複雜及麻煩的問題，比如說舊 IE 它 setAttribute 不吃 name 屬性；又像在指定 class 屬性時，名稱不能用 class 而要用 className 等問題。令人開心的，jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了！

用 jQuery 時，你只需要記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得選取到的元素之屬性值：

.attr(attributeName)

例如，取得第一個連結的 title 值：

$('a').attr('title');

---

替選取到的元素設定屬性值：

.attr(attributeName, value)

例如，替所有連結的 title 屬性設為 Enjoy jQuery：

$('a').attr('title', 'Enjoy jQuery');

---

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值：

.attr(attributes)

例如，同時改變 alt 和 title 屬性：

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

---

移除元素屬性也很簡單：

.removeAttr(attributeName)

例如，移除所有連結的 title 屬性：

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

jQuery 對 class 這個屬性有特別的處理

對於 class，jQuery 另外提供個別的函式來作 class 增刪的動作，這是為了可以方便疊加與移除特定的 class。

增加 class:

.addClass(className)

例如，幫所有的段落加入 selected 和 highlight 類別：

$('p').addClass('selected highlight');

用空白隔開多個 class。

---

移除 class：

.removeClass(className)

例如，移除 id 為 wrapper 的元素其 blue 這個類別：

$('#wrapper').removeClass('blue');

Value - Getter/Setter

val，一個很常用到的方法，用來取得和設定表單元素的 value 值：

.val() // get
.val(value) // set

例如，取得表單元素的值：

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如，設定表單元素的值：

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 CSS 的問題上簡直頭大，設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor；對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單，就直接用 key/value 成對的一組屬性來設定，我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式：

.css(propertyName)

例如，取得第一個段落的字體顏色：

$('p').css('color'); 

---

替所有匹配到元素設定一種樣式：

.css(propertyName, value)

例如，替所有段落的透明度設為半透明：

$('p').css('opacity', '0.5');
// 是的，設 opacity 就可以，jQuery 已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式：

.css(properties)

例如，替所有段落的字體設為紅色，背景設為藍色：

$('p').css({
  color: 'red',
  'background-color': 'blue'
});

若屬性中包含 -，記得加上引號，沒有的話則可有可無。

元素的位置及寬高 - 常用的屬性獨立出來

.width() // 取得元素寬度
.width(value) // 設定元素寬度

.height() // 取得元素高度
.height(value) // 設定元素高度

.width() .height() 抓到的值是元素內容寬、高度，不包含 padding, border, margin。

例如，取得第一個匹配到的段落元素高度 (px) (無參數)

$('p').height();

例如，設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)

$('p').height(100);

---

取得元素相對於當前視窗左上角的位置偏移量：

.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

一般在傳統 JavaScript 我們會用 offsetLeft 及 offsetTop 來取得元素在頁面上的座標，不過 IE 與 FF 瀏覽器解讀這兩個屬性是不一樣的，IE 會解讀成目標元素跟父元素的 left-top 距離；FF 則是相對於頁面上的 left-top，所以在 IE 下我們一般都需要利用往父元素跑迴圈加總 offsetLeft 來取得元素在頁面上的座標值。不過，在 jQuery 中我們統一用 offset() 就可以囉！

看過上述 jQuery 對於屬性及樣式的操作，是不是簡化了我們許多不必要的煩惱，讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢！