Fox框架-Document操作篇

1 核心方法

fox.$()

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”模块有限提供了支持几个最常用的伪选择器,而且可以被丢弃,与现有的代码或插件的兼容执行。

 

fox.$.camelCase 

Fxo.fox.$.camelCase(string)    string

将一组字符串变成骆驼命名法的新字符串,如果该字符已经是骆驼命名法,则不变化。

fox.$.camelCase('hello-there') //=> "helloThere"

fox.$.camelCase('helloThere')  //=> "helloThere"

fox.$.contains

fox.$.contains(parent, node)    boolean

检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false

fox.$.each

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

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.$.fn是一个对象,它拥有fox.$对象上所有可用的方法,如 addClass() attr(),和其它方法。在这个对象添加一个方法,所有的fox.$对象上都能用到该方法。

这里有一个实现 fox.$ empty() 方法的例子:

fox.$.fn.empty = function(){

  return this.each(function(){ this.innerHTML = '' })

}

fox.$.grep

fox.$.grep(items, function(item){ ... })    array

获取一个新数组,新数组只包含回调函数中返回 ture 的数组项。

fox.$.grep([1,2,3],function(item){

    return item > 1

});//=>[2,3]

   

fox.$.inArray 

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

fox.$.isArray(object)    boolean

如果objectarray,则返回ture

fox.$.isFunction

fox.$.isFunction(object)    boolean

如果objectfunction,则返回ture

fox.$.isPlainObject

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 

fox.$.isWindow(object)    boolean

如果object参数是否为一个window对象,那么返回true。这在处理iframe时非常有用,因为每个iframe都有它们自己的window对象,使用常规方法obj === window校验这些objects的时候会失败。

fox.$.map

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 

fox.$.parseJSON(string)    object

原生JSON.parse方法的别名。(注:接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。)

fox.$.trim

fox.$.trim(string)    string

删除字符串首尾的空白符。类似String.prototype.trim()

fox.$.type

fox.$.type(object)    string

获取JavaScript 对象的类型。可能的类型有: null undefined boolean number string function array dateregexp object error

对于其它对象,它只是简单报告为“object”,如果你想知道一个对象是否是一个javascript普通对象,使用isPlainObject

add

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

addClass(name)    self

addClass(function(index, oldClassName){ ... })    self

为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。

after

after(content)    self

在每个匹配的元素后插入内容(注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

fox.$('form label').after('<p>A note below the label</p>')

append

append(content)    self

在每个匹配的元素末尾插入内容(注:内部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

fox.$('ul').append('<li>new list item</li>')

appendTo

appendTo(target)    self

将匹配的元素插入到目标元素的末尾(注:内部插入)。这个有点像 append,但是插入的目标与其相反。

fox.$('<li>new list item</li>').appendTo('ul')

attr

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的属性如 checkedselected, 使用 prop

var form = fox.$('form')

form.attr('action')             //=> 读取值

form.attr('action', '/create')  //=> 设置值

form.attr('action', null)       //=> 移除属性

 

// 多个属性:

form.attr({

  action: '/create',

  method: 'post'

})

before

before(content)    self

在匹配每个元素的前面插入内容(注:外部插入)。内容可以为html字符串,dom节点,或者节点组成的数组。

fox.$('table').before('<p>See the following table:</p>')

children

children([selector])    collection

获得每个匹配元素集合元素的直接子元素,如果给定selector,那么返回的结果中只包含符合css选择器的元素。

fox.$('ol').children('*:nth-child(2n)')

//=> every other list item from every ordered list

clone

clone()    collection

通过深度克隆来复制集合中的所有元素。

此方法不会将数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。

closest

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

concat(nodes, [node2, ...])    self

添加元素到一个Fox.$对象集合形成一个新数组。如果参数是一个数组,那么这个数组中的元素将会合并到Fox.$对象集合中。

这是一个Fox.$提供的方法,不是jqueyAPI

contents

contents()    collection

获得每个匹配元素集合元素的子元素,包括文字和注释节点。(注:.contents().children()方法类似,只不过前者包括文本节点以及jQuery对象中产生的HTML元素。)

css

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

data(name)    value

data(name, value)    self

读取或写入dom data-* 属性。行为有点像 attr ,但是属性名称前面加上 data-

当读取属性值时,会有下列转换:v1.0+

Fox.$ 基本实现`data()`只能存储字符串。如果你要存储任意对象,请引入可选的“data”模块到你构建的Fox.$中。

each

each(function(index, item){ ... })    self

遍历一个对象集合每个元素。在迭代函数中,this关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 false,遍历结束。

fox.$('form input').each(function(index){

  console.log('input %d is: %o', index, this)

})

empty

empty()    self

清空对象集合中每个元素的DOM内容。

eq

eq(index)    collection

从当前对象集合中获取给定索引值(注:以0为基数)的元素。

fox.$('li').eq(0)   //=> only the first list item

fox.$('li').eq(-1)  //=> only the last list item

filter

filter(selector)    collection

filter(function(index){ ... })    collection v1.0+

过滤对象集合,返回对象集合中满足css选择器的项。如果参数为一个函数,函数返回有实际值得时候,元素才会被返回。在函数中, this 关键字指向当前的元素。

与此相反的功能,查看not.

find

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

first()    collection

获取当前对象集合中的第一个元素。

fox.$('form').first()

forEach

forEach(function(item, index, array){ ... }, [context])  

遍历对象集合中每个元素,有点类似 each,但是遍历函数的参数不一样,当函数返回 false 的时候,遍历不会停止。

 这是一个Fox.$提供的方法,不是jqueryAPI

get

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

has(selector)    collection

has(node)    collection

判断当前对象集合的子元素是否有符合选择器的元素,或者是否包含指定的DOM节点,如果有,则返回新的对象集合,该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。

fox.$('ol > li').has('a[href]')

//=> get only LI elements that contain links

hasClass

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

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

hide()    self

Hide elements in this collection by setting their display CSS property to none.

通过设置css的属性display  none来将对象集合中的元素隐藏。

html

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

index([element])    number

获取一个元素的索引值(注:从0开始计数)。当elemen参数没有给出时,返回当前元素在兄弟节点中的位置。当element参数给出时,返回它在当前对象集合中的位置。如果没有找到该元素,则返回-1

fox.$('li:nth-child(2)').index()  //=> 1

indexOf

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的索引值,如果没找到,则返回-1index 方法是基于这个方法实现的。

 这是一个Fox.$的方法,不是jquerapi

insertAfter

insertAfter(target)    self

将集合中的元素插入到指定的目标元素后面(注:外部插入)。这个有点像 after,但是使用方式相反。

fox.$('<p>Emphasis mine.</p>').insertAfter('blockquote')

insertBefore

insertBefore(target)    self

将集合中的元素插入到指定的目标元素前面(注:外部插入)。这个有点像 before,但是使用方式相反。

fox.$('<p>See the following table:</p>').insertBefore('table')

is

is(selector)    boolean

判断当前元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似: :visible包含在可选的“selector”模块中。

 jQuery CSS extensions 不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。

last

last()    collection

获取对象集合中最后一个元素。

fox.$('li').last()

map

map(function(index, item){ ... })    collection

遍历对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中this关键之指向当前循环的项(遍历函数中的第二个参数)。

遍历中返回 nullundefined,遍历将结束。

// get text contents of all elements in collection

elements.map(function(){ return fox.$(this).text() }).get().join(', ')

next

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

not(selector)    collection

not(collection)    collection

not(function(index){ ... })    collection

过滤当前对象集合,获取一个新的对象集合,它里面的元素不能匹配css选择器。如果另一个参数为Fox.$对象集合,那么返回的新Fox.$对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素,函数的 this 关键字指向当前循环元素。

与它相反的功能,查看 filter.

offset

offset()    object

offset(coordinates)    self v1.0+

offset(function(index, oldOffset){ ... })    self v1.0+

获得当前元素相对于document的位置。返回一个对象含有: topleftwidthheight

当给定一个含有lefttop属性对象时,使用这些值来对集合中每一个元素进行相对于document的定位。

offsetParent

offsetParent()    collection

找到第一个定位过的祖先元素,意味着它的css中的position 属性值为“relative”, “absolute” or “fixed”

parent

parent([selector])    collection

获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。

parents

parents([selector])    collection

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。

如果想获取直接父级元素,使用 parent。如果只想获取到第一个符合css选择器的元素,使用closest

fox.$('h1').parents()   //=> [<div#container>, <body>, <html>]

pluck

pluck(property)    array

获取对象集合中每一个元素的属性值。返回值为 nullundefined值得过滤掉。

fox.$('body > *').pluck('nodeName') // => ["DIV", "SCRIPT"]

 

// implementation of Fox.$'s `next` method

fox.$.fn.next = function(){

  return fox.$(this.pluck('nextElementSibling'))

}

 这是一个Fox.$的方法,不是jqueryapi

position

position()    object

获取对象集合中第一个元素的位置。相对于 offsetParent。当绝对定位的一个元素靠近另一个元素的时候,这个方法是有用的。

Returns an object with properties: topleft.

var pos = element.position()

 

// position a tooltip relative to the element

fox.$('#tooltip').css({

  position: 'absolute',

  top: pos.top - 30,

  left: pos.left

})

prepend

prepend(content)    self

将参数内容插入到每个匹配元素的前面(注:元素内部插入)。插入d的元素可以试html字符串片段,一个dom节点,或者一个节点的数组。

fox.$('ul').prepend('<li>first list item</li>')

prependTo

prependTo(target)    self

将所有元素插入到目标前面(愚人码头注:元素内部插入)。这有点像prepend,但是是相反的方式。

fox.$('<li>first list item</li>').prependTo('ul')

prev

prev()    collection

prev(selector)    collection v1.0+

获取对象集合中每一个元素的前一个兄弟节点,通过选择器来进行过滤。

prop

prop(name)    value

prop(name, value)    self

prop(name, function(index, oldValue){ ... })    self

读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr,因为这些属性值会因为用户的交互发生改变,如checked  selected

简写或小写名称,比如forclassreadonly及类似的属性,将被映射到实际的属性上,比如htmlForclassName,readOnly, 等等。

push

push(element, [element2, ...])    self

Add elements to the end of the current collection.

添加元素到当前对象集合的最后。

 这是一个fox.$的方法,不是jqueryapi

ready

ready(function($){ ... })    self

添加一个事件侦听器,当页面DOM加载完毕 “DOMContentLoaded” 事件触发时触发。建议使用 fox.$()来代替这种用法。

reduce

reduce(function(memo, item, index, array){ ... }, [initial])    value

 Array.reduce有相同的用法,遍历当前对象集合。memo是函数上次的返回值。迭代进行遍历。

 这是一个fox.$的方法,不是jqueryapi

remove

remove()    self

从其父节点中删除当前集合中的元素,有效的从dom中移除。

removeAttr

removeAttr(name)    self

移除当前对象集合中所有元素的指定属性。

removeClass

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

replaceWith(content)    self

用给定的内容替换所有匹配的元素。(包含元素本身)content参数可以为 before中描述的类型。

scrollLeft

scrollLeft()    number

scrollLeft(value)    self

获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。

scrollTop

scrollTop()    number

scrollTop(value)    self v1.1+

获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。

show

show()    self

恢复对象集合中每个元素默认的“display”值。如果你用 hide将元素隐藏,用该属性可以将其显示。相当于去掉了displaynone

siblings

siblings([selector])    collection

获取对象集合中所有元素的兄弟节点。如果给定CSS选择器参数,过滤出符合选择器的元素。

size

size()    number

获取对象集合中元素的数量。

slice

slice(start, [end])    array

提取这个数组array的子集,从start开始,如果给定end,提取从从start开始到end结束的元素,但是不包含end位置的元素。

text

text()    string

text(content)    self

text(function(index, oldText){ ... })    self v1.1.4+

获取或者设置所有对象集合中元素的文本内容。当没有给定content参数时,返回当前对象集合中第一个元素的文本内容(包含子节点中的文本内容)。当给定content参数时,使用它替换对象集合中所有元素的文本内容。它有待点似html,与它不同的是它不能用来获取或设置 HTML

toggle

toggle([setting])    self

显示或隐藏匹配元素。如果 settingtrue,相当于show 法。如果settingfalse。相当于 hide方法。

var input = fox.$('input[type=text]')

fox.$('#too_long').toggle(input.val().length > 140)

toggleClass

toggleClass(names, [setting])    self

toggleClass(function(index, oldClassNames){ ... }, [setting])    self

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它,如果不存在,就添加它。如果 setting的值为真,这个功能类似于 addClass,如果为假,这个功能类似与 removeClass

unwrap

unwrap()    self

移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。 基本上,这种方法删除上一的祖先元素,同时保持DOM中的当前元素。

fox.$(document.body).append('<div id=wrapper><p>Content</p></div>')

fox.$('#wrapper p').unwrap().parents()  //=> [<body>, <html>]

val

val()    string

val(value)    self

val(function(index, oldValue){ ... })    self

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。如果是<select multiple>标签,则返回一个数组。当给定value参数,那么将设置所有元素的值。

width

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

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

wrapAll(structure)    self

在所有匹配元素外面包一个单独的结构。结构可以是单个元素或 几个嵌套的元素,并且可以通过在作为HTML字符串或DOM节点。

// wrap all buttons in a single div:

fox.$('a.button').wrapAll('<div id=buttons />')

wrapInner

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>')

 

 

2 事件

on

on(type, [selector], function(e){ ... })    self

添加事件处理程序到对象集合中得元素上

事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(愚人码头注:this指向触发事件的元素)。 当一个事件处理程序返回falsepreventDefault()  stopPropagation()被当前事件调用的情况下,  将防止默认浏览器操作,如链接。

如果false 在回调函数的位置上作为参数传递给这个方法, 它相当于传递一个函数,这个函数直接返回false。(愚人码头注:即将 false 当作 function(e){ ... } 的参数,作为 function(){ return false; } 的简写形式,例如: fox.$("a.disabled").on("click", false);这相当于fox.$("a.disabled").on("click", function(){ return false; } );

var elem = $('#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

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){ ... })

 

 

PS: fox.$vue冲突解决方案

    由于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);
        });
    }
});