1.知识点:
JQuery 选择器
JQuery 属性操作
JQuery 文档操作
JQuery CSS操作----------
**************************************************************************************
jQuery选择器:
1.实现内容的隐藏或者显示:。css('display','none')
2.变换图片:。attr('src','');
3.单击标题后内容可以伸缩:
检测当前内容的显示或者隐藏状态:。is(’:visible‘)。该值返回一个布尔值。
4.获取元素内容的函数:。text();
5.将元素隐藏的函数:。hide();
6.增加样式:。addClass(选择器);~~~~~~该选择器在样式中定义
**********************************************************************
jQuery操作DOM
~~~~~~~~~~~~~~~~~~~~~~~name为元素属性的名称,用时用单引号括起来。
1.Document:文档
2.访问元素:元素的属性、内容、值、css的操作。
a。属性操作:获取、设置、操作
获取:attr(’属性名‘);
设置元素的属性:attr(属性名,属性值);或者attr({属性名:属性值,。。。。})或则attr(属性名,function(index))
删除元素的属性;removeAttr(属性名);
b。内容操作:获取、设置
html(【val】):获取和设置元素的html内容
text(【val】):获取和设置元素的文本内容
c。值操作:获取和操作
获取元素的值:val();
设置元素的值:val(val);
d。样式操作:
直接设置样式:css(样式名称,样式值);
增加css类别:addClass(定义的类别class1,class2。。。。。);
类别切换:toggleClass(类别名称)~~~~当元素中含有该类别是,删除该类别,否则增加该类别。
删除类别:removeClass(类别名称class1, class2.。。。。)~~~若无参数,则删除所有类别。
3、创建节点元素
· $('<p>sd</p>')即$(html);~~~~~~~~只完成DOM元素的创建,出入到页面中还需要通过元素节点
的插入或者追加操作。
4.插入节点
内部插入节点:append(content)、append(function(index,html))、
appendTo(content);
prepared
(content)、
prepared
(function(index,html))、
prepared
(content);
外部插入节点:
after(content)、after(function)
before(content)、before(function)
insertAfter(content)、insetBefore(content);
5.复制节点:~~~~~~~~~~~~~将某个元素节点复制到另外一个节点后。
复制元素本身,不具有任何元素行为:clone()
复制元素时将元素的行为也进行复制:clone(true);
6.替换节点:
replaceWith(content):将所有选择的元素替换成html或者dom元素,。参数为被选择元素替换的
内容。
replaceAll(selector):将所有选择的元素替换成指定selector的元素,参数为需要被替换的元素。
7.包裹节点;
wrap(html)、wrap(element)、wrap(function)
unwrap();
wrapAll(html)、wrapAll(element)
w
rapInner(html)、
w
rapInner
(element)、
w
rapInner
(function)
eg:包裹所有的段落标记加粗:$('p').wrap('<b></b>')
包裹段落中的span为斜体:$('span').wrapInner(<i></i>')
8.遍历元素
each(callback)~~~~~参数是一个function函数,该函数接受一个参数index。同时还可实现元素属
~~~~~~
性的获取和设置。
eg:。each(function(index){});
9.删除元素
remove()
empty();
案例 :删除数据和图片预览
隔行变色:$('table tr:nth-child(odd)').css('background-color','#eee')
小图片鼠标移动事件:初始化图片位置-〉设置提示图片的src属性-〉
设置提示图片的位置-〉
显示图片
:$('#imgTip').show(3000)
小图片鼠标移出事件;.mouseout(function(){$('img').hide()});
******************************************************************************
jQuery中的事件
1.事件机制
a.页面加载时,执行load事件。
b。事件触发后,分为两个阶段:捕获(capture)、冒泡(bubbing)。
大多数浏览器不支持捕获。
冒泡:时间执行中的顺序。
C.阻止冒泡过程:event.stopPropagation();
2.页面载入事件
$(function(){
.........
});
或者
$(document).ready(function(){
..........
});
或者将$换成jQuery。
3.绑定事件
三种方法:a。
b。bind(type,【data】,function(){});~~~~~~为每个选择元素的事件绑定处理函数
c。映射方式绑定不同的事件
A.为一个选择器添加多个动作:就是讲两个动作合在一起
eg:$('a').bind({
click:function(){},
mouseover:function(){}
})
4.切换事件
hover(over out):使元素在鼠标悬停与鼠标移出的事件中进行切换。解释:当鼠标移动到所选的元素上面时,执行第一个函数,当鼠标移出这个元素时,执行第二个函数。
toggle(函数集合):每次单击后依次调用函数。
5.移除事件
unbind(【事件类型】,【事件的处理函数】)。如无参,移除所有的绑定事件。
////可绑定不同的事件,包括自定义事件
6.其他事件
one(事件类型,【data】,事件处理函数):为所选的元素绑定一个仅触发依次的事件。
trigger(事件类型,【data】):在选择的元素上触发指定类型的事件。
7.表单应用
a.文本框中的事件应用:eg:邮箱验证输入
b.下拉列表框的事件应用
8.列表应用
9.网页选项卡的应用:门户网站
10.事件:
下拉列表框改变事件:change(function(){})
**************************************************************************************
jQuery的动画与特效(基本,滑动,淡入淡出,自定义,设置)
1.显示和隐藏(基本)
show()和hide()
动画效果的显示和隐藏:
a。show(speed,[callback])
speed为执行动画时的速度。有三个默认字符值:slow=0.6秒。normal=0.4秒, fast=0.2秒。还可以直接写入数值,单位是毫秒。
b。hide(speed,[callback])
c。检测当前元素的显示状态,在根据该状态进行元素时隐藏还是显示。。
(1)。无参调用格式
toggle()
(2)。逻辑参数调用格式
toggle(true或则false)。true显示元素,false隐藏元素
(3)。动画效果调用模式
toggle(speed ,[callback])等价于show(speed,[callback])
2.滑动
效果像拉窗帘。
改变元素高度 。
a。 slideDown(speed,[callback])
以动画效果将所选择元素的高度向下增大,使其呈现一种“滑动效果,”而元素的其他属性没有发生变化。
speed:动画显示的速度。
callback:动画显示完成后,执行的回调函数。
b。slideUp(speed,[callback])
以动画的效果将选择的元素的高度 向上减少,同样也仅仅是改变其高度属性。参数与上一个一样。
c。slideToggle(speed,[callback])
以动画的效果切换选择元素的高度,即:如果高,则减少。如果低,则增大。
3.淡入淡出
通过元素渐渐改变背景色的动画效果显示或者隐藏元素。
改变元素透明度,不改变其他属性。
a。fadeIn(speed,[callback])淡入。透明度从1.0到0.0淡入
b。fadeOut(Speed,[callback])淡出。透明度从0.0到1.0淡出
c。fadeTo(speed,opacity,[callback])将透明度指定到某一个值。
4.自定义动画
a。简单的动画
animate(param, [duration], [easing], [callback])
param:制作动画效果的属性和值得集合。
duration:三种默认的速度字符:slow、normal、fast或者自定的数字
easing:动画插件的使用,用于 控制动画的显示效果,通常有linclear和swing字符值。
callback
d。动画停止和 延时
stop():停止某个动画的执行
delay():延时某个动画的执行。
*************************************************************************************
打开页面
window.open(url):新的窗口打开链接,跳转后无后退功能
window.location=url:跳转后有后退功能
window.location.href;
window.location.replace(url):跳转后无后退功能
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
都是重定向
**********************************************************************************
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
$('p').click(function(){
alert('click function is running !');
});
(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
$('p').dbclick(function(){
alert('dbclick function is running !');
});
(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
$('p').mousedown(function(){
alert('mousedown function is running !');
});
(4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。
$('p').mouseup(function(){
alert('mouseup function is running !');
}).click(function(){
alert('click function is running too !');
});
(5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
(5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
(7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
(8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
(7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
$('p').hover(function(){
alert('mouseenter function is running !');
},function(){
alert('mouseleaver function is running !');
});
*************************************************************************************
deferred:延缓。