【Web前端】【jquery】jquery实战：cookie、AJAX、放大镜

本文链接：https://blog.csdn.net/minggelin1997/article/details/112494672

jquery实战

JQ cookie
JQ AJAX
JQ实战：放大镜

JQ cookie

JQ cookie没有在jquery-1.10.1.min.js中，需要额外下载引用

<script src = 'jquery.cookie.js'></script>
$.cookie()

具体调用的格式

$.cookie(name) 通过name取值
$.cookie(name, value) 设置name和value

$.cookie(name, value {
		    可选项
		    raw: true  value不进行编码
		        默认false value要进行编码的
		})

【注意】raw 表示是否用原文还是编码存储，默认false表示编码

$.cookie(name, null); 删除cookie

<body>
    <button id = 'btn1'>删除cookie</button>
</body>

 $.cookie("赛亚人", "贝吉塔", {
     expires: 30
 })

 alert($.cookie("赛亚人"));

 $(function(){
     $("#btn1").click(function(){
         $.cookie("赛亚人", null);
         alert($.cookie("赛亚人"));
     })
 })

JQ AJAX

<body>
    <button id = 'btn1'>下载数据</button>
</body>

$(function(){
   $("#btn1").click(function(){
    $.ajax({
       type: "get",
       url: "1.txt",
       data: {

       },
       success: function(data, statusText, xhr){
           
              // statusText success  error
              // xhr ajax对象
           
          alert(data + ", " + statusText);
       },
       error: function(msg){
           alert(msg);
       }
   })

跨域问题：天气情况查询
dataType: "jsonp", 使用这句解决跨域问题，并且数据解析为json对象

$.ajax({
    type: "get",
    url: "https://api.asilu.com/weather/",
    data: {
        city: "青岛"
    },
    dataType: "jsonp",
    success: function(data, statusText){
       // alert(data + ", " + statusText);
       console.log(data);
       
    },
    error: function(msg){
        alert(msg);
    }
})

$().load()

在这里插入图片描述

$("div").load("2.txt") 可以直接将下载的数据txt填充到页面中
可以只选择下载文件中的部分标签：如下选择id=p1

$.get()

$.get("2.txt",function(data,status,xhr){
	alert(data);
})

$.post()

$.post("1.post.php",{
	username:"train",
	age:19
},function(data,status,xhr){
	alert(data)
}

JQ实战：放大镜

效果图：
html

<body>
	<div id = 'small'>
		<img src="1.jpg" alt="">
		<div id = 'mark'></div>
	</div>
	<div id = 'big'>
		<img src="1.jpg" alt="">
	</div>
</body>

#small{width: 250px; height: 365px; border: 1px solid black; position: absolute; left: 100px; top: 100px}
 #small img{width: 100%; height: 100%;}
 #big img{width: 1000px; height: 1460px; position: absolute}
 #big{ display: none;overflow: hidden;;width: 400px; height: 400px; border: 1px solid black; position: absolute; left: 400px; top: 100px}
 #mark{display: none;width: 100px; height: 100px;background-color: white; opacity: 0.5; filter: alpha(opacity=50); position: absolute; left:0px; top: 0px}

mouseover
mouseout 这两个事件如果经过子节点，会重复触发
mouseenter
mouseleave 这两个事件经过子节点的时候，不会重复触发

$(function(){
	$("#small").mouseenter(function(){
	    $("#mark,#big").show()
	}).mouseleave(function(){
	    $("#mark,#big").hide()
	}).mousemove(function(ev){
		var l = ev.clientX - $("#small").offset().left - 50;
		var t = ev.clientY - $("#small").offset().top - 50;

		//限制出界
		if(l <= 0){
			l = 0;
		}
		if(l >= 150){
			l = 150
		}

		if(t <= 0){
			t = 0;
		}
		if(t >= 265){
			t = 265;
		}

		//改变遮罩层的位置
		$("#mark").css({
			left: l,
			top: t
		})
		//同时移动大图片的位置，反向四倍的距离
		$("#big img").css({
			left: -l * 4,
			top: - t * 4
		})
	})

	//鼠标移动事件
	
})