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');