class 原生js获取父元素_收集js小技巧

1、根据name值获取表单中输入框的值，表单如下：

<form method='get' action='' target='_blank' name='qForm'>
  <input name='q' type='text' />
</form>
<script>
  var val = document.qForm.q.value
</script>

2、jquery获取包括当前元素在内的html：

$("#test").prop("outerHTML");

3、获取url

/* https://test.com:8080/test/index.html#test?name=test */
var url;

url = window.location.href; /* 获取完整URL */

url = window.location.pathname; /* 获取文件路径（文件地址）---> /test/index.html */

url = window.location.protocol; /* 获取协议 ---> https */

url = window.location.host; /* 获取主机地址和端口号 ---> test.com:8080 */

url = window.location.hostname; /* 获取主机地址 --> test.com */

url = window.location.port; /* 获取端口号 ---> 8080 */

url = window.location.hash; /* 获取锚点（“#”后面的分段）---> #test?name=test */

url = window.location.search; /* 获取属性（“?”后面的分段）---> name=test */

4、判断a链接是否是外链

  var domainName = window.location.hostname
  $(className).find('a').map(function () {
    var href = $(this).attr('href')
    if (href.indexOf('http') !== -1 && href.indexOf(domainName) == -1) {
      $(this).attr('target', '_blank')
    }
  })

5、图片在父元素里居中

$('.parentEle').find('img').each(function () {
  var parentH = $(this).parent().height()
  var parentW = $(this).parent().width()
  var parentR = parentW / parentH
  var imgH = $(this).height()
  var imgW = $(this).width()
  var imgR = imgW / imgH
  if (parentR > imgR) {
    if (imgH > parentH) {
      $(this).height(parentH)
      $(this).width(parentH * imgR)
    } else {
      $(this).css('margin-top', (parentH - imgH) / 2)
    }
  } else {
    if (imgW > parentW)  {
      $(this).width(parentW)
      $(this).height(parentW / imgR)
      $(this).css('margin-top', (parentH - (parentW / imgR)) / 2)
    } else {
      $(this).css('margin-top', (parentH - imgH) / 2)
    }
  }
})

6、信息列表添加“...”

<style>
  .s3lm-lists {height: 216px;overflow: hidden;}
  .s3lm-item {position: relative;}
  .s3lm-item li {line-height: 36px;padding-left: 10px;background: url(icon_dotted.png) 0 16px no-repeat;}
  .s3lm-item li a {display: block;width: 100%;position: relative;}
  .s3lm-item li span {margin-left: 2em;}
  .s3lm-item li ins {width: 30px;height: 36px;background-color: #fff;position: absolute;right: 0;}
</style>
<div class="s3lm-lists">
  <ul class="s3lm-item">
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例这是多行信息超出固定高度后添加“...”的示例这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
    <li><a href="">这是多行信息超出固定高度后添加“...”的示例<span>2020-09-07</span></a></li>
  </ul>
</div>
<script>
  /**
   * 信息列表加“...”
   * @param {ele}  要处理ul的class名称
   */
  function addEllipsis(ele, isBorder) {
    var curPart = $(ele).filter(function () {
      return $(this).is(':visible')  // 获取当前显示的列表
    })

    curPart.each(function () {
      var fixedHeight = $(this).outerHeight(); // 获取列表外盒子的固定高度
      var liOriginH = 0;
      var liLineHeight = parseInt($(this).find("li").eq(0).css("line-height")); // 获取行高
      $(this).find('li').each(function() {
        var liHeight = 0
        if (isBorder) {
          liHeight = Math.floor($(this).outerHeight() / liLineHeight) * liLineHeight
          $(this).outerHeight(liHeight)
        } else {
          liHeight = $(this).outerHeight(); // 获取每个li的高度        
        }
        liOriginH += liHeight;  // 获取当前li的总高度
        if (liOriginH >= fixedHeight) {
          if (liOriginH > fixedHeight) { // li的高度超过外盒子固定高度，给超过高度的li加上'...'
            if ($(this).has('ins').length === 0) { // 避免重复添加
              $(this).append('<ins>...</ins>');
            }
            var hideH = liOriginH - fixedHeight  // 获取超出部分的高度
            var t = $(this).outerHeight() - hideH - liLineHeight; // 获取'...'的定位高度
            $(this).find('ins').css('top', t)
            // $(this).find('span').css('bottom', hideH) // 给时间设置定位
          }
          $(this).hover(function() {  // 鼠标滑过显示超出部分内容
            $(this).find('ins').hide(300)
            $(this).parent('ul').stop().animate({ 'top': -hideH }, 300)
            // $(this).find('span').stop().animate({ 'bottom': 0 }, 300)
          }, function() {
            $(this).find('ins').show(300)
            $(this).parent('ul').stop().animate({ 'top': 0 }, 300)
            // $(this).find('span').stop().animate({ 'bottom': hideH }, 300)
          })
          return false;
        }
      })
    })
  }
</script>