zoukankan      html  css  js  c++  java
  • QWrap Selector的几个应用场景

    除了如jquery的$(selector)之外,Selector在js中有很多使用场景。
    以QWrap的Youa版应用(js/apps/core_dom_youa.js)为例,主要用法有以下。

    W(selector)  相当于jquery用户使用的$
    如:
    W(‘input.aaa’).css(‘color’,’red’).val(‘’);
    W(‘#myid > div’). css(‘color’,’red’);

    W.one(selector) 得到某个满足条件的元素的W包装
    如:
    W.one(‘input.aaa’).css(‘color’,’red’).val(‘’);

    W.prototype.query(selector)
    W.prototype.one(selector)
    如:
    W(‘#id’).show().query(‘>*’).show().query(‘>*’).css(‘color’,’red’);
     //show #id ; 再show其儿子 ; 再为其孙子设color
    W(‘#id’).show().query(‘~div’).hide()
     //show #id ; 再hide其所有的div弟弟
    W(‘#id’).show().one(‘>div’).show().one(‘>a’).css(‘color’,’red’);
     //show #id ; 再show其第一个div儿子 ; 再为这个儿子的第一个a儿子设color

    W.prototype.关系系列
    previousSibling(selector)
    nextSibling(selector)
    ancestorNode(selector)
    firstChild(selector)
    lastChild(selector)
    用法如:
    W(‘#id’). previousSibling (‘div,aaa’).hide()
     //show #id ; 再hide其最小的div.aaa兄长
    W(‘#id’). ancestorNode (‘div.aaa’).hide()
     //show #id ; 再hide其最近的div.aaa祖先
    W(‘#id’). lastChild (‘div.aaa’).hide()
     //show #id ; 再hide其最小的div.aaa儿子

    W.prototype.代理系列
    delegate(selector,eventName,handle)
    undelegate(selector,eventName,handle)
    用法如:
    W(‘#id’). delegate (‘>div’,’click’,function(){})
     //在#id上添加事件委托,对其div儿子有效。
    W(‘#id’). delegate (‘a’,’click’,handle1)
     //在#id上添加事件委托,对其a子孙节点有效。
    W(‘#id’). undelegate (‘a’,’click’, handle1)
     //在#id上解除事件委托,对其a子孙节点有效。

    Selector的用处远不只以上,还有很多的挖掘空间。无法一一列出,当然,还有很多我所没想到的……

    补充说明:以上用法只是QWrap的有啊版用法,并不一定是JQuery也支持的,请勿混淆。
    另外,值得一提的是,QWrap的Jss,也是借用selector的概念,将js数据与html元素建立联系。

    附:QWrap:https://github.com/wedteam/qwrap



    另,以下这段本来是回复gongji同学“无从选择选择器”的感叹的,也抽取到本文来了。
    @gongji
    选择器并不直接面向页面编码同学,而是面向框架。
    选择使用哪一个选择器,是写js框架的同学的任务。
    选择器可能会提供一些理论上会用到的一些方法, 但是缺乏易用性。
    js框架会提供给用户一些简单易用的方法,至于它里面怎么使用选择器,同学们一般不必关心。
    例如:
    Sizzle('div')返回的是一个array。这个方法我们不会直接用到。而我们经常用的$('div')返回的是一个jquery对象。
    通常,我们只需要明白框架里哪些参数可以是cssselector字符串。
    本篇原文的目的,是想列出selector在QWrap里的一些应用场景。
    对于QWrap用户,了解后以便更简写码。
    对于Jquery用户,可以参考下写法有什么不同。
    对于Selector提供者,可以交流下Selector的使用场景以互相参考。
    对于写JS框架的同学,也可以当作交流。

  • 相关阅读:
    Set和Map
    将博客搬至CSDN
    (转)VS制作安装包
    C#俄罗斯方块实现思路及源码
    ASP.NET网站部署过程
    2016百度之星资格赛总结
    数据库编程常见错误总结
    (转)Android 如何全局获取Context
    Android数据文件存储
    关于工程文档中图表的使用
  • 原文地址:https://www.cnblogs.com/jkisjk/p/QWrap_selector_usage.html
Copyright © 2011-2022 走看看