《jquery——基础》-CSDN博客

本文链接：https://blog.csdn.net/2303_78171667/article/details/134768964

1_jquery简介

什么是Jquery?

jQuery的本质就是JavaScript

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

极大简化了原生JavaScript开发。

（潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了）

什么是库? lib

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

类似于jar包。

Jquery的优势：

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

2.强大的选择器

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

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

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

4.等等...

jQuery的版本：

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

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

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

</script>

2_如何使用jquery

<!--

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

如下：

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

如何引用：

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

A.选中js文件夹

B.右键创建一个js文件

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

D.不要去动里面的代码

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

3.设置语法提示库

右下角选择jquery xxx

4.测试

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

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

就表示Jquery没有引入成功

Jquery的压缩版：

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

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

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

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

了解即可。

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

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

-->

alert($);

</script>

3_初学者的引入Jquery的常见错误

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

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

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

</script>

4_jquery的魔力1_代码的简化

//魔力1---体现代码的简化

//分别用JS和Jquery来将页面中的h1标签的内容修改为你好

//实现

// document.getElementsByTagName("h1")[0].innerText = "你好";

//jquery实现暂时先将$("h1") 理解为获取所有的h1标签

// $("h1").text("你好");

</script>

5_jquery的魔力2_批量操作元素的魔力

<h1>hello js</h1>

</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>

6_jquery的常见方法

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

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

//暂时先将$("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>

7_文档就绪函数

</script>

//了解即可只要你保证你的js代码放在HTML最下方就可以不用写它

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

// $(function(){

// //代码~~

// });

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

</script>

8_js对象和jquery对象的讲解

// 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>

9_jquery对象的别名

//jqury对象的名字是: $

//jqury对象的名字是: jQuery

alert($==jQuery);//true

$("aa");

jQuery("aa");

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

</script>