Web前端速成(Html+Css+JavaScript+jQuery)-17.jQuery-前后台数据交互

乐地课堂

已于 2023-06-11 00:50:56 修改

阅读量385

点赞数

分类专栏：前端开发文章标签： javascript jquery 前端 html css

于 2023-05-17 17:00:59 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130729978

版权

该篇博客主要介绍了jQuery框架如何操作HTML元素，并重点讲解了利用jQuery进行前后台数据交互的$.get()和$.post()方法，包括多个示例展示。

摘要由CSDN通过智能技术生成

内容摘要：
- 介绍jQuery框架下操作页面元素的方法和jQuery框架下ajax实现前后台数据交互的方法。

17.jQuery-前后台数据交互

知识点

jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
操作页面元素

运用例子

获取值

<!DOCTYPE html>
<html>
  <head> 
      <meta charset="utf-8"> 
      <title>jQuery库运用例子</title> 
      <!-- 引用 jQuery库 -->
      <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
      </script>
      <!-- 这里开始js编码 -->
      <script>
          $(document).ready(function myFunction() {  
              // 获得内容 - text()、html() 以及 val()
              $("#btn1").click(function(){
                  // 取到元素的Text值
                var myTip = $("#test").text();
                // 拼装字符串
                var msg = "Text: " + myTip;
                // 弹出提示框
                  alert(msg);
              });
              $("#btn2").click(function(){  
                // 取到元素的HTML值
                var myTip = $("#test").html();
                // 拼装字符串
                var msg = "HTML: " + myTip;
                // 弹出提示框
                  alert(msg);

              });
              $("#btn3").click(function(){                   
                // 取到元素的val值
                var myTip = $("#inputTest").val();
                // 拼装字符串
                var msg = "值为: " + myTip;
                // 弹出提示框
                  alert(msg);
              });

              // 获取属性值 - attr() 
              $("#btn4").click(function(){ 
                // 取到元素的width值
                var myTip = $("#divDemo1").attr("width&#