提示:如有疑问可以加QQ: 2564034335 , 或者 QQ 群: 891416757
该文章或问题已被删除

忘掉jQuery 习惯写些原生JS 代码开发APP

开发APP,特别是HTML5+混合APP,它是采用的是APP原生自带的浏览器,并不像UC或QQ浏览器,有什么加速体验,渲染页面效果好点,原生APP自带的浏览器相对性能差一些,所以为了让应用获得更好的体验效果,尽量避免使用一些占资源的第三方JS框架,包括MUI 移动框架mui.js插件也是使用原用JS 写的,如果你的页面除非有某些功能实在没办法,要使用 jQuery 才能实现,这时可以考虑使用,其他简单的操作,如获得某个对象的值或属性,完全可以使用原生JS 实现,以下分享一些常用原生JS 替换JQuery 的一些方法smile。 


 1.获得对象

  JQuery 的写法 

var div=$("div");

 原生JS 写法

var div=document.querySelector("div") //获得第一个DIV 对象
var div=document.querySelectorAll("div") //获得所有DIV对象


2.获得html 和text 内容 和 设置 html 和text 内容

JQuery 的写法

//获得内容
var html=$("div").html();
var text=$("div").text();
//设置内容
$("div").html('你好');
$("div").text('你好');
    

 原生JS 写法

 //获得内容
 var html=document.querySelector("div").innerHTML;
 var txt=document.querySelector("div").innerText;
 //设置内容
 document.querySelector("div").innerHTML='你好';
 document.querySelector("div").innerText='你好';


3.获得文本框值 和 设置文本框值

 JQuery 的写法 

//获得值
var txt=$("#input").val();
//设置值
$("#input").val("大家好");

原生JS 写法

//获得值
var txt=document.querySelector("#input").value;
//设置值
document.querySelector("#input").value="你好";


4. 获得属性值 和 设置属性值

JQuery 的写法 

 例如:<div class=".divtxt" data-id="123"></div>

  //获得属性值
  var id=$(".divtxt").attr("data-id");
  //设置属性值
  $(".divtxt").attr("data-id","123456");

 原生JS 写法  

 例如:<div class=".divtxt" data-id="123"></div>
 //获得属性值
 var id=document.querySelector().getAttribute("data-id");
 //设置属性值
 document.querySelector().setActive("data-id","123456");


 5. 获得样式CSS 和 设置CSS样式

 JQuery 的写法

 例如:<div class=".txtdiv" style="height: 15px;"></div>
 
//获得样式高度
 var height=$(".txtdiv").css("height");
//设置样式高度
 $(".txtdiv").css("height","20px;");

原生JS 写法

 例如:<div class=".txtdiv" style="height: 15px;"></div>

 //获得样式高度
 var height=document.querySelector(".txtdiv").style.height
 //设置样式高度
 document.querySelector(".txtdiv").style.height="20px";


6. 插入内容

JQuery 的写法

 例如:<div class=".txtdiv"></div>
  
   1.在被选元素的结尾插入内容
  $(".txtdiv").append('<span>你好</span>');
   
   2.在被选元素的开头插入内容
  $(".txtdiv").prepend('<span>你好</span>');
   
  3.在被选元素之后插入内容
  $(".txtdiv").after('<span>你好</span>');
   
  4.在被选元素之前插入内容
  $(".txtdiv").before('<span>你好</span>');

原生JS 写法

  例如:<div class=".txtdiv"></div>
  
   1.在被选元素的结尾插入内容
   document.querySelector(".txtdiv").insertAdjacentHTML("beforeend","<span>你好</span>");
   
   2.在被选元素的开头插入内容
   document.querySelector(".txtdiv").insertAdjacentHTML("afterbegin","<span>你好</span>");
   
   3.在被选元素之后插入内容
   document.querySelector(".txtdiv").insertAdjacentHTML("afterend","<span>你好</span>");
   
   4.在被选元素之前插入内容
   document.querySelector(".txtdiv").insertAdjacentHTML("beforebegin","<span>你好</span>");
   

   


7.创建元素 ,并把元素添加到指定的其他元素里

JQuery 的写法

例如创建一个DIV 标签

var div=$('<div class=".txt">你好</div>');
    $(".txtdiv").append(div);  //把DIV,添加到.txtdiv 的元素内容里
    

原生JS 写法

var div=document.createElement('div');
    div.className="txt";
    div.innerHTML="你好";
  
document.querySelector(".txtdiv").appendChild(div);//把DIV,添加到.txtdiv 的元素内容里


8.移除某个元素

JQuery 的写法

$(".txt").remove();

原生JS 写法

document.querySelector(".txt").remove();


9. 循环遍历元素,  遍历数据,遍历JSON 

JQuery 的写法

 //遍历元素
 var div=$("div"); //遍历所有DIV元素,并把它的HTML内容打印出来
 $.each(div,function(index, el) 
 {
      console.log('序号:'+index);
      console.log('html:'+$(el).html());
 });

 //遍历数组
 var data=["one","two","three"];
 $.each(data,function(index, el) 
 {
      console.log('序号:'+index);
      console.log('值:'+el);
 });

 //遍历JSON
 var data={"one":"01","two":"02","three":"03"};
 $.each(data,function(index, el) 
 {
      console.log('键:'+index);
      console.log('值:'+el);
 });

 原生JS 写法

    //遍历元素
 var div=document.querySelectorAll('div'); //遍历所有DIV元素,并把它的HTML内容打印出来
    for(var i=0;i<div.length;i++)
    {
          console.log('序号:'+i);
          console.log('html:'+div[i].innerHTML);
    }

   //遍历数组
 var data=["one","two","three"];   
    for(var i=0;i<data.length;i++)
    {
          console.log('序号:'+i);
          console.log('值:'+data[i]);
    }

 //遍历JSON
 var data={"one":"01","two":"02","three":"03"};
     for (var key in data) 
     {     
        console.log('键:'+key);
        console.log('值:'+data[key]);
     }

 MUI 移动框架的mui.js 封装了一个和JQuery一样的循环方法,如果用于MUI框架可以使用它

 mui.each(), 它跟jquery的 $.each 使用方法是一样的

 

10. ajax 获得数据

 JQuery 的写法

               $.ajax("http://app.html5-app.com/json.php",{
    			data:{"username":"不屑一顾"},
    			dataType:'json',//服务器返回json格式数据
    			type:'get',//HTTP请求类型
    			timeout:10000,//超时时间设置为10秒;
    			success:function(data)
    			{
    			   console.log(JSON.stringify(data));  //打印返回的JSON数据
    			     			},
    			error:function(xhr,type,errorThrown)
    			{
    			   console.log(JSON.stringify(xhr));  //出错时打印错误信息
    			}
    		});

原生JS 写法

js 原生的Ajax ,分两部分写一个是get 和 post 两种方法

1.GET 的方法,网址传参数传值
var url="http://app.html5-app.com/json.php?id=123&name=MUI";
var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) 
      { 
        // 从服务器获得数据 
         var data=xhr.responseText;
      }
    };
    xhr.send();

2.POST 的方法传参数传值

var url="http://app.html5-app.com/json.php";
var data={"id":"123","name":"MUI"};
var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        // 从服务器获得数据 
         var data=xhr.responseText;
      }
    };
    xhr.send(data); //传值并提交

 MUI 移动框架的mui.js 封装了一个和JQuery一样的ajax方法,如果用于MUI框架可以使用它,

 MUI Ajax的写法和JQuery一样, 大家可以使它来获取数据

              mui.ajax("http://app.html5-app.com/json.php",{
    			data:{"username":"不屑一顾"},
    			dataType:'json',//服务器返回json格式数据
    			type:'get',//HTTP请求类型
    			timeout:10000,//超时时间设置为10秒;
    			success:function(data)
    			{
    			   console.log(JSON.stringify(data));  //打印返回的JSON数据
    			     			},
    			error:function(xhr,type,errorThrown)
    			{
    			   console.log(JSON.stringify(xhr));  //出错时打印错误信息
    			}
    		});

 

11. 点击事件 , 移动端我们使用 tap 代替 click 点击事件, 因为click 点击有延迟

  JQuery 的写法

   $(".txt").click(function(event) 
   {
   /* Act on the event */
   });
   
   或绑定点击事件
   $("body").on("tap",".txt",function()
   {
   

   });
   

原生JS 写法

 var btu=document.querySelector(".txt");

     btu.addEventListener("tap",function()
     {
		
		
     },false);

MUI 移动框架的写法跟JQ一样

  为类.txt 绑定一个点击事件
  mui("body").on("tap",".txt",function()
   {
   

   });
点赞 0      收藏 0

0 个评论

正在加载...

这里空空如也,快来补一刀!

加载更多

回答问题或评论文章请先 或者 注册