JQuery(简化js开发)

本文详细介绍了JQuery的基础知识,包括它的核心概念、快速入门步骤、基本语法、DOM操作、选择器的使用、事件绑定、动画效果以及插件扩展。重点讲解了JQuery对象与JavaScript对象的区别及转换,提供了全选全不选、QQ表情添加、多选下拉列表左右移动等实际案例。此外,还探讨了JQuery的动画效果、遍历方式和事件绑定的多种方法,帮助读者深入理解和应用JQuery。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值