jQuery

2024-01-31 12:01:10 前端知识 前端哥 391 735 我要收藏

                什么是Jquery?

jQuery的本质就是JavaScript

                只是将JavaScript的某些方法封装成一个库,

                极大简化了原生JavaScript开发。

                (潜台词:JS怎么用,Jquery就怎么用,只是把JS的代码简化了)

               

                什么是库? lib

                “库”--->(library--文库,图书馆)-->  将一些相关函数方法进行封装以便使用。

                类似于jar包。

                Jquery的优势:

                1.轻量级,jquery库的大小仅仅几十kb

               

                2.强大的选择器

                (用更精简的代码即可获取指定的html元素,

                摈弃了之前通过document.getElement等方法,并支持批量操作元素)

               

                3.浏览器的兼容性,能兼容大部分市面上的浏览器

                jQuery的版本:

主要分为1.x.x   2.x.x   3.x.x

                jQuery的三个版本功能几乎相同,主要是浏览器的兼容性不同,

                随着版本的升高,jQuery逐步放弃了对老旧浏览器的兼容

               

            就理解为 引入的一个外部的JS  这个外部的JS就是Jquery

            如下:

            <script src="xxx" ></script>

            然后再另外的script标签中就可以既使用JS代码 也可以使用Jquery代码

            如何引用:

 1.下载jquery的js文件  但是Hbuiler内置了如何操作:

                    A.选中js文件夹

                    B.右键创建一个js文件

                    C.在下方选中jquery1.x  然后重命名即可

                    D.不要去动里面的代码

           

                2.在script标签中引入刚刚下载的jquery文件

                    <script src="js/jquery.js"></script>

               

                3.设置语法提示库

                    右下角  选择jquery  xxx

               

               

                4.测试

                通过alert($) ;  如何正确弹窗就说明OK了 反之失败

               

               

                凡是在控制台看到了这一行代码:$ is not defined

                就表示Jquery没有引入成功

                Jquery的压缩版:

在开发中:会经常看见xxxx.min.xx格式的文件

               

                    看到了这个min就理解为压缩版即可。

                    就是去除了空格、换行、注释等,让占据空间变小而已。

                   

                    没有min关键字的就是未压缩版

               

                    了解即可。

               

               

                压缩版理解为 上线版   项目都上线了,希望项目的体积越小。

               

                未压缩版理解为 开发版  项目还没有上线,我随时需要对代码进行修改

        <script src="js/jquery.js"></script>

        <script>

               

             

1.引入js的路径有问题或忘记引入jquery       

 2.顺序问题,要先引入jquery  再写相关的代码  script的顺序问题         

 3.不要在引入的jquery的script标签内部写代码

           

        <input type="text" id="a1"  value="123" />

       

        <h3>这是一个h3标签</h3>

       

       

       

        <p style="color: red;">这是p标签</p>

       

       

       

        <button>按钮</button>

       

       

        <script src="js/jquery.js"></script>

        <script>

            //暂时先将$("xx") 理解为是获取xx元素  且暂时理解为它是jquery对象

            //暂时将 document.getElementByXxx 理解为JS对象

            //注意: js对象无法使用Juqery的相关用法  Juqery对象也无法使用JS的相关用法

           

            //Jquery中常见方法如下:

            // val()   text()   html()     css()  attr()     prop()

           

            //将input组件的值修改

            // document.getElementById("a1").value = "你好";

            // $("input").val("鸟");

           

            //注意事项:  js的value是属性 jquery的val是方法

           

            //val使用场景:只能修改表单元素 且拥有value值的组件

            //例如文本框密码框  但是像h1标签 span标签就无法使用该方法

           

            //val的2种用法:

            //1.取值:

            // var str = $("input").val();

            // alert(str);

            //2.赋值

            // $("input").val("~~~");

           

           

            //注意事项:  js的innerText是属性 jquery的text是方法

           

            //text使用场景:只能修改非表单元素  

            //例如h1标签 span标签  但是像文本框密码框就无法使用该方法

           

            //text的2种用法:

            //1.取值:

            // var str = $("h3").text();

            // alert(str);

            //2.赋值

            // $("h3").text("!!!");

           

           

            //注意事项:  js的innerHtml是属性 jquery的html是方法

           

            //html使用场景:只能修改非表单元素  

            //例如h1标签 span标签  但是像文本框密码框就无法使用该方法

           

            //html和text的区别是:前者会将html标签识别  后者只会解析成文本

           

            //html的2种用法:

            //1.取值:

            // var str = $("h3").html();

            // alert(str);

            //2.赋值

            // $("h3").html("!!!");

           

           

           

            //注意事项:  js的style.xxx是属性 jquery的css是方法

           

            //css使用场景:修改或获取HTML元素的CSS的样式  

           

           

            //css的2种用法:

            //1.取值:

            // var str = $("p").css("color");

            // alert(str);

            // 2.赋值

            // $("p").css("color" , "yellow");

           

           

           

           

            //attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false

            //常见的属性A类(等于一个具体的值):id   class   name    type      src   href  

           

            //attr的2种用法:

            //1.取值:

            // var str = $("input").attr("id");

            // alert(str);

            // 2.赋值

            // $("input").attr("id" , "aaa");

           

            // $("button").attr("disabled","disabled");//没问题

            //但是你会发现 无法通过attr将其修改为 可以使用

           

            //prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false

            //常见的属性B类(等于一个true或false):disable  readonly     checked

            // var str = $("button").prop("disabled");

            // alert(str);

           

            $("button").prop("disabled",false);

   

                   

           

           alert($);

文档就绪函数意义:  将HTML加载完毕之后 再执行

 $(function(){

  //代码~~

       });

看到上面的代码 就需要知道 他是文档就绪函数

jquery对象:

  // $(“xxx”)函数会返回一个对象,这个对象被称为jQuery对象。

            // 例如刚刚所学习的css(),html()等都是jQuery对象的专属方法。

           

           

            // dom对象:就是JS通过document对象获取的对象

            // 例如document.getElementById();

           

            // js对象无法使用Juqery的相关用法  Juqery对象也无法使用JS的相关用法

           


 

            //js对象和jquery对象的区别:

            // 下表列出了dom对象和jQuery对象进行一些操作的对比

            // 1.原生JavaScript都是通过更改属性来实现

            // 2.jQuery对象都是通过调用方法来实现

            // 3.JavaScript是单独操作--如需批量操作需要借助for循环

            // 4.jQuery是批量操作--如需单独设置,就确保其只有一个元素

jqury对象的名字是: $  

            //jqury对象的名字是: jQuery

            alert($==jQuery);//true

           

            $("aa");

            jQuery("aa");

            //上述两行代码的意义一样,都表示获取aa元素

转载请注明出处或者链接地址:https://www.qianduange.cn//article/954.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!