JavaWeb 12 JQuery

最新推荐文章于 2024-10-16 10:13:45 发布

无梦想，却时常幻想

最新推荐文章于 2024-10-16 10:13:45 发布

阅读量125

点赞数

文章标签： js java javascript jquery ajax

本文链接：https://blog.csdn.net/weixin_46147057/article/details/108482808

版权

JAVA WEB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQuery

jquery的所有操作都是批量进行的，使用选择器选出的是一组对象，一般情况下，不需要循环操作

选择器

层次选择器

在这里插入图片描述

过滤选择器

在这里插入图片描述

表单选择器

在这里插入图片描述

以关系选择

在这里插入图片描述

// 索引小于2 的li 如 0,1
            var s = $("ul li:lt(2)");
            // 索引大于 2 的元素 3,4
            $("ul li:gt(2)").text();
            console.log(s);
            // 遍历 获得索引
            $("ul li").each(function () {
                console.log($(this).index());
            })

导入Jquery，不能在导入的script标签内添加内容

    <script src="WEB-INF/js/jquery-1.9.1.min.js" type="text/javascript" charset="UTF-8"></script>

index()函数在不传参时会与同辈元素比较，如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置

事件

在这里插入图片描述

动画效果

隐藏显示

hide():隐藏元素。
show():显示元素。
toggle():使用toggle()方法来切换hide()和show()方法。

隐藏的最终结果display：hidden

淡入淡出

fadeIn():淡入已隐藏元素 fadeOut()淡出可见元素
fadeToggle():可以在fadeln()与fadeOut()方法之间进行切换。
fadeTo():允许渐变为给定的不透明度，值介于0与1之间。

滑动

slideDown():下滑。slideUp():上滑。
slideToggle():可以在slideDown()与slideUp()方法之间进行切换。

<!--    显示隐藏-->
    $(".show").click(function () {
        $("#box1").show();
    });
    $(".hide").click(function () {
        $("#box1").hide();
    });
//   淡入淡出 fadein(最后变成display:nono) fadeout
    $(".fadein").click(function () {
        $("#box1").fadeIn(1000);
    });
    $(".fadeout").click(function () {
        $("#box1").fadeOut(1000);
    });
//   向上收起，向下展开
    $(".slideup").click(function () {
       $("#box1").slideUp(50);
    });
//    移动动画 需要先确定其定位方式
    $(".move").click(function () {
        $("#box1").animate({left:400,top:500,width:500},1000)
    });

树形目录
has可筛选出有参数元素的元素
envent.target==this 判断可限制只有当前元素，避免了事件的传播（事件冒泡）

$("li:has(ul)").css("list-style-image","url(img/-.gif)");
        // 筛选li内部有ul
        $("li:has(ul)").click(function (event) {
            // 阻止事件冒泡 传播
            // target仅指向被点击元素 而this指向当前元素，会随着传播指向父元素
            if (event.target==this){
                // 判断是否隐藏
                if ($(this).children().is(":hidden")){
                    $(this).children().show(600);
                    $(this).css("list-style-image","url(img/-.gif)");
                }else {
                    $(this).children().hide(600);
                    $(this).css("list-style-image","url(img/1.gif)")
                }
            }


        })

内容操作

text():设置或返回所选元素的内容
val():设置或返回表单字段的值。
html():设置或返回所选元素的文本内容。（包括HTML标记，即内部的标签也会被返回来)

无参数就是获取，带参数就是设置

元素添加删除

在这里插入图片描述

CSS操作

在这里插入图片描述

尺寸操作

在这里插入图片描述

JQuery AJAX

在这里插入图片描述

$.ajax({
url: "http://10.9.63.202:9090/tweets",
// 返回JSON对象 服务器传回的是字符串，JQuery会自动解析
dataType:"json",
success:function (data) {
	console.log(data);
	// 遍历data
	data.forEach(function (item,index) {
		var $li = $("<li>");
		// 添加id
		$li.prop("id",index);
		var $span = $("<span>")
		$span.text(item.msg);
		$span.appendTo($li);
		$li.appendTo($("#page_result"))
	})
}
})

// 发送数据
$("button:first").on("click",function () {
        alert("cc00");
        $.ajax({
            url:"http://localhost:8080/login",
            type:"post",
            data:{
                username:"zhangsan",
                password:"123"
            },
            success:function () {
                alert("成功")
            },
            error:function () {
                alert("失败")
            }
        })
    });

同源策略

针对于游览器的策略，并不限制后端

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如 XSS\CSRF攻击
AJAX默认情况下不可跨域

CORS

跨域资源共享(CORS) ：新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
当发送ajax请求时，服务器会返回一个响应头Access-Control-Allow-Origin:
相当于服务器指定了可以访问该接口的白名单
通常，只对于那些公开的非隐私的数据接口，才是用CORS

JSONP

从前端解决，仅仅用于get请求,也是AJAX技术
jQuery ajax方式以jsonp类型发起跨域请求，其原理跟JS脚本请求一
样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要
服务端配合，设置callback，才能完成跨域请求。

为了解决同源策略带来的AJAX无法跨域访问的问题

1.页面中的链接，重定向以及表单提交是不会受到同源策略限制的
2.跨域资源的引入，即src属性不受同源策略的限制，拥有跨域的能力

<script>、<img>、<iframe> 都可以跨域访问

服务器上设法把数据装进js格式的文件里，同时JSON拥有描述复杂数据的能力且被JS支持，把要传输的数据JSON放入js中，再使用游览器引入这个JS，就可以跨域获得数据（img我们无法处理其中的数据）

JSONP协议：用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，客户端定制自己的函数来自动处理返回数据（函数名同callback的参数）

先根据要传出的callback参数事先定义出里数据函数，返回的js中会调用这个函数，并把json数据作为参数传入，函数回调，就能使用已定义的函数操作传回的数据了，达到跨域效果

通过构造一个script标签，服务器端将要返回的json数据填充至JS代码中，并返回给客户端在客户端执行该JS代码，并拿到数据内容

如果所发送的跨域请求，并不需求获取数据那么，使用也是可以的

在这里插入图片描述
jQuery实现JSONP
jquery封装后，会自动加上callback参数
百度要求回调函数的名字的键值为cb，默认为callback

<script>
	
	onload = function(){
		let searchInput = document.getElementById("searchInput");
		$("#searchInput").on("keyup", function(){
			//http://suggestion.baidu.com/su?wd=a&cb=test
            // 清空之前的
            $(".droplist").empty();
            //
            $.ajax({
                url:"http://suggestion.baidu.com/su?wd="+$("#searchInput").val(),
                dataType:"jsonp",
                jsonp: "cb",
                success:function (data) {
                    data.s.forEach(function (item,index) {
                        var $li = $("<li>");
                        $li.text(item);
                        $li.appendTo($(".droplist"));
                    })
                }
            })
			
		})
	}
    
</script>

<body>
	<marquee direction="left">为了证明页面没有刷新的滚来滚去</marquee>
	
    <div class="container">
        <input id="searchInput" class="searchInput" type="text">
        <span class="searchBtn">百度一下</span>
        <ul class="droplist">
			
        </ul>
		
    </div>
</body>

服务器代理

HTTP通信时，客户端与服务器间常常存在中转代理服务器，来完成对目标资源的中转访问

在服务器端向第三方服务器发起请求，得到数据，并返回给客户端对于前端来说，不存在跨域

其他方法

// prop方法 一个参数获取属性，两个参数设置属性
// 将后边获得的属性给前边
$(".selectOne").prop("checked",$(this).prop("checked"));

// val()方法可获得标签内的值 多用于输入框

// attr仅能获取标签内显示写出的属性，多用于自定义标签的属性赋值和获取

// prop用于获取标签原有属性，未显示写出也能获取