今天在做一个拖拽的demo时候遇到了一个bug,我的代码和源码一模一样，但是却没有效果，经过数小时琢磨发现，是jquery初始化的问题；现在贴上我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
height: 400px;
width: 500px;
background: red;
position: relative;
left: 50%;
top:100px;
margin-left: -250px;
}
h3{
padding-top: 15px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
ul{
width: 400px;
left: 50%;
margin-left: -200px;
position:absolute;
margin-top: 10px;
list-style: none;
border-right:2px dotted green;
border-left:2px dotted green;
}
ul li{
line-height: 40px;
border-top:2px dotted green;
font-size: 24px;
text-align: center;
}
ul li:last-child{
border-bottom:2px dotted green;
}
ul li:first-child{
color: yellow;
}
</style>
<script src="bootstrap/js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="wrap">
<h3>使用拖拽更改支付宝的默认付款样式</h3>
<ul id="card">
<li draggable="true">招商信用卡</li>
<li draggable="true">交通信用卡</li>
<li draggable="true">中信信用卡</li>
<li draggable="true">建行储蓄卡</li>
<li draggable="true">蚂蚁花呗</li>
<li draggable="true">余额宝</li>
<li draggable="true">余额</li>
</ul>
</div>
<script type="text/javascript">
(function(){
var dragSrc;
$("li").each(function(index,ele){
ele.ondragstart=function(e){
dragSrc=this;
e.dataTransfer.setData('text/html', this.innerHTML);
}
ele.ondragover = function(e){
e.preventDefault();
}
ele.ondrop = function(e){
if(dragSrc!=this){
dragSrc.innerHTML=this.innerHTML;
this.innerHTML=e.dataTransfer.getData("text/html");
}
}
});
});
</script>
</body>
</html>下面是源码的Jquery部分：
<script>
(function($) {
var dragSrc;
$('li').each(function(index, ele) {
ele.ondragstart = function(e) {
dragSrc = this;
e.dataTransfer.setData('text/html', this.innerHTML);
}
ele.ondragover = function(e) {
e.preventDefault();
}
ele.ondrop = function(e) {
if (dragSrc!= this) {
dragSrc.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
}
});
})(jQuery);
</script>对比发现，我和源码最大的区别就是Jquery部分，源码最后有一个“(jQuery)"，于是我在我的代码出加上这个“(jQuery)"，bug解决，于是找到了问题的根源——我对js/jquery页面初始化的概念以及方法非常模糊；下面从html加载顺序首先讲一讲为什么需要初始化：
这是无初始化情况下html的加载顺序（p.s.转载自博客园--id风雨前行）
1,用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2,浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
3,浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4,浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5,浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6,服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7,浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
8,Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9,终于等到了＜/html＞的到来，浏览器泪流满面……
10,等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
11,浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
初始化意思是指在html加载完之后才载入js/jquery，避免出现上述情况；
那么js和jquery的初始化方法有哪些？又有何区别？
一.js 页面加载初始化方法
// 1.在body里面写初始化方法.
<body onload='init()'>
</body>
<script type="text/javascript">
function init(){
// 初始化内容
}
</script>
// 2.window.onload=function(){}
<script type="text/javascript">
window.onload=function(){
// 初始化内容
}
</script> // 3.写初始化方法,页面顺序执行到初始化方法时初始化
<script type="text/javascript">
function init() {
// 初始化内容
};
init();
</script>二.jquery 页面加载初始化方法
// 1.$(function(){})
<script type="text/javascript">
$(function() {// 初始化内容
});
</script>// 2.$(document).ready(function(){})
<script type="text/javascript">
$(document).ready(function(){
// 初始化内容
});
</script>
// ready()函数有以下三种等价的形式
function handler(){
//这里是需要执行的代码
}
// 形式一
$(document).ready( handler );
// 形式二
$( ).ready( handler ); // 不推荐该形式
// 形式三
$( handler );// 3.jQuery(function($){})
<script type="text/javascript">
jQuery(function($){
// 初始化内容
});
</script>p.s.这里很明显可以看出来源码中使用的是第三种jquery的初始化方法，不过源码是将"(jQuery)"写在函数末尾，上面方法中是写在函数开头，亲测两种方法都可以，但是要注意这里"(jQuery)"是严格区分大小写的；
最后谈一下js和jquery在初始化方面的区别：
jquery：等待页面加载完数据，以及页面部分元素（不包括图片、数据），
js：是页面全部加载完成才执行初始化加载。