zoukankan      html  css  js  c++  java

  • ExtJs与JQuery对比：Dom文档操作

    现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的，一般 做网站应用比较常见，可见块头小的优势。ExtJs比较庞大，它除了对基本的JS语法和HTML DOM操作方式的封装之外，还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势

    现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的，一般做网站应用比较常见，可见块头小的优势。 ExtJs比较庞大，它除了对基本的JS语法和HTML DOM操作方式的封装之外，还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。

    注意一点：ExtJs4.0完全重新构建了一套新的体系，关于extjs 4.x组件的查找方式，请参阅：ComponentQuery。

    1.上下文选择器对比

    获取Id="div1"的DOM元素:

    [JQuery]
     

     
    1. $("#div1"); 
     
     

    [ExtJs]
     

     
    1. $("#div1"); 
     
     

    其实Ext.get("div1")与$("#div1")还是有区别的，前者只会获取匹配的第一个元素，后者是匹配的元素集合。ExtJs的等价用法如下：

    [ExtJs]
     

     
    1. Ext.select("#div1"); 
     
     
    下面是一个完整的比较代码：

    [ExtJs]
     

     
    1. //Ext.Element类 :是ExtJs对dom对象的封装 
    2. //Ext.CompositeElement类：是ExtJs对dom对象集合的封装 
    3.  
    4. //查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型 
    5. //该方法只能查Id，不支持选择器 
    6. Ext.get("div1"); 
    7.  
    8. //功能同上 
    9. Ext.fly("div1"); 
    10.  
    11. //查询Id=div1的元素的dom对象 
    12. Ext.get("div1").dom; 
    13. //或者 
    14. Ext.getDom("div1"); 
    15.  
    16. //获取body元素的Ext.Element类型 
    17. Ext.getBody(); 
    18. //返回当前HTML文档的Ext.Element类型 
    19. Ext.getDoc(); 
    20.  
    21. //查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型 
    22. Ext.select("#div1"); 
    23. //查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型 
    24. Ext.select("div[title='d1']"); 
    25.  
    26. //查询属性title=d1的div,返回满足条件的dom节点集合 
    27. Ext.query("div[title='d1']");
     
     

    2.选择器语法简介

    JQuery选择器支持CSS3选择符，ExtJs同样也提供支持，除此之外还支持基本的XPath语法。下面分别讲解：

    1)CSS3选择符

    下面列举的命令是单个形式，都可以无限组合使用。

    元素选择符：
      任意元素
    • E 一个标签为 E 的元素
    • E F 所有 E 元素的分支元素中含有标签为 F 的元素
    • E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
    • E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
    • E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素
    属性选择符：

    @ 与引号的使用是可选的。例如：div[@foo='bar'] 也是一个有效的属性选择符。

    • E[foo] 拥有一个名为 “foo” 的属性
    • E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
    • E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
    • E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
    • E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
    • E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性
    伪类：
    • E:first-child E 元素为其父元素的第一个子元素
    • E:last-child E 元素为其父元素的最后一个子元素
    • E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数）
    • E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
    • E:nth-child(even) E 元素为其父元素的偶数个数的子元素
    • E:only-child E 元素为其父元素的唯一子元素
    • E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）
    • E:first 结果集中第一个 E 元素
    • E:last 结果集中最后一个 E 元素
    • E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数）
    • E:odd :nth-child(odd) 的简写
    • E:even :nth-child(even) 的简写
    • E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
    • E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
    • E:not(S) 一个与简单选择符 S 不匹配的 E 元素
    • E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
    • E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
    • E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
    CSS 值选择符：
    • E{display=none} css 的“display”属性等于“none”
    • E{display^=none} css 的“display”属性以“none”开始
    • E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”
    • E{display%=2} css 的“display”属性能够被2整除
    • E{display!=none} css 的“display”属性不等于“none”

    2)XPath语法

    下面通过几个例子来说明：

    /html/body/div/div :从根目录开始找，找到正文的第二层全部DIV。

    div/div :在全文匹配DIV元素，并获取包含子DIV的全部子DIV集合。

    3.Ext.get和Ext.fly的区别：

    通俗点讲，他们的作用都是一样的，都是获取元素。但是前者每次调用都会生成一个Ext.Element对象，开辟新的内存空间，而后者共享了一个公 用的内存空间，每次调用都会覆盖前一次的信息。由于Ext.Element 比较庞大，后者的好处是可以节省资源。如果你获取的Ext.Element 不需要长期保持重复调用，用后者较为合理。下面通过一个例子来体现他们的区别：

     
    1. //这样更新的是div1 
    2. var div1 = Ext.get("div1"); 
    3. Ext.get("div2"); 
    4. div1.update("我想更新div1"); 
    5.  
    6. //将get替换成fly后.... 
    7.  
    8. //更新的却是div2 
    9. var div1 = Ext.fly("div1"); 
    10. Ext.fly("div2"); 
    11. div1.update("我想更新div1"); 
     
    我们发现，再次调用Ext.fly后，更新的是DIV2，而再次调用Ext.get不会影响更新的元素。

    二、属性

    注意：CSS类操作的几个方法相对于早期版本有变化之前是：e.addClass("c2")

    [JQuery]
     

     
    1. var e = $("div[title=t1]"); 
    2.  
    3. //返回第一个匹配元素的title属性 
    4. alert(e.attr("title")); 
    5. //设置第一个匹配元素的title属性 
    6. e.attr("title", "newTitle"); 
    7. //移除第一个匹配元素的title属性 
    8. e.removeAttr("title"); 
    9.  
    10. //CSS类 
    11. //给第一个匹配元素添加c2样式 
    12. e.addClass("c2"); 
    13. //移除 
    14. e.removeClass("c1"); 
    15. //轮回 
    16. e.toggleClass("c2"); 
    17. //检查c2样式是否存在 
    18. e.hasClass("c2"); 
    19.  
    20. //Html 
    21. //获取Html 
    22. e.html(); 
    23. //更新Html 
    24. e.html("<b>更新后的Html</b>"); 
    25.  
    26. //值 
    27. e.val(); 
    28. e.val(150); 
     
     

    [ExtJs]
     

     
    1. var e = Ext.select("div[title=t1]"); 
    2.  
    3. //属性 
    4. //返回第一个匹配元素的title属性 
    5. alert(e.first().getAttribute("title")); 
    6. //设置第一个匹配元素的title属性 
    7. e.first().set({ "title": "newTitle" }); 
    8.  
    9. //CSS类 
    10. //给第一个匹配元素添加c2样式 
    11. e.addCls("c2"); 
    12. //移除 
    13. e.removeCls("c1"); 
    14. //轮回 
    15. e.toggleCls("c2"); 
    16. //检查c2样式是否存在 
    17. e.hasCls("c2"); 
    18.  
    19. //Html 
    20. //获取Html 
    21. e.first().dom.innerHTML; 
    22. //更新Html 
    23. e.first().update("<b>更新后的Html</b>"); 
    24.  
    25. //值 
    26. e = Ext.get("text1"); 
    27. e.getValue(); 
    28. e.set({ value: 150 }); 
     
     


     

    四、筛选

    [JQuery]
     

     
    1. var e = $(".c1"); 
    2. //过滤 
    3. //获取匹配的第二个元素 
    4. e.eq(1); 
    5. //再次筛选，属性title=t1的div 
    6. e.filter("div[title=t1]"); 
    7. //父节点Id=div1时返回true 
    8. e.parent().is("#div1"); 
    9.  
    10. //查找 
    11. //获取集合中第一个，最后一个： 
    12. e.first(); 
    13. e.last(); 
    14. //前一个，后一个： 
    15. e.prev(); 
    16. e.next(); 
    17. //子节点第一个，最后一个： 
    18. var e2 = $("#div1"); 
    19. e2.children().first(); 
    20. e2.children().last(); 
     
     


    [ExtJs]
     

     
    1. var e = Ext.select(".c1"); 
    2.  
    3. //过滤 
    4. //获取匹配的第二个元素 
    5. e.item(1); 
    6. //再次筛选，属性title=t1的div,集合中不满足条件的元素自动移去 
    7. e.filter("div[title=t1]"); 
    8. e = Ext.select(".c1"); 
    9. //父节点Id=div1时返回true 
    10. e.first().parent().is("#div1"); 
    11.  
    12. //查找 
    13. //获取集合中第一个，最后一个： 
    14. e.first(); 
    15. e.last(); 
    16. //单个元素的前一个，匹配选择器的后一个: 
    17. e.item(1).next("div[title=t2]"); 
    18. e.item(1).prev(); 
    19. var e2 = Ext.get("div1"); 
    20. //获取子节点的第一个，最后一个： 
    21. e2.first(); 
    22. e2.last(); 
     
     


     

    五、文档处理

    [JQuery]
     

     
    1. //插入 
    2. var e = $("div .c1"); 
    3. //e元素结束之前插入 
    4. e.first().append("<b>新内容</b>"); 
    5. //e元素开始之后插入 
    6. e.first().prepend("<b>新内容</b>"); 
    7. //e元素开始之前插入 
    8. e.first().before("<b>新内容</b>"); 
    9. //e元素结束之后插入 
    10. e.first().after("<b>新内容</b>"); 
    11.  
    12. //包裹 
    13. e.eq(2).wrap("<p></p>"); 
    14. e.eq(2).unwrap(); 
    15.  
    16. //替换 
    17. e.eq(2).replaceWith("<b>被替换的</b>"); 
    18.  
    19. //删除 
    20. e.eq(3).remove(); 
    21. //清空标签内的html 
    22. e.eq(0).empty(); 
     
     


    [ExtJs]
     

     
    1. var e = Ext.select("div .c1"); 
    2. //插入 
    3. //分别在相对于文档e的四个位置插入html： 
    4. e.first().insertHtml("afterBegin", "<b>新内容</b>"); 
    5. e.first().insertHtml("beforeEnd", "<b>新内容</b>"); 
    6. e.first().insertHtml("beforeBegin", "<b>新内容</b>"); 
    7. e.first().insertHtml("afterEnd", "<b>新内容</b>"); 
    8.  
    9. //包裹 
    10. e.wrap({ 
    11.     tag: 'p'
    12. }); 
    13.  
    14. //用text1替换集合第五个元素 
    15. e.replaceElement(4, "text1", true); 
    16.  
    17. //替换用当前元素去替换掉div2标签 
    18. e.first().replace("div2", true); 
    19.  
    20. //删除 
    21. e.first().remove(); 
    22.  
    23. //移除集合中第三个元素 
    24. e.removeElement(2, true); 
     
     


     

    六、CSS

    [JQuery]
     

     
    1. var e = $("div1"); 
    2. //设置样式 
    3. e.css("width", "550px"); 
    4. e.css("position", "absolute"); 
    5.  
    6. //设置高度 
    7. e.height(100); 
    8. //获取宽度 
    9. e.width(); 
     
     


    [ExtJs]
     

     
    1. var e = Ext.get("div1"); 
    2. //设置样式 
    3. e.setStyle("width", "550px"); 
    4. e.applyStyles({ 
    5.     height: "500px", 
    6.     color: "red", 
    7.     position: "absolute"
    8. }); 
    9. //设置高度，带动画效果 
    10. e.setHeight(100, true); 
    11. //设置定位 
    12. e.setLeft("50px"); 
    13. e.setTop("10px"); 
    14. e.setLeftTop("100px", "50px"); 
    15. //设置尺寸 
    16. e.setSize("100px", "200px"); 
    17.  
    18. //设置xy坐标 
    19. e.setXY([10, 10]); 
    20.  
    21. //获取宽度 
    22. e.getWidth(); 
    23.  
    24. //获取坐标 
    25. e.getXY(); 
     
     


     

    七、事件

    [JQuery]
     

     
    1. var e = $("#div1"); 
    2. //事件绑定 
    3. //给元素绑定click事件： 
    4. var clickhandler = function () { 
    5.     alert("click事件被触发！"); 
    6. }; 
    7. e.bind("click", clickhandler); 
    8.  
    9. //模拟click事件： 
    10. e.trigger("click"); 
    11.  
    12. //解除绑定click事件 
    13. e.unbind("click", clickhandler); 
    14.  
    15. //事件切换 
    16. e.hover(function () { 
    17.     e.css("background-color", "Red"); 
    18. }, function () { 
    19.     e.css("background-color", "Aqua"); 
    20. }); 
     
     


    [ExtJs]
     

     
    1. var e = Ext.get("div1"); 
    2. //事件绑定 
    3. //给元素绑定click事件： 
    4. var clickhandler = function () { 
    5.     Ext.Msg.alert("消息", "click事件被触发！"); 
    6. }; 
    7. e.on("click", clickhandler); 
    8. //解除绑定click事件 
    9. e.un("click", clickhandler); 
    10.  
    11. //事件切换 
    12. e.hover(function () { 
    13.     e.setStyle("background-color", "Red"); 
    14. }, function () { 
    15.     e.setStyle("background-color", "Aqua"); 
    16. });

    如果这篇文章对您有帮助，您可以打赏我

    技术交流QQ群：15129679
  • 相关阅读:
    java socket HTTPClient GET
    Spring的JdbcTemplate使用update或insert操作的三种使用例子
    windows XP 解决QQ和360软件冲突的办法
    J2EE 应用服务器集群常用方法
    javaeye被关闭了 被政 府和谐感
    P6SPY(JDBC SQL拦截)的安装和使用
    让QQ与360并存，不卸载360正常使用QQ
    Spring2.5注解(标注)学习笔记(使用annotation代替XML)
    centos vnc配置
    HTTP协议内容具体含义
  • 原文地址：https://www.cnblogs.com/yeminglong/p/2721657.html
Copyright © 2011-2022 走看看