jQuery

最新推荐文章于 2021-12-07 17:26:46 发布

对方暂时无法接听

最新推荐文章于 2021-12-07 17:26:46 发布

阅读量111

点赞数

分类专栏：前端html、css，js 笔记

本文链接：https://blog.csdn.net/weixin_45980070/article/details/107553781

版权

笔记同时被 2 个专栏收录

91 篇文章 0 订阅

订阅专栏

前端html、css，js

8 篇文章 0 订阅

订阅专栏

jQuery是一个JavaScript函数库。
使用jQuery一定要导包一个是转json的包fastjaon还有个是jquery自己的js包

在这里插入代码片    <script type="text/javascript" src="js/jquery-3.5.0.js"></script>

jQuery语法

jQuery 语法是通过$()核心函数选取 HTML 元素，并对选取的元素执行某些操作。

使用语法1 ： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作（css的样式等操作）
举例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏所有 id=“test” 的元素

使用语法2： $(匿名函数)
表示页面dom加载完毕，就执行，比onload事件要早，并行可以写多个。
$(匿名函数)
和
$(document).ready(匿名函数) 一样

三大选择器(所有的选择器都要结合on开头的事件来用的)
什么是事件？
页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

1 元素选择器

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

2 id选择器

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

3 class选择器

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload

一个事件可以通过定义一个事件函数作为参数来实现，触发事件

不传参是点击
$("p").click();
传参是设置事件
$("p").click(function(){
    // 动作触发后执行的代码!!
});

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery节点关系
1 祖先
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。

2 后代
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

3 同胞
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。

jQuery AJAX(重点！！！)
jQuery结合Ajax请求的应用十分重要

一个发送ajax请求的实现代码；

<head>
    <title>Title</title>
<%--    先引入jQuery--%>
    <script type="text/javascript" src="js/jquery-3.5.0.js"></script>
</head>
<body>
<span></span>
<button >点击我，我回后台拿数据付给button</button>

    <script type="text/javascript">
        $(function () {//先写一个函数（表示当页面加载结束）
            $('button').click(function () {//绑定事件，点击我会执行事件函数（函数里的时间就是一个ajax请求）

                $.ajax({//发的ajax请求，设置以下的请求参数
                    url:"user",//根据这个url访问到contrller
                    data:"username=zhangsan",//发过去让controller接收
                    type:"post",//设置为get请求
                    dataType:"json",//设置把 json字符串响应的类型是json
                    success:function (data) {//200，连接成功。取到值付给date

                        $('span').text(data.msg);//把响应的值传给span
                    }
                });
            });
        });
    </script>
</body>
</html>

服务端的响应代码

@WebServlet(name = "UserController",urlPatterns = "/user")
public class UserController extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html; Charset=utf-8");
        String username = request.getParameter("username");
        String str="{\"msg\":\"加载成功"+username+"\"}";//设置键值对的方式，aaa.jsp拿键就行
//        {"birth"\:1595590686170,"gender":true,"id":1,"name":"zhangsan"}
        response.getWriter().print(str);//获得输出流，才能输出
        System.out.println(str);
    }
}

jQury的写法：
在这里插入图片描述 [外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblog.csdmg.cn/_7SMR70)https://img-blog.csdnimg.cn20200724094710175.png?x-oss-process=imag_70)]