一、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元素