冲突问题和核心对象和原生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>//原生jswindow.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')})

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

原生JS 面试题（基础）（概率大）
文章目录 1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别 2.面试题:什么是 cookie? 如何回答! 3.面试题: 描述一下 cookie ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
原生JS实现购物车制作和楼梯导航（11）
购物车 1. 全选按钮 1.1 将所有的单选按钮和全选按钮保持一致, 并且所有的全选按钮也保持一致 1.2 将总件数变成单选按钮的个数 1.3 计算总计 2. 单选按钮功能: 2.1 判断 ...
html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
js map遍历修改对象里面的值_求职季之你必须要懂的原生JS(上)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...
【原生js实现MVVM核心框架】
MVC是一种框架模式,也是在学习前端时最先接触的框架模式,而MVP与MVVM都是在MVC的基础之上演化而来,三者各有优劣,本文主要按照下面思维导图进行介绍. 一.mvc mvp mvvm设计理念 1. ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
分支结构||分支循环结构||使用原生js遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...