原生 js 到 jquery 的原因

我长时间用 vue，习惯了，所以好多原生的js，都忘记了，今天来复习一下

1，入口函数只能是唯一，不能是多个，否则会覆盖前面的

    window.onload = function(){
        console.log('页面打开时，就开始运行啦')
    }

2，在页面中获取元素的一些方法

document.getElementById('idValue')  // 获取id 为idValue的元素
document.getElementsByTagName('div') // 获取所有 div 标签的的元素
document.getElementsByName('name')  // 通过元素的name属性值获取元素
document.getElementsByClassName('animated')  // 通过class选择器是animated获取元素
document.querySelectorAll('div.animated')；//获取所有div类为animated的元素
document.body  //获取body元素
document.documentElement // 获取 html 标签，一般三个，html，head，body
document.getElementById("test").parentNode; // 获取test的父节点
document.getElementById("test").childNodes; // 获取test的下面全部的子节点
document.getElementById("test").firstChild; // 获取test下面的第一个子节点
document.getElementById("test").lastChile; // 获取test下面的最后一个子节点
document.getElementById("test").previousSibling; // 获取test上一个兄弟节点
document.getElementById("test").nextSibling; // 获取test下一个兄弟节点

3，js获取元素添加属性值

配置

<input type="button" value="设置边框" id="btnOne">
<input type="button" value="设置文本" id="btnTwo">
<div>我是小五</div>
<div>6789</div>
<div>890</div>

1，添加css样式

window.onload = function(){
   console.log('页面开始运行拉')

   var btnOne = document.getElementById('btnOne')
   var divs = document.getElementsByTagName('div')
   btnOne.onclick = function(){
         for(var i = 0;i<divs.length;i++){
              divs[i].style.width = '600px'
              divs[i].style.backgroundColor="#FFCC80"; 
              divs[i].style.border = '1px red solid'
         }
    }
}

2，修改、添加文本

window.onload = function(){
     console.log('页面开始运行拉')

     var btnTwo = document.getElementById('btnTwo')
     btnTwo.onclick = function(){
        for(var i = 0;i<divs.length;i++){
            divs[i].textContent= '我是设置的文本'
        }
     }
}

git.gif

3，原生 js 到 jquery 的发展

1，原生 js 的缺点

• 入口函数只能是一个，不可以是多个，否则会覆盖
• 原生 js 的 api 名字都太长太难记了
• 原生 js 有时候代码冗余
• 原生 js 中有些属性或者方法，有的浏览器兼容问题
• 原生 js 容错率比较低，前面的代码出问题，后面的代码执行不了

2，解决方法：为了解决以上问题，jquery 产生了

4，jquery 操作

配置

<input type="button" value="设置边框" id="btnOne">
<input type="button" value="设置文本" id="btnTwo">
<div>我是小五</div>
<div>6789</div>
<div>890</div>

1，首先要引入jquery库，

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2，入口函数，可以设置多个入口函数，且不影响

$(document).ready(function(){
       
 })

3，添加css样式

$(document).ready(function(){
        $('#btnOne').click(function(){
            $('div').css('border','1px red solid')
            $('div').css('width','600px')
            $('div').css('backgroundColor','#FFCC80')
        })
 })

4，修改、添加文本

$(document).ready(function(){
        $('#btnTwo').click(function(){
            $('div').text('我是设置的文本')
        })
 })

git.gif

5，jquery 优势

• 可以写多个入口函数
• jquery 的 api 名字比较容易记
• jquery 代码比较简洁
• jquery 解决了浏览器兼容问题
• 容错率较高，前面出现了错误，后面的代码不受影响

jquery 实现起来是不是特别的简单