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)");

);
)

参考技术A window.onload = 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;
;
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写法?的主要内容,如果未能解决你的问题,请参考以下文章

ajax原生写法和jQuery写法

jQuery学习手册

$(function(){}) 的原生写法

常用原生JS兼容写法

原生js添加节点的高级简便写法

原生js面向对象写法