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