jQuery 與 JS 的區別

1.獲取元素：

JS:(DOM對象)

document.getElementById('id')  ;

document.getElementsByClassName('classname');

jQuery：

$('#id');

$('.classname');

2.操作內容：

JS：

document.getElementById('id').innerText = 'text';

document.getElementById('id').innerHTML = 'HTML';

jQuery：

var str = $('#ID').text('xxx');

$('#ID').html('xxx');

3.操作屬性：

JS：

document.getElementById('div1').setAttribute('name','value');

jQuery：

var v = $('#id').attr('data');
//修改class：通過添加移除class名來控制樣式.

在css中設置class名為white的元素的樣式，比如 設置字體顏色為白色

<style>
    
    .white{
        color:white;
    }

當我們給在本來沒有樣式的某個元素添加了一個class名white，那么他的字體顏色會變為白色：

$('#id').addClass('white');

移除同理：
$('#id').removeClass('white');

4.添加事件

JS：

var a = document.getElementsByClassName('id')

a.onclick = function( ){ 

　　　　　　　　alert("123");

　　　　　　　　　　 };

jQuery：

$('#id').click(function( ){
　　alert('123');
})

$('#id').on('click',function( ){
　　alert('456');
})

總結：

1.JS原生代碼不能與jQuery混用，錯誤實例：$('#id').style.color 

2.原生JS中的對象數組在Jquery中取用方法不同：

　　　在JS中用DOM對象取class會可能 取到一個數組：var a = document.getElementsByClassName('classname')

我們要操作a的時候就要用循環來遍歷 。

　　   在jQuery中不需要循環遍歷：$('.classname').addClass('blue');

如果想要操作具體的其中一個 ，我們可以通過索引來控制，比如操作索引0的一項：$('.classname').eq(0).addClass('blue');