js、jquery操作原生dom常用方法总结

1、给标签的某个属性赋值，获取某个属性的值

$('#id').attr('属性','值');
$('#id').attr('属性');
documnet.getElementById('').getAttribute("");
documnet.getElementById('').setAttribute('属性','值');
//例如
 <input id="range" type="range" min="0" value="0" class="slider" oninput="change()" />
 $('#range').attr('max','100'); //赋值
 $('#range').attr('max');//获取值
 

2、修改样式、添加类

 $('#id').addClass("类名");//添加类
 $('.类名').css('样式','值');//修改样式

3、.eq()和:eq()

  <ul>
    <li class="slider">1</li>
    <li class="slider">2</li>
    <li class="slider">3</li>
    <li class="slider">4</li>
    <li class="slider">5</li>
  </ul>
//eq() 方法将匹配元素集缩减值指定 index 上的一个
//使用.eq()方法，里面放变量或者是数字都可以
$('.slider').eq(0);//选取类为slider的第一个元素
let index = 1;
$('.slider').eq(index);
//:eq()里面只能是变量，不能写:eq(index),他会把index认为是一个字符串 
  $(".slider:eq(" + index + ")")；

4、判断一个div是否为空，是否含有其他元素children()

//判断元素的子元素长度是否为0 $('#id').children().length === 0
 <div id="list"></div>
 if( $('#list').children().length === 0 ){
     $('#list').hide();
 }else {
     $('#list').show();
}

5、展示遍历列表数据

<div id="list"></div>
 data.forEach((item,index)=> {
   let html = '<div οnclick="toLink(\'' + item.link + '\')">'+
   '<img src="'item.src'" />'+
   '<span class="name">'+ item.name +'</span>'+
   '</div>'
   $('#list').append(html);
 })

6、获取链接后面的参数方法

//获取地址栏的参数
function getParams(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){
                   return pair[1];
                }
       }
       return '';
}
//用法：
let id = getParams('id');

7、ajax请求

//ajax默认的ContentType的值为:application/x-www-form-urlencoded; 
//application/json和application/x-www-form-urlencoded两者主要是在传参上面有区别，写的时候要注意一下
1、ContentType的值为:application/x-www-form-urlencoded;时
  $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: '/jf/security/loginUserBase',
            traditional: true,
            data: {},
            success: function (res) {
            },
            error:function(error){
            },
       });
2、ContentType的值为:application/json;时
   $.ajax({
            type: "POST",
            dataType: 'JSON',
            url: "/jf/querybenefitsnosession/queryBenefits",
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({
            }),
            success: function (res) {
            },
             error:function(error){
            },
       });
            
            
 

8、页面跳转

//js直接跳转
(1)、window.location.href = '跳转链接';
(2)、window.navigate("页面链接");
//js定时跳转
(3)、setTimeout("javascript:location.href='跳转链接'", 2000);
//返回上一级
(4)、window.history.go(-1);
(5)、window.history.back();