JQuery(简化js开发)

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>