jquery02

最新推荐文章于 2024-10-06 20:16:20 发布

金木君

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量157

点赞数

文章标签： java jquery

本文链接：https://blog.csdn.net/JinMujun/article/details/109109396

版权

1Dom操作

内容的获取

		$("#btn1").click(function(){
					// 获取input 内容
					alert($("#username").val());
				})
				
				
				
				//获取内容的两种方式
				  // 获取div 内容 不包含html 标签
//				 console.log($("#div1").text())	;	
				
				// 输出div 内容 包含 html标签
 				console.log($("#div1").html())	;	
 				
 				
 				// 获取输入框的内容---不能 获取到
 				console.log($("#username").text())
			})

设置内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.4.1.min.js"></script>
	
	</head>
	<body>
	
		<script>
			
			 
			$(function(){
				
				// 设置文本
//				$("#div1").text("三只老虎");	
				// text("文本")  只能设置 文本 如果有html 标签 只显示 不解析
//				$("#div1").text("<h1>三只老虎</h1>");	
				
				// 设置html 格式文本  
//				$("#div1").html("<h1>三只老虎</h1>");	

//				$("#div1").text(function(i,oldText){
//					
//					// i 就是获取 $("#div1")结果的下标 
//					// oldText 通过 text 获取的内容
//					// return 返回新的内容
					return "i="+i +oldText
//                  return "三只老虎"   
//				})
				
				 $("p").text(function(i,oldText){
					
					// i 就是获取 $("p") 结果集的下标 
					// oldText 通过 text 获取的内容
					// return 返回新的内容
					return "i="+i +oldText
        
					})
				
				
				
				
				$("#btn1").click(function(){
					
					// 设置输入框 内容
					$("#username").val("root");
				})
				
				
				
				
				
		
			})
			
		
			
		</script>
		
		<div id="div1">
			
			
			<p id="p1">两只老虎</p>
			
			<p id="p2">两只老鼠</p>
			
		</div>
		
		<form>
			username:<input type="text" id="username" />
		</form>
		<button id="btn1">设置 input 内容</button>
		
		
	
		
	</body>
</html>

添加内容

	<script>
			$(function(){
				
				// 在内部追加
				$("#div1").append("<p>跑得快</p>")
				
				// 在div 内部 内容的上部追加
				$("#div1").prepend("<p>一只老虎</p>");
				
				// 在div 外部上部进行追加
				$("#div1").before("<p>开始</p>");
				
				// 在div 外部 下面追加
				$("#div1").after("<p>结束</p>");
			})
		</script>
		
		<div id="div1">
			
			<p>两只老虎</p>
			
		</div>

在这里插入图片描述

删除内容

	$("#btn1").click(function(){
					
					// 删除div1
					// div1 标签 （本身）和 内部的内容 都删除
					$("#div1").remove();
				})
				
				
				$("#btn2").click(function(){
					
					// 清空 div1 的内容
					$("#div1").empty();
				})

css 风格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.4.1.min.js"></script>
		<style>
			
			 
			/*1.先声明 对应 空间的 风格 并归类
			 * 2.更具需求 为设置不同 class 来显示 不同的样式
			 
			 * */
			.success{
			  background-color: green;
			  color: black;
			}
			
			.fail{
				background-color: red;
			    color: yellow;
			}
		</style>
	</head>
	<body>
		
		
		<script>
			$(function(){
				
				$("#btn1").click(function(){
					
					// 给btn 增加 类型
					$("#btn").addClass("success");
					
				})
				
				$("#btn2").click(function(){
					
					// 给btn 删除 类型
					$("#btn").removeClass("success");
					
				})
				
				$("#btn3").click(function(){
					
					// 切换类型
					$("#btn").toggleClass();
					
				})
				
				$("#btn4").click(function(){
					
					// 获取css 属性
					alert($("#btn").css("background-color"));
					
				})
				$("#btn5").click(function(){
					
					// 设置css 属性
					$("#btn").css("background-color","red");
					
				})
			})
		</script>
		
		
		<button id="btn1">添加class</button>  
		<button id="btn2">删除class</button> 
		
		<button id="btn3">切换class</button> 
		<button id="btn4">获取css 属性</button> 
		<button id="btn5">设置css 属性</button> 
		<hr />
		<button id="btn"> 按钮</button>
	</body>
</html>

获取/设置属性

		<script>
			$(function(){
				
				$("#btn1").click(function(){
					
					// 通过 attr 获取属性
					alert("href:"+$("#a1").attr("href"));
					
				})
				
				
				$("#btn1").click(function(){
					// 设置属性
					$("#a1").attr("href","http://news.baidu.com/");
					
				})
			})
		</script>
		
		
		<button id="btn1">btn1</button>  
		<button id="btn2">btn2</button>  
		
		<a id="a1" href="https://www.baidu.com" >百度</a>

获取控件尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.4.1.min.js"></script>
		
		<style>
			/*
			 控件的width 是空间真实放置内容的大小
			 其他的 padding boder-width margin 向外围增加
			 * */
			#div1{
							
			 width: 500px;
			 height: 500px;
			 background-color: red;
			 padding: 20px;
			 border: solid 10px yellow;
			 margin: 50px;
			}
			
			#div11{ /* 内测div*/							
			 width: 500px;
			 height: 500px;
			 background-color: blue;
			}
		</style>
		
	</head>
	<body>
		
		
		<script>
			
			$(function(){
				
			  console.log("div1-with"+$("#div1").width()); 	
			  console.log("div1-with+padding"+$("#div1").innerWidth());
			  console.log("div1-with+padding+boder-width"+$("#div1").outerWidth());
			  
			  console.log("div1-with+padding+boder-width+margin"+$("#div1").outerWidth(true));
			  
			})
			
		</script>
		
		
		<div id="div1">
			
			<div id="div11">
				
			</div>
			
		</div>
		
		
		
	</body>
</html>

`

在这里插入图片描述

2.遍历

找到控件的父亲（父类），儿子（孙子节点），兄弟节点

父亲，孩子

	<script>
		
		$(function(){
			// 得到直接父类 只有一个

// $("#div3").parent().css(“border”,“solid 10px green”)

			// parents() 获取所有父辈 直到 body html

// $("#div3").parents().css(“border”,“solid 10px green”)
// $("#div3").parentsUntil("#div1").css(“border”,“solid 10px green”)
// .parentsUntil() 查找元素到那个父辈不包括查找到的
// $("#div3").parentsUntil(“body”).css(“border”,“solid 10px green”)

			// 找到所有的 直系 节点  children()

// $("#div1").children().css(“border”,“solid 10px green”);
// find("") 找到所有的子孙节点
// $("#div1").find("").css(“border”,“solid 10px green”);

		    // find(".cla1") 找到所有的 孩子节点 并且 按照条件过滤的到最后结果
		     $("#div1").find(".cla1").css("border","solid 10px green");
		
		})
	</script>
	
	<div id="div1">
		
		<div id="div21" class="divaa" align="center">
			<div id="div3" class="cla1" >
				
			</div>
		</div>
		
		<div id="div22">
			
		</div>
		<div id="div23">
			
		</div>
		
	</div>


查找兄弟节点，过滤

	<script type="text/javascript">
		
		$(function() {
			// $("#div4").siblings() 获取所有的兄弟节点

// $("#div4").siblings().text(“siblings”);

			// next() 获取当前 节点下面的兄弟节点 只有一个 或者没有

// $("#div4").next().text(“next”);

			//	nextAll() 获取当前节点下 所有结点

// $("#div4").nextAll().text(“nextAll”);

			//nextUntil("#div6") 查找下面那个一个 结点 不包含找到的节点

// $("#div4").nextUntil("#div6").text(“nextUntil”);

            // 查找上一个兄弟节点  prev --next 相照应
            // prevUnitl() prevAll()

// $("#div4").prev().text(“prev”);

            // 找到直系孩子 节点 中的第一个节点

// $("#div0").children().first().text(“first()”);

            // // 找到直系孩子 节点 中的最后一个节点

// $("#div0").children().last().text(“last()”);

            // 获取下标 为 2的节点  下标是从 0 开始

// $("#div0").children().eq(2).text(“last()”);
// filter(".cla1") 过滤符合条件的子结点
// $("#div0").children().filter(".cla1").text(“filter()”);

// 找到符合条件的进行反选择
$("#div0").children().not("#div3").text(“not()”);
})

	<div id="div0">
		
		<div id="div1"></div>
		<div id="div2">div2</div>
		<div id="div3"></div>
		<div id="div4">
			两只老虎
		</div>
		<div id="div5" class="cla1"></div>
		<div id="div6">div6</div>
		<div id="div7"  class="cla1"></div>
		
		
	</div>


# 3.$.noConflict()

解决和其他js框架冲突的问题

	<script>

// $ 指的就是Jquery $==
// 凡是出现jQuery 都可以用 $替代
$(function(){

			alert("a")
		})
		
		$(document).ready(function(){
			alert("b")
		})
		
		jQuery(function(){
			
			alert("c")
		})
		
		jQuery(document).ready(function(){
			alert("d")
		})
		
		// 如果 $和其他js 框架冲突
		// 凡是出现$的地方 都可以使用 Jq
	    var Jq = $.noConflict()
		
		Jq(function(){
			
			alert("Jq")
		})
		
	</script>


# 4.ajax

### get请求

<script>

<%-- 登陆–%>
function login() {

        var username = $("#username").val();
        var password = $("#password").val();

        // jquery-ajax 提交数据
        // 三种方式 get  post  通用 ajax

        // 使用get 提交

        // url   ,function(data){}

/* $.get("/test/LoginServlet?username="+username+"&password="+password,function (data) {
// alert(data);
var responseData = JSON.parse(data)

            // 局部刷新
            $("#message").text(responseData.message);

        })*/

        // get(url, [data], [callback], [type])
        // url data  callback  data参数是对象
        /*$.get("/test/LoginServlet",{
            username:username,
            password:password
        },function (data) {
            // alert(data);
            var responseData = JSON.parse(data)

            // 局部刷新
            $("#message").text(responseData.message);

        })*/


        // dataType 设置为json  jquery-ajax 接收到数据 自动 将data 转为js 对象，
        $.get("/test/LoginServlet",{
            username:username,
            password:password
        },function (data) { /*  dataType 设置为json 自动转换为 js 对象*/

            // 局部刷新
            $("#message").text(data.message);

        },"json").error(function () {  // 服务器没有返回时调用
            alert("服务器发生错误")
        })


    }

</script>


### post请求


### 通用ajax


官方文档：https://jquery.cuishifeng.cn/jQuery.get.html

金木君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫