基于JQ的图书类别选择界面共30分包括小说、文艺、知音、少儿、生活、社科、广利、美女、儿童、老人、少年、青年、成年、女人、父亲、母亲、妹妹、其他且可简化还要显示图书数量一行三个显示边框

以下是基于JQ的“图书类别选择”界面的代码，共30分：

HTML代码：

<div class="category">
  <div class="category-item" data-category="小说">
    <span class="category-name">小说</span>
    <span class="book-count">100</span>
  </div>
  <div class="category-item" data-category="文艺">
    <span class="category-name">文艺</span>
    <span class="book-count">80</span>
  </div>
  <div class="category-item" data-category="知音">
    <span class="category-name">知音</span>
    <span class="book-count">50</span>
  </div>
  <div class="category-item" data-category="少儿">
    <span class="category-name">少儿</span>
    <span class="book-count">120</span>
  </div>
  <div class="category-item" data-category="生活">
    <span class="category-name">生活</span>
    <span class="book-count">70</span>
  </div>
  <div class="category-item" data-category="社科">
    <span class="category-name">社科</span>
    <span class="book-count">90</span>
  </div>
  <div class="category-item" data-category="广利">
    <span class="category-name">广利</span>
    <span class="book-count">30</span>
  </div>
  <div class="category-item" data-category="美女">
    <span class="category-name">美女</span>
    <span class="book-count">20</span>
  </div>
  <div class="category-item" data-category="儿童">
    <span class="category-name">儿童</span>
    <span class="book-count">110</span>
  </div>
  <div class="category-item" data-category="老人">
    <span class="category-name">老人</span>
    <span class="book-count">40</span>
  </div>
  <div class="category-item" data-category="少年">
    <span class="category-name">少年</span>
    <span class="book-count">60</span>
  </div>
  <div class="category-item" data-category="青年">
    <span class="category-name">青年</span>
    <span class="book-count">80</span>
  </div>
  <div class="category-item" data-category="成年">
    <span class="category-name">成年</span>
    <span class="book-count">90</span>
  </div>
  <div class="category-item" data-category="女人">
    <span class="category-name">女人</span>
    <span class="book-count">50</span>
  </div>
  <div class="category-item" data-category="父亲">
    <span class="category-name">父亲</span>
    <span class="book-count">30</span>
  </div>
  <div class="category-item" data-category="母亲">
    <span class="category-name">母亲</span>
    <span class="book-count">40</span>
  </div>
  <div class="category-item" data-category="妹妹">
    <span class="category-name">妹妹</span>
    <span class="book-count">20</span>
  </div>
  <div class="category-item" data-category="其他">
    <span class="category-name">其他</span>
    <span class="book-count">10</span>
  </div>
</div>

CSS代码：

.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-item {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.category-item:hover {
  background-color: #f5f5f5;
}

JQ代码：

$(document).ready(function() {
  // 点击类别项
  $('.category-item').on('click', function() {
    var category = $(this).data('category');
    alert('您选择了' + category + '类别');
  });
});

解释：

1. HTML代码中每个类别项使用了<div>元素，其中data-category属性存储了类别名称，<span>元素用于显示类别名称和图书数量。
2. CSS代码中设置了每个类别项的样式，包括宽度、边距、内边距、边框、圆角、文本对齐和鼠标指针。
3. JQ代码中使用$(document).ready()函数绑定了页面加载事件，然后使用$('.category-item').on('click', function() {})绑定了类别项的点击事件，当用户点击某个类别项时，会获取该项的data-category属性值，并使用alert()函数显示该类别名称