pythonajax学习_python开发学习-day14(jquery、ajax等)

s12-20160421-day14

pytho自动化开发 day14

Date:2016.04.21

@南非波波

课程大纲：

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

其他

例子：

tab菜单

tab

.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;

}

菜单一

菜单二

菜单三

内容一

内容二

内容三

function ChangeTab(ths){

$(ths).addClass('current').siblings().removeClass('current');

var contentId = $(ths).attr('menu1');

var temp = "#" + contentId;

$(temp).removeClass('hide').siblings().addClass('hide');

}

全选、反选、取消

全选、反选、取消

	第一章	第一篇
	第二章	第一篇
	第三章	第一篇
	第四章	第一篇

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

}

ajax_jsonp

ajax_jsonp

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 = "

" + week + "

";

$("#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 = "" + time+name + "
";

$("#contaner").append(labelNew);

})

})

},

error:function(arg){

console.log(arg);

}

})

}