Fox框架-Document操作篇
fox.$(selector, [context]) ⇒ collection
fox.$(<fox collection>) ⇒ same collection
fox.$(<DOM nodes>) ⇒ collection
fox.$(htmlString) ⇒ collection
fox.$(htmlString, attributes) ⇒ collection v1.0+
fox.$(function(fox.$){ ... })
通过执行css选择器,包装dom节点,或者通过一个html字符串创建多个元素 来创建一个fox集合对象。
fox集合是一个类似数组的对象,它具有链式方法来操作它指向的DOM节点,除了fox.$(fox)对象上的直接方法外(如fox.$.extend),文档对象中的所有方法都是集合方法。
如果选择器中存在content参数(css选择器,dom,或者Fox.$集合对象),那么只在所给的节点背景下进行css选择器;这个功能和使用fox.$(context).find(selector)是一样的。
当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素,使用<div> 或 <div/>形式。
当一个函数附加在 DOMContentLoaded 事件的处理流程中。如果页面已经加载完毕,这个方法将会立即被执行。
fox.$('div') //=> 所有页面中得div元素
fox.$('#foo') //=> ID 为 "foo" 的元素
// 创建元素:
fox.$("<p>Hello</p>") //=> 新的p元素
// 创建带有属性的元素:
fox.$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
//=> <p id=greeting
style="color:darkblue">Hello</p>
// 当页面ready的时候,执行回调:
fox.$(function(fox.$){
alert('Ready
to fox!')
})
不支持jQuery
CSS 扩展, 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器,而且可以被丢弃,与现有的代码或插件的兼容执行。
Fxo.fox.$.camelCase(string) ⇒ string
将一组字符串变成“骆驼”命名法的新字符串,如果该字符已经是“骆驼”命名法,则不变化。
fox.$.camelCase('hello-there') //=>
"helloThere"
fox.$.camelCase('helloThere') //=> "helloThere"
fox.$.contains(parent, node) ⇒ boolean
检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false。
fox.$.each(collection,
function(index, item){ ... }) ⇒ collection
遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。
fox.$.each(['a', 'b', 'c'], function(index,
item){
console.log('item
%d is: %s', index, item)
})
var hash = { name: js', size: 'micro' }
fox.$.each(hash,
function(key, value){
console.log('%s:
%s', key, value)
})
fox.$.extend(target, [source,
[source2, ...]]) ⇒ target
fox.$.extend(true, target,
[source, ...]) ⇒ target
通过源对象扩展目标对象的属性,源对象属性将覆盖目标对象属性。
默认情况下为,复制为浅拷贝(浅复制)。如果第一个参数为true表示深度拷贝(深度复制)。
var target = { one: 'patridge' },
source = { two: 'turtle doves' }
fox.$.extend(target,
source)
//=> { one: 'patridge',
// two:
'turtle doves' }
fox.$.fn是一个对象,它拥有fox.$对象上所有可用的方法,如 addClass(), attr(),和其它方法。在这个对象添加一个方法,所有的fox.$对象上都能用到该方法。
这里有一个实现 fox.$的 empty() 方法的例子:
fox.$.fn.empty
= function(){
return
this.each(function(){
this.innerHTML = '' })
}
fox.$.grep(items,
function(item){ ... }) ⇒ array
获取一个新数组,新数组只包含回调函数中返回 ture 的数组项。
fox.$.grep([1,2,3],function(item){
return
item > 1
});//=>[2,3]
fox.$.inArray(element, array,
[fromIndex]) ⇒ number
返回数组中指定元素的索引值(以0为基数),如果没有找到该元素则返回-1。
注:[fromIndex] 参数可选,表示从哪个索引值开始向后查找。
fox.$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1
fox.$.inArray("abc",["bcd","abc","edf","aaa"],1);//=>1
fox.$.inArray("abc",["bcd","abc","edf","aaa"],2);//=>-1
fox.$.isArray(object) ⇒ boolean
如果object是array,则返回ture。
fox.$.isFunction(object) ⇒ boolean
如果object是function,则返回ture。
fox.$.isPlainObject(object) ⇒ boolean
测试对象是否是“纯粹”的对象,这个对象是通过 对象常量("{}") 或者 new
Object 创建的,如果是,则返回true。
fox.$.isPlainObject({})
// => true
fox.$.isPlainObject(new Object)
// => true
fox.$.isPlainObject(new Date) //
=> false
fox.$.isPlainObject(window) // => false
fox.$.isWindow(object) ⇒ boolean
如果object参数是否为一个window对象,那么返回true。这在处理iframe时非常有用,因为每个iframe都有它们自己的window对象,使用常规方法obj ===
window校验这些objects的时候会失败。
fox.$.map(collection,
function(item, index){ ... }) ⇒ collection
通过遍历集合中的元素,返回通过迭代函数的全部结果,(注:一个新数组)null 和 undefined 将被过滤掉。
fox.$.map([1,2,3,4,5],function(item,index){
if(item>1){return
item*item;}
});
// =>[4, 9, 16, 25]
fox.$.map({"yao":1,"tai":2,"yang":3},function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9]
fox.$.parseJSON(string) ⇒ object
原生JSON.parse方法的别名。(注:接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。)
fox.$.trim(string) ⇒ string
删除字符串首尾的空白符。类似String.prototype.trim()。
fox.$.type(object) ⇒ string
获取JavaScript 对象的类型。可能的类型有: null undefined boolean number string function array dateregexp object error。
对于其它对象,它只是简单报告为“object”,如果你想知道一个对象是否是一个javascript普通对象,使用isPlainObject。
add(selector, [context]) ⇒ self
添加元素到当前匹配的元素集合中。如果给定content参数,将只在content元素中进行查找,否则在整个document中查找。
<ul>
<li>list item
1</li>
<li>list item
2</li>
<li>list item
3</li>
</ul>
<p>a paragraph</p>
<script
type="text/javascript">
fox.$('li').add('p').css('background-color',
'red');
</script>
addClass(name) ⇒ self
addClass(function(index,
oldClassName){ ... }) ⇒ self
为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。
after(content) ⇒ self
在每个匹配的元素后插入内容(注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。
fox.$('form label').after('<p>A note below
the label</p>')
append(content) ⇒ self
在每个匹配的元素末尾插入内容(注:内部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。
fox.$('ul').append('<li>new list
item</li>')
appendTo(target) ⇒ self
将匹配的元素插入到目标元素的末尾(注:内部插入)。这个有点像 append,但是插入的目标与其相反。
fox.$('<li>new list item</li>').appendTo('ul')
attr(name) ⇒ string
attr(name, value) ⇒ self
attr(name, function(index,
oldValue){ ... }) ⇒ self
attr({ name: value, name2:
value2, ... }) ⇒ self
读取或设置dom的属性。如果没有给定value参数,则读取对象集合中第一个元素的属性值。当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值对的方式进行设置。
要读取DOM的属性如 checked和selected, 使用 prop。
var form = fox.$('form')
form.attr('action')
//=> 读取值
form.attr('action', '/create') //=> 设置值
form.attr('action', null) //=> 移除属性
// 多个属性:
form.attr({
action: '/create',
method: 'post'
})
before(content) ⇒ self
在匹配每个元素的前面插入内容(注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。
fox.$('table').before('<p>See the
following table:</p>')
children([selector]) ⇒ collection
获得每个匹配元素集合元素的直接子元素,如果给定selector,那么返回的结果中只包含符合css选择器的元素。
fox.$('ol').children('*:nth-child(2n)')
//=> every other list item from every ordered list
clone() ⇒ collection
通过深度克隆来复制集合中的所有元素。
此方法不会将数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。
closest(selector, [context]) ⇒ collection
closest(collection) ⇒ collection v1.0+
closest(element) ⇒ collection v1.0+
从元素本身开始,逐级向上级元素匹配,并返回最先匹配selector的元素。如果给定context节点参数,那么只匹配该节点的后代元素。这个方法与 parents(selector)有点相像,但它只返回最先匹配的祖先元素。
如果参数是一个Fox.$对象集合或者一个元素,结果必须匹配给定的元素而不是选择器。
var input = fox.$('input[type=text]')
input.closest('form')
concat(nodes, [node2, ...]) ⇒ self
添加元素到一个Fox.$对象集合形成一个新数组。如果参数是一个数组,那么这个数组中的元素将会合并到Fox.$对象集合中。
这是一个Fox.$提供的方法,不是jquey的API 。
contents() ⇒ collection
获得每个匹配元素集合元素的子元素,包括文字和注释节点。(注:.contents()和.children()方法类似,只不过前者包括文本节点以及jQuery对象中产生的HTML元素。)
css(property) ⇒ value
css([property1, property2,
...]) ⇒ object v1.1+
css(property, value) ⇒ self
css({ property: value,
property2: value2, ... }) ⇒ self
读取或设置DOM元素的css属性。当value参数不存在的时候,返回对象集合中第一个元素的css属性。当value参数存在时,设置对象集合中每一个元素的对应css属性。
多个属性可以通过传递一个属性名组成的数组一次性获取。多个属性可以利用对象键值对的方式进行设置。
当value为空(空字符串,null 或 undefined),那个css属性将会被移出。当value参数为一个无单位的数字,如果该css属性需要单位,“px”将会自动添加到该属性上。
var elem = fox.$('h1')
elem.css('background-color')
// read property
elem.css('background-color', '#369') // set
property
elem.css('background-color', '') // remove property
// set multiple properties:
elem.css({
backgroundColor: '#8EE', fontSize:
28 })
// read multiple properties:
elem.css(['backgroundColor', 'fontSize'])['fontSize']
data(name) ⇒ value
data(name, value) ⇒ self
读取或写入dom的 data-* 属性。行为有点像 attr ,但是属性名称前面加上 data-。
当读取属性值时,会有下列转换:v1.0+
Fox.$ 基本实现`data()`只能存储字符串。如果你要存储任意对象,请引入可选的“data”模块到你构建的Fox.$中。
each(function(index, item){
... }) ⇒ self
遍历一个对象集合每个元素。在迭代函数中,this关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 false,遍历结束。
fox.$('form input').each(function(index){
console.log('input
%d is: %o', index, this)
})
empty() ⇒ self
清空对象集合中每个元素的DOM内容。
eq(index) ⇒ collection
从当前对象集合中获取给定索引值(注:以0为基数)的元素。
fox.$('li').eq(0) //=>
only the first list item
fox.$('li').eq(-1) //=> only
the last list item
filter(selector) ⇒ collection
filter(function(index){ ... })
⇒ collection v1.0+
过滤对象集合,返回对象集合中满足css选择器的项。如果参数为一个函数,函数返回有实际值得时候,元素才会被返回。在函数中, this 关键字指向当前的元素。
与此相反的功能,查看not.
find(selector) ⇒ collection
find(collection) ⇒ collection v1.0+
find(element) ⇒ collection v1.0+
在当对象前集合内查找符合CSS选择器的每个元素的后代元素。
如果给定Fox.$对象集合或者元素,过滤它们,只有当它们在当前Fox.$集合对象中时,才回被返回。
var form = fox.$('#myform')
form.find('input, select')
first() ⇒ collection
获取当前对象集合中的第一个元素。
fox.$('form').first()
forEach(function(item, index,
array){ ... }, [context])
遍历对象集合中每个元素,有点类似 each,但是遍历函数的参数不一样,当函数返回 false 的时候,遍历不会停止。
这是一个Fox.$提供的方法,不是jquery的API。
get() ⇒ array
get(index) ⇒ DOM node
从当前对象集合中获取所有元素或单个元素。当index参数不存在的时,以普通数组的方式返回所有的元素。当指定index时,只返回该置的元素。这点与eq不同,该方法返回的是DOM节点,不是Fox.$对象集合。
var elements = fox.$('h2')
elements.get() //=>
get all headings as an array
elements.get(0)
//=> get first heading node
has(selector) ⇒ collection
has(node) ⇒ collection
判断当前对象集合的子元素是否有符合选择器的元素,或者是否包含指定的DOM节点,如果有,则返回新的对象集合,该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。
fox.$('ol > li').has('a[href]')
//=> get only LI elements that contain links
hasClass(name) ⇒ boolean
检查对象集合中是否有元素含有指定的class。
<ul>
<li>list item
1</li>
<li
class="yaotaiyang">list item 2</li>
<li>list item
3</li>
</ul>
<p>a paragraph</p>
<script
type="text/javascript">
fox.$("li").hasClass("yaotaiyang");
//=> true
</script>
height() ⇒ number
height(value) ⇒ self
height(function(index,
oldHeight){ ... }) ⇒ self
获取对象集合中第一个元素的高度;或者设置对象集合中所有元素的高度。
fox.$('#foo').height()
// => 123
fox.$(window).height() //
=> 838 (viewport height)
fox.$(document).height() //
=> 22302
hide() ⇒ self
Hide elements in this collection by setting their display CSS property to none.
通过设置css的属性display 为 none来将对象集合中的元素隐藏。
html() ⇒ string
html(content) ⇒ self
html(function(index, oldHtml){
... }) ⇒ self
获取或设置对象集合中元素的HTML内容。当没有给定content参数时,返回对象集合中第一个元素的innerHtml。当给定content参数时,用其替换对象集合中每个元素的内容。content可以是append中描述的所有类型。
// autolink everything that looks like a Twitter username
fox.$('.comment p').html(function(idx,
oldHtml){
return
oldHtml.replace(/(^|\W)@(\w{1,15})/g,
'fox.$1@<a
href="http://twitter.com/fox.$2">fox.$2</a>')
})
index([element]) ⇒ number
获取一个元素的索引值(注:从0开始计数)。当elemen参数没有给出时,返回当前元素在兄弟节点中的位置。当element参数给出时,返回它在当前对象集合中的位置。如果没有找到该元素,则返回-1。
fox.$('li:nth-child(2)').index() //=> 1
indexOf(element, [fromIndex]) ⇒ number
Get the position of an element in the current collection.
If fromIndex number is given, search only from that position onwards. Returns
the 0-based position when found and -1 if not found. Use of index is
recommended over this method.
在当前对象集合中获取一个元素的索引值(注:从0开始计数)。如果给定formindex参数,从该位置开始往后查找,返回基于0的索引值,如果没找到,则返回-1。index 方法是基于这个方法实现的。
这是一个Fox.$的方法,不是jquer的api。
insertAfter(target) ⇒ self
将集合中的元素插入到指定的目标元素后面(注:外部插入)。这个有点像 after,但是使用方式相反。
fox.$('<p>Emphasis mine.</p>').insertAfter('blockquote')
insertBefore(target) ⇒ self
将集合中的元素插入到指定的目标元素前面(注:外部插入)。这个有点像 before,但是使用方式相反。
fox.$('<p>See the following table:</p>').insertBefore('table')
is(selector) ⇒ boolean
判断当前元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似: :visible包含在可选的“selector”模块中。
jQuery CSS extensions 不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。
last() ⇒ collection
获取对象集合中最后一个元素。
fox.$('li').last()
map(function(index, item){ ...
}) ⇒ collection
遍历对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中this关键之指向当前循环的项(遍历函数中的第二个参数)。
遍历中返回 null和undefined,遍历将结束。
// get text contents of all elements in collection
elements.map(function(){ return
fox.$(this).text() }).get().join(', ')
next() ⇒ collection
next(selector) ⇒ collection v1.0+
Get the next sibling?Coptionally filtered by selector?Cof
each element in the collection.
获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。
fox.$('dl dt').next()
//=> the DD elements
not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ ... }) ⇒ collection
过滤当前对象集合,获取一个新的对象集合,它里面的元素不能匹配css选择器。如果另一个参数为Fox.$对象集合,那么返回的新Fox.$对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素,函数的 this 关键字指向当前循环元素。
与它相反的功能,查看 filter.
offset() ⇒ object
offset(coordinates) ⇒ self v1.0+
offset(function(index,
oldOffset){ ... }) ⇒ self v1.0+
获得当前元素相对于document的位置。返回一个对象含有: top, left, width和height
当给定一个含有left和top属性对象时,使用这些值来对集合中每一个元素进行相对于document的定位。
offsetParent() ⇒ collection
找到第一个定位过的祖先元素,意味着它的css中的position 属性值为“relative”,
“absolute” or “fixed”
parent([selector]) ⇒ collection
获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。
parents([selector]) ⇒ collection
获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。
如果想获取直接父级元素,使用 parent。如果只想获取到第一个符合css选择器的元素,使用closest。
fox.$('h1').parents()
//=> [<div#container>,
<body>, <html>]
pluck(property) ⇒ array
获取对象集合中每一个元素的属性值。返回值为 null或undefined值得过滤掉。
fox.$('body > *').pluck('nodeName') // => ["DIV", "SCRIPT"]
// implementation of Fox.$'s `next` method
fox.$.fn.next
= function(){
return
fox.$(this.pluck('nextElementSibling'))
}
这是一个Fox.$的方法,不是jquery的api
position() ⇒ object
获取对象集合中第一个元素的位置。相对于 offsetParent。当绝对定位的一个元素靠近另一个元素的时候,这个方法是有用的。
Returns an object with properties: top, left.
var pos = element.position()
// position a tooltip relative to the element
fox.$('#tooltip').css({
position: 'absolute',
top: pos.top - 30,
left: pos.left
})
prepend(content) ⇒ self
将参数内容插入到每个匹配元素的前面(注:元素内部插入)。插入d的元素可以试html字符串片段,一个dom节点,或者一个节点的数组。
fox.$('ul').prepend('<li>first list
item</li>')
prependTo(target) ⇒ self
将所有元素插入到目标前面(愚人码头注:元素内部插入)。这有点像prepend,但是是相反的方式。
fox.$('<li>first list item</li>').prependTo('ul')
prev() ⇒ collection
prev(selector) ⇒ collection v1.0+
获取对象集合中每一个元素的前一个兄弟节点,通过选择器来进行过滤。
prop(name) ⇒ value
prop(name, value) ⇒ self
prop(name, function(index,
oldValue){ ... }) ⇒ self
读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr,因为这些属性值会因为用户的交互发生改变,如checked 和 selected。
简写或小写名称,比如for, class, readonly及类似的属性,将被映射到实际的属性上,比如htmlFor, className,readOnly, 等等。
push(element, [element2, ...])
⇒ self
Add elements to the end of the current collection.
添加元素到当前对象集合的最后。
这是一个fox.$的方法,不是jquery的api
ready(function($){ ... }) ⇒ self
添加一个事件侦听器,当页面DOM加载完毕
“DOMContentLoaded” 事件触发时触发。建议使用 fox.$()来代替这种用法。
reduce(function(memo, item,
index, array){ ... }, [initial]) ⇒ value
与 Array.reduce有相同的用法,遍历当前对象集合。memo是函数上次的返回值。迭代进行遍历。
这是一个fox.$的方法,不是jquery的api
remove() ⇒ self
从其父节点中删除当前集合中的元素,有效的从dom中移除。
removeAttr(name) ⇒ self
移除当前对象集合中所有元素的指定属性。
removeClass([name]) ⇒ self
removeClass(function(index,
oldClassName){ ... }) ⇒ self
移除当前对象集合中所有元素的指定class。如果没有指定name参数,将移出所有的class。多个class参数名称可以利用空格分隔。下例移除了两个class。
<input class="taiyang
yueliang" id="check1" type="checkbox"
checked="checked">
<input class="yaotaiyang" id="check2"
type="checkbox">
<script
type="text/javascript">
fox.$("#check1").removeClass("taiyang
yueliang")
//=>[<input class id="check1"
type="checkbox" checked="checked">]
</script>
replaceWith(content) ⇒ self
用给定的内容替换所有匹配的元素。(包含元素本身)。content参数可以为 before中描述的类型。
scrollLeft() ⇒ number
scrollLeft(value) ⇒ self
获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。
scrollTop() ⇒ number
scrollTop(value) ⇒ self v1.1+
获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。
show() ⇒ self
恢复对象集合中每个元素默认的“display”值。如果你用 hide将元素隐藏,用该属性可以将其显示。相当于去掉了display:none。
siblings([selector]) ⇒ collection
获取对象集合中所有元素的兄弟节点。如果给定CSS选择器参数,过滤出符合选择器的元素。
size() ⇒ number
获取对象集合中元素的数量。
slice(start, [end]) ⇒ array
提取这个数组array的子集,从start开始,如果给定end,提取从从start开始到end结束的元素,但是不包含end位置的元素。
text() ⇒ string
text(content) ⇒ self
text(function(index, oldText){
... }) ⇒ self v1.1.4+
获取或者设置所有对象集合中元素的文本内容。当没有给定content参数时,返回当前对象集合中第一个元素的文本内容(包含子节点中的文本内容)。当给定content参数时,使用它替换对象集合中所有元素的文本内容。它有待点似html,与它不同的是它不能用来获取或设置 HTML。
toggle([setting]) ⇒ self
显示或隐藏匹配元素。如果 setting为true,相当于show 法。如果setting为false。相当于 hide方法。
var input = fox.$('input[type=text]')
fox.$('#too_long').toggle(input.val().length > 140)
toggleClass(names, [setting]) ⇒ self
toggleClass(function(index, oldClassNames){
... }, [setting]) ⇒ self
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它,如果不存在,就添加它。如果 setting的值为真,这个功能类似于 addClass,如果为假,这个功能类似与 removeClass。
unwrap() ⇒ self
移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。 基本上,这种方法删除上一的祖先元素,同时保持DOM中的当前元素。
fox.$(document.body).append('<div
id=wrapper><p>Content</p></div>')
fox.$('#wrapper p').unwrap().parents()
//=> [<body>, <html>]
val() ⇒ string
val(value) ⇒ self
val(function(index, oldValue){
... }) ⇒ self
获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。如果是<select
multiple>标签,则返回一个数组。当给定value参数,那么将设置所有元素的值。
width() ⇒ number
width(value) ⇒ self
width(function(index,
oldWidth){ ... }) ⇒ self
获取对象集合中第一个元素的宽;或者设置对象集合中所有元素的宽。
fox.$('#foo').width()
// => 123
fox.$(window).width() //
=> 768 (viewport width)
fox.$(document).width() //
=> 768
wrap(structure) ⇒ self
wrap(function(index){ ... }) ⇒ self v1.0+
在每个匹配的元素外层包上一个html元素。structure参数可以是一个单独的元素或者一些嵌套的元素。也可以是一个html字符串片段或者dom节点。还可以是一个生成用来包元素的回调函数,这个函数返回前两种类型的包裹片段。
需要提醒的是:该方法对于dom中的节点有着很好的支持。如果将wrap() 用在一个新的元素上,然后再将结果插入到document中,此时该方法无效。
// wrap each button in a separate span:
fox.$('.buttons a').wrap('<span>')
// wrap each code block in a div and pre:
fox.$('code').wrap('<div
class=highlight><pre /></div>')
// wrap all form inputs in a span with classname
// corresponding to input type:
fox.$('input').wrap(function(index){
return
'<span class=' + this.type
+ 'field />'
})
//=> <span class=textfield><input type=text
/></span>,
// <span
class=searchfield><input type=search /></span>
// WARNING: will not work as expected!
fox.$('<em>broken</em>').wrap('<li>').appendTo(document.body)
// do this instead:
fox.$('<em>better</em>').appendTo(document.body).wrap('<li>')
wrapAll(structure) ⇒ self
在所有匹配元素外面包一个单独的结构。结构可以是单个元素或 几个嵌套的元素,并且可以通过在作为HTML字符串或DOM节点。
// wrap all buttons in a single div:
fox.$('a.button').wrapAll('<div id=buttons
/>')
wrapInner(structure) ⇒ self
wrapInner(function(index){ ...
}) ⇒ self v1.0+
将每个元素中的内容包裹在一个单独的结构中。结构可以是单个元件或多个嵌套元件,并且可以通过在作为HTML字符串或DOM节点,或者是一个生成用来包元素的回调函数,这个函数返回前两种类型的包裹片段。
// wrap the contents of each navigation link in a span:
fox.$('nav a').wrapInner('<span>')
// wrap the contents of each list item in a paragraph and emphasis:
fox.$('ol li').wrapInner('<p><em
/></p>')
on(type, [selector], function(e){ ... })
⇒ self
添加事件处理程序到对象集合中得元素上
事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(愚人码头注:this指向触发事件的元素)。 当一个事件处理程序返回false
,preventDefault()
和 stopPropagation()
被当前事件调用的情况下, 将防止默认浏览器操作,如链接。
如果false
在回调函数的位置上作为参数传递给这个方法, 它相当于传递一个函数,这个函数直接返回false
。(愚人码头注:即将 false
当作 function(e){
... }
的参数,作为 function(){
return false; }
的简写形式,例如: fox.$("a.disabled").on("click",
false);
这相当于fox.$("a.disabled").on("click",
function(){ return false; } );
)
varelem
=
$('#content')
// observe all clicks inside #content:
elem.on('click',function(e){
...
})
// observe clicks inside navigation links in #content
elem.on('click','nav a',
function(e){
...
})
// all clicks inside links in the document
$(document).on('click','a',
function(e){
...
})
off(type, [selector], function(e){ ... })
⇒ self移除通过 on 添加的事件.移除一个特定的事件处理程序, 必须通过用on()
添加的那个相同的函数。
fox框架提供了快捷注册事件的接口,如下表所示
分类 |
接口 |
默认监听 |
描述 |
点击 |
click |
true |
单击屏幕 |
tap |
true |
单击屏幕 |
|
doubletap |
false |
双击屏幕 |
|
长按 |
longtap |
false |
长按屏幕 |
hold |
false |
按住屏幕 |
|
release |
false |
离开屏幕 |
|
滑动 |
swipeleft |
false |
向左滑动 |
swiperight |
false |
向右滑动 |
|
swipeup |
false |
向上滑动 |
|
swipedown |
false |
向下滑动 |
|
拖动 |
dragstart |
false |
开始拖动 |
drag |
true |
拖动中 |
|
dragend |
false |
拖动结束 |
例如:
// observe content element and add click event:
$('#content').click(function(e){...
})
// observe content element and add tap event
$('#content').tap(function(e){...
})
由于vue需要对document进行重新编译,所以会导致fox.$注册的函数失效,为避免这个问题必
须在vue编译后才进行方法注册。vue每个生命周期都有钩子,因此可以在适合的钩子函数中再注册,如在mounted
函数中注册dom函数
例如:
var vm=new Vue({
el:"#page_device_camera",
data:{
}
methods:{
},
//在mounted函数中注册dom函数,因为vue会重新编译html模板
mounted:function(){
//回退
fox.$("#back").click(function(){
var param={
id:"device"
}
fox.router.to("index",param);
});
}
});