JQ操作表单

获取input值

$("input[name='test']").val()

该方式减少了id或class的定义，直接通过name获取输入框的值

获取select值

获取第一个值

$('#test option:first').val();

获取第2个值

$('#test option:eq(1)').val();

获取最后一个值

$('#test option:last').val();

获取选中的值

$('#test').val();
$('#test option:selected').val();

获取radio值

<input type="radio" name="type" value="0" checked="checked">公开
<input type="radio" name="type" value="1">私密

获取方式

// 调用
getRadioValue('recommend')
// 通用方式
function getRadioValue(radioName) {
  var chkRadio = document.getElementsByName(radioName);
  for (var i = 0; i < chkRadio.length; i++) {
    if (chkRadio[i].checked)
      return chkRadio[i].value;
  }
}

该方法适合有默认选中或没有默认选中的情况。

JQ动态绑定HTML事件

对于JQ动态插入的HTML，如果要绑定事件，需要使用on()函数

$('#cate').on('click', '.cate', function () {
  // TODO
})

其中第一个元素不能是动态生成的

JQ遍历

查找元素

// 返回数组
let icon = $(this).find('i')

同胞下一个元素

// next()
$(this).next().slideToggle(500);

ajax

通用格式

$.ajax({
  type: 'post',
  url: '/loginEd',
  //contentType: 'application/json;charset=utf-8',
  data: {'username': username, 'password': password},
  dataType: 'json',
  success: function (res) {
    
  },
  error: function (res) {
    
  }
})

注意：跨域请求用http或https开头，否则服务跨域

application/json

application/json的请求方式需要加上contentType头和处理data为JSON数据字符串

$.ajax({
  url: '/manage/category/modify',
  type: 'post',
  contentType: 'application/json',
  data: JSON.stringify({'name': name, 'type': type}),
  dataType: 'json',
  success: function (res) {
    if (res.code == 200) {
      message.success(res.msg, 1000, function () {
        location.reload()
      })
    } else {
      message.error(res.msg)
    }
  }
})

提取页面大纲

代码

// 获取大纲
let h1 = $('#content').find('h1,h2,h3')
let out = ''
for (let item of h1) {
  if ($(item).is('h1')) {
    out += '<a href="#' + $(item).attr('id') + '"><div class="outline-box">' + $(item).text() + '</div></a>'
  } else if ($(item).is('h2')) {
    out += '<a href="#' + $(item).attr('id') + '"><div class="outline-box">&emsp;' + $(item).text() + '</div></a>'
  } else if ($(item).is('h3')) {
    out += '<a href="#' + $(item).attr('id') + '"><div class="outline-box">&emsp;&emsp;' + $(item).text() + '</div></a>'
  }
}
if (h1.length==0) {
  out += '<div class="outline-box">无目录</div></a>'
}
$('#outline').html(out)

原理

锚点：a标签的href加上#后能在本页跳转，如：<a href="#测试">测试</a>能跳转到id="测试"的地方

JQ的find()后代遍历支持多个同时查找，将找到的标题进行遍历处理即可

提取大纲升级

可以对当前的位置进行显示

/**
 * 滚动监听 操作目录展示
 */
// 查找所有目录项，find能解决动态插件节点操作问题
let allOutlineElement = $('#outline').find('.outline-child')
// 查找文章中的标题节点
let airElement = $('#content').find('h1,h2')
// 标题个数，减少对length的读取
let elementNum = airElement.length
$(document).scroll(function () {
    // 被选元素的垂直滚动条位置，仅文档有效
    let top = $(document).scrollTop();
    // 每次滚动都对节点进行样式的更新
    for (let i = 0; i < elementNum; i++) {
        // 是最后一个或后一个之前加上样式，这里注意是文章的标题位置与当前滚动到的位置进行比较，然后对大纲的样式进行操作，减1是修正位置正确性
        if (top > $(airElement[i]).offset().top - 1 && (i === elementNum - 1 || top < $(airElement[i + 1]).offset().top - 1)) {
            $(allOutlineElement[i]).addClass('outline-active')
        } else {
            $(allOutlineElement[i]).removeClass('outline-active')
        }
    }
})

阻止事件冒泡

e.stopPropagation()