js与jQuery 的区别

最新推荐文章于 2022-04-10 12:13:33 发布

前端_小智

最新推荐文章于 2022-04-10 12:13:33 发布

阅读量210

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_43445778/article/details/106044218

版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

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

jQuery是一个javaScript函数库（javaScript框架），使用jQuery，需要在html页面开始引入jQuery库。

<script src="js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google  
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

两者在语法上的差异：

设置一段html代码，分别比较两者在操作元素节点、属性节点、文本节点、css样式、绑定事件等的区别

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>

操作元素节点的区别

javaScript:主要是使用getElement和query.如下代码：

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

jQuery的方法

console.log('jQuery cls', $('.cls'));
console.log('jQuery first', $('#first'));
console.log('nameLi', $("li type[name='na']"));
console.log('li', $('li'));

操作属性节点的不同：

JavaScript(getAttribute、setAttribute以及removeAttribute);

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

JQuery的方式：

console.log('firstAttr', $('#first').attr('id'));
$('#first').attr('name' ,'one');
$('#first').removeAttr('name');
// prop获取操作属性节点
console.log('propGet', $('#first').prop('id'));
$('#first').prop("id",'propSet');
$('#propSet').prop("id",'first');
console.log('propClass', $('.cls')[0]);
// $('.cls')[0].removeProp('name');
console.log('a3', $("#ab"));
$("#ab").removeProp("name");
$("#first").removeProp("name");
//在使用prop设置时，只能设置已经存在于属相的属性值；使用removeProp删除时，现在使用暂时无法实 现；

jquery中attr和prop的区别：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

prop和attr的使用，传入一个参数获取，传入两个参数设置；两者的不同在：读取checked，disabled等属性名=属性值的属性时，attr 返回属性值或者undefined，当读取checked属性时，不会根据是否选中而改变；prop返回true和false，当读取的 checked属性时，会根据是否选中而改变；

操作css样式的区别

JavaScript的使用

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

 innerText：取到或设置一个节点的HTML代码，不能取到css

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

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

在这里插入图片描述

JQuery使用

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

    console.log('serven',$('#serven_times'));
    console.log('servenHTML',$('#serven_times').html());
    console.log('servenText',$('#serven_times').text());
    $('#serven_times').html("<span style='color: #ff3a29'>呵呵</span>");
    $('#serven_times').text('123');
    $('input').val('3333')

在这里插入图片描述

操作文本节点的区别：

    // 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同理

在这里插入图片描述

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

在这里插入图片描述

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

JavaScript对象和JQuery对象
使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；

```
 $("#div").click(function(){})√
```

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

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

JavaScript对象和JQuery对象互转

JQuery —> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
$(“div”).get(0).onclick = function(){}
$(“div”).[0].onclick = function(){}
② JavaScript —> JQuery :使用$()包裹JavaScript对象 (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
var div = document.getElementById(“div”);
$(div).click(function(){});