3

jQuery 超级详细

 1 month ago
source link: https://blog.51cto.com/u_16226572/10518721
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 超级详细_jQuery

jQuery 选择器 

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

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

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

jQuery 超级详细_jQuery_02

<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 超级详细_获取数据_03

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 超级详细_获取数据_04

jQuery 隐藏和显示

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

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

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

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

jQuery 超级详细_获取数据_05

jQuery 淡入淡出

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

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

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

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

jQuery 超级详细_获取数据_06

jQuery 滑动

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

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

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

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

jQuery 超级详细_jQuery_07

jQuery 动画

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

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

jQuery 超级详细_获取数据_08

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>

jQuery 超级详细_jquery_09

// 在文档加载完成后执行以下代码
$(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 超级详细_获取数据_10

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 超级详细_jquery_11

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();

jQuery 超级详细_获取数据_12

接口给我一个状态，如何快速给三个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);

jQuery 超级详细_获取数据_13

.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 超级详细_获取数据_14

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

  • 1赞
  • 收藏
  • 评论
  • 分享
  • 举报

上一篇：【vue】vuex


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK