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

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

html5与javascript框架集资源整理  

2016-04-09 20:36:07|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
为了便于学习,笔者收集部分便捷高效的h5框架集,防止忘记。

最为成功的js框架:jquery---->http://jquery.org
                                   jquery-ui---->http://http://www.runoob.com/jqueryui/jqueryui-intro.html
jquery教程:
                                    http://www.w3school.com.cn/jquery/
html5教程:
                                  http://www.w3school.com.cn/html5/
最快捷的web跨平台开发框架bootstrap:
                                   http://v3.bootcss.com/getting-started/
2015年最新潮的js框架reactjs:
                                   http://www.runoob.com/react/react-tutorial.html
......

Plyr – 简单灵活的 HTML5 媒体播放器

2016-04-20 22:15

Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕。它是只支持现代浏览器,轻量,方便和可定制的媒体播放器。还有的标题和屏幕阅读器的全面支持。

Plyr – 简单灵活的 HTML5 媒体播放器

预览:

http://plyr.io/

T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架。T3 和大多数的 JavaScript 框架不同。它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码。T3 应用程序是由应用程序对象管理,主要任务是管理模块,服务和行为。这是这三种类型的对象,允许你建立一个可扩展的 JavaScript 前端的组合。 T3 – 构建大型 Web 应用的 JS 框架 预览: http://t3js.org/





**************************
附01: jquery使用技能
**************************
更多内容>>>http://www.css88.com/jqapi-1.9/
jQuery入门笔记之选择器引擎

一. 常规选择器

(一)简单选择器

模仿的是CSS选择器,只不过在使用jQuery选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则。
而CSS 规则作为参数传递到jQuery对象内部后,再返回包含页面中对应元素的 jQuery 对象。随后可以进行节点操作,例如:$('#box').css('color', 'red');

那么除了 ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):

选择器 CSS 模式 jQuery 模式 描述
元素名 div{} $('div') 获取所有div元素的 DOM 对象
ID #box {} $('#box') 获取一个 ID 为 box 元素的 DOM 对象
类(class) .box{} $('.box') 获取所有class为box的所有DOM对象

我们可以采用jQuery核心自带的一个属性length来查看返回的元素个数。(size()方法已经弃用)

在实践过程中发现使用多个id时,css居然都会高亮,jQuery没有这个问题。(标准写明一个页面只能有一个id)

jQuery选择器的写法与CSS选择器十分类似,只不过他们的功能不同。CSS 找到元素后添加的是单一的样式,而jQuery则添加的是动作行为。

重要的是jQuery兼容性更好,例如:

1
2
3
4
#box > p { //CSS 子选择器,IE6 不支持
color:red;
}
$('#box > p').css('color','red'); //jQuery 子选择器,兼容了 IE6

jQuery选择器支持CSS1、CSS2的全部规则,支持CSS3部分实用的规则,同时它还有少量独有的规则而jQuery选择器在获取节点对象的时候不但简单,还内置了容错功能区别如下:

$('#pox').css('color', 'red'); //不存在ID为pox的元素,也不报错
document.getElementById('pox').style.color = 'red'; //报错了

如何判断jQuery是否调取不存在的元素:

if ($('#pox').length > 0) { //jQuery对象,判断元素包含数量即可
$('#pox').css('color', 'red');
}
//或者转化成DOM对象方式判断
if ($('#pox')[0]) {}; //通过数组下标也可以获取 DOM 对象
if ($('#pox').get(0)) {} ;

(二)进阶选择器



在简单选择器中,我们了解了最基本的三种选择器:元素标签名、ID 和类(class)。那么在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素

选择器 CSS 模式 jQuery 模式 描述
群组选择器 span,.con,.box{} $('span,em,.box') 获取多个选择器的 DOM 对象
后代选择器 ul li a{} $('ul li a') 获取追溯到的多个 DOM 对象
通配选择器 *{} $('*') 获取所有元素标签的 DOM 对象

目前介绍的六种选择器,在实际应用中,我们可以灵活的搭配,使得选择器更加的精准和快速:

$('#box p, ul li *').css('color', 'red');//组合了多种选择器

警告:在实际使用上,通配选择器一般用的并不多,一般只用在局部的环境内。因为在大通配上,比如:$('*'),这种使用方法效率很低,影响性能,建议尽可能的少用。(CSS上也很少用)

还有一种选择器,可以在ID和类(class)中指明元素前缀,比如:

$('div.box'); //限定.box获取到的元素标签名必须是div
$('p#box div.side'); //同上

如同CSS一样,类(class)有一个特殊的模式,就是同一个DOM节点可以声明多个类(class)。那么对于这种格式,我们有多class选择器可以使用,但要注意和class群组选择器的区别

.box.pox { //双 class 选择器获取页面中class同时有.box.pox的元素
color:red;
}
$('.box.pox').css('color', 'red'); //用多个class进行精准确定

注意要点:

只追求必要的确定性。当选择器筛选越复杂,jQuery内部的选择器引擎处理字符串的时间就越长。

(三)高级选择器
在前面学习了六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等并不好获取,下面就来说说这些高级选择器:
选择器 CSS 模式 jQuery 模式 描述
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象
next 选择器(相连) div + p {} $('div + p') 只获取某节点后一个同级DOM对象
nextAll 选择器(之后所有) div ~ p {} $('div ~ p') 获取某节点后面所有同级DOM对象

其实后代选择器我们在进阶选择器里面已经有过使用,这里为什么要再提起呢?

因为它属于层次选择器,在高级选择器中,jQuery为这样的选择器都提供了一个相对应的方法。

  1. jQuery为后代选择器提供了一个等价的find()方法:

    1
    2
    $('#box p').css('color', 'red'); //后代选择器
    $('#box').find('p').css('color','red');//和后代选择器等价
  2. jQuery为子选择器提供了一个等价的children()方法

    1
    2
    $('#box > p').css('color','red');//子选择器,孙子失明
    $('#box').children('p').css('color','red');//和子选择器等价
  3. jQuery为next选择器提供了一个等价的next()方法:

    1
    2
    $('#box+p').css('color','red');//下一个同级节点
    $('#box').next('p').css('color','red');//next选择器等价
  4. jQuery为nextAll选择器提供了一个等价的方法nextAll():

    $('#box ~ p').css('color','red');//后面所有同级节点
    $('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价

需要注意的是:

  1. 层次选择器对节点的层次都是有要求的,比如子选择器,有子节点才可以被选择到,孙子节点和重孙子节点都无法选择到。next和nextAll选择器,必须是同一个层次的后一个和后N个,不在同一个层次就无法选取到了。
  2. find()children()next()nextAll()和这四个方法中,如果不传递参数,就相当于传递了“”,选择所有符合条件的元素,*建议尽量保持参数的传递

jQuery独有补充方法。CSS未含有

$('#box').prev('p').css('color','red');//同级上一个元素
$('#box').prevAll('p').css('color','red');//同级上面所有的元素

$('#box').prevUntil('p').css('color','red');//同级上非指定元素选定,遇到则停止
$('#box').nextUntil('p').css('color','red');//同级下非指定元素选定,遇到则停止

$('#box').siblings('p').css('color','red');//siblings()方法正好集成了prevAll()和nextAll()两个功能的效果,及上下相邻的所有元素进行选定:

扩展:

$('p', '#box');//jQuery会自动把这条语句转成$('#box').find('p'),这会导致一定的性能损失。

$('p', $('#parent'));//jQuery内部会也将这条语句转成$('#box').find('p')

这里,推荐使用jQuery提供的方法。使用“+”或“~”从字面上没有next和nextAll更加语义化,更加清晰,jQuery的方法更加丰富,提供了相对的prev和prevAll。
并且有时需要能够灵活的拆分和组合选择器。所以,如果jQuery提供了独立的方法来代替某些选择器的功能,推荐优先使用独立的方法。

(四)属性选择器

注意?应该是|,因为markdown表格解析的问题,所以用来替代

CSS 模式 jQuery模式 描述
a[title] $('a[title]') 获取具有这个属性的 DOM 对象
a[title=num1] $('a[title=num1]') 获取具有这个属性=这个属性值的DOM对象
a[title^=num] $('a[title^=num]') 获取具有这个属性且开头属性值匹配的DOM对象
a[title?=num] $('a[title?=num]') 获取具有这个属性且等于属性值或开头属性值匹配后面跟一个-号的DOM对象
a[title$=num] $('a[title$=num]') 获取具有这个属性且结尾属性值匹配的DOM对象
a[title!=num] $('a[title!=num]') 获取不具有这个属性或不等于该属性值的DOM对象
a[title~=num] $('a[title~=num]') 获取具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的DOM对象
a[title*=num] $('a[title*=num]') 获取具有这个属性且属性值含有一个指定字串的DOM对象
a[bbb][title=num1] $('a[bbb][title=num1]') 获取具有这个属性且属性值匹配的DOM对象

二. 过滤选择器

(一)基本过滤器

过滤器名 jQuery 语法 说明 返回
:first $('li:first') 选取第一个元素 单个
:last $('li:last') 选取最后一个元素 单个
:not(selector) $('li:not(.red)') 选取class不是red的li元素 集合
:even $('li:even') 选择索引(以下几个都是从0开始)是偶数的所有元素 集合
:odd $('li:odd') 选择索引是奇数的所有元素 集合
:eq(index) $('li:eq(2)') 选择索引等于index的元素(负数从后开始) 单个
:gt(index) $('li:gt(2)') 选择索引大于index的元素 集合
:lt(index) $('li.lt(2)') 选择索引小于index的元素 集合
:header $(':header') 选择标题元素,h1~h6 集合
:animated $(':animated') 选择正在执行动画的元素 集合
:focus $(':focus') 选择当前被焦点的元素 集合

注意::focus过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。

1
2
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素

jQuery为最常用的过滤器提供了专用的方法,如下:

1
2
3
4
$('li').eq(2).css('background','#ccc');//元素li的第三个元素,负数从后开始
$('li').first().css('background','#ccc');//元素li的第一个元素
$('li').last().css('background','#ccc');//元素li的最后一个元素
$('li').not('.red').css('background','#ccc');//元素li不含class为red的元素

(二)内容过滤器

内容过滤器的过滤规则主要是包含的子元素或文本内容上。

过滤器名 jQuery语法 说明
:contains(text) $(':contains("ycku.com")') 选取含”ycku.com”文本的元素
:empty $(':empty') 选取不包含子元素或空文本的元素
:has(selector) $(':has(.red)') 选取含有class是red的元素(在父元素调用)
:parent $(':parent') 选取含有子元素或文本的元素

jQuery 提供了一个 has()方法来提高:has 过滤器的性能:

1
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素

jQuery提供了一个名称和:parent相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。

1
2
3
$('li').parent().css('background','#ccc');//选择当前元素的父元素
$('li').parents().css('background','#ccc');//选择当前元素的父元素及祖先元素(追溯到html)
$('li').parentsUntil('html').css('background','#ccc');//选择当前元素遇到html父元素停止(会在body上加)

(三)可见性过滤器

可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

过滤器名 jQuery 语法 说明
:hidden $(':hidden') 选取所有不可见元素
:visible $(':visible') 选取所有可见元素

注意::hidden过滤器一般是包含的内容为:CSS样式为display:none、input表单类型为type="hidden"visibility:hidden的元素。

(四)子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

过滤器名 jQuery语法 说明
:first-child $('li:first-child') 获取每个父元素的第一个子元素
:last-child $('li:last-child') 获取每个父元素的最后一个子元素
:only-child $('li:only-child') 获取有且只有一个子元素的元素
:nth-child(odd/even/index)支持表达式,如2n等同even $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从 1 开始计算)

(五)其他方法

jQuery 在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用。

方法名 jQuery 语法 描述
is(s/o/e/f) $('li').is('.red')返回布尔值 传递选择器、DOM、jquery对象或是函数来匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,返回true
hasClass(class) $('li').eq(2).hasClass('red') 其实就是is("." + class),但只能传递class
slice(start, end) $('li').slice(0,2) 选择从start到end位置的元素,如果是负数,则从后开始
filter(s/o/e/f) $('li').filter('.red') 筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合。
end() $('div').find('p').end() 获取当前元素的前一个状态的元素(同级或父级)
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点,如果是iframe,则可以查找文本内容

is:

1
2
3
4
$('.red').is('li'); //选择器,检测class为是否为 red
$('.red').is($('li')); //jQuery 对象集合,同上
$('.red').is($('li').eq(2)); //jQuery 对象单个,同上
$('.red').is($('li').get(1)); //DOM 对象,同上

还可以进行各种自定义判断:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
<li>list <strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item 3</li>
</ul>
<script>
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
});
</script>

当用户点击的是第一个列表项中的单词"list"或第三个列表项中的任何单词时,被点击的列表项会被设置为红色背景。
不过,当用户点击第一个列表项中的item1或第二个列表项中的任何单词时,都不会有任何变化,这是为这上面的情况中,事件的目标分别是 <strong><span>

slice:

1
$('li').slice(0,2).css('color', 'red'); //前三个变成红色

注意:这个参数有多种传法和JavaScript中的slice方法是一样的比如:slice(2),从第三个开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定所有;slice(2,-2),前两个和末尾两个未选定。

filter:

1
2
3
4
5
6
$('li').filter('.red').css('background','#ccc');//选择li的class为red的元素
$('li').filter('.red,:first,:last').css('background','#ccc');//增加了首尾选择
//特殊要求函数返回
$('li').filter(function(){
return $(this).attr('class')=='red' && $(this).attr('title')=='列表3';
}).css('background', '#ccc');

此处注意$(this)的使用,这把this包装成了jQuery对象,以便使用jQuery的方法。

三. 表单选择器

(一)常规选择器

其实使用上面的选择器已经能对表单元素进行选取了,先来验证一下,来看看如何利用上面的方法来进行表单元素的选择。

1
2
3
4
5
//val()是jQuery用来获取表单元素文本内容的一个方法
$('input').val(); //元素名定位,默认获取第一个
$('input').eq(1).val(); //同上,获取第二个
$('input[type=password]').val();//选择type为password的字段
$('input[name=user]').val(); //选择 name 为 user 的字段

很显然,上面的这个方法都能选择到想要的元素,那么对于 id 和class基本一致,也可以结合属性选择器来精确的定位,在这里我们不在重复。
对于表单中的其他元素名比如:textarea、select 和 button 等,原理一样,不在重复。
但是这样是不是太过于复杂了呢?假如我们要同时选择input、textarea、select 和 button?继续看吧。

(二)表单选择器

虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求,而且也太过于繁琐。所以,jQuery为表单提供了专用的选择器。

方法名 描述
:input 选取所有 inputtextareaselectbutton元素
:text 选择所有单行文本框,即 type=text
:password 选择所有密码框,即 type=password
:radio 选择所有单选框,即 type=radio
:checkbox 选择所有复选框,即 type=checkbox
:submit 选取所有提交按钮,即 type=submit
:reset 选取所有重置按钮,即 type=reset
:image 选取所有图像按钮,即 type=image
:button 选择所有普通按钮,即 button 元素
:file 选择所有文件按钮,即 type=file
:hidden 选择所有不可见字段,即 type=hidden

注意:

  1. 由于这些选择器都是返回元素集合,如果想获取某一个指定的元素,最好结合一下属性选择器。比如:

    1
    $(':text[name=user]).size(); //获取单行文本框 name=user 的元素
  2. 在使用这些属性时最好界定父元素,比如直接$(":hidden").length这样是不正确的,因为它还会选择到head标签内的元素,所以length属性不会为0,建议使用这样的形式:$("form :hidden")

(三)表单过滤器

jQuery 提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。


方法名 描述
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素,单选和复选字段
:selected 选取所有被选中的元素,下拉列表


基础 DOM 和 和 CSS

一. 设置元素及内容

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候,我们就可以对这些元素进行 DOM 的操作。
那么,最常用的操作就是对元素内容的获取和修改。html()text()方法:

方法名 描述 区分
html() 获取元素中 HTML 内容 连同标签一起提取
html(value) 设置元素中 HTML 内容 清空原数据,设置html内容
text() 获取元素中文本内容 自动清理html标签
text(value) 设置元素中文本内容 自动转义html标签以文本形式呈现
val() 获取表单中的文本内容 value属性的值
val(value) 设置表单中的文本内容 设置value的值(有特殊用法)

注意:当我们使用html()text()设置元素里的内容时,会清空原来的数据。而我们期望能够追加数据的话,需要先获取原本的数据。

1
2
$('#box').html($('#box').html() + '<em>guowenfh.github.io</em>'); //追加数据
//当然它还支持使用函数来进行更复杂的追加

val()的特殊用法:
如果想设置多个选项的选定状态,比如下拉列表、单选复选框等等,可以通过数组传递操作。

1
$("input").val(["check1","check2", "radio1"]); //value 值是这些的将被选定

二. 元素属性操作




除了对元素内容进行设置和获取,通过jQuery也可以对元素本身的属性进行操作,包括获取属性的属性值、设置属性的属性值,并且可以删除掉属性。
attr()removeAttr()

方法名 描述
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value){}) 通过 fn 来设置设置某个元素 key属性

注意:

  1. jQuery中很多方法都可以使用 function() {}来返回出字符串,比如 html()text()val()和上一章刚学过的 is()filter()方法。
    这些方法里的function() {},可以不传参数。可以只传一个参数 index,表示当前元素的索引(从0开始)。也可以传递两个参数 indexvalue,第二个参数表示属性原本的值。
    (当然并不是所有方法都适合,有兴趣可以自己逐个尝试)。
  2. 删除指定的属性,这个方法就不可以使用匿名函数,传递indexvalue均无效。$('div').removeAttr('title'); //删除指定的属性
  3. 当然因为idclass也是元素的属性,自然也可以使用attr进行设置,但是建议不这样使用,因为会导致整个页面结构的混乱,有专门的属性对它们进行设置。

三. 元素样式操作

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。使用频率极高!

方法名 描述
css(name) 获取某个元素行内的 CSS 样式
css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式
css(name, value) 设置某个元素行内的 CSS 样式
css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式,键值对
addClass(class) 给某个元素添加一个 CSS 类
addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式
toggleClass(class1 class2 class3...) 同上
toggleClass(class, switch) 来回切换样式的时候设置切换频率
toggleClass(function () {}) 通过匿名函数设置切换的规则
toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率
toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数

理解:

在获取多个 CSS 样式时,获取到的是一个对象数组,如果用原生JS进行解析需要使用for in遍历。

1
2
3
4
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}

在jQuery显然不需要那么麻烦,因为它提供了一个遍历工具专门来处理这种对象数组,$.each()方法,这个方法可以轻松的遍历对象数组。

1
2
3
4
5
6
7
8
9
/**
* 遍历对象数组
* @param {String} index 索引,鍵,属性名
* @param {String} value 属性值,值(相当于arr[i])
*/

//遍历原生JS对象数组时,value为元素DOM。
$.each(box, function(index, value) {
alert(index+":"+value);//效果和上面的一样
});

如果想设置某个元素的 CSS 样式的值,但这个值需要计算我们可以传递一个匿名函数。

1
2
3
$('div').css('width', function (index, value) {
return (parseInt(value) - 50) + 'px';//局部操作,不影响全局,避免冲突。
});

在使用.toggleClass()使用时,可以使用传入匿名函数的方法,实现由默认到几个class之间的切换。例如:

1
2
3
4
5
6
7
8
9
10
11
12
//注意这里必须要先删除原有的样式,不然只是被覆盖了,而不是替换。
$('div').click(function() {
$(this).toggleClass(function() {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'blue';
} else {
$(this).removeClass('blue');
return 'red';
}
});
});

对于.toggleClass()传入匿名函数的方法,还可以可以传递 index索引、class类两个参数以及频率布尔值,可以得到当前的索引、class类名和频率布尔值。

四. CSS方法

(一)width()方法

方法名 描述
width() 获取某个元素的宽度(number)
width(value) 设置某个元素的宽度(无单位时,默认px)
width(function (index, width) {}) 通过匿名函数设置某个元素的宽度

虽然可以不加单位,但是建议加上,使代码更加清晰。
index 是索引,value 是原本值。

(二)height()方法

方法名 描述
height() 获取某个元素的高度
height(value) 设置某个元素的高度
height(function (index, height) {}) 通过匿名函数设置某个元素的高度

上述两个方法不包括内外边距和边框

(三)内外边距和边框尺寸方法

方法名 描述
innerWidth() 获取元素宽度,包含内边距 padding
innerHeight() 获取元素高度,包含内边距 padding
outerWidth() 获取元素宽度,包含边框 border 和内边距 padding
outerHeight() 获取元素高度,包含边框 border 和内边距 padding
outerWidth(ture) 同上,且包含外边距(注意里面的true)
outerHeight(true) 同上,且包含外边距

(四)元素偏移方法

方法名 描述
offset() 获取某个元素相对于视口的偏移位置(无论定位与否)
position() 获取某个元素相对于父元素的偏移位置
scrollTop() 获取垂直滚动条的位置
scrollTop(value) 设置垂直滚动条的位置
scrollLeft() 获取水平滚动条的值
scrollLeft(value) 设置水平滚动条的值

注意:
前两个方法,获取得到的是一个对象,如:{left:12,top:32},所以需要获取其中的一个值的时候,还需要进行选取,例如:$(div).offset.left。获取相对与视口的偏移。

在获取滚动条的值时需要注意的是,对象为window且需要用$包装转化成jQ对象

1
2
$(window).scrollTop(); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

DOM 节点操作

DOM中有一个非常重要的功能,就是节点模型,也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建、插入、替换、克隆、删除等等一些列的元素操作。

一. 创建节点

为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。
在jQuery中创建节点异常简单。

1
2
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部

二. 插入节点

在创建节点的过程中,其实我们已经演示怎么通过.append()方法来插入一个节点。但仅仅这个功能远远不能满足我们的需求,除了这个方法,jQuery提供了其他几个方法来插入节点。

内部插入节点方法

方法名 描述
append(content) 向指定元素内部后面插入节点content
append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点
appendTo(content) 将指定元素移入到指定元素content 内部后面
prepend(content) 向指定元素content 内部的前面插入节点
prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面

需要注意的是appendTo(content)prependTo(content)在使用方法上与其他两个略微有些不同,$("<em>new</em>").appendTo("div");,它代表的是创建的节点传入div内部。

匿名函数方式:

1
2
3
4
5
6
$('div').append(function (index, html) {
//使用匿名函数插入节点index是获取到的div的索引,html 是原节点
if(index==1){
return '<strong>节点</strong>';//在获取到的第二个div内部添加节点
}
});

外部插入节点方法

方法名 描述
after(content) 向指定元素的外部后面插入节点 content
after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
before(content) 向指定元素的外部前面插入节点 content
before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点
insertAfter(content) 将指定节点移到指定元素 content 外部的后面
insertBefore(content) 将指定节点移到指定元素 content 外部的前面

与上面相同insertAfter(content)insertBefore(content)也与其它两个是相反的。

三.包裹节点

jQuery 提供了一系列方法用于包裹节点,那包裹节点是什么意思呢?其实就是使用字符串代码将指定元素的代码包含着的意思。

方法名 描述
wrap(html) 向指定元素包裹一层 html 代码
wrap(element) 向指定元素包裹一层 DOM 对象节点
wrap(function (index) {}) 使用匿名函数向指定元素包裹一层自定义内容
unwrap() 移除一层指定元素包裹的内容(多层需移除多次)
wrapAll(html) 用 html 将所有元素包裹到一起
wrapAll(element) 用 DOM 对象将所有元素包裹在一起
wrapInner(html) 向指定元素的子内容包裹一层 html
wrapInner(element) 向指定元素的子内容包裹一层 DOM 对象节点
wrapInner(function (index) {}) 用匿名函数向指定元素的子内容包裹一层

wrap的多种用法:

1
2
3
4
5
6
7
8
$('div').wrap('<strong class="ing"></strong>'); //在 div 外层包裹一层 strong
$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
$('div').wrap('<strong><em></em></strong>'); //包裹多个元素
$('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
$('div').wrap(document.createElement('strong')); //临时的原生 DOM
$('div').wrap(function (index) { //匿名函数
return '<strong></strong>';
});

注意: .wrap().wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。

四. 节点操作

方法名 描述 参数解析
$('div').clone(true); 复制一个节点 true时表示同时复制事件行为,空或false都表示只复制元素及内容
$('div').remove("#box"); 删除一个id=box的div元素 无参数时,表示直接删除元素
$('div').detach(); 保留事件行为的删除 同上
$('div').empty(); 清空节点里的内容 无参数
$(selector).replaceWith(content); 将 $(selector) 替换成 content 元素 HTML字符串,DOM元素,或者jQuery对象
$(content).replaceAll(selector); 同上 参数selector为被替换的元素,content为替换的内容。

注意:

  1. .remove().detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。
  2. 节点被替换后,所包含的事件行为就全部消失了。
  3. 注意replaceWith()replaceAll()方法替换的操作的内容和被替换元素所在的位置不同

jQuery:详解jQuery中的事件

上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

3、合成事件

jQuery有两个合成事件——hover方法和toggle方法,同ready方法一样,这些都是jQuery自定义的方法。

hover方法:hover方法的语法结构为:

hover方法用于模拟鼠标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(enter);当鼠标移出这个元素时,会触发指定的第二个函数(leave)。

上篇文章中有一个例子是这样写的:

$(function{
    $("#container h4.head").bind("mouseover", function{
      $(this).next.show;    //获取并显示“内容”元素
    }).bind("mouseout", function{
      $(this).next.hide;
    });
  })

可以将这个例子改写成以下的jQuery代码:

$(function{
    $("#container h4.head").hover(function{
      $(this).next.show;    //获取并显示“内容”元素
    }, function{
      $(this).next.hide;
    });
  })

上述两种写法的代码的运行效果是一致的。

*这里要注意的一点是,jQuery的hover方法准确来说是替代 jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover")和 bind("mouseout"),那么这两对绑定函数,其实是两对事件是什么区别呢?解析如下:

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

简单的说,mouseover和mouseout会引起触发的区域更大,mouseenter和mouseleave只能针对绑定的元素来触发。

toggle方法:toggle方法的语法结构为:

toggle方法用于模拟鼠标连续单击事件。每次单击元素,依次触发指定的相应的函数,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示的效果,那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示,然后进行相反的操作,显然就麻烦的多。

$(function{
    $("#container h4.head").bind("click", function{
       var $content = $(this).next;
if($content.is(":visible"))
$content.hide;
else
$content.show;
} })

但是这种方式显然麻烦的多,不是最合适的。再看这个需求,刚好就很适合使用toggle方法。使用toggle方法改写上面的例子如下:

$(function{
  $("#container h4.head").toggle(function{
    $(this).next.show;
  },  function{
    $(this).next.hide
  })
})

4、事件冒泡:在页面上可以有多个事件,也可以多个元素相应同一个事件,就像上面介绍的那两对事件一样。再比如,假设网页上有两个元素,一个元素A嵌套在另一个元素B中,并且都被绑定了click事件,同时body元素上也绑定了click事件。那么在单击子元素A的时候,会依次触发三个click事件;单击元素B的时候,会依次触发两个click事件。

就上面的简单描述,已经可以看出问题所在了,那就是会出现意想不到的click事件,所以需要对事件作用范围进行限制。

jQuery有三种办法可以解决事件冒泡导致的问题。

事件对象:也就是之前介绍过的使用bind方法,例如:

$("element").bind("click", function(event){  //event:事件对象
  //code...
})

上面代码中,当单击element元素时,事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。

停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation方法来停止事件冒泡。

$("element").bind("click", function(event){  //event:事件对象
  //code...
//code...
event.stopPropagation; //停止事件冒泡 })

阻止默认行为:与上面的stopPropagation方法相似,jQuery也提供了preventDefault方法来阻止元素的默认行为。

5、移除事件:在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。

所以,移除事件就涉及两种情况下的移出,一种是移除之前注册的所有事件,而是移除其中的一个事件。以一个按钮为例:假设网页中有一个id为btn的按钮,其上绑定了几个click事件。那么:

首先添加一个移除事件的按钮:

<button id="delAll">移除所有事件</button>

然后可以为该按钮绑定若干的click事件,使用链式操作就可以很简单的为其绑定几个click事件。

最后就是编写用于移除所有click事件的处理函数了。jQuery代码如下:

$("#delAll").click(function{
  $('#btn').unbind("click");
})

因为元素绑定的都是click事件,所以上面不写“click”参数也可以达到相同的效果。

因此可以看出unbind方法的语法结构:

其中,第一个参数是事件类型,第二个参数是将要移除的函数。显然移除元素上的所有事件是使用没有第二个参数的unbind方法。

如果没有第一个参数,则移除所有绑定的事件;否则只删除该类型的事件。

如果传入了第二个参数,则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。


附:Jquery动画控制函数

方法描述
animate()对被选元素应用"自定义"的动画
clearQueue()对被选元素移除所有排队函数(仍未运行的)
delay()对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()移除下一个排队函数,然后执行函数
fadeIn()逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo()把被选元素逐渐改变至给定的不透明度
fadeToggle()在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()对被选元素停止、移除并完成所有排队动画
hide()隐藏被选元素
queue()显示被选元素的排队函数
show()显示被选元素
slideDown()通过调整高度来滑动显示被选元素
slideToggle()slideUp() 和 slideDown() 方法之间的切换
slideUp()通过调整高度来滑动隐藏被选元素
stop()停止被选元素上当前正在运行的动画
toggle()hide() 和 show() 方法之间的切换


  评论这张
 
阅读(225)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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