冲突问题和核心对象和原生js 和 jquer的区别的两个区别（固定格式的区别和入口函数的区别）

jQuery的冲突问题

$有可能其他框架也用 导致两个框架的符号相同出现问题冲突

第一种解决： 释放$的使用权

jQuery.noConflict();//释放$的使用权语句
释放操作必须在编写其他jQuery代码之前编写  释放后jQuery就不能用$后，改为使用jQuery

第二种解决： 自定义一个符号

var jq = jQuery.noConflict();  //自己定义一个变量当做符号

jQuery核心对象

<script>
    //$();  //这个就是代表调用jQuery的核心函数
    //1.接收一个函数
    $(function(){
    
    
        alert('xxx');
    }); 
    //2.接收一个字符串
    $('xx');
    //2.1接收一个字符串选择器
    var $div1 = $('#box1');//返回jQuery对象 对象中有找到的dom对象
    var $div2 = $('.box1');
    console.log($div1);
    console.log($div2);
    //2.2接收一个字符串代码片段
    var $p = $('<p> xxxxx <p>');
    console.log($p);
    $div1.append($p);
    //3.接收一个dom元素
    var span = document.getElementsByTagName('span')[0];
    var $span = $(span);//会被包装成jQuery对象返回
</script>

原生js 和 jquer的区别的两个区别

固定格式的区别

jQuery获得页面所有元素的固定格式：

$(document).ready(function(){
    
    });
//对于吧script写在body标签上面的话必须写的固定格式  只有这里的{}里才能拿到界面所有的元素  下面是所有的几种写法

  	//第一种
    $(document).ready(function(){
    
    
        alert('xxx');
    })
    //第二种
    jQuery(document).ready(function(){
    
    
        alert('yyy');
    })
    //第三种(推荐写这种 因为jQuery本身就是为了简便)
    $(function(){
    
    
        alert('zzz');
    })
    //第四种
    jQuery(function(){
    
    
        alert('aaa');
    })

原生js获得页面所有元素的固定格式：

  将所有内容写在这里window.onload = function(event){
    
    }
//对于吧script写在body标签上面的话必须写的固定格式  只有这里的{}里才能拿到界面所有的元素

入口函数的区别

第一个区别

原生JS和jQuery入口函数的加载模式不同

​ 原生js会等到dom元素加载完毕，并且图片等也加载完毕才执行

​ 但jQuery只会等dom元素加载完毕，不会等图片等加载完毕

<script>
    //原生js
    window.onload = function(event){
    
    
        //通过原生入口函数获得dom元素
        var img = document.getElementsByTagName('img')[0];
        console.log(img);
        //通过原生入口函数获得dom元素的宽高等属性
        var width = window.getComputedStyle(img).width;
        console.log(width);
    };
    //jQuery版
    $(document).ready(function(){
    
    
        //通jQuery入口函数获得dom元素
        var $img = $('img')[0];
        console.log($img);
        //通过jQuery入口函数不可获得dom元素的宽高等属性
        var $width = $img.width();
        console.log($width);
    });
</script>

​ 所以jQuery入口函数获得不到图片的宽高等

第二个区别

 	//原生js编写多个入口函数 ，后面的会直接覆盖前面编写的
    window.onload = function(event){
    
    
        alert('xxx')
    }
    window.onload = function(event){
    
    
        alert('xxxx')
    }
    //jQuery编写多个入口函数 ，每一个都会弹出来 按编写顺序弹出
    $(document).ready(function(){
    
    
        alert('yyy')
    })
    $(document).ready(function(){
    
    
        alert('yyyy')
    })