JQuery基本语法&&选择器&&DOM
jQuery 快速入门
jQuery介绍
JS 框架:使用 JS 来编写的,框架本身是一个半成品。类似于房子中毛坯房。需要程序员在这个基础上再次开发,实现各种功能
jQuery 框架只是众多 JS 框架中一个
jQuery 是一个 JavaScript 库 -->轻量级JS框架
所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。
jQuery: jQuery 框架功能强大,使用简单,占用资源少。免费,开源
1.兼容CSS3和各大浏览器
2.提供了dom、events、animate、ajax等的简易操作
3. 还有非常丰富的插件:别人用jQuery写好的功能代码
4. jQuery本质是js,但是功能更强、更简洁
jQuery 快速入门步骤
1. 编写 HTML 文档。
2. 引入 jQuery 文件。
3. 使用 jQuery 获取元素。
4. 使用浏览器测试。
入门案例
<script src="js/jquery-3.3.1.min.js"></script>
//第一步导包
<script>
// JS方式,通过id属性值来获取div元素
let jsDiv = document.getElementById("div");
//alert(jsDiv);
//alert(jsDiv.innerHTML);
// jQuery方式,通过id属性值来获取div元素
let jqDiv = $("#div");
alert(jqDiv);
alert(jqDiv.html());
</script>
jQuery 基本语法
一 JS 对象和 jQuery 对象转换
jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象,而不是 JS 方式获得的 DOM 对象,
二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。
1.JS对象和jQuery对象的区别
JS 对象:如果使用以前的 JS 代码得到的对象是 JS 对象,如:document.getElementById("id")
jQuery 对象:如果使用 JQ 选择器得到的对象是 JQ 对象,如:$("#id")
2.为什么要转换
js 中的方法与 jq 中的方法,事件都是不同的。有时一个 JS 对象需要调用 JQ 中方法,就必须将 JS 对象转成JQ 对象才可以调用,反之亦然
JS 的 DOM 对象转换成 jQuery 对象
$(JS 的 DOM 对象);
jQuery 对象转换成 JS 对象
方式一
jQuery 对象[索引];
方式二
jQuery 对象.get(索引);
注:
JQ 对象本质上在 JS 中是一个数组对象
JQ 对象.get(0) 或 JQ 对象[0]
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// JS方式,通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);//调用js中的属性innerHTML
//alert(jsDiv.html()); JS对象无法使用jQuery里面的功能
// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());//调用jq的方法html()
// jQuery方式,通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML); jQuery对象无法使用JS里面的功能
// 将 jQuery对象转换为JS对象 方式一
let js = jqDiv[0];
//方式二
// let js = jqDiv.get(0);
alert(js.innerHTML);//调用js中的属性
</script>
二 jQuery事件
事件的使用
事件名 | 说明 |
---|---|
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onclick | 鼠标单击事件 |
ondblclick | 鼠标双击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onchange | 用户改变域的内容 |
-
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法
js事件写法 jQuery事件写法 onclick
单击click(fn)
ondblclick
双击dblclick(fn)
onsubmit
表单提交submit(fn)
onchange
域内容改变change(fn)
onload
加载完成$(fn)
,$(document).ready(fn)
onfocus
获取焦点focus(fn)
onblur
失去焦点blur(fn)
onkeydown
键盘按键按下keydown(fn)
onkeypress
键盘按键按下、按住keypress(fn)
onkeyup
键盘按键弹起keyup(fn)
onmousedown
鼠标按键按下mousedown(fn)
onmouseup
鼠标按键弹起mouseup(fn)
onmouseover
鼠标移入mouseover(fn)
onmouseout
鼠标移出mouseout(fn)
onmousemove
鼠标移动mousemove(fn)
//单击事件
$("#btn").click(function(){
alert("点我干嘛?");
});
//获取焦点事件
// $("#input").focus(function()
// alert("你要输入数据啦...
// });
//失去焦点事件
$("#input").blur(function(){
alert("你输入完成啦...");
});
事件的绑定 方式一
jQuery 对象.on(事件名称,执行的功能);
事件的解绑
jQuery 对象.off(事件名称);
如果不指定事件名称,则会把该对象绑定的所有事件都解绑
<script>
//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){
alert("点我干嘛?");
});
//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){
$("#btn1").off("click");
});
</script>
事件的切换
- 事件的切换:需要给同一个对象绑定多个事件,而且多个事件还有先后顺序关系
方式一:单独定义
$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
…
方式二:链式定义
$(元素).事件方法名1(要执行的功能)
.事件方法名2(要执行的功能);
…
例如
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//方式一 单独定义
// 鼠标移入颜色变红
// $("#div").mouseover(function(){
// //背景色:红色
// //$("#div").css("background","red");
// $(this).css("background","red");
// });
//鼠标移出颜色变蓝
// $("#div").mouseout(function(){
// //背景色:蓝色
// //$("#div").css("background","blue");
// $(this).css("background","blue");
// });
...
//方式二 链式定义
$("#div").mouseover(function(){
$(this).css("background","red");
}).mouseout(function(){
$(this).css("background","blue");
});
</script>
三 遍历
方式一 传统方式
for(let i = 0; i < 容器对象长度; i++){
执行功能;
}
方式二:对象.each() 方法
容器对象.each(function(index,ele){
执行功能;
});
方式三:$.each() 方法
$.each(容器对象,function(index,ele){
执行功能;
});
方式四:for of 语句
for(ele of 容器对象){
执行功能;
}
案例 点击遍历按钮实现遍历
<body>
<input type="button" id="btn" value="遍历列表
<ul>
<li>传智播客</li>
<li>黑马程序员</li>
<li>传智专修学院</li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
方式一: 传统方式
$("#btn").click(function(){
let lis = $(