【jQuery】回顾jQuery，超级详细

jQuery官网：jQuery

 jQuery基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操

文档就绪函数：防止文档在完全加载（就绪）之前运行 jQuery 代码，比如：试图隐藏一个不存在的元素

$(document).ready(function(){

  // jQuery functions go here

});


$(function(){

  // jQuery functions go here

})

jQuery 选择器 

$("p")      //选取 <p> 元素。

$(".intro") //选取所有 class="intro" 的元素。

$("#demo")  //选取所有 id="demo" 的元素。

<div id="a">
    <p></p>
    <p>
        <span>one</span>
        <span>two</span>
        <span>therr</span>
    </p>
</div>


//:eq() 选择器选取带有指定 index 值的元素，默认从0开始
alert(("#a p:eq(1) span:eq(2)").html())  //therr

jQuery 事件

$("button").click(function() {  // some code... } )     //点击事件
$("button").dblclick(function() {  // some code... } )  //双击事件
$("button").dblclick(function() {  // some code... } )  //双击事件

$("button").mousedown(function() {  // some code... } )  //鼠标按下事件
$("button").mouseup(function() {  // some code... } )    //鼠标松开事件

$("button").mousemove(function(e) {  // some code... } ) //获得鼠标指针在页面中的位置

$("button").mouseover(function() {  // some code... } )  //鼠标进入
$("button").mouseout(function() {  // some code... } )   //鼠标移开

$("button").mouseenter(function() {  // some code... } )  //鼠标进入
$("button").mouseleave(function() {  // some code... } )  //鼠标移开

jQuery 隐藏和显示

可以有两个参数，第一个是显示与隐藏的时间，第二个是隐藏或显示完成后所执行的函数

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

$("button").click(function(){
  $("p").show(1000);
});

$("button").click(function(){
  $("p").toggle(1000);
});

jQuery 淡入淡出

可以有两个参数，第一个是显示与隐藏的时间，第二个是隐藏或显示完成后所执行的函数

$("button").click(function(){
  $("p").fadeIn(1000);
});

$("button").click(function(){
  $("p").fadeOut(1000);
});

$("button").click(function(){
  $("p").fadeToggle(1000);
});

jQuery 滑动

可以有两个参数，第一个是显示与隐藏的时间，第二个是隐藏或显示完成后所执行的函数

$("button").click(function(){
  $("p").slideDown(1000);
});

$("button").click(function(){
  $("p").slideUp(1000);
});

$("button").click(function(){
  $("p").slideToggle(1000);
});

jQuery 动画

三个参数，第一个必需的 定义形成动画的 CSS 属性；第二个可选的 规定效果的时长；第三个也是可选的 动画完成后所执行的函数

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery 获取与设置内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() 方法用于获取属性值

jQuery 获取并设置 CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

jQuery中submit提交表单数据

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="Submit">
</form>

// 在文档加载完成后执行以下代码
$(document).ready(function() {
  // 给表单添加 submit 事件监听器
  $("#myForm").submit(function(e) {
    // 阻止表单默认的提交行为
    e.preventDefault();
    
    // 获取表单数据并打印到控制台
    var formData = $(this).serializeArray();
    console.log(formData);
    
    // 发送 Ajax 请求并处理响应
    $.ajax({
      url: "/submit-form-data",
      type: "POST",
      data: formData,
      success: function(response) {
        alert("提交成功！");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert("提交失败：" + textStatus);
      }
    });
  });
});

jquery中post请求与get请求：

$.ajax({
   url: '/api/data',
   type: 'POST',
   data: { param1: 'value1', param2: 'value2' },
   success: function(data) {
      console.log('获取数据成功：', data);
   },
   error: function(error) {
      console.log('获取数据失败：', error);
   }
});


$.ajax({
   url: '/api/data',
   headers:{
        Authorization:localStorage.token
   },
   type: 'GET',
   data: { param1: 'value1', param2: 'value2' },
   success: function(data) {
      console.log('获取数据成功：', data);
   },
   error: function(error) {
      console.log('获取数据失败：', error);
   }
});

jquery进阶操作：

 三个input type="radio"选择状态，如何快速获取用户选择的哪个

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="other">


var selectedValue = $('input[name="gender"]:checked').val();

接口给我一个状态，如何快速给三个input type="radio"其中的一个赋值状态 

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="other">

var status = "male"; // 假设状态值为'male'
$('input[name="gender"][value="' + status + '"]').prop('checked', true);

.each()遍历数组，当某一项数据超过指定范围，文字显示红色 

<div id="6_d">
  <input type="text" name="voc_1">
  <input type="text" name="voc_2">
  <input type="text" name="voc_3">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 假设 response.VOC 是一个数组，包含了输入框的数值
  var response = {
    VOC: [10, 20, 30]
  };

  $('#6_d input').each(function(index) {
    // 设置相应索引位置的数组数据到对应的 input 元素的 value 属性中
    $(this).val(response.VOC[index]);

    // 检查数值是否超出范围，如果超出则将文字颜色设置为红色
    if (response.VOC[index] > 25) {
      $(this).css('color', 'red');
    }
  });
});
</script>

文档参考：jQuery 教程 (w3school.com.cn)