Jquery 基础

来源：互联网发布：it专业课程编辑：程序博客网时间：2024/06/01 23:49

Jquery基础

1. jquery优点: a)写法同CSS

b)兼容浏览器

c)易于学习

d)容错机制强

2.基本选择器

a)#id :选择ID的元素 $('p1').css('color','red');

b).class:类名选择器$('.cssClass').css('color','red');

c)element:标签选择器:$('div').css('color','red');

d)*:选择所有的元素 $('*').css('color','red')); $('body *').css('color','red'); $('#divID *').css('color','red');

e)","多重选择器$('p,div').css('color','red');

3.层次选择器

a)E F 选择E元素所有的后代F元素

b)E>F选择E元素的子元素,子选择器

c)E+next选则E元素后的紧邻的兄弟元素等价于.next()

$('div+p').css('color','red') ===$('div').next().css('color','red') 表示<DIV>紧邻的兄弟元素<p>的颜色变红

d)E~siblings 选择E元素后的所有的兄弟元素,等价于 .nextAll()

$('div~p').css('color','red') === $('div').nextAll().css('color','red')表示<div>以下的所有的<p>的颜色都变红

JQuery选择过滤器

<div>

<pclass='clsA'>6</p>

</div>

1.基本选择过滤器

a):first $("p:fisrt").css('background','red') 注意:P后面不能加空格,否则表示P的子元素

b):last $('p:last').css('background','red')

c):not() 让 calss='lasA'的不变色 $('p:not("clsA")').css('background','red')

d):even 偶数过滤器,0开始计数$('p:even').css('background','red');

f):odd 奇数过滤器,同上

g):eq() 选择指定索引的过滤器,0开始计数$('p:eq(2)').css('background','red');

h):gt() 大于指定索引的过滤器,0开始计数$('p:gt(2)').css('background','red');

i):lt() 小于.....

j):header选取<h1></h1> <h2></h2>

2.内容过滤器

a):contains() 选取含有文本内容的元素,实现简单搜索 $('p:contains("1")').css('color','red');

b):has()选取包含指定元素的元素,参数可以使标签名,class,id $('p:has("strong")').css('color','red');

c):empty选取不包含指定子元素,并且文本为空的元素 $('p:empty').css('color','red')

3.可见性选择器

a):hidden选取所有不可见元素.必须满足两个条件不可见;不占网页空间(display:none). 如设置为opacity:0,或者visibility:hidden则不行

b):visible选取所有可见元素

4.属性选择器

a)<p title='js' uName='abcdd'>asdf</p> $('p[title=js]').css('background','red');

5.多属性选择器 $('p[title=js][uName=abcde]').css('background','red');

6.子元素过滤选择器

a)第1个子元素 $('div p:first-child').css('background','red')

b) $('div p:last-child')

c)第N个子元素 $('divp:nth-child(2)').css('color','red')

d)偶数选择 $('div p:nth-child(2n)').css('color','red')

f)奇数选择 $('div p:nth-child(2n-1)').css('color','red')

7.表单选择器

a)$(':input').length 所有表单元素包括 textarea file select image

b)$(':text').val() <inputtype='text'>

c)$(':password').val()

d)$(':radio').val()

e)$(':checkbox').val() ===$('input[type=checkbox]').val()

f)$(':file')

g)$(':hidden')

.........................

8.表单属性选择器

a):enabled $('input:disabled').val()

b):disabled $('input:enabled').val()

c):checked $('input:checked').val() <input type='checkbox'checked='checked'>

d):selected <select></select> $(':selected').val() == $('selectoption[selected=selected]').val()

e):focus

JQuery选择器实例

<divid="wrap">

<pclass='clsName'>1</p>

<pid='p3'></p>

<pid='p5'><span>span sanp </span></p>

<div>innser</div>

</div>

一. Dom筛选,遍历查找

1.筛选

a).eq() 选择指定索引的元素$("p").eq(0).css('background','red') ==$('p:eq(0)').css('background','red')

b).filter(表达式)筛选指定表达式的元素

$('p').filter(':even')

$('p').filter(':odd')

$('p').filter('.clsName')

$('p').filter('#outer')

c).first()

d).last()

e).is()返回bool值例:如果class='clsName',则变色

$('p').click(function(){ if($(this).is('.clsName')){ $(this).css('background','red')} });

f).has()保留包含特定后代的元素

g).not()

$('p').not(':first').css('background','red')

$('p').not('#p3').css('color','red')

h).slice()根据指定下标范围,选取匹配的元素集合

$('p').slice(1,5).css('color','red'); //选择 [1,5) 区间的元素

$('p').slice(-2,-1).css('color','red')

2. DOM遍历查找

a).children() 选取查找子元素,参数为过滤器

$('#wrap p').css('color','red')

=$('#wrap>p').css('color','red')

=$('#wrap').children().not('div').css('color','red')

=$('#wrap').children('p').css('color','red')

b).parent() 选取父元素,参数为过滤器

$('#p3').parent().css('color','red')

c.)parents()选取所有的祖元素,参数为过滤器

$('#p3').parents('#wrap').css('color','red')

d).parentUntil()选取所有的父元素,直到遇到匹配过滤器,参数为过滤器

e).offsetParent()选择父元素中第一个position=relative或者position=absolute的元素,仅对可见元素有效

f).next() 选择后面紧邻的一个兄弟元素$('#p3').next().css()

g).nextAll()选择后面紧邻的所有兄弟元素

$('#p3').nextAll().not('div').css('color','red') ==$('#p3').nextAll(':not(div)').css('color','red')

h).nextUntil()

i).prev()

j).prevAll()

k).siblings()选择前后所有的兄弟元素

$('#p3').siblings('div').css('color','red')

l).closest()

m).contents()

n).end()终止在当前链的最新过滤操作,并返回匹配元素的以前状态

$('span').parent().css('color','red').end().css('background','#red')

o).each()遍历

$('p').each(function(){ $(this).css('color','red') });

p).find()查找

3.特殊字符处理

加转移符"\"

4.实现表格隔行换色

a)$("#tblID tr:even").css('background','yellow');

$('#tblID tr:odd').css('background','red');

b)$('#tblIDtr').filter(':even').css('background','yellow').end().filter(':odd').css('background','red');

5.实现Tab标签页

$('ul li').click(function(){

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

$('#content>div').eq($(this).index()).show().siblings().hide();

});

JQuery选择器的优化

1.优先选择ID选择器

2.在class名前加标签名.例如使用$('p.clsName') 而不使用$('.clsName')

3.采用find(),而不使用上下文查找

4.使用链式操作比缓存更快

JQuery中的DOM操作

1.查找节点(省略)

2.创建节点

a)var newEle = $('<div></div>');

b)var newEle = "<div></div>";

3.插入节点

3.1 内部插入节点

a) .append() 尾部插入节点 $('p').append(newEle);

b).appendTo newEle.appendTo($('p'));//append()的逆向操作

c).prepend() 前端插入

d).prependTo()

3.2 外部插入节点

a).after()在匹配元素之后插入DOM. $('p').after(newEle);

b).insertAfter().newEle.insertAfter($('p'))

c).before()

d).insertBefore()

3.3包裹节点

a).wrap()将所有的匹配元素单独包裹

$('p').wrap("<div></div>");包裹后变为 <div> <p>p1</p> </div> <div> <p>p2</p> </div>

b).wrapAll()将所有的匹配元素一起包裹

$('p').wrapAll('<div></div>');包裹后变为 <div><p>p1</p><p>p2</p> </div>

3.4删除节点

a).remove() 删除节点 $('p').remove();删除p节点

b).empty()清空节点 $('p').empty(); 清空P节点的内容或子元素

c).unwrap()删除元素父节点 $('p').unwrap(); //仅仅删除父节点标签,父节点包含的内容不会被删除

d).detach()删除节点,但保留Jquery对象

3.5复制节点

a).clone(bool)参数如果为TRUE,则连事件一起克隆,全克隆

varnewA=$('a').clone(true)

3.6替换节点

a).replaceWith()$('p').repalceWith($('<div>..</div>'));

b).repaceAll()//replaceWith()的反向操作

3.7操作DOM节点属性

a).attr(key,value)改变节点属性 $('#p').attr('title','NewTitle');

b).removeAttr(key)删除节点属性 $('#p').attr('title')

3.8操作样式

a).addClass()添加样式 $('p').addClass('a'); $('p').addClass('ab');

b).removeClass删除样式 $('p').removeClass('a').removeClass('b');

c).toggleClass()切换样式 $('p').toggleClass('a b');

d).hasClass()是否包含样式 $('p').hasClass('a');

e).css(key,value)$('p').css('height','10').css('background','red'); $('p').css({'background':'red','color':'blue'});

f).height()获取高度

g).innerHeight()获取padding的高度,不含border,但包含padding,不含margin

h).outerHeight(bool)获取全部的高度,包含边框和padding.当参数为True时,则包含margin

i) .width,innerWidth,outerWidth

j).offset()返回元素的位置

k).offsetParent()

l).position()相对于 offsetParent()的位置

m)scrollTop

n)scrollLeft

3.9设置和获取节点内的html和文本

a).text() 不加参数为获取,加参数为设置$('p').text(); $('p').text('222222');

b).html()

JQuery事件处理

1.加载文档事件 $(document).ready();

2.鼠标事件

a).click(e)

b).dbclick()

c).focusin()

d).focusout()

e).mousedown()

f).mouseup()

g).mousemove()

h).mouseup()

i).mouseover()

j).mousemove()

k).mouseout()

l).mouseenter()鼠标进入阻止冒泡事件

m).mouseleave()鼠标离开阻止冒泡事件

3.键盘事件

a).keydown(e)

b).keyup()

c).keypress()可以连续触发

4.表单事件

a).focus()

b).blur()

c).change()

d).select()

e).submit()$('#form1').submit()

5.浏览器事件

a).resize()

b).scroll()

6.事件对象

a)event.pageX 相对document位置,已经把 scrollTop scrollLeft加上了

b) event.pageY

c)event.preventDefault() 阻止浏览器默认行为

d)event.stopPropagation() 阻止冒泡

e)event.witch()监听键盘和鼠标事件

7.绑定和移除事件的方法

a).bind()事件绑定 $('p').bind('click',function(){});

b).unbind()解除绑定

c).one()执行一次事件,然后销毁该事件

d).on(),.off() 同bind,unbind

8.事件命名空间,使用bind的时候,在事件后加命名空间

a) $('p').bind('click.namespace1',function(){});

$('p').bind('click.namespace2',function(){});

$('p').unbind('click.namespace1');

JQuery动画

1.基础动画

a).show(1000)在1000毫秒渐现.参数也可以为 fast ,slow,normal

b).hide(600)

c).toggle(1000)切换 show,hide

2.渐变动画

a).fadeIn()默认300毫秒使得opacity从0变为1

b).fadeOut()

c).fadeToggle()

d).fadeTo(ms,opacity,function)用ms毫秒使得opacity变为设定值,完成后调用回调函数

3.滑动动画

a).slideDown()从上到下渐现

b).slideUp()

c).slideToggle()

4.自定义动画

animate()

5.动画队列

a).stop()停止动画

b).dequeue()

c).finish()

d).delay()

JQuery表单实例

1. checkBox实例

a)选中 $('chk').attr('checked',true);

b)取消选中 $('chk').attr('checked',false);

c)反选: $('chk').each(function(){

$(this).attr('checked',!$(this).attr('checked'));

});

2.本地搜索把table中tr(not include header)包含"王三"的显示出来

$('tabletr:not("#header")').hide().filter(':contains("王三")').show();

JQueryAJAX

1.数据格式约定

2.处理不同数据类型的关系

3.AJAX执行时的细节.当ajax执行时,给用户提示. www.ajaxload.info 下载合适的资源图片

$(document).ajaxStart(function(){})

$(document).ajaxStop(function(){})

4.AJAX编码不一致的问题.建议统一使用UTF-8编码

5.Form内容自动拼接

$('#from').serialize();自动拼接为JSON对象

6.AJAX防止get()方法被缓存而不去调用服务器:需要设置 $.ajaxSetup({cache:false});

JQuery插件开发

1.类级别的插件

a)直接给jQuery添加全局函数

jquer.myAlert= function(){}; 调用: $.myAlert();

b)使用extend

jQuery.extend({

myAlert:function(str){};

});

调用: $.myAlert();

2.对象级别的JQUERY插件开发

参考官方模板

0 0