乔越

发表文章数:122

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 「jQuery」初识jQuery版本区别,入口函数的模式和写法,修改访问符号,冲突问题

初识jQuery

jQuery是什么?

「jQuery」初识jQuery版本区别,入口函数的模式和写法,修改访问符号,冲突问题

jQuery 是一个简洁而快速的 JavaScript 库,可用于简化事件处理,HTML文档遍历,Ajax 交互和动画,以便快速开发网站。jQuery 简化了 HTML 的客户端脚本,从而简化了 Web 2.0 应用程序的开发。

jQuery与JavaScript的区别

从代码上可以看出来 jquery的代码量更少,更加的清晰可以很好的看出来代码所表示的意思。

//js获取元素
//原生js找到相对的元素
window.onload = function(ev){
  var div1 = document.getElementsByTagName("div")[0];
  var div2 = document.getElementsByClassName("jqc1")[0];
  var div3 = document.getElementById("jqi1");
  //原生js 改变背景颜色 css
  div1.style.background = "red";

  console.log(div1);
  console.log(div2);
  console.log(div3);
};
//jq获取元素
//jquery找到相对应的元素
//首先要导入jquery库
$(function(){
  var $div1 = $('div');
  var $div2 = $('.jqc1');
  var $div3 = $('#jqi1');
  //jquery 修改css
  $div2.css({
    background:"red",
    width:"200px"
  });
  console.log($div1);
  console.log($div2);
  console.log($div3);
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery初识</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #333333;
        }
    </style>
    <script>
        //原生js找到相对的元素
        window.onload = function(ev){
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("jqc1")[0];
            var div3 = document.getElementById("jqi1");
            //原生js 改变背景颜色 css
            div1.style.background = "red";

            console.log(div1);
            console.log(div2);
            console.log(div3);
        };

        //jquery找到相对应的元素
        //首先要导入jquery库
        $(function(){
            var $div1 = $('div');
            var $div2 = $('.jqc1');
            var $div3 = $('#jqi1');
            //jquery 修改css
            $div2.css({
                background:"red",
                width:"200px"
            });
            console.log($div1);
            console.log($div2);
            console.log($div3);
         });
    </script>
</head>
<body>
    <div></div>
    <div class="jqc1"></div>
    <div id="jqi1"></div>
</body>
</html>

jQuery的版本区别

有1.X,2.X,3.X版本
如果考虑兼容IE 6/7/8 需要bai使用2.X以下du(不包含)
不同版本之间大体功能区别不大,少部zhi分函数移除或修改dao
同版本分xx.js和xx.min.js,.js的文件为学习版,体积稍大,.min.js为压缩版/开发版,体积小

jQuery和js入口函数的区别

原生js和jq入口函数的加载模式不一样

  1. 原生js会等到dom元素加载完毕 并且图片也加载完毕才执行
  2. jq会等到dom加载完毕,但不会等到图片也加载完毕就会执行。
 //js
 window.onload = function(ev){
   //1.通过js原生入口函数获取图片
   var img = document.getElementsByTagName("img")[0];
   console.log(img);
   //2.通过原生js可以获取图片的宽高
   var w = window.getComputedStyle(img).width;
   console.log(w)
 }
 //  jq
 $(document).ready(function(){
   //1. 通过jq入口函数获取图片
   var $img = $('img');
   console.log($img)
   //2.jq获取图片宽高
   //jq入口函数不可以获取dom元素的 宽高
   var $w = $img.width();
   console.log($w)
})
  1. 原生js如果编写多个入口函数后面的会覆盖前面的
  2. jq中编写多个入口函数 后面的不会覆盖前面的
//js
window.onload = function(ev){
	alert('hello 1')
};
window.onload = function(ev){
	alert('hello 2')
};
//jq
$(document).ready(function(){
	alert('h1')
})
$(document).ready(function(){
	alert('h2')
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq-乔越博客</title>

     <!-- 引入jquery库 -->
     <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

     <script>
         //js
         window.onload = function(ev){
             //1.通过js原生入口函数获取图片
             var img = document.getElementsByTagName("img")[0];
             console.log(img);
             //2.通过原生js可以获取图片的宽高
             var w = window.getComputedStyle(img).width;
             console.log(w)
         }
        //  jq
         $(document).ready(function(){
            //1. 通过jq入口函数获取图片
             var $img = $('img');
             console.log($img)
             //2.jq获取图片宽高
             //jq入口函数不可以获取dom元素的 宽高
             var $w = $img.width();
             console.log($w)

         })

        /*
        原生js和jq入口函数的加载模式不一样
        原生js会等到dom元素加载完毕 并且图片也加载完毕才执行
        jq会等到dom加载完毕,但不会等到图片也加载完毕就会执行。
        */
       /*
       原生js如果编写多个入口函数后面的会覆盖前面的
       jq中编写多个入口函数 后面的不会覆盖前面的
       */
      //js
      window.onload = function(ev){
          alert('hello 1')
      };
      window.onload = function(ev){
          alert('hello 2')
      };
      //jq
      $(document).ready(function(){
          alert('h1')
      })
      $(document).ready(function(){
          alert('h2')
      })
     </script>
</head>
<body>

    <img src="https://i.loli.net/2020/06/15/6Od7xMFWqs3hw4I.png" alt="">

</body>
</html>

jQuery其他入口函数的写法

 //第一种写法
 $(document).ready(function(){
		alert('hello1')
 })
 //第二种写法
 jQuery(document).ready(function(){
 		alert('hello2')
 })
 //第三种写法(推荐)
 $(function(){
 		alert('hello 3')
 })
 //第四种写法
 jQuery(function(){
 		alert('hello 3')
 })

jQuery冲突问题

//1.释放$的使用权
//注意点 释放操作必须在编写其他jq代码之前
//释放之后不能在使用$用jquery
//jQuery.noConflict()  //自定义一个访问符号
var qy = jQuery.noConflict();
qy(function(){
		alert("新符号")
})
抱歉,隐藏内容 回复 后刷新可见

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《「jQuery」初识jQuery版本区别,入口函数的模式和写法,修改访问符号,冲突问题》 发布于2020-06-15

分享到:
赞(0) 打赏 生成海报

评论 1

3 + 5 =
  1. #1
    qq_avatar

    不错不错1111

    书白3周前 (06-16)回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册