jQuery-3~5章
JQuery003-JQuery中的DOM操作
jQuery中的DOM操作：
1、查找节点
|
A．查找元素节点 |
B． 查找属性节点 |
|
var s1 = $("ul li:eq(1)"); var li_txt = s1.txt(); alert(li_txt); |
var $para = $("p"); var p_txt = $para.attr("title"); alert(p_txt); |
2、创建节点
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
var box =
$('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
|
创建元素节点 |
创建文本节点 |
|
var s1 = $("<li></li>"); // 创建第一个li元素 var s2 = $("<li></li>"); // 创建第二个li元素 |
|
3、插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。
4、删除节点
|
remove()方法 |
detach() |
empty()方法 |
|
从DOM节点中删除所有匹配的元素，传入的参数作用于根据jQuery表达式来筛选元素。 $('div').remove(); //直接删除 div 元素 |
和remove()方法一样是从DOM中去掉所有匹配的元素。这个方法不会吧匹配的元素从jQuery对象中删除，因而可以在将在再使用这些匹配的元素。所有绑定的事件，附加的数据等都会保留下来。 |
清空节点而不是删除节点。 |
5、复制节点
可以使用clone()方法来实现。
6、替换节点
|
replaceWith() |
replaceAll() |
|
将所有匹配的元素都替换成HTML或者DOM元素 |
颠倒了replaceWith()操作，其作用和功能和replaceWith()是一样的。 |
7、包裹节点
wrap()方法：该方法对于要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
jQuery 提供了一系列方法用于包裹节点， 那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思
8、属性操作
|
用attr()方法来获取和设置元素属性 |
用removeAttr()来删除元素属性 |
|
如果要获取<p>元素的属性title，只需给attr()方法传递一个参数—属性名称 |
如下代码 $("p").removeAttr("title"); //删除<p>元素的属性title |
9、样式操作
获取class和设置class都可以使用attr()方法来完成
|
var p_class = $("p").attr("class"); |
追加样式：addClass()方法
10、 设置和获取HTMl、文本和值
|
html()方法 |
text()方法 |
val()方法 |
|
该方法类似于JS中的innerHTML属性 |
该方法类似于JS中的innerText属性，可以用来读取或者设置某个元素中的文本内容 |
该方法类似于JS中的value属性，可以用来设置和获取元素的值 |
11、 遍历节点
|
children() |
用于取得匹配元素的子元素集合 |
|
next() |
用于取得匹配元素后面邻近的同辈元素 |
|
prev() |
取得匹配元素前面紧邻的同辈元素 |
|
sibling() |
取得匹配元素前后所有的同辈元素 |
|
closest() |
取得最近的匹配元素 |
|
parent() ,parents() , closest()三个方法的区别 |
|
12、 CSS-DOM操作
几种经常使用的方法
|
offset() |
获取元素在当前视窗的相对便宜。返回对象包含两个属性：top和left。只对当前元素有效 |
|
position() |
获取元素相对于最近一个position样式属性设置为realitive或者absolute的祖父节点的相对便宜，和offset()一样，返回对象包含两个属性top和left |
|
scrollTop() |
获取元素滚动条距离顶端的距离 |
|
scrollLeft() |
获取元素滚动条距离左侧的距离 |
JQ004-jQuery中的事件和动画
一、 jQuery中的事件
1、加载DOM
JS的onload事件只能保存对一个函数的引用，后面的会自动覆盖前面的函数。而jQuery的ready()方法可以很好的处理这个问题。调用$(document).ready()方法都在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。如下代码：
简写：如下
|
一般写法 |
简单写法 |
2、事件绑定
使用band()方法来进行对匹配元素进行特定事件的绑定。调用格式如下
|
bind( type [, data ] , fn ); |
bind()方法有三个参数：
|
事件类型：如：blur , focus , load , resize , scroll , unload , click , dbclick , mousedown , mouseup , mousemove , mouseover , mouseenter , mouseleave , change , select , submit , keydown , keypress , keyup , error等 |
|
可选参数，作为event.data属性值传递给事件对象的额外数据对象 |
|
用来绑定的处理函数 |
怎么用css样式把相应的内容隐藏起来？？
使用：display:none;
简写事件绑定：
3、合成事件
jQuery有两个合成的事件。类似于之前的ready()事件。hover() toggle()方法都书序jQuery自定义的方法：
|
hover() |
toggle() |
|
用于模拟光标悬停事件，光标悬停在特定元素上时，触发事件 |
语法结构：toggle(fn1 , fn2 , fn3 , ……fnN); 该方法用于模拟鼠标连续单击事件，第一次单击元素触发指定的第一个函数，以此类推。 |
4、事件冒泡
从里往外执行。
事件冒泡会带来问题，要如何停止事件冒泡：
事件捕获：从外往里执行
5、事件对象的属性
jQuery在遵循w3c规范的情况下，对事件对象的常用属性进行了封装，使得事件在各大浏览器中都可以正常运行，而不需要进行浏览器类型判断。
|
event.type |
event.preventDefault()方法 |
event.stopProgation()方法 |
event.target |
|
获取到事件类型 |
阻止默认的事件行为 |
阻止事件的冒泡 |
获取到触发事件的元素 |
|
event.relatedTarget |
event.pageX和event.pageY方法 |
event.which |
event.metaKey |
|
用来访问mouseover和mouseout的相关元素 |
获取光标对于页面的x坐标和y坐标（如果页面中有滚动条，要加上滚动条的宽度和高度） |
获取到鼠标单击事件中获取到鼠标的左中右事件，在键盘事件中的键盘按键 |
为键盘事件中获取<ctrl>键 |
6、移除事件
unbind()方法。
参数类型如下：
|
没有参数：移除所有事件 |
|
有参数：移除该类型事件 |
|
把绑定时传递的处理函数作为第2个参数，则这个特定参数被删除 |
7、模拟操作
trigger():完成模拟触发操作。
|
$(‘#btn’).trigger(“click”); 模拟点击事件 $(‘#btn’). click(); 简写 |
自定义触发事件：
|
$('#btn').bind("myClick" , function(){ $('#test').qppend("<p> myClick <p>"); }); $(‘#btn’).trigger(“myClick”) |
如果只想触发绑定的focus事件不想触发浏览器默认事件，可以使用triggerHandler()方法。
|
$(“input”).triggerHandler(“focus”); |
8、其他用法
bind()方法不经能够为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。此外bind()方法还能做很多事情。
|
1、绑定多个事件类型 （可以一次性绑定多个事件类型） |
|
|
$(function(){ $("div").bind("mouseover mouseout", function(){ $(this).toggleClass("over"); }); }); |
当光标移动到div时，该元素的class切换为over
|
|
2、添加事件命名空间，便于管理（为元素绑定的多个事件类型用命名空间规范起来） |
|
|
$(function(){ $("div").bind("click.plugin", function(){ $("body").append("<p> click 事件 <p>"); }); $("div").bind("mouseover.plugin", function(){ $("body").append("<p> mouseover 事件 <p>"); }); $("div").bind("dbclick ", function(){ $("body").append("<p> dbclick 事件 <p>"); }); $("button")click(function(){ $("div")unbind(".plugin"); }); }); |
|
|
3、相同事件名称，不同命名空间执行方法 |
|
|
$(function(){ $("div").bind("click", function(){ $("body").append("<p> click 事件 <p>"); }); $("div").bind("click.plugin", function(){ $("body").append("<p> click. plugin 事件 <p>"); }); $("button").click(function(){ $("div")trigger("click!"); }); }); |
注意最后一个click后面的感叹号！。它的作用是：匹配所有不包含在命名空间中的click方法。 |
二、 jQuery中的动画
1、show() 和 hide() 方法
|
show() 和hide() 方法 |
相当于css的display：none或者inner、block、innerblock |
|
让show() 和hide() 方法动起来 修改元素的属性：高度宽度和不透明度 |
可以为他们 一个速度参数：slow $("element").show("slow"); 关键字还有normal 和 fast（事件长度分别为：600毫秒、400毫秒、200毫秒）。可以直接填写时间数据，单位为毫秒： $("element").show(1000); |
2、fadeIn() 和 fadeOut() 方法
|
这两个方法值改变元素的不透明度，淡入，淡出 |
3、dlideUp() 和 dlideDown() 方法
|
只改变元素的高度 |
4、自定义动画方法animate()
|
语法结构为: animate(params, speed, callback); 参数说明如下: 1、params:一个包含样式属性及值的映射 2、speed 速度参数，可选 3、callback 在动画完成时执行的函数，可选 |
累加累减动画
|
$(this).animate({left:"+=100px"}, 100) //在当前位置累加100px |
多重动画
|
$(this).animate({left:"+=100px"}, 100) .animate({height:"+=200px"}, 100); |
综合动画
|
$(function(){ $("#panel").css("opacity","0.5"); $("#panel").click(function(){ $(this).animate({left:"+=100px", height:"+=200px", opacity:"1"}, 3000) .animate({top:"+=200px", "+=100px"}, 3000) .fadeOut(5000) .fadeIn(5000) }); }); |
5、动画回调函数
如果最后面只是想改css样式，而不是要让动画淡入或者淡出。但是css样式方法并不会加入到队列中，而是立即执行。可以对css样式使用函数回调方法。如下代码：
|
$(function(){ $("#panel").css("opacity","0.5"); $("#panel").click(function(){ $(this).animate({left:"+=100px", height:"+=200px", opacity:"1"}, 3000) .animate({top:"+=200px", "+=100px"}, 3000, function(){ $(this).css("border", "5px solid blue"); }) }); }); |
6、停止动画和判断试够处于动画状态
使用stop()方法。
该方法有两个可选参数：clearQueue和gotoEnd。都为boolean值
|
clearQueue |
表示是否要清空未完成的队列 |
|
$("#panel").hover(function(){ $(this).stop() .animate({height: "150", "300"}, 2000); },function(){ $(this).stop() .animate({height:"22", "60"},3000); }); |
|
|
gotoEnd |
表示是否当即停止动画 |
判断元素是否处于动画状态。
|
if(!$(element).is(“:animated”)){ //如果当前没有动画则添加新动画。 } |
动画延迟操作：
|
使用delay()方法 |
7、其他动画方法
四个用于交互的动画方法：
|
toggle(speed, [callback]) |
切换元素的可见状态，如果是可见的切换为隐藏的，如果是隐藏的切换成可见的。 |
|
slideToogle(speed, [easing], [callback]) |
通过高度变化来切换陪陪元素的可见性，通过高度变化来改变。（只调整元素的高度） |
|
fadeTo(speed, opacity, [callback]) |
把元素的不透明度以渐进方式调整大指定的值。（只调整元素的不透明度） $(this).fadeTo(6000,0.2); //参数：事件，透明度 |
|
fadeToggle(speed,[easing], [callback]) |
通过不透明度变化来切换匹配元素的可见性（只调整元素的不透明度） |
8、动画方法概括
|
方法名 |
说明 |
|
hide() show() |
同时修改多个样式属性：高度、宽度、不透明度 |
|
fadeIn() fadeOut() |
只改变不透明度 |
|
sildeUp() slideDown() |
只改变高度 |
|
fadeTo() |
只改变不透明度 |
|
toggle() |
用来代替hide()和show()方法，会同时修改多个属性 |
|
slideToggle() |
用来代替sildeUp() 和 slideDown() 方法，所以只改变高度 |
|
fadeToggle() |
用来代替fadeIn()和fadeOut()方法，所以只改变宽度 |
|
animate() |
自定义动画方法（可以用来代替所有其他动画方法方法） |