jquery写法转成原生js写法?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery写法转成原生js写法?相关的知识,希望对你有一定的参考价值。
$(function()
function tree(data)
var str = "<ul class=l_tree>";
for(var i=0;i<data.length;i++)
str+='<li class="l_tree_branch" ><span></span>'+data[i].name;
if(data[i].child)
str+=tree(data[i].child);
str+="</li>";
str += "</ul>";
return str;
;
$(".lists").html(tree(data));
$(".lists ul li").click(function(event)
event.stopPropagation();
if($(this).find("ul").is(":visible"))
$(this).find("ul").hide();
$(this).find("span").css("background-image","url(右箭头.png)");
else
$(this).find("ul").show();
$(this).find("span").css("background-image","url(下箭头.png)");
);
)
function tree(data)
var str = "<ul class=l_tree>";
for(var i=0;i<data.length;i++)
str+='<li class="l_tree_branch" ><span></span>'+data[i].name;
if(data[i].child)
str+=tree(data[i].child);
str+="</li>";
str += "</ul>";
return str;
;
document.querySelector(".lists").innerHTML = tree(data);
var a = document.querySelectorAll(".lists > ul > li");
for(var i=0;i< a.length; i++)
a[i].onclick = function(e)
e.stopPropagation();
console.log(e.target.innerText);
var thatcss = e.target.querySelector("ul").style.visibility;
if(thatcss == "hidden")
e.target.querySelector("ul").style.display = "none";
e.target.querySelector("span").style.background = url(右箭头.png);
else
e.target.querySelector("ul").style.display = "block";
e.target.querySelector("span").style.background = url(下箭头.png);
ajax原生写法和jQuery写法
一、原生js写ajax请求
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>json实例</title> 6 </head> 7 <body> 8 <input id="btn" value="json" type="button"> 9 <script type="text/javascript"> 10 window.onload = function(){ 11 var btn = document.getElementById(‘btn‘); 12 btn.onclick = function(){ 13 var xhr = null; 14 if(window.XMLHttpRequest){ 15 xhr = new XMLHttpRequest(); 16 }else{ 17 xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); 18 } 19 xhr.open("post","./jsondemo.php",true); 20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState == 4){ 23 if(xhr.status == 200){ 24 var data = xhr.responseText; 25 var obj = JSON.parse(data); 26 var obj1 = eval("("+data+")"); 27 console.log(obj.username); 28 console.log(obj.age); 29 console.log(obj1.username); 30 console.log(obj1.age); 31 32 }else{ 33 console.log(‘failure‘); 34 } 35 } 36 } 37 var param = ‘{"username":"zhangsan","age":"12"}‘; 38 xhr.send("user="+param); 39 } 40 } 41 </script> 42 </body> 43 </html>
二、jQuery方式写ajax请求
语法:
1 $.ajax({ 2 url: ‘XX.php‘, 3 type:‘post,‘ 4 data:{username:‘tom‘,password:‘2223‘}, 5 success: function (data){ 6 console.log(data); 7 }, 8 error: function (data){ 9 console.log(error); 10 } 11 })
以上除了URL设置外,其他的参数可选
1 <script type="text/javascript"> 2 $(function(){ 3 $("#btn").click(function(){ 4 $.ajax({ 5 type : "get", 6 url : ‘./05open.php?username=中国&password=123‘, 7 success : function(data){ 8 console.log(data); 9 } 10 }); 11 12 }); 13 }); 14 15 </script>
以上是关于jquery写法转成原生js写法?的主要内容,如果未能解决你的问题,请参考以下文章