分类 jquery 下的文章

2024-08-19

在jQuery中，赋值通常是指使用.val()方法设置表单元素（如input, select, textarea）的值，或者使用.html()，.text()，.attr()等方法设置DOM元素的内容。

使用.val(value)为input元素赋值：




$('#input-id').val('这里是新值');

使用.html(content)为元素内容设置HTML内容：




$('#div-id').html('<strong>这里是新的HTML内容</strong>');

使用.text(text)为元素内容设置纯文本内容：




$('#div-id').text('这里是新的文本内容');

使用.attr(attributeName, value)为元素的属性赋值：




$('#img-id').attr('src', '新的图片路径.jpg');

以上是基本的赋值方法，jQuery还提供了.prop()方法来设置元素的属性值，适用于布尔类型的属性（如checked, selected, disabled）。

使用.prop(propertyName, value)为元素的属性（比如checked）赋值：




$('#checkbox-id').prop('checked', true);

请注意，.val()一般用于表单元素，而.html(), .text(), .attr()可用于任何DOM元素。

- 阅读更多 -

jquery 菜单收缩展开

System

2024-08-19

所有,jquery

使用jQuery实现菜单的收缩和展开，可以通过监听一个按钮的点击事件来切换菜单的显示和隐藏状态。以下是一个简单的实例代码：

HTML:




<button id="menu-toggle">切换菜单</button>
<ul id="menu" style="display: none;">
  <li>菜单项 1</li>
  <li>菜单项 2</li>
  <li>菜单项 3</li>
</ul>

jQuery:




$(document).ready(function() {
  $('#menu-toggle').click(function() {
    $('#menu').slideToggle();
  });
});

这段代码中，slideToggle 方法会在显示和隐藏之间切换元素，并且提供了一个平滑的滑动效果。当用户点击按钮时，关联的菜单会以滑动动画显示或隐藏。

- 阅读更多 -

Jquery data-属性的获取与使用

System

2024-08-19

所有,jquery

在HTML中，可以使用data-*属性来存储页面的自定义数据。在jQuery中，可以使用.data()方法来获取和设置这些属性的值。

获取data-*属性的值：




// 假设有这样一个元素：<div id="myDiv" data-my-key="myValue"></div>
var value = $('#myDiv').data('my-key'); // 返回 "myValue"

设置data-*属性的值：




// 设置data-my-key属性的值
$('#myDiv').data('my-key', 'newValue');

使用data-*属性进行条件判断：




$('div').each(function() {
    var isImportant = $(this).data('important');
    if (isImportant) {
        $(this).css('color', 'red'); // 如果有data-important属性，则将文字颜色设置为红色
    }
});

在上述代码中，我们遍历了页面上所有的div元素，并根据它们的data-important属性来改变文字颜色。如果元素有data-important属性，则其值被视作true，文字颜色被设置为红色。

- 阅读更多 -

jQuery相较于原生js的优势

System

2024-08-19

所有,jquery

jQuery是一个轻量级的JavaScript库，它封装了很多常用的原生JavaScript操作，提供了更简洁的语法和更易于管理的代码。相较于原生JavaScript，jQuery主要有以下优势：

跨浏览器的兼容性：jQuery处理了不同浏览器之间的差异，使得开发者能够更专注于功能的实现而不是浏览器的兼容性。
简化的DOM操作：jQuery提供了丰富的DOM操作API，例如选择元素、修改样式、事件绑定等，使得这些操作更加简单和高效。
链式操作：jQuery允许开发者将多个操作链式调用，以此来减少代码中的重复，使结构更清晰。
丰富的插件支持：jQuery有庞大的社区，许多插件可供选择，以满足特定的需求。
动画和特效：jQuery提供了丰富的动画和特效API，使页面更加生动。
兼容性好：如果需要，jQuery可以在不支持JavaScript的环境中提供良好的用户体验。

以下是使用jQuery和原生JavaScript实现相同功能的对比示例：

原生JavaScript选择元素：




var element = document.getElementById('myElement');

jQuery选择元素：




var $element = $('#myElement');

原生JavaScript添加事件监听器：




element.addEventListener('click', function() {
  // 处理点击事件
});

jQuery添加事件监听器：




$element.click(function() {
  // 处理点击事件
});

原生JavaScript修改样式：




element.style.color = 'red';

jQuery修改样式：




$element.css('color', 'red');

原生JavaScript创建和添加元素：




var newElement = document.createElement('div');
document.body.appendChild(newElement);

jQuery创建和添加元素：




var $newElement = $('<div></div>');
$('body').append($newElement);

以上对比展示了使用jQuery和原生JavaScript实现常见的DOM操作的不同。在实际开发中，可以根据项目需求和个人喜好选择合适的工具。

- 阅读更多 -

JS特效第90弹：jQuery年终转盘抽奖代码

System

2024-08-19

所有,jquery

以下是一个简化的jQuery年终转盘抽奖代码示例，用于实现点击按钮后在转盘上随机停止，并显示中奖信息。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Year-End Lottery Wheel</title>
<style>
  #wheel {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #e3e3e3;
    position: relative;
    margin: 0 auto;
  }
  #wheel .segment {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    background: #f2f2f2;
  }
  #wheel .pointer {
    width: 20px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -10px;
    background: #000;
    border-radius: 5px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: spin 5s linear infinite;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<button id="spin">Spin the Wheel</button>
<div id="wheel">
  <div class="pointer"></div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var segments = 360; // 一共有360个段
  var randomNumber = 0; // 随机数初始化
 
  $('#spin').click(function() {
    // 停止之前正在进行的转动
    $('#wheel .pointer').css('animation', 'none');
    
    // 在下次重绘之后更新动画
    setTimeout(function() {
      randomNumber = Math.random() * segments; // 生成一个随机数
      $('#wheel .pointer').css('animation', 'spin 5s linear infinite').css('transform', 'rotate(' + randomNumber + 'deg)');
    }, 0);
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的转盘抽奖功能，点击按钮后转盘会停在随机位置。这里使用了CSS动画来实现转盘旋转，并在JavaScript中通过修改转盘的旋转角度来让它停在指定的位置。

- 阅读更多 -

探索jQuery.Hammer.js：手势识别的力量

System

2024-08-19

所有,jquery




// 首先，确保在页面中包含了jQuery和jQuery.Hammer.js库
// 然后，在你的脚本中，你可以这样使用它：
 
$(document).ready(function() {
    // 假设你有一个id为"element"的元素，你想要监听它的拖动事件
    $('#element').hammer({
        // 指定要监听的触摸事件
        drag: function(e) {
            // 这里处理拖动事件的逻辑
            console.log('元素被拖动', e);
        }
    });
 
    // 如果你想要同时监听多个事件，可以这样做：
    $('#element').hammer({
        drag: function(e) { console.log('拖动', e); },
        tap: function(e) { console.log('点击', e); },
        press: function(e) { console.log('按压', e); }
        // 你可以继续添加其他事件的处理函数
    });
});

这个示例展示了如何使用jQuery.Hammer.js来监听一个元素上的拖动、点击和按压事件。通过这种方式，你可以很容易地为你的网站添加触摸事件的交互功能。

- 阅读更多 -

jQuery 遍历- 过滤

System

2024-08-19

所有,jquery

在jQuery中，我们可以使用各种方法来过滤和操作DOM元素。以下是一些常见的过滤方法：

:first 和 :last 选择器

这两个选择器用于选择第一个或最后一个元素。




$('div:first').css('color', 'red'); // 选取所有div中的第一个
$('div:last').css('color', 'red'); // 选取所有div中的最后一个

:eq(index) 选择器

这个选择器用于选择特定索引的元素。索引从0开始。




$('div:eq(1)').css('color', 'red'); // 选取所有div中的第二个（索引为1）

:even 和 :odd 选择器

这两个选择器用于选择索引为偶数或奇数的元素。




$('div:even').css('color', 'red'); // 选取所有div中索引为偶数的元素
$('div:odd').css('color', 'red'); // 选取所有div中索引为奇数的元素

:gt(index) 和 :lt(index) 选择器

这两个选择器用于选择大于或小于特定索引的元素。




$('div:gt(1)').css('color', 'red'); // 选取所有div中索引大于1的元素
$('div:lt(1)').css('color', 'red'); // 选取所有div中索引小于1的元素

:not(selector) 选择器

这个选择器用于排除某些选择器的元素。




$('div:not(.class)').css('color', 'red'); // 选取所有不含class="class"的div元素

:header 选择器

这个选择器用于选择所有的标题元素，如h1, h2, h3等。




$(':header').css('color', 'red'); // 选取所有标题元素

:animated 选择器

这个选择器用于选择所有正在执行动画的元素。




$(':animated').css('color', 'red'); // 选取所有正在执行动画的元素

:focus 选择器

这个选择器用于选择当前获取焦点的元素。




$(':focus').css('color', 'red'); // 选取当前获取焦点的元素

:contains(text) 选择器

这个选择器用于选择包含特定文本的元素。




$('div:contains("test")').css('color', 'red'); // 选取所有div中包含"test"文本的元素

:has(selector) 选择器

这个选择器用于选择包含特定选择器的元素。




$('div:has(.class)').css('color', 'red'); // 选取所有含有class="class"的子元素的div元素

:parent 选择器

这个选择器用于选择含有子元素或文本的元素。




$('div:parent').css('color', 'red'); // 选取所有含有子元素或文本的div元素

:empty 选择器

这个选择器用于选择不包含子元素或文本的元素。




$('div:empty').css('color', 'red'); // 选取所有不含有子元素或文本的div元素

这些方法可

- 阅读更多 -

前端css+jquery记一个特效动画

System

2024-08-19

所有,jquery

以下是一个使用CSS和jQuery创建的简单动画特效的示例。这个特效会在鼠标悬停时触发，使得元素放大并显示出来。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画特效示例</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: transform 0.5s ease-in-out;
    transform: scale(0);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('.box').hover(function(){
      $(this).css('transform', 'scale(1)');
    }, function(){
      $(this).css('transform', 'scale(0)');
    });
  });
</script>
 
</body>
</html>

这段代码中，.box 类定义了一个方框并设置了过渡效果。当鼠标悬停在 .box 元素上时，jQuery 的 .hover 方法被触发，通过改变 transform 属性的值来触发放大缩小动画。

- 阅读更多 -

HTML前端表单校验的方法

System

2024-08-19

所有,jquery

在HTML中，可以使用以下几种方法来对前端表单进行验证：

使用HTML5内置的验证属性：




<form action="/submit">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit" value="Submit">
</form>

使用JavaScript进行验证：




<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit" onclick="validateForm()">
</form>
 
<script>
function validateForm() {
  var x = document.forms["myForm"]["username"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

使用第三方库如jQuery Validation Plugin进行验证：




<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      username: {
        required: "Please enter your username",
        minlength: "Your username must consist of at least 5 characters"
      }
    }
  });
});
</script>

以上方法可以根据需要选择使用，HTML5的验证属性简单易用，而JavaScript和jQuery Validation Plugin提供了更多的自定义选项和功能。

System

2024-08-19

所有,jquery

以下是一个简单的HTML、CSS和JavaScript的图片轮播实现，用于展示龙猫的五张照片，并带有轮播功能和表单校验。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Quest Slideshow</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
  }
  #slideshow {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  #slideshow img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  #slideshow img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div id="slideshow">
  <img class="active" src="dragon1.jpg" alt="Dragon Quest 1">
  <img src="dragon2.jpg" alt="Dragon Quest 2">
  <img src="dragon3.jpg" alt="Dragon Quest 3">
  <img src="dragon4.jpg" alt="Dragon Quest 4">
  <img src="dragon5.jpg" alt="Dragon Quest 5">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('#slideshow img');
  const nextImage = () => {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
  };
 
  setInterval(nextImage, 3000);
</script>
 
</body>
</html>

在这个例子中，我们使用了CSS来制作简单的图片轮播效果，并通过JavaScript实现了轮播功能。图片列表是固定的，但你可以根据需要添加更多的图片。轮播会在每3秒钟自动切换到下一张图片。这个例子不包括表单校验，但你可以很容易地添加表单校验逻辑，比如使用HTMLFormElement.checkValidity()方法。

- 阅读更多 -