《jQuery第一章》

一、jquery简介

什么是Jquery？
jQuery的本质就是JavaScript

只是将JavaScript的某些方法封装成一个库，极大简化了原生JavaScript开发。

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

2.强大的选择器

（用更精简的代码即可获取指定的html元素，摈弃了之前通过document.getElement等方法，并支持批量操作元素）

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

二、如何使用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关键字的就是未压缩版。

三、jquery的常见方法 

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);

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

五、 jquery对象的别名

jqury对象的名字是: $  

jqury对象的名字是: jQuery

alert($==jQuery);//true

           

$("aa");

jQuery("aa");

上述两行代码的意义一样,都表示获取aa元素
————————————————
版权声明：本文为CSDN博主「软件2201-胡宝亮」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_78817487/article/details/134768897