s12-20160421-day14
pytho自动化开发 day14
Date:2016.04.21
@南非波波
课程大纲：
http://www.cnblogs.com/wupeiqi/articles/5369773.html
http://www.php100.com/manual/jquery/
JQuery
1.查找
选择器
$('#nid') 根据id找到某个标签
$('.nid') 根据class查找
$('.nid div #nid') 根据class查找下面的div标签下面的id
$('.nid,div,#nid') 查找到class或div或id条件的查找到
$('li:eq(0)') 查到到第一个li标签行
筛选器
$('li').eq(0) 查到到第一个li标签行
2.操作
属性
添加指定属性，并删除兄弟的属性
$(ths).addClass('current').siblings().removeClass('current');
attr：
其他所有标签都适用，除checkbox、redio之外
prop：
checkbox、redio
jQuery循环：
var userList = ['swht','shen','test'];
$.each(userList,fun(i,item){
console.log(i,item);
})
CSS
文档处理
增加
append(content|fn)
在指定的标签内部后面追加
appendTo(content)
把指定的某个标签追加某个标签内部后面
prepend(content|fn)
在指定的标签内部前面追加
prependTo(content)
把指定的某个标签追加某个标签内部前面
包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
删除
empty()
remove([expr])
detach([expr])
复制
clone([Even[,deepEven]])
事件
绑定事件：
1. 直接绑定ready(fn) 文本加载完之后执行事件绑定
1. $(document).ready(function(){
})
2. $(function(){
})
2. 委派delegate(s,[t],[d],fn)
1. $('ul').delegate('li','click',function(){
})
3. bind(type,[data],fn)
1. $('li').click(function(){
})
2. $('li').bind('click')
3. unbind
AJAX
异步的javascript和xml
ajax是对javascript和Dom的封装。
ajax容易出现跨域的问题。
$.ajax({
url:"",
data:{},
type:"",
dateType:"",
jsonp:"",
jsonpCallback:"",
sucess:function(){},
error:function(){}
})
JQuery扩展
(function(arg){
arg.extend({
qinghua: function() {
return "SB";
},
qinghua1: function() {
return this.each(function() { this.checked = false; });
}
});
arg.fn.extend({
sanjiang:function(){
return "DSB"
}
});
})(jQuery);
其他
30款最好的 Bootstrap 3.0 免费主题和模板 http://www.cnblogs.com/lhb25/p/30-free-bootstrap-templates.html
例子：
tab菜单<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
.tab-box .box-menu{
background-color: #DDDDDD;
border: 1px solid #DDDDDD;
height: 33px;
line-height: 33px;
}
.box-menu a{
border-right: 1px solid #664747;
padding: 10px;
background-color: #425a66;;
}
.tab-box .box-body{
border: 1px solid #dddddd;
}
.hide{
display: none;
}
.current{
background-color: white;
color: black;
border-top: 2px solid red;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--所有菜单-->
<a menu1="c1" onclick="ChangeTab(this);" class="current">菜单一</a>
<a menu1="c2" onclick="ChangeTab(this);">菜单二</a>
<a menu1="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--所有内容-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function ChangeTab(ths){
$(ths).addClass('current').siblings().removeClass('current');
var contentId = $(ths).attr('menu1');
var temp = "#" + contentId;
$(temp).removeClass('hide').siblings().addClass('hide');
}
</script>
</body>
</html>
全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、反选、取消</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="selectAll();" />
<input type="button" value="反选" onclick="selectInvert();" />
<input type="button" value="取消" onclick="clearAll();" />
</div>
<div>
<table border="1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
第一章
</td>
<td>
第一篇
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
第二章
</td>
<td>
第一篇
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
第三章
</td>
<td>
第一篇
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
第四章
</td>
<td>
第一篇
</td>
</tr>
</table>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function selectAll(){
$("table input[type='checkbox']").prop('checked',true);
}
function selectInvert(){
$("table input[type='checkbox']").each(function(){
var isChecked = $(this).prop('checked');
if(isChecked){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
function clearAll(){
$("table input[type='checkbox']").prop('checked',false);
}
</script>
</body>
</html>
ajax_jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax_jsonp</title>
</head>
<body>
<input type="button" value="获取电视节目" onclick="Ajax_jsonp();"/>
<dev id="contaner">
</dev>
<script src="jquery-2.2.3.js"></script>
<script>
function Ajax_jsonp(){
$.ajax({
url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
data:{},
type:"GET",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"list",
success:function(arg){
console.log(arg);
var jsonArray = arg.data;
$.each(jsonArray,function(k,v){
var week = v.week;
var label = "<h1>" + week + "</h1>";
$("#contaner").append(label);
var listArray = v.list;
$.each(listArray,function(kk,vv){
var link = vv.link;
var name = vv.name;
var time = vv.time;
var labelNew = "<a href='" + link + "'>" + time+name + "</a><br/>";
$("#contaner").append(labelNew);
})
})
},
error:function(arg){
console.log(arg);
}
})
}
</script>
</body>
</html>