标签：style class blog c java ext
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）
wrapInner（html）、wrapInner（element）、wrapInner(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的动画与特效（基本，滑动，淡入淡出，自定义，设置）
１．显示和隐藏(基本）
ｓｈｏｗ（）和ｈｉｄｅ（）
动画效果的显示和隐藏：
ａ。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：延缓。
JavaScript笔记,布布扣,bubuko.com
JavaScript笔记
标签：style class blog c java ext
原文地址：http://www.cnblogs.com/123qw/p/3751214.html
