Python之路【第二十篇】：jQuery
jQuery
python中称为模块，其他语言称为类库，DOM/BOM\JavaScript的集合
对于jQuery，很多大公司在使用时，不完全用到，需要封装一部分想要的功能以节省流量
或者用dom，因为效果出来前要加载好jQuery文件，这涉及到流量。
概要：
查找元素（DOM不能查找自定义属性，所有标签）
选择器
筛选
操作元素
引入：<script src=''></script>
<<script>
jQuery. #引用封装的方法
$. #等于jQuery
</script>
一、选择器
$('') #获取的
document.getElementById
转换：
$('')[0] = DOM对象
$(DOM对象) = $('')
1. id：
$('#')
2. class：
$('.')
3. 标签：
$('')
4. 所有
*
5.组合
$('a,.c1,#i2')
6.层级
$('a .c1 #i2') #查找所有子孙，不单限于直系
$('a>.c1') #只找儿子
7.基本筛选
:first
:last
:eq(index) #等于，取第i个值
8.属性
$('[alex]')
$('[alex="xxx"]')
9.表单
<input type="text" />
$(':text') 还有submit
等同于$('input[type="text"]')
还有$(':checkbox')等
示例：全选反选
function checkAll() {
$('#tb :checkbox').prop('checked',true); #多个结果，jQuery自动循环进行prop
}
function cancelAll() {
$('#tb :checkbox').prop('checked',false); #prop取checkbox的checked属性
}
function reverseAll() {
$('#tb :checkbox').each(function () { #each循环每一个，function传参时传下标
if(this.checked){
this.checked = false #this代指DOM对象，故此为DOM方法
}else{
this.checked = true
}
})
}
方法二：jQuery获取
if($(this).prop('checked')){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
方法三：三元运算 条件？真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v)
示例：左侧菜单
功能：找到标签，添加移除class
$('.header').click(function () { #为每一个对象绑定事件
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
两句能缩为一句，链式编程，即removeClass后.xxxx，这是因为removeClass返回一个jQuery对象
二、筛选器
形式：选择器.xxx() 括号内可以加选择器，可以嵌套筛选
$(this).next() #下一个 .nextAll() .nextUntil('#i1')
$(this).prev() #上一个 .prevAll() .prevUntil('#i1')
$(this).parent() #父标签 .parents() .parentsUntil()
$(this).children() #所有子标签
$(this).siblings() #所有兄弟标签，不包含自己
$(this).find() #查找
.first() .last() .hasClass()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<style>
a {
color: #428bca;
text-decoration: none;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: #white;
opacity: 0.8;
}
.modal {
position: fixed;
top: 30%;
left: 50%;
z-index: 1030;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div>
<input type="button" onclick="fadeIn();" value="加载条"/>
</div>
<div id="shade" class="modal-backdrop hide">
<div class="modal">
<img src="./images/loading_32.gif"/>
</div>
</div>
<script >
function fadeIn() {
document.getElementById('shade').className = 'modal-backdrop';
}
function fadeOut() {
document.getElementById('shade').className = 'modal-backdrop hide';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript" src='jquery-1.8.2.js'></script>
<style>
.hide{
display: none;
}
.container{
width:300px;
height: 600px;
background-color: #ddd;
border: 1px solid #999;
}
.container .title{
height: 38px;
font-size: 28px;
line-height: 38px;
background-color: orange;
cursor: pointer;
}
.container .body{
background-color:white;
}
.container .body a{
display:block;
padding: 10px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<div class='title'>Menu1</div>
<div class='body'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.title').click(function(){
$(this).parent().siblings().children('.body').addClass('hide');
$(this).next().removeClass('hide');
});
});
</script>
</body>
</html>
/*公共开始*/ body { margin: 0 auto; font-family: Arial; _font-family: 宋体,Arial; font-size: 12px; } body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div { margin: 0; padding: 0; } ol, ul, li { list-style: none; } a{ cursor:pointer; text-decoration:none; } /*a:hover{ color: #F60 !important; text-decoration: underline; }*/ img{ border:none; border-width:0px; } table{ border-collapse: collapse; border-spacing: 0; } .red{ color: #c00!important; } .m8{ margin:8px; } .mt10{ margin-top:10px; } .mt20{ margin-top:20px; } .mr5{ margin-right:5px; } .ml5{ margin-left:5px; } .ml10{ margin-left:10px; } .mb10{ margin-bottom:10px; } .pt18{ padding-top:18px; } .pt20{ padding-top:20px; } .pb20{ padding-bottom:20px; } .nbr{ border-right:0px; } .font12{ font-size:12px; } .font14{ font-size:14px; } .font16{ font-size:16px; } .bold{ font-weight:bold; } .left{ float:left; } .right{ float:right; } .hide{ display:none; } .show{ display:table; } .clearfix{ clear:both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix {zoom: 1;} .container{ width:1190px; margin-left:auto; margin-right:auto; } .group-box-1 .title{ height: 33px; line-height: 33px; border: 1px solid #DDD; background: #f5f5f5; padding-top: 0; padding-left: 0; } .group-box-1 .title .title-font{ display: inline-block; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; font-weight: bold; color: #333; padding-left: 10px; } .group-box-1 .body { border: 1px solid #e4e4e4; border-top: none; } .tab-menu-box1 { border: 1px solid #ddd; margin-bottom: 20px; } .tab-menu-box1 .menu { line-height: 33px; height: 33px; background-color: #f5f5f5; } .tab-menu-box1 .content { min-height: 100px; border-top: 1px solid #ddd; background-color: white; } .tab-menu-box1 .menu ul { padding: 0; margin: 0; list-style: none; /*position: absolute;*/ } .tab-menu-box1 .menu ul li { position: relative; float: left; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; text-align: center; font-size: 14px; font-weight: bold; border-right: 1px solid #ddd; padding: 0 18px; cursor: pointer; } .tab-menu-box1 .menu ul li:hover { color: #c9033b; } .tab-menu-box1 .menu .more { float: right; font-size: 12px; padding-right: 10px; font-family: "宋体"; color: #666; text-decoration: none; } .tab-menu-box1 .menu a:hover { color: #f60 !important; text-decoration: underline; } .tab-menu-box1 .menu .current { margin-top: -1px; color: #c9033b; background: #fff; height: 33px; border-top: 2px solid #c9033b; z-index: 10; } .tab-menu-box-2 .float-title { display: none; top: 0px; position: fixed; z-index: 50; } .tab-menu-box-2 .title { width: 890px; border-bottom: 2px solid #b20101; border-left: 1px solid #e1e1e1; clear: both; height: 32px; } .tab-menu-box-2 .title a { float: left; width: 107px; height: 31px; line-height: 31px; font-size: 14px; font-weight: bold; text-align: center; border-top: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; background: url(/Content/images/bg4.png?3) 0 -308px repeat-x; text-decoration: none; color: #333; cursor: pointer; } .tab-menu-box-2 .title a:hover { background-position: -26px -271px; text-decoration: none; color: #fff; } .tab-menu-box-2 .content { min-height: 100px; background-color: white; } .tab-menu-box3 { border: 1px solid #ddd; } .tab-menu-box3 .menu { line-height: 33px; height: 33px; background-color: #f5f5f5; } .tab-menu-box3 .content { height: 214px; border-top: 1px solid #ddd; background-color: white; } .tab-menu-box3 .menu ul { padding: 0; margin: 0; list-style: none; /*position: absolute;*/ } .tab-menu-box3 .menu ul li { position: relative; float: left; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; text-align: center; font-size: 14px; width:50%; cursor: pointer; } .tab-menu-box3 .menu ul li:hover { color: #c9033b; } .tab-menu-box3 .menu .more { float: right; font-size: 12px; padding-right: 10px; font-family: "宋体"; color: #666; text-decoration: none; } .tab-menu-box3 .menu a:hover { color: #f60 !important; text-decoration: underline; font-weight: bold; } .tab-menu-box3 .menu .current { margin-top: -1px; color: #c9033b; background: #fff; height: 33px; border-top: 2px solid #c9033b; z-index: 10; font-weight: bold; } /*公共结束*/
<!DOCTYPE html> <html> <head></head> <link href="common.css" rel="stylesheet" /> <body> <div class='container'> <div class='tab-menu-box1'> <div class='menu'> <ul id='tab-menu-title'> <li class='current' content-to='1'>价格趋势</li> <li content-to='2'>市场分布</li> <li content-to='3'>其他</li> </ul> </div> <div id='tab-menu-body' class='content'> <div content='1'>content1</div> <div content='2' class='hide'>content2</div> <div content='3' class='hide'>content3</div> </div> </div> </div> <script src="./jquery-1.8.2.js"></script> <script type='text/javascript'> $(function(){ ChangeTab('#tab-menu-title', '#tab-menu-body'); }) function ChangeTab(title, body) { $(title).children().bind("click", function () { $menu = $(this); $content = $(body).find('div[content="' + $(this).attr("content-to") + '"]'); $menu.addClass('current').siblings().removeClass('current'); $content.removeClass('hide').siblings().addClass('hide'); }); } </script> </body> </html>
三、操作
文本操作
$().text() #获取文本内容
$().text('') #赋值
$().html() #获取标签代码
$().html(‘xxx’) #赋值标签代码
$().val() #对比DOM的value，获取表单文本，input、select、textarea
$().val(‘’)
示例：模态对话框 添加编辑
$('.edit').click(function () {
$('.model,.shadow').removeClass('hide');
var tds = $(this).parent().prevAll(); #找到所有的父标签的前面标签
var port = $(tds[0]).text(); #注意tds为jQuery对象，[0]变为DOM，要再转
var host = $(tds[1]).text();
$('.model input[name="hostname"]').val(host); #找到输入框并赋值
$('.model input[name="port"]').val(port);
})
样式操作：
.addClass('')
.removeClass('')
.toggleClass('') #没有则添加，有则移除
属性操作：
$().attr('') #获取指定属性值
$().attr('','') #设置自定义属性值
$().removeAttr('')
专门用于checkbox，radio这种选中的操作，用attr一开始可以选中，取消后再也选不中
$().prop('checked') #选中则返回true，否则为false
$().prop('checked',true)
示例：编辑模态框获取值
var tds = $(this).parent().prevAll();
tds.each(function () { #循环
var n = $(this).attr('target'); #获取属性值
var text = $(this).text();
$('.model input[name="'+ n + '"]').val(text); #需要注意的是n为变量，选择器中要加
字符串，进行并接即可
})
示例：Tab菜单切换
$('.menu-item').click(function () {
var n = $(this).attr('a');
$(this).addClass('active').siblings().removeClass('active'); #添加、移除class
$('.content [b="'+ n +'"]').removeClass('hide').siblings().addClass('hide');
})
示例：Tab菜单切换改进-通过index获取索引
$(this).addClass('active').siblings().removeClass('active');
var v = $(this).index();
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
标签处理：
添加：
$().append() #括号内可以是字符串并接或者标签元素document.createElement
$().prepend() #标签内
$().before() #同级标签
$().after()
删除：
$().eq(index).remove() 删除第几个标签
$().eq(index).empty() 清空文本内容
复制：
$().clone() 复制标签
示例：
$('#b1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>"; #字符串并接,还有document.createElement方法
创建标签
$('#u1').append(temp);
})
$('#b2').click(function () {
var index = $('#t1').val();
$('#u1 li').eq(index).remove();
})
$('#b3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone();
$('#u1').append(v);
})
CSS处理：
$().css('color','red') 个别样式设置
点赞例子：
知识点：- $().append()
- $().remove()
- setInterval clearInterval
- opacity 1 -> 0
- position top right absolute
代码：
var tag=document.createElement('span'); #这种方法创建标签能用于jQuery设置样式
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('fontSize',fontSize + "px"); #以px为单位
$(tag).css('position','absolute');
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
$(self).append(tag); #添加标签
var obj = setInterval(function () {
fontSize = fontSize + 10; #变化
top = top - 10;
right = right - 10;
opacity = opacity -0.1;
$(tag).css('fontSize',fontSize + "px"); #重新赋值
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj); #关闭定时器
$(tag).remove(); #清除标签
}
},100);
位置
$().scrollTop() #获取,括号内加选择器即可，window表示的是窗口$(window).
$().scrollTop(0) #设置
$().scrollLeft()
$().offset() #指定标签在html中的坐标
$().offset().left #用于获取左上角坐标
$().offset().top
$().position() #标签相对于父标签(relative)的坐标，中间隔着其他标签无碍
尺寸：
$().height() #设定CSS中 'height' 的值
$().innerHeight() #内部区域高度（包括补白padding、不包括边框border）
$().outerHeight() #外部高度（默认包括补白padding和边框border），默认false
$().outerHeight(true)#设置为 true 时，计算边距margin在内
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; bottom: 0px; right: 0px; } .hide{ display: none; } </style> </head> <body> <div style="height: 2000px;"></div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-1.8.2.js"></script> <script type="text/javascript"> function GoTop(){ //返回顶部 $(window).scrollTop(0); } $(function(){ $(window).scroll(function(){ //当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度 var top = $(window).scrollTop(); if(top>100){ //展示“返回顶部” $('.back').removeClass('hide'); }else{ //隐藏“返回顶部” $('.back').addClass('hide'); } }); }); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script type="text/javascript" src='jquery-1.8.2.js'></script>
<script type="text/javascript">
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').prop('checked',true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').prop('checked',false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
$(this).prop('checked',!$(this).prop('checked'))
})
})
})
</script>
</head>
<body>
<div id='checklist'>
<input type='checkbox' value='1'/>篮球
<input type='checkbox' value='2'/>足球
<input type='checkbox' value='3'/>羽毛球
</div>
<input type='button' value='全选' id='selectAll' />
<input type='button' value='不选' id='unselectAll' />
<input type='button' value='反选' id='reverseAll' />
</body>
</html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ Init(); }); function Init(){ $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').removeClass('fixed'); } $('.content').children().each(function(){ var offSet = $(this).offset(); var offTop = offSet.top - scrollTop; var height = $(this).height(); if(offTop<=0 && offTop> -height){ //去除其他 //添加自己 var docHeight = $(document).height(); var winHeight = $(window).height(); if(docHeight == winHeight+scrollTop) { $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); }else{ var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); } } }); }); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div> <div> <div class="chapter" style="height: 500px;"> <h1>第一张</h1> </div> <div class="chapter" style="height: 1500px;"> <h1>第二张</h1> </div> <div class="chapter" style="height: 30px;"> <h1>第三张</h1> </div> </div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var scroll_top = $(window).scrollTop(); var list = []; $.each($('.chapter'), function(i){ var current_height = $($('.chapter')[i]).offset().top; list.push(current_height); }); $.each(list,function(i){ if (scroll_top+$(window).height() == $(document).height()){ $('#currentPosition').text($('.chapter').last().text()); return } if (scroll_top>list[i]){ $('#currentPosition').text($($('.chapter')[i]).text()); return } }) }) }); </script> </body> </html>
四、事件
事件绑定：
DOM：三种绑定方式 ——标签内onclick
document.getElementById().onclick
document.getElementById().addEventListener
jQuery:
与DOM对比，开头没有on
$().click()
$().bind('click',function(){}) 通过该方式绑定的只能该方式解绑
$().unbind('click',function(){})
$().delegate('a','click',function(){}) 委托，一开始没绑定，点击的时候才绑定a且执行
$().undelegate('a','click',function(){}) 其他三种都是一开始绑定好了，添加标签a后没绑定
$().on('click',function(){}) 上面三种方式原理都是调用的on
$().off('click',function(){}) 这个也能委托，$('上级标签').on('click','a',function(){})
点击上级标签时，给所有的a标签绑定事件
事件委托delegate和on实现效果一样，只是参数位置不同，版本1、2中有delegate
阻止事件发生：
默认a标签点击跳转，绑定onclick后，先执行onclick
分两种：默认先执行 checkbox
绑定先执行 a submit
DOM绑定时：
<a onclick="return clickOn();" href="http://www.baidu.com">zou ni</a> #要return
<script>
function clickOn() {
alert(123);
return false; #true时跳转
}
</script>
jQuery绑定时：
函数内return false即可
示例：表单验证
$(':submit').click(function () {
$('.error').remove(); #提交前先清空上次验证的错误信息
var flag = true; #只要为空，flag为false不跳转
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if (v.length <= 0){
var tag = document.createElement('span');
tag.innerHTML = '必填';
tag.className = 'error';
$(this).after(tag);
flag = false;
//return false; #这里的return是跳出循环，不能返回给函数，相当于break
}
});
return flag; #返回flag，决定能不能跳转
});
事件自动执行
$(function(){ }) #页面框架加载完自动执行，可以避免加载图片慢导致事件绑定慢的问题
$().click(function(){}) #页面所有内容加载完才执行
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
五、jQuery扩展
方式一：
$.extend({
'wangsen':function () {return 'gg';}
})
$.wangsen();
方式二：
$.fn.extend({
'hangyang':function () {return 'db';}
});
$('#i1').hangyang();
可以写好js文件，然后引入即可使用。也可在网上找。自定义的扩展可能会重复名字，没办法避免
全局变量也可能重复，写一个自执行函数即可解决。
(function(arg){
var status = 1; #包裹在函数内，不再是全局变量，只能自己用
arg.extend({'':function(){}})
})(jQuery)
一引入后自动执行，即自动编译好以被引用。
六、组件
=============全能==========================
后台管理的功能需要组合才能形成一个好的前端，可以网上搜组合好的模板，自己开发修改细节。
①BootStrap
-CSS样式
-JS
学习BootStrap规则
1.响应式
指针对屏幕大小切换，html样式随之变化
<style>
@meida(min-width:700px){
.c2{
}
}
</style>
2.图标、字体
原理：内部是表格，表格的不同位置画好图标，位置由unicode代码表示，使用时
复制图标对应的代码<span class="glyphicon-class">glyphicon glyphicon-euro</span>
@font-face
3.基本使用
对于css文件，link引入
<link href=".../css/bootstrap.min.css" rel="stylesheet">
对于js文件，script的src引入
<script src="...jquery/1.11.1/jquery.min.js"></script>
复制插件代码
如果要修改插件效果，前后css样式混淆，在样式内{}加上!important
============偏后台管理========================
②jQueryUI 推荐指数*，功能不美，需修改很多
-CSS
-JS
学习jQueryUI规则
③EasyUI（代码前后端不完全一致，功能齐全）
-CSS
-JS
学习EasyUI规则：下载好JS文件，在文件中引入src，然后将demo中的html相应代码复制即可
========Ajax操作========
轮播插件：网上如bxslider
下载后引入css、js，复制script语句和引用script的标签代码
浙公网安备 33010602011771号