查看: 339  |  回复: 0
  js jQuery 超级详细讲解
楼主
发表于 2024年6月19日 20:55

官网 https://jquery.com

jQuery基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操
文档就绪函数:防止文档在完全加载(就绪)之前运行 jQuery 代码,比如:试图隐藏一个不存在的元素

$(function(){
  // jQuery functions go here
})

jQuery 选择器

$("p")      //选取 

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

<div id="a">
    

    

        <span>one</span>         <span>two</span>         <span>therr</span>     

</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);
   }
});


1楼
发表于 2024年6月19日 21:35

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>


您需要登录后才可以回帖 登录 | 立即注册
【本版规则】请勿发表违反国家法律的内容,否则会被冻结账号和删贴。
用户名: 立即注册
密码:
2020-2024 MaNongKu.com