JQuery 基础
(1)基本概念:
- 简化js的开发
- 优化HTML文档操作 , 事件处理 , 动画设计和Ajax交互
- JavaScript 框架 : 本质就是一些js文件 , 将方法都封装在里边了
(2)快速入门:
- 步骤 :
- 下载JQuery文件
- 导入JQuery文件
- 使用文件
- jquery-xxx.js 与 jquery-xxx.min.js 的区别
- jquery-xxx.js 开发版本 : 是给程序员看到 , 可读性好 , 有良好的缩进和注释
- jquery-xxx.min.js 生产版本 : 程序中使用 , 没有缩进 , 体积小一些 ,
(3)基本的语法学习
-
1.事件绑定
-
<script> $("#b1").click(function (){ alert("abc"); }); </script>
-
-
2.入口函数 (页面加载完成事件)
-
<!-- window.onload : 也可以执行加载动作 但是使用这个只能定义一个 , 如果定义多次 , 后边的会将前边的覆盖掉 $(function(){ 这个方法可以同时定义多次 }); --> <script> $(function(){ }); </script>
-
-
3.样式控制
-
<script> $(function(){ $("#div1").css("background-color","red"); }); </script>
-
(4)JQuery对象和JS对象区别与转换
-
区别:
-
<!-- 1.JQuery对象在操作时更加方便 2.JQuery对象和js对象方法是不通用的 3.两者相互转换 * JQuery- - -> js: jq对象[索引] 或 jq对象.get(索引) * js- - -> JQuery: $(js对象) 即可 -->
<script> //1.通过js方式获取名称叫div的所有元素对象 var divs = document.getElementsByTagName("div"); alert(divs); //[object HTMLCollection] //可以将其当做数组来使用 //对divs中所有的div , 让其标签内容变为aaa for (const div of divs) { div.innerHTML = "aaa"; } //2.通过jq的方式来获取名称叫div的所有元素对象 var $divs = $("div"); alert($divs); //[object Object] //也可以将其当做数组来使用 //对$divs中所有的div , 让其标签内容变为bbb , 不用再遍历了 $divs.html("bbb"); </script>
(5)选择器
- 筛选具有相似特征的元素(标签)
1.基本选择器:
①标签选择器 : (元素选择器)
- $(“html标签名”) , 获取所有匹配标签名称的元素
②id选择器 :
- $("#id的属性值") , 获取与指定id属性值匹配的元素
③类选择器 :
- $(".class的属性值") , 获取与指定的class属性值匹配的元素
④并集选择器 :
- $(“选择器1 , 选择器2 , …”) : 获得多个选择器选中的所有元素
2.层级选择器 :
①后代选择器 :
- $(“A B”) : 选择A元素内部的所有B元素
②子选择器 :
- $(“A > B”) : 选择A元素内部的所有B子元素
3.属性选择器 :
①属性名称选择器 :
- $("标签名 [ 属性名 ] ") : 包含指定属性的选择器
②属性选择器 :
- $("标签名 [ 属性名 = ’ 值 ’ ] ") : 包含指定属性等于指定值的选择器
③复合属性选择器 :
- $(“标签名 [ 属性名 = ’ 值 ’ ] [ 属性名 = ’ 值 ’ ] [ ] …”) : 包含多个属性条件的选择器
属性值是以xx为开始的 : (等号前加一个 ^ 表示以xx开始的值 )
$("div[title ^= 'te']")
属性值是以xx为结尾的 : (等号前边加一个 $ 表示以xx为结尾的值 )
$("div[title $= 'est']")
属性值中包含 xx 的属性 : (等号前边加一个 * 表示包含xx的属性 )
$("div[title *= 'es']")
4.过滤选择器 :
①首元素选择器 :
- 标签名 : first 获得选择的元素中的第一个元素
②尾元素选择器 :
- 标签名 : last 获得选择的元素中的最后一个元素
③偶数选择器 :
- 标签名 : even 偶数 从0开始计数
④奇数选择器 :
- 标签名 : odd 奇数 从0开始计数
⑤等于索引选择器 :
- 标签名 : eq (index) 指定索引元素
⑥大于索引选择器 :
- 标签名 : gt (index) 大于指定索引元素
⑦小于索引选择器 :
- 标签名 : lt (index) 小于指定索引元素
注意这里的索引是从0开始的 ,
⑧标题选择器 :
- : header 获得标题 ( h1~h6 ) 元素 (固定写法)
⑨非元素选择器 :
- 标签名 : not ( ) 不包括指定内容的元素
5.表单过滤选择器 :
①可用元素选择器 :
- : enabled 获得可用元素
②不可用元素选择器 :
- : disabled 获得不可用元素
③选中选择器 : (单选多选框)
- : checked 获得单选复选框中的**(选中的)**元素
④选中选择器 : (下拉框)
- : selected 获得下拉框中的**(选中的)**元素
注意 : 设置下拉框能够复选的属性是 : multiple 属性值就是multiple 这样就可以让复选框可以多选
(6)DOM操作
1.内容操作 :
① html() : (标签体内容)
- 获取或设置元素的标签体内容
- 获取 :
- 设置 : 也是设置这个元素下的所有内容 , 包括标签内容
② text() : (纯文本内容)
- 获取或设置元素的标签体纯文本内容
- 获取 :
- 设置 : 设置这个元素下的所有内容 , 包括标签内容
③ val() : (value属性值)
- 获取或设置元素的value属性值
2.属性操作 :
(1)通用属性操作
① attr() : 获取/设置元素的属性
<script type="text/javascript">
$(function () {
//获取北京节点的name属性值
var name = $("#bj").attr("name");
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
var checked = $("#hobby").prop("checked");
alert(checked);
//var checked = $("#hobby").attr("checked"); //获取不到,弹出undefined
});
</script>
② removeAttr() : 删除元素的属性
③ prop() : 获取/设置元素的属性
④ removeProp() : 删除元素的属性
- attr和prop的区别
- 如果你操作的是元素的固有属性 , 则建议使用 prop
- 如果操作的是自定义的属性 , 则推荐使用 attr
(2)对class属性操作
① addClass() : 添加class属性值
② removeClass() : 删除class属性值
③ toggleClass() : 切换class属性值
- 如果元素对象上不存在该属性就添加该属性 , 如果存在该属性就删除它
④ css() : 也是可以设置class属性值的
3.增删改查的操作 :(CRUD)
① append () : 父元素将子元素追加到末尾
- 对象1.append (对象2) : 将对象2 添加到 对象1 元素内部 , 并且在末尾
② prepend () : 父元素将子元素添加到开头
- 对象1.prepend (对象2) : 将对象2 添加到 对象1 元素内部 , 并且在开头
③ appendTo () : 对象1添加到对象2 内部 结尾
- 对象1.appendTo(对象2)
④ prependTo () : 对象1添加到对象2 内部 开头
- 对象1.prependTo(对象2)
⑤ after() : 添加元素到元素后边
- 对象1.after(对象2) : 将对象2添加到对象1后边 , 对象1和对象2是兄弟关系
⑥ before() :
- 对象1.after(对象2) : 将对象2添加到对象1前边 , 对象1和对象2是兄弟关系
⑦ insertAfter() :
- 对象1 .insertAfter(对象2) : 将对象1添加到对象2后边
⑧ insertBefore() ;
- 对象1.insertBefore(对象2) : 将对象1添加到对象2前边
⑨ remove () : 移除元素
- 对象 .remove() : 将对象删除掉
⑩ empty () : 清除元素的所有后代元素
- 对象.empty() : 将对象的后代元素全部清空 . 但是保留当前对象以及其对象的属性节点
⑩① clone () : 将匹配的DOM元素克隆 , 并且选中这些克隆的副本
(7)案例
全选全不选 :
function selectAll(obj){
//获取下边的复选框 , 给他们添加一个属性 , 值就是上边全选框的值 即可
$(".itemSelect").prop("checked",obj.checked);
}
qq表情 :
//需求:点击qq表情,将其追加到发言框中
$(function () {
//1.给img图片添加onclick事件
$("ul img").click(function(){
//2.追加到p标签中即可。
$(".word").append($(this).clone());
});
});
多选下拉列表左右移动
$(function () {
//toRight
$("#toRight").click(function () {
//获取右边的下拉列表对象,append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo 获取右边选中的option,将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
JQuery 高级功能 :
(1)动画
1.三种方式显示和隐藏元素
参数 :
- speed : 动画的速度 , 三个预定义的值 ,
- ( " slow "(慢) , " normal "(中) , " fast "(快) ) 或者表示动画时长的毫秒值 (如 : 1000);
- easing : 用来指定动画的切换效果 , 默认是 " swing " , 可用参数 " linear " , (这个值可以不传)
- swing : 动画执行的时候 , 先慢 , 中间快 , 最后慢
- linear : 匀速的执行动画
- fn : function (){} (这个值可以不传)
①默认显示和隐藏方式 :
- show ( [speed , [ easing ] , [ fn ] ] ) (显示)
- hide ( [speed , [ easing ] , [ fn ] ] ) (隐藏)
- toggle ( [speed , [ easing ] , [ fn ] ] ) (切换)
②滑动显示和隐藏方式 : (上下滑动)
- slideDown ( [speed , [ easing ] , [ fn ] ] ) (显示)
- slideUp ( [speed , [ easing ] , [ fn ] ] ) (隐藏)
- slideToggle ( [speed , [ easing ] , [ fn ] ] ) (切换)
③淡入淡出显示和隐藏方式 :
- fadeIn ( [speed , [ easing ] , [ fn ] ] ) (显示)
- fadeOut ( [speed , [ easing ] , [ fn ] ] ) (隐藏)
- fadeToggle ( [speed , [ easing ] , [ fn ] ] ) (切换)
(2)遍历方式
-
js的遍历方式
- for (初始值 ; 循环结束条件 ; 步长)
-
jq的遍历方式 :
① jq对象.each(callback)
-
var citys = $("#city li"). citys.each(function (index , element){ //第一种获取li对象 使用this alert(this.innerHTML); //第二种获取li对象 在回调函数中定义参数 , index(索引) , element (元素对象) alert(index + ":" + element.innerHTML); });
-
案例 : 如果想在循环中加一些判断条件 :
if("上海" == $(element).html){
//如果当前function返回为false , 则结束循环 (break)
//如果当前返回为true , 则结束本次循环 , 继续下次循环 (continue)
return false;
}
② JQuery.each( object , [ callback ] ) // $.each ( object , [ callback ])
-
$.each(citys , function(){ });
③ for . . of
-
//JQuery 3.0之后的版本提供的方法 : for ( li of citys ){ }
(3)事件绑定
JQuery可以使用链式编程的方法 , 简化绑定的书写 :
jq对象.事件函数(回调函数(){}).事件函数(回调函数(){}).事件函数(回调函数(){})....
让文本框获得焦点事件 :
jq对象.focus ( ) ;
//让对象(文本框)获得焦点
//不在里边传回调函数 , 浏览器就会触发默认的事件方式
表单提交 :
jq对象.submit() ;
//表单提交
1.JQuery标准的绑定方式 :
- jq对象.事件函数 (回调函数)
2.on绑定事件 / off 解除绑定
- jq对象.on( " 事件名称 " , 回调函数)
- jq对象.off( "事件名称 " )
- 不写事件名称的话就是将对象上的所有事件解绑
3.事件切换 : toggle
- jq对象.toggle ( fn1 , fn2 . . .)
- 当单击jq对象的对应的组件后 , 会执行 fn1, 第二次点击会执行 fn2 ,…当所有的执行一遍之后 , 又会从新执行 fn1
(4)案例
广告弹窗:
//定义入口函数
$(function(){
//设置定时器 调用adShow方法
setTimeout(adShow , 3000);
//设置定时器 , 调用关闭广告方法 adHide
setTimeout(adHide , 8000);
});
//显示广告
function adShow(){
//获取广告div , 调用显示方法
$("#ad").show("slow");
};
//隐藏广告
function adHide(){
//获取广告div , 调用隐藏方法
$("#ad").hide("slow");
};
//注意要先给广告的div设置一个样式 : display : none ,
抽奖案例 :
-
分析 :
-
①给开始按钮绑定点击事件
-
1.1定义循环定时器 ,
-
1.2切换小相框的src属性 ,
- 定义数组 , 存放图片资源
- 生成随机数 , 数组索引
-
②给结束按钮绑定点击事件
-
1.1停止定时器
-
1.2给大相框设置src属性
-
var imgs = ["../img_01.png" , "../img_02.png" , "../img_03.png" , "../img_04.png"...]
var startId ;
var index ;
$(function(){
//给开始按钮绑定单击事件
$("#startID").click(function(){
//定义循环定时器 : 20毫秒执行一次
startId = setInterval(function(){
//生成随机脚标 : 0-3
index = Math.floor(Math.random()); // 0.000--0.999之间的数 --> * 3 ==>0.000--2.999 ( Math.floor() :向下取整 )
//设置小相框的src属性 ,
$("#img1ID").prop("src" , imgs[index]);
} , 20);
});
//给结束按钮绑定单击事件
$("#stopID").click(function(){
//停止定时器 :
clearInterval(startId);
//给大相框设置src属性
$("img2ID").prop("src" , imgs[index])
});
});
(5)插件 :
增强JQuery的功能
-
JQuery . fn . extend ( object ) : 增强通过JQuery获取的对象的功能
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery对象进行方法扩展</title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <script> //使用JQuery插件 , 给jq对象添加两个方法 , check()选中所有复选框 , uncheck()取消选中所有复选框 //1.定义JQuery对象的插件 $.fn.extend({ //定义了check()方法 , 所有的jq对象都可以去调用该方法 check: function () { //让复选框选中 //this : 调用该方法的jq对象 this.prop("checked", true); }, //中间用 , 隔开 uncheck: function () { //让复选框取消选中 this.prop("checked", false); } }); $(function () { $("#btn-check").click(function () { //属性选择器 $("input[type='checkbox']").check(); }); $("#btn-uncheck").click(function () { $("input[type = 'checkbox']").uncheck(); }); }); </script> </head> <body> <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"> <input id="btn-uncheck" type="button" value="点击选中复选框" onclick="uncheckFn()"> <br> <input type="checkbox" value="football">足球 <input type="checkbox" value="basketball">蓝球 <input type="checkbox" value="volleyball">排球 </body> </html>
-
-
JQuery . extend ( object ) : 增强JQuery对象自身的功能
-
<script> $.extend({ max:function(a,b){ return a>b ? a : b ; } min:function(a,b){ return a<b ? a : b ; } }); var max = $.max(10 , 5); </script>