新手学习JQuery基本操作和使用案例解析

基本操作

选择元素

在JQuery中，可以通过$()函数来选取元素。其中，括号中可以传入CSS选择器、HTML元素或者DOM元素。例如：

// 使用CSS选择器选取所有class为foo的元素
$('.foo')

// 选取所有h1元素
$('h1')

// 选取id为bar的元素
$('#bar')

// 选取DOM元素
$(document.getElementById('baz'))

操作元素

选取元素之后，就可以对其进行一些基本操作，例如修改CSS样式、添加/移除元素、绑定事件等。

修改CSS样式

可以通过css()方法来修改元素的CSS样式。例如：

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

此时，class为foo的元素的文字颜色会变成红色。

添加/移除元素

可以通过append()、prepend()等方法来添加、移除元素。例如：

// 将一个新的p元素添加到body中
$('body').append('<p>hello world!</p>');

// 从body中移除所有class为foo的元素
$('body .foo').remove();

绑定事件

可以通过on()方法来绑定事件，例如：

$('.foo').on('click', function() {
  alert('you clicked foo!');
});

这段代码会在class为foo的元素被点击时，弹出一个提示框。

案例解析

示例一：轮播图

在JQuery中，轮播图是一个非常常见的开发场景。下面我们通过一个案例来演示如何用JQuery实现轮播图。

HTML结构：

<div class="slider">
  <div class="slider-item active">
    <img src="img/1.jpg" alt="">
  </div>
  <div class="slider-item">
    <img src="img/2.jpg" alt="">
  </div>
  <div class="slider-item">
    <img src="img/3.jpg" alt="">
  </div>
  <div class="slider-item">
    <img src="img/4.jpg" alt="">
  </div>
  <div class="slider-item">
    <img src="img/5.jpg" alt="">
  </div>
</div>

CSS样式：

.slider {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
}

.slider-item.active {
  opacity: 1;
}

JS代码：

// 定义变量
var index = 0;
var timer;

// 切换函数
function slide() {
  $('.slider-item.active').removeClass('active');
  $('.slider-item').eq(index).addClass('active');
  index++;
  if (index > 4) {
    index = 0;
  }
  timer = setTimeout(slide, 3000);
}

// 开始轮播
timer = setTimeout(slide, 3000);

这段代码会让轮播图自动轮播，每隔3秒钟自动切换到下一张图片。

示例二：图片懒加载

图片懒加载是指在网页中只加载当前页面可见区域的图片，以提高页面加载速度。下面我们来演示如何用JQuery实现图片懒加载。

HTML结构：

<img class="lazy" data-src="img/1.jpg" alt="">
<img class="lazy" data-src="img/2.jpg" alt="">
<img class="lazy" data-src="img/3.jpg" alt="">
<img class="lazy" data-src="img/4.jpg" alt="">
<img class="lazy" data-src="img/5.jpg" alt="">

JS代码：

$(function() {
  // 加载初始可见区域的图片
  $('.lazy').each(function() {
    if (isInViewport($(this))) {
      var src = $(this).data('src');
      $(this).attr('src', src);
    }
  });

  // 监听滚动事件，动态加载图片
  $(window).on('scroll', function() {
    $('.lazy').each(function() {
      if (isInViewport($(this))) {
        var src = $(this).data('src');
        $(this).attr('src', src);
        $(this).removeClass('lazy');
      }
    });
  });

  // 判断元素是否进入可见区域
  function isInViewport($element) {
    var elementTop = $element.offset().top;
    var elementBottom = elementTop + $element.outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
  }
});

这段代码会在页面滚动时，动态加载当前屏幕可见区域的图片。