javaweb_day3_JQuery

最新推荐文章于 2022-03-30 10:20:24 发布

原创最新推荐文章于 2022-03-30 10:20:24 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

java复习专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍JQuery的基础操作与高级应用，包括元素选择、属性操作、样式修改、事件处理、动画效果、表单验证等，通过具体案例展示如何利用JQuery简化网页开发流程。

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

引入jquery

语法：

$(function(){ });

location.href="Happy.html"; 跳转到Happy.html的页面

JQuery的获取 $("#btn")

$("#jq").click(function(){}) $("#span1").html("实现了!! ")

JQ对象向DOM对象转换方式一 $("#span1").get(0).innerHTML=”实现了”;

JQ对象向DOM对象转换方式二 $("#span1")[0].innerHTML=”实现了”;

DOM对象转换成JQ对象

$(document.getElementById(“span1”)).html(“思密达”);

下拉框多选 multiple="multiple"

<select id="leftName" multiple="multiple">
    <option>张三</option>
   <option>李四</option>
</select>

获取广告图片，并让其显示

$("#img2").show(); $("#img2").show(1000); 显示

$("#img2").slideDown(5000); 向下滑

$("#img1").fadeIn(4000); 逐渐出来

获取广告图片，并让其隐藏

$("#img2").hide(); 隐藏

$("#img2").slideUp(5000); 向上滑

$("#img1").fadeOut(4000); 逐渐消失

切换元素的可见状态 toggle 显示和隐藏 $("#img1").toggle();

JQuery的选择器

$(“#id”).css(“background-color”,”pink”) 修改样式

基本选择器（背景颜色）

$("#one").css("background-color","pink"); id选择器逗号

$("#one").css("backgroundColor","pink"); id选择器逗号

$(".mini").css("background-color","pink"); 类选择器

$("div").css("background-color","pink"); 元素选择器

$("*").css("background-color","pink"); 匹配所有元素

$("#two,.mini").css("background-color","pink"); 第一个逗号第二个是点并集

层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent>child : 在给定的父元素下匹配所有的子元素(儿子)

perv+next:匹配所有紧接在prev元素后的next元素(紧挨着的,同桌)

prev~siblings:匹配prev元素之后的所有siblings元素(兄弟)

基本过滤选择器

$("#btn1").click(function(){

$("body div:first").css("background-color","red"); 是：

});

$("#btn2").click(function(){

$("body div:last").css("background-color","red");

});

$("#btn3").click(function(){

$("body div:odd").css("background-color","red");

});

$("#btn4").click(function(){

$("body div:even").css("background-color","red");

});

属性选择器

$("#btn1").click(function(){

$("div[id]").css("background-color","red");

});

$("#btn2").click(function(){

$("div[id='two']").css("background-color","red");

});

表单选择器 checked和selected比较重要

表格的隔行换色：

$("tbody tr:even").addClass("even"); 外部引入 $("tbody tr:even").removeClass("even");

.even { background:#FFF38F;} /* 偶数行样式/

实现全选和全不选 $("tbody input").prop("checked",this.checked);

$("tbody input").attr("checked",this.checked); //attr方法与JQ的版本有关,在1.8.3及以下版本有效

遍历：$.each([0,1,2] , function(i ,n){ });

被遍历的的对象 i代表角标 n代表被遍历后的内容方法都和下面的一样

对象.each();

jquery3.0以后的

for...of遍历

append：A.append(B) A的末尾追加

appendTo：A.appendTo(B) 将A加到B内容的末尾处

jquery的方法clone()

清空：$(“”).empty()

获取左侧下拉列表被选中的option($(“#left option:selected”))

(假设左侧select定义了一个id=left)

通过validate来实现表单的验证

$(function(){

$("#checkForm").validate({

rules:{

username:{

required:true,

minlength:6

password:{

required:true,

minlength:6

}，

messages：{

将上面复制下来后修改即可

}

});

</script>

确认密码：equalTo：”[name=’password’]”

邮箱：email:true

怎么将表单的数据回显设置为空

$("#resetContent").click(function () {
    $("#age").attr("value",null);  //方法一
     $("#age").val(" "); //方法二
});
<input type="text"  name="age" placeholder="请输入年龄" value="${user.age}" id="age"/>

基础代码1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="./js/jquery-3.3.1.min.js"></script>
</head>

<body>

<ul>
    <li id="bj" name="beijing" xxx="yyy">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>

</html>

1.获取北京节点的name属性值
2.设置北京节点的name属性的值为dabeijing
3.新增北京节点的discription属性属性值是didu
4.删除北京节点的name属性并检验name属性是否存在
5.获得hobby的的选中状态

<script>
    $(function(){
	var name=$("#bj").attr("name");
	alert(name); 
	//f12查看,会发现name变成了dabeijing
	$("#bj").attr("name","dabeijing");
	$("#bj").attr("discription","didu");
	$("#bj").removeAttr("name");
	var flag=$("#hobby").prop("checked");
	alert(flag);
    });
</script>

基础代码2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		   .one{
			    width: 200px;
			    height: 140px;
			    margin: 20px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			div .mini01{
			    width: 40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			/*待用的样式*/
			.second{
				width: 300px;
			    height: 340px;
			    margin: 20px;
			    background: yellow;
			    border: pink 3px dotted;
				float:left;
			    font-size: 22px;
			    font-family:Roman;
			}
			
			
	 </style>
  
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
 		 <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one 
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		

		<span class="spanone">    span
		</span>
		
	</body>
	
	
</html>

$(function () {
	    $("#b1").click(function () {
	        $("#one").prop("class","second");
            });
           
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
           
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
          
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
           
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);
            });
          
            $("#b6").click(function () {
                 $("#one").css("backgroundColor","green");
            });
        }); 
	</script>

基础代码3:

<!DOCTYPE html>
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 
	</head>
	 
	<body>
		<input type="button" value="将反恐放置到city的后面"  id="b1"/>
		<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
		<input type="button" value="将反恐插入到天津后面"  id="b3"/>
		<input type="button" value="将反恐插入到天津前面"  id="b4"/>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
	</body>
</html>

1.<input type="button" value="将反恐放置到city的后面" id="b1"/>
2.<input type="button" value="将反恐放置到city的最前面" id="b2"/>
3.<input type="button" value="将反恐插入到天津后面" id="b3"/>
4.<input type="button" value="将反恐插入到天津前面" id="b4"/>

<script type="text/javascript">
		 $(function () {
			 $("#b1").click(function () {
				 //append
				 //$("#city").append($("#fk"));
				 //appendTo
                 $("#fk").appendTo($("#city"));
             });
             $("#b2").click(function () {
                 //prepend
                 //$("#city").prepend($("#fk"));
                 //prependTo
                 $("#fk").prependTo($("#city"));
             });
             $("#b3").click(function () {
                 //after
				 //$("#tj").after($("#fk"));
                 //insertAfter
                 $("#fk").insertAfter($("#tj"));

             });
             $("#b4").click(function () {
                 //before
                 //$("#tj").before($("#fk"));
                 //insertBefore
                 $("#fk").insertBefore($("#tj"));

             });
         });
</script>

基础代码4:

<!DOCTYPE html>
<html>
  <head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			div.visible{
				display:none;
			}
	 </style>
	</head>
	 
	<body>
	<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
	<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>

		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 <p class="hello">Hello</p> how are <p>you?</p> 
	</body>
</html>

1.<input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
2.<input type="button" value="删除city所有的li节点清空元素中的所有后代节点(不包含属性节点)" id="b2"/>

基础代码5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
   
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

获取li里面的内容

<script type="text/javascript">
    $(function(){
	//方式一:数组
	var cities=$("#city li");
	   for(var i=0;i<cities.length;i++){
	      alert(i+":"+cities[i].innerHTML);
	   } 	
	});
</script>

<script type="text/javascript">
    $(function(){
	var cities=$("#city li");
	    //方式二:
	    /* cities.each(function(){
		方式2.1
		alert(this.innerHTML);
		方式2.2
		alert($(this).html());
	        }); */
			
	    /* cities.each(function(index,element){
		方式2.3
		alert(index+":"+element.innerHTML);
		方式2.4
		alert(index+":"+$(element).html());
		}); */
			
		//判断如果是上海,则结束循环
		cities.each(function(index,element){
		    if("上海"==$(element).html()){
			return false;
		    }
		    alert(index+":"+$(element).html());
		    });
		    //如果当前function返回的是false,则结束循环(类似js里面的break)
		    //如果当前function返回的是true,则结束本次循环,继续下次循环(类似js里面的continue)

	});

    </script>

<script type="text/javascript">
    $(function(){
	var cities=$("#city li");
	for(li of cities){
	    alert($(li).html());
	}
    });
</script>

一:使用JQuery和JS获取id的案列

二:分别使用JQ和JS来修改内容

三:使用JQ完成首页定时弹出广告图片,然后消失

四:toggle实现显示和隐藏

五:使用jQuery完成表格隔行变色

六:使用jQuery完成复选框的全选和全不选

七:使用JQ完成省市二级联动

八:使用jQuery完成下拉列表左右选择

九:JQ使用validate校验表单