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.