JQuery与JavaScript在使用上的简单对比

JavaScript

一种运行在浏览器/客户端的编程语言，主要用于实现页面互动等人机交互操作，它的语法比较灵活，可以根据需求编写不同的代码实现，同时语法也相对比较严格，需要按照规范编写。

JQuery

JQuery本质上就是一些JavaScript文件，只是对JavaScript的原生代码进行了封装而已。可以看做一个快速、简洁的JavaScript框架，JQuery设计的宗旨是“write Less，Do More”，即倡导 写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，语法比较简单，可读性强，可以快速实现一些常见的Web交互效果、DOM操作、事件处理等功能。

理解上来说，把JavaScript看做团队开发人员的话，JQuery有点类似于团队中的项目负责人。在一个公司可能同时有许多个项目，领导只需要知道这些项目负责人是负责哪一块的，然后把对应的项目需求分配给他们即可，不需要跟每一个开发人员对接需求。

语法差别

下边是一个 JavaScript 编写的点击事件代码

document.getElementById("btn").addEventListener("click", function(){
  alert("Hello World");
});

用JQuery编写的同样的点击事件代码

$("#btn").click(function(){
  alert("Hello World");
});

 这是一个JavaScript 实现的表单验证的简单代码

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name字段不能为空");
    return false;
  }
}

 用JQuery编写的同样的点击事件代码

$("#myForm").submit(function(){
  if($("#fname").val() == ""){
    alert("Name字段不能为空");
    return false;
  }
});

从这些简单功能的代码对比就能看出，JQuery实现的代码对比JavaScript来说，可读性更好，同时更加简洁，主要体现在各种页面属性获取和设置等操作上，这种优势在代码量较大的场景中会更加明显。

JQuery对象和JS对象二者间的转换

JQuery对象在操作时，会更加方便，同时JQuery对象和js对象方法并不通用，有时候会涉及到二者间的相互转换。

1、JQuery对象 => JS对象：

JQuery对象[索引] 或者 JQuery对象.get(索引)

2、JS对象 => JQuery对象：

只需要在JS对象前加一个$即可，即： $(JS对象)

JQuery进行DOM操作的常用方法

1、内容操作

方法	描述
html()	获取/设置元素的标签体内容（包含标签）
text()	获取/设置元素的标签体纯文本内容（不含标签）
val()	获取/设置元素的value属性值

2、属性操作

（1）通用属性操作

方法	描述
attr()	获取/设置元素的属性
removeAttr()	删除属性
prop()	获取/设置元素的属性
removeProp()	删除属性

attr和prop区别？
attr()方法适用于获取或设置HTML标签属性的值，例如id、class、src、href等。而prop()方法适用于获取或设置元素的DOM属性的值，例如checked、disabled、selected等

（2）class属性操作

方法名称	功能描述
addClass()	添加class属性值
removeClass()	删除class属性值
toggleClass()	切换class属性
toggleClass("one")	判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加。

3、元素的位置改动操作

方法名称	功能描述
append()	追加到末尾。 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾。
prepend()	追加到开头。 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头。
appendTo()	对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾。
prependTo()	对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头。
after()	添加元素到元素后边。 对象1.after(对象2)： 将对象2添加到对象1后边。
before()	添加元素到元素前边。 对象1.before(对象2)： 将对象2添加到对象1前边。
insertAfter()	对象1.insertAfter(对象2)：将对象1添加到对象2后边。
insertBefore()	对象1.insertBefore(对象2)： 将对象1添加到对象2前边。

4、元素的删除操作

方法名称	功能描述
remove()	移除元素，对象.remove()：将对象删除掉。
empty()	清空元素的所有后代元素，对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点。