自学内容网 自学内容网

【JS逆向课件:第十九课:jQuery】

第5章 、jQuery

5.1、jQuery介绍

  • jQuery是什么

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理等功能。

jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

  • jQuery的版本

目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

  • jQuery的引入

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

5.2、jQuery的选择器

5.2.1、直接查找

  • 基本选择器
/*
#id         # id选择符 
element     # 元素选择符
.class      # class选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符 

jQ选择器:

$("#id")   == document.getElementById('id')
$(".class")  
$("element")  
*/

5.3、jQuery的事件绑定

/*
用法:
直接通过事件名来进行调用
  $().事件名(匿名函数)
   
*/

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="d1">i am div tag</div>
    <input type="text" id="t">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $('#d1').click(function () {
        window.alert('点击了div标签!')
    })

    $('#t').blur(function () {
        window.alert('写完了吗?')
    })
</script>
</html>

5.4 Ajax请求(重点)

  • 什么是ajax?

    • AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

    • 它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

    • 对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页面,这样页面内容就会更新了。(微博页面加载过程的例子,加载一会下方才会出现内容,这其实就是Ajax加载的过程。)

    • 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

    • 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

    • //get()方式
         $("#btn").click(function(){
              var url = "yourUrl?param1=value1&param2=value2"; // 在url中添加参数
              $.ajax({
                  type: "GET",
                  url: url,
                  dataType: "json",
                  success: function(data){
                      console.log(data); // 处理回调数据
                  },
                  error : function(error) {
                      console.log(error); // 处理错误信息
                  }
              });
          });
      
      //or
      $("#btn").click(function(){
              $.ajax({
                  type: "GET",
                  url: "yourUrl",
                  data: { // 使用data选项传递参数
                      param1: "value1",
                      param2: "value2"
                  },
                  dataType: "json",
                  success: function(data){
                      console.log(data); // 处理回调数据
                  },
                  error : function(error) {
                      console.log(error); // 处理错误信息
                  }
              });
          });
      
  • //post()方式
     $("#btn").click(function() {
            $.ajax({
                type: "POST",
                url: "yourUrl", // 请求地址
                data: { // 请求参数
                    param1: "value1",
                    param2: "value2"
                },
                dataType: "json", // 服务器返回的数据类型
                success: function(data) { // 成功回调函数
                    console.log(data); // 打印服务器返回的数据
                },
                error: function(error) { // 失败回调函数
                    console.log(error); // 打印错误信息
                }
            });
        });
    
  • 常用的抓包工具:

    • win:fiddler
    • mac:Charles

    易语言:适合写外挂

    数据可视化:pyechars,matplotlib,Seaborn


原文地址:https://blog.csdn.net/weixin_50556117/article/details/140651185

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!