JavaScript与jQuery的区别

Posted 堇墨傾城

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript与jQuery的区别相关的知识,希望对你有一定的参考价值。

javascript与jQuery的区别:

 

JavaScript:

javaScript的简写形式就是JS,一种广泛用于客户端Web开发的脚本语言,常用来给html网页添加动态功能(其编写的程序可以被嵌入到HTML或XML页面中,并直接在浏览器中解释执行)。

  • 组成部分:

核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)

 

jQuery:

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果。

  • 特点:

jQuery是当前很流行的一个JavaScript框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。

 

一、本质区别:

1、javaScript是通过<script></script>标签插入到html页面中,支持当前所有主流浏览器的轻量级的编程语言。

2 、jQuery是一个javaScript函数库(javaScript框架),使用jQuery,需要在html页面开始引入jQuery库。

例: <script src="js/jquery.min.js"></script>
简单总结:
1、javaScript(JS)是一门前端语言。
2、jQuery是一个框架,它对javaScript进行了封装,使其更方便使用。

 

二、语法上的差异:

1、操作元素节点

JavaScript使用:(getElement系列和query系列)


var first = document.getElementById(\'first\');
var cls = document.getElementsByClassName(\'cls\');
var li = document.getElementsByTagName(\'li\');
var naName = document.getElementsByName(\'na\');
var queryContent = document.querySelector(\'#a3\');
var queryContents = document.querySelectorAll(\'.cls\');

jQuery的使用:


$(\'.cls\')
$(\'#first\')
$("li type[name=\'na\']")
$(\'li\')

 

2、操作属性节点:

JavaScript使用:


var firstProp = document.getElementById(\'first\').getAttribute(\'id\');
document.getElementById(\'first\').setAttribute(\'name\', \'one\');
document.getElementById(\'first\').removeAttribute(\'name\');

jQuery的使用:


var id=$(\'#first\').attr(\'id\')
$(\'#first\').attr(\'name\' ,\'one\');
$(\'#first\').removeAttr(\'name\');

// prop获取操作属性节点
$(\'#first\').prop(\'id\')
$(\'#first\').prop("id",\'propSet\');
$(\'#propSet\').prop("id",\'first\');

注:在使用prop设置时,只能设置已经存在于属相的属性值

ps:
jquery中attr和prop的区别:
  1、 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  2、对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

 

3、操作文本节点:

JavaScript使用:

1、innerHTML:取到或设置一个节点的HTML代码,可以取到css,以文本的形式返回

2、innerText:取到或设置一个节点的HTML代码,不能取到css

3、value:取到input[type=\'text\']输入的文本

<ul>
  <li id="i1" ><span style="color: chartreuse">嘿嘿</span></li>
  <li id="i2" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名:<input type="text" id="input" value="222333">
</body>
// JavaScript 方法
<script type="text/javascript">
  console.log(\'i1\', document.getElementById(\'i1\').innerHTML);
  document.getElementById(\'i1\').innerHTML = "<span style=\'color: #ff3a29\'>呵呵</span>";
  console.log(\'i1 text\', document.getElementById(\'i1\').innerText);
  document.getElementById(\'i1\').innerText = \'123\';
  console.log(\'sdfads\',document.getElementById("input").value);
</script>

结果为:


i1 <span style="color: chartreuse">嘿嘿</span>
i1 text 呵呵
sdfads 222333

 

jQuery的使用:

1、.html()取到或设置节点中的html代码2、.text()取到或设置节点中的文本3、.val()取到或设置input的value属性值

$(\'#i1\')
$(\'#i1\').html()
$(\'#i1\').text()
$(\'#i1\').html("<span style=\'color: #ff3a29\'>呵呵</span>")
$(\'#i1\').text(\'123\')
$(\'input\').val(\'3333\')

 

4、操作css样式:

JavaScript使用:


// childNodes获取当前节点的所有子节点
  console.log(\'firstChildNodes\',document.getElementById(\'first\').childNodes);
  // children 获取当前节点的所有元素子节点
  console.log(\'divChildren\', document.getElementById(\'div\').children);
  // parentNode:获取当前节点的父节点下的所有节点
  console.log(\'parentNode\', document.getElementById(\'ab\').parentNode);
  // #text (文本节点的 nodeName 永远是 #text) [获取第一个元素节点,包括回车等文本节点]
  console.log(\'firstChild\', document.getElementById(\'div\').firstChild);
  // 获取第一个元素节点,不包括回车节点
  console.log(\'firstElementChild\', document.getElementById(\'div\').firstElementChild);
  // lastChild、lastElementChild 同理
  console.log(\'previousSibling\', document.getElementById(\'div\').previousSibling);
  console.log(\'previousElementSibling\',
    document.getElementById(\'div\').previousElementSibling);
  // nextSibling、nextElementSibling同理

jQuery的使用:


console.log(\'jQuery first-child\',$(\'.cls:first-child\'));

 

6、给一个节点绑定事件:

JavaScript使用:


document.getElementById(\'first\').onclick = function (ev) {
  alert(\'123\');
}

jQuery的使用:

①:事件绑定的快捷方式


$(\'#first\').click(function () {
  alert(\'456\');
})

②:使用on进行事件绑定(可以使用on同时给同一对象绑定多个事件**)


$(\'#ab\').on(\'click\', function () {
  alert(\'111\');
})

③ :使用on,给一个对象绑定多个事件


$("button:eq(0)").on({
      "click":function () {
          console.log("click");
      },
      "mouseover":function () {
          console.log("mouseover");
      },
      "mouseover":function () {
          console.log("mouseover2");
      }
  });

④ :使用on给回调函数传参,要求是对象格式,传递的参数可以在e.data中取到;jquery中的e只能通过参数传进去,不能用window.event


$("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
      console.log(e);
      console.log(e.data);
      console.log(e.data.name);
      console.log(e.data.age);
      console.log(window.event);//js中的事件因子

  });

 

7、JQuery的文档就绪函数和window.onload的区别:

①:window.onload必须等待网页资源(包括图片等)全部加载完成后,才能执行; 而文档就绪函数只需要等到网页DOM结构加载完成后,即可执行。

②:window.onload在一个页面中,只能写一次,写多次会被最后一次覆盖;而文档就绪函数在一个页面中可以有N个。

 

三、JavaScript对象和JQuery对象的方法不能混用

1、JavaScript对象和JQuery对象:

①:使用$("")取到的节点为JQuery对象,只能调用JQuery方法,不能调用JavaScript方法;

$("#div").click(function(){})√
$("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法

ps:同理,使用、document.getElement系列函数取到的对象为JavaScript对象,也不能调用JQery函数

2、JavaScript对象和JQuery对象互转:

①:JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象

$("div").get(0).onclick = function(){}
$("div").[0].onclick = function(){}

②:JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象(JQuery不管获得几个对象都是一个数组,可以直接给整个数组都添加某一事件):

var div = document.getElementById("div");
$(div).click(function(){});

 

以上是关于JavaScript与jQuery的区别的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

jquery和javascript的区别(转载自脚本之家)

php课程---JavaScript与Jquery的区别(转)

js和jquery的区别是啥?

常用Javascript代码片段集锦

jquery与js的区别与基础操作