首页 前端知识 【jQuery】 第一章

【jQuery】 第一章

2024-03-12 01:03:24 前端知识 前端哥 543 558 我要收藏

一.jquery简介

1.什么是Jquery?
jQuery的本质就是JavaScript
只是将JavaScript的某些方法封装成一个库,
极大简化了原生JavaScript开发。
(潜台词:JS怎么用,Jquery就怎么用,只是把JS的代码简化了)

2.什么是库? -----lib
“库”--->(library--文库,图书馆)-->  将一些相关函数方法进行封装以便使用。
类似于jar包。

3.Jquery的优势:
①.轻量级,jquery库的大小仅仅几十kb
②.强大的选择器
(用更精简的代码即可获取指定的html元素,
摈弃了之前通过document.getElement等方法,并支持批量操作元素)
③.浏览器的兼容性,能兼容大部分市面上的浏览器
④.等等...    

4.jQuery的版本:
主要分为1.x.x   2.x.x   3.x.x
jQuery的三个版本功能几乎相同,主要是浏览器的兼容性不同,
随着版本的升高,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>
   alert($);
</script>

三.初学者的引入Jquery的常见错误

1.引入js的路径有问题或忘记引入jquery
2.顺序问题,要先引入jquery  再写相关的代码  script的顺序问题
3.不要在引入的jquery的script标签内部写代码

四.jquery的魔力1_代码的简化

<body>    
<h1>hello js</h1>
<script src="js/jquery.js">
</script>
<script>
//魔力1---体现代码的简化

//分别用JS和Jquery来将页面中的h1标签的内容 修改为 你好 
 
//实现
// document.getElementsByTagName("h1")[0].innerText = "你好";

//jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
// $("h1").text("你好");
</script>
</body>

五.jquery的魔力2_批量操作元素的魔力

<body>
    <h1>hello js</h1>
    <h1>hello js</h1>
    <h1>hello js</h1>
    <h1>hello js</h1>
    <h1>hello js</h1>
    <h1>hello js</h1>
    
    <script src="js/jquery.js">
    </script>
    
    <script>
        //魔力2---批量操作元素的简化
        
        //分别用JS和Jquery来将页面中所有的h1标签的内容 修改为 你好 
         
        //JS实现
        // var h1 = document.getElementsByTagName("h1");
        
        // for (let i = 0; i < h1.length; i++) {
        //     h1[i].innerText = "你好";
        // }
        
        //jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
        $("h1").text("你好");
    </script>
    
</body>

六.jquery的常见方法

<body>
    <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);    
    </script>
</body>

七.文档就绪函数

<script src="js/jquery.js">
</script>
<script>
    //了解即可  只要你保证你的js代码 放在HTML最下方  就可以不用写它
    
    //文档就绪函数意义:  将HTML加载完毕之后 再执行
    // $(function(){
    //     //代码~~
    // });
    //看到上面的代码 就需要知道 他是文档就绪函数
</script>

八.js对象和jquery对象的讲解

<body>
    <script>
        
        // 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是批量操作--如需单独设置,就确保其只有一个元素
    </script>
</body>

九.jquery对象的别名

<body>
    <script src="js/jquery.js"></script>
    <script>
        //jqury对象的名字是: $  
        //jqury对象的名字是: jQuery
        alert($==jQuery);//true
        
        $("aa");
        jQuery("aa");
        //上述两行代码的意义一样,都表示获取aa元素
    </script>
</body>

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