JQuery的简单使用

【本人学习总结、相对基础】

什么是JQuery？

JQuery 是一种流行的 JavaScript 库，它能够简化 JavaScript 编程，帮助开发者更轻松地操作 HTML 文档、处理事件、制作动画效果等。它被广泛应用于 Web 开发中，是一个非常有用且方便的工具。

如何引入JQuery？

在HTML文件中引入jQuery可以使用以下步骤：

1. 首先，从jQuery官方网站上下载jQuery库文件。
2. 将下载的jQuery库文件保存到你的项目文件夹中。
3. 在HTML文件中添加以下代码行来链接jQuery库文件：

&lt;script src="jquery-3.6.4.min.js"&gt;</script&gt;
//min 是压缩过的

JQuery的简单用法

JQuery的加载器

$(function(){
	
  $("#btn1").click(function(){
	alert($("#div1").html());
	})
  
})
// JQuery的加载器可以按照上下顺序运行。
// JavaScript中的window.onload();
// JS中的只能运行最新的一个。

$("#div1").css("backgroundColor","red");   // 改变样式  参数1 属性；参数2 属性值

JQuery的基本选择器

/*1、标签选择器  （慎用）  2、 id选择器  （id）（# ） 命名一般以 字母开头或者下划线 不可以使用数字开头。 3、 类选择器  （class  )( .name） */
$("#one").css("backgroundColor","red"); // id
$(".one").css("backgroundColor","red"); // class
$("body").css("backgroundColor","red"); // 标签

JQuery的层级选择器

$("body div").css("backgroundColor","red");   // body内全部的div便签
$("body>div").css("backgroundColor","red");   // body里面的子div标签

JQuery的属性选择器

$("div[title]").css("backgroundColor","red");  // div中有title属性的
$("div[title='test']").css("backgroundColor","red"); // div中属性title值等于test的
$("div[title^='te']").css("backgroundColor","red"); // 以te开始的
$("div[title$='est']").css("backgroundColor","red"); // est结尾的
$("div[title*='es']").css("backgroundColor","red"); // 含有es的
$("div[id][title*='es']").css("backgroundColor","red");//有id的div的属性title有es字段的

JQuery过滤选择器

$("div:first").css("backgroundColor","red");  // 第一个div便签的
$("div:last").css("backgroundColor","red");   // 最后一个div标签的
$("div:not(.one)").css("backgroundColor","red"); // id不为one的div的
$("div:even").css("backgroundColor","red");  // 索引值为偶数
$("div:odd").css("backgroundColor","red");   // 索引值为奇数
$("div:gt(3)").css("backgroundColor","red"); // 索引值大于3
$("div:eq(3)").css("backgroundColor","red"); // 索引值小于3
$("div:lt(3)").css("backgroundColor","red");  // 等于
$(":header").css("backgroundColor","red");    // 所有标题元素

表单过滤选择器

$("input[type='text']:enabled").val("aaa"); // 可以使用的input文本，修改value值
$("input[type='text']:disabled").val("aaa"); // 不可以使用的input文本，修改value值
$("input[type='checkbox']:checked").length；   // 获取复选框被选中的元素个数
$("#job>option:selected").length；     // 获取下拉框

// 注意这里通过multiple 属性使得其可多选。
 <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>

JQuery中对DOM内容的操作

// 类似如下的语句，可以将其值更改。
$("#myinput").val("李四");
$("#mydiv").html("<h1>北京</h1>")
 $("#mydiv").text("haha");

JQuery中对DOM属性、样式的操作

$("#bj").attr("name")  //获取属性的值
$("#bj").attr("name","dabeijing")  //设置属性的值
$("#bj").attr("discription","didu");//添加属性

alert( $("#chk").prop("checked"))；
$("#chk").prop("checked",false);
//attr和prop区别:
//attr:一般操作的是自定义属性 ，prop一般操作固有属性 

$("#one").prop("class","one");
$("#one").addClass("one");
$("#one").removeClass("one");
$("#one").toggleClass("one");   // 切换的操作
$("#two").css("backgroundColor")
$("#two").css("backgroundColor","green");

CRUD操作

a append(b)； // b放在a内部，在末尾 a b 父子局 a prepend(b); // b放在a内部
在开头 a appendTo(b); // a 放在b内部，在末尾 a perpendTo(b); // a
放在b年内部，在开头

a after(b); // b 放在a 后， a,b 兄弟局 a before(b); // b在a前 a
insertAfter(b); // b 插入在a后面 a iinsertBefore(b);// b 插入在a前面

以下通过些案例，对上述内容进行练习（与上一贴”JavaScript省流版“中一致）

隔行变色

$(function(){
		 	$("tr:gt(0):odd").css("backgroundColor","pink");
		 	$("tr:gt(0):even").css("backgroundColor","yellow");
		 })
// 在html(body)中，tr便签中，gt（0）是表头部分，所以从gt(1)开始。

全选全不选

function selectAll(obj){
		$(".itemSelect").prop("checked",obj.checked);
}
// 点击事件添加在全选的复选框上，将this传递，之后，在函数体中利用jQuery中DOM操作更改其属性。（prop主要用于固有属性）

表情选择

$(function(){
        	$("ul img").click(function(){
        		$(".word").append($(this).clone())
        	})
 })

// ul img  是指在无序列表中的img图片，点击事件。将其克隆一份追加到发言框中

左右移动

$(function(){
		$("#toRight").click(function(){
			$("#rightName").append($("#leftName option:selected"));
			
		})
		$("#toLeft").click(function(){
			$("#leftName").append($("#rightName option:selected"));
		})
	})

点击具有“id”属性为”toRight”的HTML元素时，触发一个函数。该函数通过选择器”$()”获取具有”id”属性为”leftName”的HTML元素中被选中的选项，并将其添加到具有”id”属性为”rightName”的HTML元素中。这段代码的作用是将左侧选择框中被选中的选项移动到右侧选择框中。

JQuery高级用法

遍历

//city是个数组
// index 是数组索引，element是元素
city.each(function(index,element){
			/*	if(element.innerHTML=="上海"){
					//return true;  //相当于js里面的continue
					return false;   //相当于js里面的break;
				}*/
				alert(index+element.innerHTML);
})
方法二
$.each(city, function() {
				alert($(this).html());
});

绑定、解除事件

$("#btn").on("click",function(){   //on  绑定
				//方法体
			})

$("#btn").off("click");  //解除btn按钮上绑定的click事件
$("#btn").off(); 		 // 解除btn按钮上绑定的所有事件

事件切换

// toggle两个方法来回切换，写法大致如下
$("#btn").toggle(function(){
        		$("#myDiv").css("backgroundColor","green");
        	},function(){
        		$("#myDiv").css("backgroundColor","pink");
        	})

广告的定时显示与隐藏

$(function(){
			setTimeout("adShow()","3000");
			setTimeout("adHiden()","8000");
		})
		function adShow(){
			$("#ad").show("slow");
		}
		function adHiden(){
			$("#ad").hide("slow");
		}
// show（speed，【easing】，【fn】）
// 参数解释： speed 动画的速度：slow normal fast
// easing   默认 swing ，可以用linear
// swing 动画执行先慢中间快后慢
// linear 动画执行的速度是匀速的 
// fn 在动画完成时，每个元素执行一次

显示、隐藏图片

function hideFn(){
//  		$("#showDiv").hide("slow","linear",function(){
//  			alert("隐藏！");
//  		})
    		
//  		$("#showDiv").slideUp("slow","linear",function(){
//  			alert("隐藏！");
//  		})
    		
    		$("#showDiv").fadeOut("slow","linear",function(){
    			alert("隐藏！");
    		})
    	}
    	
    	function showFn(){
//  		$("#showDiv").show("slow","swing",function(){
//  			alert("显示！");
//  		})
//  		$("#showDiv").slideDown("slow","swing",function(){
//  			alert("显示！");
//  		})
//  		$("#showDiv").fadeIn("slow","swing",function(){
//  			alert("显示！");
//  		})
    	}
    	
    	function toggleFn(){
//    		  		$("#showDiv").toggle("slow","swing",function(){
//  			alert("显示！");
//  		})		  		
//    		  		$("#showDiv").slideToggle("slow","swing",function(){
//  			alert("显示！");


    		//})
    		
    		$("#showDiv").fadeToggle("slow","swing",function(){
    			alert("显示！");
    		})
    	}

【更加综合】抽奖
通过几个照片随机播放，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery抽奖</title>
    <script type="text/javascript" src="jquery-3.6.4.min.js"></script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
       >

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        >


<script language='javascript' type='text/javascript'>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "img/man00.jpg",
                    "img/man01.jpg",
                    "img/man02.jpg",
                    "img/man03.jpg",
                    "img/man04.jpg",
                    "img/man05.jpg",
                    "img/man06.jpg",
    ];
    var index;
    var starId;
    $(function(){
    	$("#startID").prop("disabled",false);
    	$("#stopID").prop("disabled",true);
      
    	$("#startID").click(function(){
          、
    		$("#startID").prop("disabled",true);
    		$("#stopID").prop("disabled",false);
    		starId =  setInterval(function(){
    			index = Math.floor(Math.random()*7); // 生成随机数，取其整数部分
    			$("#img1ID").prop("src",imgs[index]);
    		},20) // 每隔20毫秒执行一次。
    	})
      
    	$("#stopID").click(function(){
    		$("#startID").prop("disabled",false);
    		$("#stopID").prop("disabled",true);
    		clearInterval(starId);
    		$("#img2ID").prop("src",imgs[index]).hide();
    		$("#img2ID").show("slow");
    		
    	})
    })

</script>
</body>
</html>

代码007普通

打赏 收藏 海报 链接