注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

jQuery DOM节点操作 自定义属性 动画  

2014-07-27 12:08:00|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jQuery DOM节点操作 自定义属性 动画

欢迎学习交流------梦幻雪冰
其实DOM操作就是围绕在增、删、改、查这几个步骤来操作DOM树
先完成一个小的html结构,方便下面进行讲解
<div class="music">
<div>第一个标签-DOM操作</div>
</div>
【1】创建标签
【语法】$('标签')或者$('标签+文本');
console.log($('<div>DOM操作创建标签-梦幻雪冰<div/>'));
console.log($('<div>'));
【结果】第一个创建标签和文本内容,第二个只有创建标签

【2】创建的标签如何进行添加匹配元素中
【语法】append();向指定元素内部追加(从后面添加)内容
$('.music').append($('<div>DOM操作-添加标签-梦幻雪冰<div/>'));
这种方法把标签和文本内容添加到类名为music的标签里面
$('.music').append($('<div>'));
这种方法只会把标签添加到类名为music的标签里面

【语法】appendTo();把所有匹配的元素追加到另一个指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中
$('<div>').appendTo('.music');
$('<div>DOM操作-添加标签-梦幻雪冰</div>').appendTo('.music');

【语法】prepend();向指定元素内部前置(从前面添加)内容
$('.music').prepend($('<div>DOM操作添加标签-梦幻雪冰</div>'));
欢迎学习交流------梦幻雪冰

【语法】prependTo();把所有匹配的元素前置到另一个指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
$('<div>DOM操作添加标签-梦幻雪冰</div>').prependTo('.music');
注意上面所讲到的插入是标签内插入

【语法】after();在指定元素后面插入
$('.music').after($('<div>DOM操作添加标签-梦幻雪冰</div>'));

【语法】insertAfter();也就是颠倒after()操作
$('<div>添加标签-梦幻雪冰</div>').insertAfter('.music');

【语法】before()在指定元素前面插入
$('.music').before($('<div>添加标签-梦幻雪冰</div>'));

【语法】insertBefore();也就是颠倒before()操作
$('<div>DOM操作添加标签-梦幻雪冰</div>').insertBefore('.music');
注意上面所讲到的插入是标签外部插入

【3】删除标签
【语法】remove();删除匹配的元素,会从DOM位置移除,所有绑定的事件都会被移除掉
$('.music div').remove();
这句代码的意思是删除类名为music下包含的div元素

【语法】empty();删除匹配的元素集合中所有的子节点,但是仍然保留在DOM的位置
$('.music div').empty();
【注意】注意这两者的区别,跟display:none和visibility:hidden;这个两个区别类似

【语法】deatch()remove()不同的是,所有绑定的事件等都会保留下来。
$('.music div').detach();

【4】替换标签
【语法】replaceAll();将匹配的元素替换成新的元素
$('<h1>DOM操作-替换标签-梦幻雪冰</h1>').replaceAll('.music div');
【注意】书写顺序

【5】查找标签
使用到的结构
<div>前面同辈元素</div>
<div>前面同辈元素</div>
<div class="music">
<div>第一个标签</div>
<div>第二个标签</div>
<div>第三个标签</div>
</div>
<div>后面同辈元素</div>
<div>前面同辈元素</div>
console.log($('body').children());
获取指定标签下的子元素,只考虑子元素而不考虑所有后代元素。

console.log($('.music').siblings('p'));
console.log($('.music').siblings(''));
获取指定元素的同辈元素,可以用筛选表达式进行提取,也就是说也可以查找节点的类型  选择器的遍历节点时的节点限制

console.log($('.music').parent());
每个元素父元素

console.log($('.music').parents());
找到指定元素的所有祖先元素。

console.log($('body').find('div'));
获取所有匹配的元素,包括子代和后代,这也是处理后代元素的好方法

console.log($('body div').eq(index));
获取所有匹配的元素,然后根据索引值进行访问,索引值从0开始

console.log($('.music').next());
取得一个跟匹配元素相邻的下一个同辈元素。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

console.log($('title').nextAll());
查找当前元素之后所有的同辈元素

console.log($('.music').prev());
取得一个跟匹配元素相邻的上一个同辈元素。这个函数只返回前面那个紧邻的同辈元素,而不是前面所有的同辈元素(可以使用prevAll)。可以用一个可选的表达式进行筛选。

console.log($('.music').prevAll());
查找当前元素之前所有的同辈元素

console.log($('.music div').first());
获取第一个元素

console.log($('.music div').last());
获取最后一个元素

【6】复制标签
$('.music').clone(false).appendTo('body');
  clone('true/false');true代表深复制,会复制事件处理函数;false代表浅复制,不会复制事件处理函数

  【7】属性设置
  【添加属性】
  console.log($('.music').attr('class'));
  只有一个参数的时候,是获取属性
  console.log($('.music').attr('class','vedio'));
  console.log($('.music').attr({
  'id':'musicId',
  'class': 'vedio'
  })); 

  【移除属性】
  $('.music').removeAttr('class');

  【8】获取节点内容
  console.log($('.music').html());
  console.log($('.music').html('设置html内容'));
  获取和设置匹配元素的html内容

  console.log($('.music').text());
  console.log($('.music').text('设置文本内容'));
  获取和设置匹配元素的文本内容
  获取表单内容
  使用到的结构
<form action="">
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
<input type="checkbox" value="check1"/> 复选一
<input type="checkbox" value="check2"/> 复选二
<input type="radio" value="radio1"/> 单选一
<input type="radio" value="radio2"/> 单选二
 <input type="text" id='txt'>文本框
</form>
  $("#single").val("Single2");
  当选择单个选项的时候设置下拉框的值
  console.log($("#single").val());
  获取下拉框的值
$("#multiple").val(["Multiple2", "Multiple3"]);
当选择多个选项的时候,设置下拉框的值,如果要设置多个用[]来包含要设置的值,并用逗号隔开
console.log($("#multiple").val());
当选择多个选项的时候,获取下拉框的值,返回数组类型的值
$("input").val(["check2", "radio1"]);
console.log($("input[type='radio']").val());
console.log($("input[type='checkbox']").val());
$('#txt').val('设置文本框内容-梦幻雪冰');
获取input中的值和设置input中的值,如果要设置多个用[]来包含要设置的值,并用逗号隔开

【9】尺寸
取得匹配元素当前计算的高度值,获取的结果没有带单位"px";注意跟css("height")的比较,这个方法获取结果是有带单位"px"
console.log($('.music').height());
设置类名为music的元素的高度
console.log($('.music').height(400));
console.log($('.music').css("height"));

console.log($('.music').width());
设置类名为music的元素的宽度
console.log($('.music').width(400));
console.log($('.music').css("width"));

获取第一个匹配元素内部区域高度(包括padding、不包括border)。
console.log($(".music").innerHeight());
console.log($(".music").innerWidth());

获取第一个匹配元素外部高度(默认包括padding和border),设置为 true 时,计算margin在内。
console.log($(".music").outerHeight());
console.log($(".music").outerHeight(true));
console.log($(".music").outerWidth());
console.log($(".music").outerWidth(true));

获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top和left
var pos = $('.music').position();
console.log("left="+pos.left+" "+"top="+pos.top);

获取/设置匹配元素相对于文档的位置
$('.music').offset();
$('.music').offset({
'top':'10',
'left':'20'
});
获取/设置匹配元素相对滚动条顶部的偏移。
console.log($(".music").scrollTop())

获取/设置匹配元素相对滚动条左侧的偏移。
console.log($(".music").scrollLeft())
欢迎学习交流------梦幻雪冰

【10】动画
【语法】第一个参数为表示动画时长的毫秒数值,第二个参数用来指定切换效果,默认是"swing",可用参数"linear",第三个参数为表示回调函数
$(".cli").click(function(){
$(".music").show("900","swing",function(){
$(this).hide("900","swing",function(){
alert("回调函数");
});
});
});
$(".cli").click(function(){
$(".music").fadeIn("900","swing",function(){
$(this).fadeOut("900","swing",function(){
alert("回调函数");
});
});
});
$(".cli").click(function(){
$(".music").slideDown("900","swing",function(){
$(this).slideUp("900","swing",function(){
alert("回调函数");
});
});
});
$('.con div').hide(毫秒数,回调函数);      隐藏 (宽高、透明度变化 )
$('.con div').show(毫秒数,回调函数);      显示 (宽高、透明度变化 )
$('.con div').fadeIn(毫秒数,回调函数);    淡入 (只有透明度发生变化)
$('.con div').fadeOut(毫秒数,回调函数);   淡出 (只有透明度发生变化)
$('.con div').slideUp(毫秒数,回调函数);   划出 (这个动画效果只调整元素的高度
$('.con div').slideDown(毫秒数,回调函数); 划入 (这个动画效果只调整元素的高度

    【10】自定义动画
  这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 
$(".music").stop().animate({
"height": "200px",
"width": "600px"
},5000,function(){
$(this).animate({
"height": "200px",
"width": "300px"
},2000,function(){
$(this).animate({
"height":"100px"
});
});
});
停止动画
.stop(); 停止当前动画 (动画队列当中的动画会继续执行)  
.stop(true); 停止当前所有动画  
.stop(true,true); 停止当前所有动画,到达动画终点
欢迎学习交流------梦幻雪冰
  评论这张
 
阅读(155)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017