Jquery专栏

jquery笔记总汇

2课:

jq的书写方法:

$(function(){

});

/////

例题:

$(function(){

$('input').click(function(){

alert('第一个jq弹窗时间');

});

});

第3课:

$是jquery对象和jQuery等价

选中元素的id,更改css

css内置方法设置行内css样式

//jQuery.noConflict();//将jQuery自行了断,不再起作用

//var xmp=jQuery;//xmp代替$,避免和其他js库冲突

$(function(){

$('#box').css('color','red');//通过css方法设置css

$("p").css({"font-size":"8px","background-color":"#8888888"});//设置多个css值

$('#box').css('color','red').css('font-size','24px');//可以连缀操作

$('#box').get(0).css('color','red');//获取DOM第一个节点对象

});

第四课:

常规选择器,根据id,class,name选择

根据标签获取

$(function(){

$('div').css('color','red');

$('#id').css('color','red');//id只允许出现一次,也只对一次有效

$('.class').css('color','red');

$('.class').size();//返回包含clss的字有几个

$('div').eq(0).css('color','red');

alert($('div').length);//返回div个数

$('#box > p').css('color','red');//id=box下的子节点有用,孙子节点无效

if($('.pox').size()>0){

$('.pox').css('color','red');//如果.pox存在则运行

}

if($('.pox').get(0)){

$('.pox').css('color','red');//如果.pox存在则运行

}

});


第五课:

常规选择器->进阶选择器

$(function(){

//群组选择器(同时选中多个元素)

$('div,p,span').css('color','red');

$("p").css({"font-size":"8px","background-color":"#8888888"});//设置多个css值

$('.box,#id,span).css('color','red');

//后代选择器(逐步选中元素的后代)

$('ul li a').css('color','red');

//通配选择器(*全局或局部全局选中)

$('*').css('color','red');

alert($('*').size());//会包括html,body

alert($('*')[0].nodeName);//获取选中的第一个dom标签名称

$('ul *').css('color','red');

$('div .box').css('color','red');

});


第六课:

高级选择器:

$(function(){

=============后代节点===========

//find后代选择器

$('#box').find('p').css('color','red');//find后代选择器的方法(子节点和孙子节点)

//children子选择器,相当于#box > p

$('#box').children('p').css('color','red');//只选中子代的p

===========上级节点=============

$('li').parent().css('color','red');//获取当前元素的父节点

$('li').parents().css('color','red');//获取当前元素的祖先节点

$('li').parentUntil('body').css('color','red');//遇到body父节点停止

===========同级节点=============

//next当前节点的后一个同级节点,相当于#box+p

$('#box').next('p').css('color','red');

//nextAll当前节点之后的所有同级节点,相当于#box~p

$('#box').nextAll('p').css('color','red');

//prev当前节点的上一个同级节点

$('#box').prev('p').css('color','red');

//prevAll当前节点的上面所有同级节点

$('#box').prevAll('p').css('color','red');

nextUntil()当前节点的下面同级非指定所有节点(不是p的元素选定,是p的则停止)

$('#box').nextUntil('p').css('color','red');

prevUntil()当前节点的上面同级非指定所有节点(不是p的元素选定,是p的则停止)

$('#box').prevUntil('p').css('color','red');

siblings()同级上下所有元素选定

$('#box').siblings('p').css('color','red');

});


第七课:

自定义属性选择

$(function(){

//[title=num1]选定自定义title

$('a[title]').css('color','red');

$('a[title=num1]').css('color','red');

//[title^=num]开头匹配

$('a[title^=num]').css('color','red');

//[title$=num]末尾匹配

$('a[title$=num]').css('color','red');

//[title|=num]开头匹配且末尾-,(num-1)

$('a[title|=num]').css('color','red');

//[title!=num]总不相等,不等于num的选定

$('a[title!=num]').css('color','red');

//[title*=num]包含选定

$('a[title*=num]').css('color','red');

//[a=aa][title=num1]多自定义属性选定

$('a[a=aa][title=num1]').css('color','red');

});


第八课:

基本过滤器(模仿css3的伪类)

$(function(){

//:first第一个元素被选中

$('li:first').css('color','red');

//:last最后一个元素被选中

$('li:last').css('color','red');

//:not(.red)只要不是.red则被选中

$('li:not(.red)').css('color','red');

//:even所有偶数被选中,第一个为0

$('li:even').css('color','red');

//:odd所有奇数被选中

$('li:odd').css('color','red');

//:eq(0)指定的第一个选中

$('li:eq(1)).css('color','red');

$('li:eq(-2)).css('color','red');//末尾第二个

//:gt(2)大于指定元素的所有被选中

$('li:gt(2)').css('color','red');

//:lt(2)小于指定元素的所有被选择

$('li:lt(3)').css('color','red');

//:focus选中当前被焦点的元素

$('input').get(0).focus();//设置第一个input为焦点

$(':focus').css('color','red');

其他方法:

$('li').eq(2).css('color','red');

$('li').first().css('color','red');

$('li').last().css('color','red');

$('li').not().css('color','red');

$('div').has('.red').css('color','red');

$('li').parent().css('color','red');//获取当前元素的父节点

$('li').parents().css('color','red');//获取当前元素的祖先节点

$('li').parentUntil('body').css('color','red');//遇到body父节点停止

内容过滤器:(对子元素或文本)

//:contains("")选中元素中的文本那个元素

$('div:contains("ycku.com")').css('color','red');

//:empty选中元素中没有子元素和文本的元素

$('div:empty').css('color','red');

//:has(.red)选取子元素中包含.red的元素

$('div:has(.red)').css('color','red');

//:parent选择含有子元素的元素

$('div:parent').css('color','red');

//:hidden获取所有隐藏元素

$('div:hidden').css('color','red').show(1000);//用1秒钟显示出来

//:visible获取所有显示的元素

$('div.visible').css('color','red');

alert($(this).closest('tr').html());//获取指定的父节点或祖父节点

});


///////12.2/////////


第九课:

过滤器

$(function(){

//:first-child获取每个父元素的第一个子元素

$('li:first-child').css('color','red');

//:last-child获取每个父元素的最后一个子元素

$('li:last-child').css('color','red');

//:only-child获取只有一个子元素的元素

$('li:only-child').css('color','red');

//:nth-child(even/odd/eq())获取每个自定义子元素的元素

$('li:nth-child(even)').css('color','red');

//is()判断选择符是否是某标签

alert($('.red').is('li'));//判断class为.red的标签是否是li

alert($('.red').is($('li').get(2)));//判断第3个li是否为.red

alert($('.red').is(function(){

return $(this).eq(0).attr('title')=='列表3';

}));

//hasClass('.red')是否存在red的class

alert($('li').eq(2).hasClass('red'));

//slice(2,4)选定第3个到第4个

//slice(2)选定第3个到最后

$('li').slice(2,4).css('background','red');

//end找到当前元素的前一个元素

$('#box').end().css('background','red');

//content当前元素下的子节点和子文本数量

alert($('#box').content().size());

//.filter('.red')选定当前元素中带.red的元素

$('li').filter('.red').css('background','red');

$('li').filter('.red,:first,:last').css('background','red');

$('li').filter(function(){

return($this.attr('class')=='red' && $(this).attr('title')=='列表3');

}).css('background','red');

});



第十课:

基础DOM和CSS

D:Document表示html文档

O:Object表示对象,每一组含有独立特定性的数组集合

M:Model模型,元素和文本节点

$(function(){

//html(value)获取元素中的html内容,(会解析html标签)

//添加vlaue时会重置原内容

alert($('#box').html();

$('#box').html('<em>重置内容</em>');

//text(value)获取元素中的文本内容,(会直接打印html标签)

alert($('#box').text();

$('#box').text('<em>重置内容</em>');

//val(value)获取和设置表单中的文本内容

alert($('#box').val());

$('#box').val('北风网');

//如果是单选框或复选框,可以添加alue值,群选

$('input').val(['男','女','编程']);//value值为男女编程的被勾选

//元素的属性操作id,class,title,name,value

//attr(key)根据属性名key获取属性值

//attr(key,value)属性名key设置属性值value

//attr(key1:value1,key2:value2,key3:value3)设置多个属性名和属性值

//attr(key,function(index,value){})

alert($('#box').attr('name'));

$('#box').attr('name','pass');

$('#box').attr('name':'xmp','sex':'男');

$('#box').attr('title',function(index,value){

return '我是' + index +'号域名,原来的域名是:'+value;

//index获取当前序号,value是原来的初始值

});

//removeAttr('title')删除属性值title

$('#box').removeAttr('title');

//遍历多个css

var box = $('div').css(['color','height','width']);

for (var i in box){

alert(i+':'+box[i]);

}

$.each(box,function(attr,value){

alert(attr + ':' + value);

});

$('div').each(function(index,element){

alert(index+':'+element);

});

//多个css设置

$('div').css({

'color':'blue',

'height':'30px',

'width':'200px'

});

//通过计算设置css

$('div').css('width',function(index,value){

return parseInt(value)-500 +'px';//parseInt转成整形

});

//addClass()添加css文件中的css样式

$('div').addClass('red');

$('div').addClass('red bg size');

//删除css文件中的css样式

$('div').removeClass('bg red');

//toggleClass()切换css文件中的css样式

$('div').click(function(){

$(this).toggleClass('red size');

});

var count = 0;

$('div').click(function(){

$(this).toggleClass('red size',count++ % 2 ==0);

});

//默认css和设置css之间切换

$('div').click(function(){

$(this).toggleClass('red');

if($(this).hasClass('red')){

$(this).removeClass('green');

}else{

$(this).toggleClass('green');

}

});

$('div').click(function(){

$(this).toggleClass(function(){

if($(this).hasClass('red')){

removeClass('red');

return 'green';

}else{

removeClass('green');

return 'red';

}

});

});

});

第十一课:

css操作

$(function(){

//width获取长度(数字类型)

alert($('div').width());

$('div').width('200px');//设置长度

$('div').width(function(index,width){

return width-500 + 'px';

}

//innerWidth()获取宽度,包括内边距padding

//innerHeight()获取高度,包括内边距padding

//outerWidth()获取宽度,包括border和padding

//outerHeight()包括border和padding

//outerWidth(true)包括border和padding和margin

//outerHeight(true)包括border和padding和margin

//元素偏移方法

offset()获取元素相对视口的偏移位置

position()获取元素相对与父元素的偏移位置

scrollTop()获取垂直滚动条的值

scrollTop(value)设置垂直滚动条的值

scrollLeft()水平滚动条的值

scrollLeft(value)设置水平滚动条

});

第十二课:

节点模型操作

$(function(){

//创建节点

//append(content)插入节点(内部内容后面插入)

var box=$('<div id="box">节点1</div>');

$('body').append(box);//讲解点插入到<body>内部

$('div').append(function(index,html){

//html是原本div里面的内容

return '<strong>DOM</strong>'+html;

});

//appendTo(content)将指定的元素移入到内部

var box =$('strong');

$('div').appendTo(box);

//prepend(content)将节点插入到内容前面

$('div').prepend('<strong>DOM</strong>');

//prependTo

//外部插入节点方法

//after(content)向指定元素的外部后面插入节点

$('div').after('<strong>DOM</strong>');

//before向指定元素的外部前面插入节点

$('div').before('<strong>DOM</strong>');

//insertAfter(content)将指定节点移到指定元素content外部后面

//insertBefore(content)将指定节点移动到content外部前面

});


第十三课:

节点操作

包裹节点

$(function(){

//wrap(html)包裹一层节点

$('div').wrap('<strong><em>dom</em></strong>');//将div包裹在dom后面

//unwrap()移除一层节点

$('div').unwrap();//移除一层<em>

//wrapAll(html)包裹所有

$('div').wrapAll('<strong></strong>');

//wrapInner(html)向指定元素的子内容包裹一层html

$('div').wrapInner('<strong></strong>');//包裹文本部分

$('body').append($('div').clone(true));//添加true时表示复制文本和事件,不加true则只复制文本

$('div').remove();//删除节点,同时删除事件

$('div').remove('.box');//删除.box的div

$('div').remove().appendTo('body');//删除div节点,再添加删除的节点,但事件也被删除

$('div').detach().appendTo('body');//删除div节点,再添加删除的节点,但事件保存

$('div').empty();将div的子节点和文本清除,保留div标签

$('div').replaceWith('<span>节点</span>');//替换div节点,删除事件

});


第十四课:


////12.3/////////

第15课:

表单选择器

$(function(){


表单选择器

//val()

$('input').val();//获取value值

$('input').eq(1).val();

$('input[type=password]').val();

$('input[name=user]').val();

:input//包括input,textarea,select,button元素

:text//包括所有单行文本框

:password//所有密码框

:radio//所有单选框

:checkbox//所有复选框

:submit,:reset,:image,:button,:file,:hidden

alert('form :hidden').size());//限定范围

表单过滤器

$(':enabled').size();//获取可用元素

$(':disabled').size();//获取不可用元素

$(':checked').size();//获取单选复选框中被选中的

$(':selected').size();//获取下拉列表中被选中的,选中的是option

});



第16课:

基础事件

click,dblclick,

mousedown,mouseup,mousemove,mouseout,mouseover

change,select,submit,keydown

keypress,keyup,blur,focus,load,resize,scroll,error

$(function(){

//失去焦点时

$('#telphone').blur(function(){

alert('点击');

});

//bind()绑定事件

$('input').bind('click',function(){

alert('点击');

});

//mouseover鼠标移入时触发

//mouseout鼠标移出

//绑定多个事件

$('input').bind('click mouseover',function(){

$('div').html(function(index,value){

return value + '1';

});

});

});


第17课:



第18课:



第19课:



第20课:


/////12.4/////

第21课:



第22课:



第23课:



第24课:



第25课:



第26课:

ajax学习,load方法适合用于静态页面

$(function(){//加载文件中的html文本,加载到#box中

$('#box').load('test.html');

});


筛选功能

$(function(){

$('#box').load('test.html .url');//筛选出url

});

test.html

<span class="title">标题</span>

<span class="url">http://baidu.com</span>


get和post提交php端验证

$('input').click(function(){//以get提交

$('#box').load('test.php?url=ycku');

});

$('input').click(function(){//以post提交

$('#box').load('test.php',{

url:'ycku',

});

});

test.php端

if($_GET['url']=='ycku'){

echo '判断为get方式提交则显示';

}



回调函数

$('input').click(function(){

$('#box').load('test.php',{

url:'ycku',

},function(response,status,xhr){

//response是test.php返回的内容,stutas状态,xhr为html对象

//$('#box').html(response + '123');//用来重新编辑

//if(status == 'success'){alert('成功后的处理');};//显示状态,分success和false

//xhr对象有属性:responseText,responseXML,status,statusText

//alert(xhr.responseText);

});

});



27课

ajax的get和post方法,需要试用回调函数


$(function(){

$('input').click(function(){

$.get('test.php?url=ycku',function(response,status,xhr){

//也可以写成$.get('test.php','url=ycku&a=b',function(response,status,xhr){

$('#box').html(response);

});

});

});

还可以写成

$(function(){

$('input').click(function(){

$.get('test.php',function{

url:'ycku',

},function(response,status,xhr){

$('#box').html(response);

});

});

});



post方法

$(function(){

$('input').click(function(){

$.post('test.php','url=ycku&a=b',function(response,status,xhr){

$('#box').html(response);

});

});

});

还可以写成

$(function(){

$('input').click(function(){

$.post('test.php',function{

url:'ycku',

},function(response,status,xhr){

$('#box').html(response);

});

});

});


//获取json文件

$(function(){

$('input').click(function(){

$.post('test.json',function(response,status,xhr){

$('#box').html(response[0].url);

});

});

});


test.json文件

[

{

"url":"www.ycku.com"

}

]



getJSON专用json方法,安全性更高

$('input').click(function(){

$getJSON('test.json',function(response,status,xhr){

alert(response[0].url);

});

});


getScript当需要时异步加载

$('input').click(function(){

$.getScript('test.js');

});



第28课

最底层的$.ajax方法

只用$.ajax可以解决上诉所有方法

里面都是键值对


$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',//传递属性

url:'test.php',//传递文件

data:{//传递数据

url:'ycku',//用来post判断的值

},

success:function(response,status,xhr){//成功返回数据

$('#box').html();

}

});

});

});


//表单提交

$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'test.php',

data:{

user:$('form input[name=user]').val(),

email:$('from input[name=email]').val(),

},

success:function(response,status,xhr){

$('#box').html();

}

});

});

});

为便于复制,也可以写成

$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'test.php',

data:$('from').serialize(),//序列化from所有表单的值

success:function(response,status,xhr){

$('#box').html();

}

});

});

});

index.html

<from>

帐号:<input type="text" name="user"/>

邮箱:<input type="text" name="email"/>

<input type="button" value="提交"/>

</form>


test.php

echo $_POST['user'].' - '.$_POST['email'];


对单选框和复选框的序列化取值

$('form input[name=sex]').click(function(){

$('#box').html(decodeURLComponent($(this).serialize()));

});


以json获取数据

$('form input[name=sex]').click(function(){

var json=$(this).serializeArray();

$('#box').html(json[0].name + '=' + json[0].value);

});




$.ajaxSetup()默认请求初始化重复的属性

$.ajaxSetup({//这里是重复的内容,可公共使用

type:'POST',

url:'user.php',

data:$('form').serialize(),

});

$('form input[type=button]').click(function(){//这里是单个调用

$.ajax({

success:function(response,status,xhr){

$('#box').html(response);

}

});

});



第29课

loading提示


$('from input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'user.php',

data:$('from').serialize(),

success:function(response,status,xhr){

$('#box').html(response);

},

//timeout:500,//表示500毫秒内没有加载成功则退出

//global:false,//表示ajax方法全局取消(loading无效)

error:function(xhr,errorText,errorType){//文件无法加载时

//errorText错误的状态(error),errorType错误的类型(Not Found)

alert('错误!');

},

});

});

$(document).ajaxStart(function(){

$('.loading').show();//加载过程中显示

}).ajaxStop(function(){

$('.loading').hide();//当加载完毕后隐藏

});



post 的error连缀操作

$.post('user.php').error(function(xhr,errorText,errorType){

//alert('找不到文件');

alert(errorText + ':' + errorType);

alert(xhr.status + ':' + errorText);

});



全局报错ajaxError()

$(document).ajaxError(function(event,xhr,settings,errorType){

alert(event.type);//打印出错误类型为ajax

alert(event.target);//打印出dom,(为document)

for(var i in event){//遍历event的所有属性

document.write(i+'<br/>');

}

alert(settings.url);//得到本次错误的URL是哪个(user1.php)

alert(settings.type);//得到本次的提交模式(post)

alert(errorType);//得到错误的类型,如not found

});



//测试全局方法.ajaxSend,.ajaxComplete,.ajaxSuccess,.ajaxError

$('form input[type=button]').click(function(){

$.post('user.php',$('form').serialize());

});


$(document).ajaxSend(function(event,xhr,settings){

alert('发送请求之前');//1

}).ajaxComplete(function(event,xhr,settings){

<span class="Apple-tab-span" style="white-space:

评论

评论(0)

后面还有条评论,点击查看>>