zoukankan      html  css  js  c++  java
  • ExtJs4学习(二):Dom操作

    如今主流的JS框架要数ExtJs和JQuery应用的比較广泛。JQuery属于轻量级的,一般做站点应用比較常见。可见块头小的优势。

    ExtJs比較庞大,它除了对主要的JS语法和HTML DOM操作方式的封装之外。还提供了一套强大的UI库。在企业级B/S解决方式应用上独占优势。就单说它在原生JS的封装,DOM操作方式封装方面也足以轻蔑JQuery。以下我就通过对照API,体现两种框架的异曲同工之处。我们已JQuery API为主线,来看看ExtJs是否有替代的方案。

    注意一点:ExtJs4.0相对上一版本号修改较大,本系列文章临时仅仅对ExtJs4.0及以上版本号提供支持。

    一、选择器

    1.上下文选择器对照

    JS对HTML节点的操作比較频繁。所以要常常定位和查询DOM元素。

    我们分别看看两种框架的实现

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

    [JQuery]
    $("#div1");

    [ExtJs]
    Ext.get("div1");


    以下是一个完整的比較代码:

    [ExtJs]
    //Ext.Element类 :是ExtJs对dom对象的封装
    //Ext.CompositeElement类:是ExtJs对dom对象集合的封装
     
    //查询Id=div1的元素,返回第一个匹配元素的Ext.Element类型
    //该方法仅仅能查Id,不支持选择器
    Ext.get("div1");
     
    //功能同上
    Ext.fly("div1");
     
    //查询Id=div1的元素的dom对象
    Ext.get("div1").dom;
    //或者
    Ext.getDom("div1");
     
    //获取body元素的Ext.Element类型
    Ext.getBody();
    //返回当前HTML文档的Ext.Element类型
    Ext.getDoc();
     
    //查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型
    Ext.select("#div1");
    //查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型
    Ext.select("div[title='d1']");
     
    //查询属性title=d1的div,返回满足条件的dom节点集合
    Ext.query("div[title='d1']");

    2.选择器语法简单介绍

    JQuery选择器支持CSS3选择符。ExtJs相同也提供支持。除此之外还支持主要的XPath语法。以下分别解说:

    1)CSS3选择符

    以下列举的命令是单个形式,都能够无限组合使用。

    元素选择符:
      随意元素
    • E 一个标签为 E 的元素
    • E F 全部 E 元素的分支元素中含有标签为 F 的元素
    • E > FE/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 不须要长期保持反复调用。用后者较为合理。以下通过一个样例来体现他们的差别:

    (el ) :Ext.dom.Element使用了缓存机制来提升获取DOM节点的效率

    (dom, [named] ) :Ext.dom.Element.Fly使用了JavaScript经典的享元模式来提升效率,从而节约内存,更加低碳化

    //这样更新的是div1
    var div1 = Ext.get("div1");
    var div2 = Ext.get("div2");
    div1.update("我想更新div1"); 
    
    //将get替换成fly后....
    //更新的却是div2
    var div1 = Ext.fly("div1");
    var div2 = Ext.fly("div2");
    div1.update("我想更新div1");

    我们发现,再次调用Ext.fly后,更新的是DIV2,而再次调用Ext.get不会影响更新的元素。

    另外我们在这里再提一下(el ) : Object

    它很适合直接获取页面元素,并返回的就是DOM元素,假设你想操作DOM元素的属性。那这种方法是最好只是的咯。

    二、属性

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

    [JQuery]
    var e = $("div[title=t1]");
    
    //返回第一个匹配元素的title属性
    alert(e.attr("title"));
    
    //设置第一个匹配元素的title属性
    e.attr("title", "newTitle");
    
    //移除第一个匹配元素的title属性
    e.removeAttr("title");
    
    //CSS类
    
    //给第一个匹配元素加入c2样式
    e.addClass("c2");
    
    //移除
    e.removeClass("c1");
    
    //轮回
    e.toggleClass("c2");
    
    //检查c2样式是否存在
    e.hasClass("c2");
    
    //Html
    //获取Html
    e.html();
    
    //更新Html
    e.html("<b>更新后的Html</b>");
    
    //值
    e.val();
    
    e.val(150);

    [ExtJs]
    var e = Ext.select("div[title=t1]");
    
    //属性
    
    //返回第一个匹配元素的title属性
    alert(e.first().getAttribute("title"));
    
    //设置第一个匹配元素的title属性
    e.first().set({ "title": "newTitle" });
    
    //CSS类
    //给第一个匹配元素加入c2样式
    e.addCls("c2");
    
    //移除
    e.removeCls("c1");
    
    //轮回
    e.toggleCls("c2");
    
    //检查c2样式是否存在
    e.hasCls("c2");
    
    //Html
    //获取Html
    e.first().dom.innerHTML;
    
    //更新Html
    e.first().update("<b>更新后的Html</b>");
    
    //值
    e = Ext.get("text1");
    
    e.getValue();
    
    e.set({ value: 150 });

    四、筛选

    [JQuery]
    var e = $(".c1");
    
    //过滤
    //获取匹配的第二个元素
    e.eq(1);
    
    //再次筛选,属性title=t1的div
    e.filter("div[title=t1]");
    
    //父节点Id=div1时返回true
    e.parent().is("#div1");
    
    //查找
    //获取集合中第一个,最后一个:
    e.first();
    
    e.last();
    
    //前一个,后一个:
    e.prev();
    
    e.next();
    
    //子节点第一个。最后一个:
    var e2 = $("#div1");
    
    e2.children().first();
    
    e2.children().last();

    [ExtJs]

    (selector, [unique] ) : 返回Ext.CompositeElementExt.dom.Element集合)

    var e = Ext.select(".c1");
    
    //过滤
    //获取匹配的第二个元素
    e.item(1);
    
    //再次筛选,属性title=t1的div,集合中不满足条件的元素自己主动移去
    e.filter("div[title=t1]");
    
    e = Ext.select(".c1");
    
    //父节点Id=div1时返回true
    e.first().parent().is("#div1");
    
    //查找
    //获取集合中第一个,最后一个:
    e.first();
    
    e.last();
    
    //单个元素的前一个。匹配选择器的后一个:
    e.item(1).next("div[title=t2]");
    
    e.item(1).prev();
    
    var e2 = Ext.get("div1");
    
    //获取子节点的第一个,最后一个:
    e2.first();
    
    e2.last();
    抛开select方法另一个(path, [root], [type], [single] ) : 返回HTMLElement[]

    五、文档处理

    [JQuery]
    //插入
    
    var e = $("div .c1");
    
    //e元素结束之前插入
    e.first().append("<b>新内容</b>");
    
    //e元素開始之后插入
    e.first().prepend("<b>新内容</b>");
    
    //e元素開始之前插入
    e.first().before("<b>新内容</b>");
    
    //e元素结束之后插入
    e.first().after("<b>新内容</b>");
    
    //包裹
    e.eq(2).wrap("<p></p>");
    
    e.eq(2).unwrap();
    
    //替换
    e.eq(2).replaceWith("<b>被替换的</b>");
    
    //删除
    e.eq(3).remove();
    
    //清空标签内的html
    e.eq(0).empty();


    [ExtJs]
    var e = Ext.select("div .c1");
    
    //插入
    //分别在相对于文档e的四个位置插入html:
    e.first().insertHtml("afterBegin", "<b>新内容</b>");
    
    e.first().insertHtml("beforeEnd", "<b>新内容</b>");
    
    e.first().insertHtml("beforeBegin", "<b>新内容</b>");
    
    e.first().insertHtml("afterEnd", "<b>新内容</b>");
    
    //包裹
    e.wrap({
        tag: 'p'
    });
    
    //用text1替换集合第五个元素
    e.replaceElement(4, "text1", true);
    
    //替换用当前元素去替换掉div2标签
    e.first().replace("div2", true);
    
    //删除
    e.first().remove();
    
    //移除集合中第三个元素
    e.removeElement(2, true);


    六、CSS

    [JQuery]
    var e = $("div1");
    
    //设置样式
    e.css("width", "550px");
    
    e.css("position", "absolute");
    
    //设置高度
    e.height(100);
    
    //获取宽度
    e.width();

    [ExtJs]
    var e = Ext.get("div1");
    
    //设置样式
    e.setStyle("width", "550px");
    
    e.applyStyles({
        height: "500px",
        color: "red",
        position: "absolute"
    });
    
    //设置高度。带动画效果
    e.setHeight(100, true);
    
    //设置定位
    e.setLeft("50px");
    
    e.setTop("10px");
    
    e.setLeftTop("100px", "50px");
    
    //设置尺寸
    e.setSize("100px", "200px");
    
    //设置xy坐标
    e.setXY([10, 10]);
    
    //获取宽度
    e.getWidth();
    
    //获取坐标
    e.getXY();

    七、事件

    [JQuery]
    var e = $("#div1");
    
    //事件绑定
    
    //给元素绑定click事件:
    
    var clickhandler = function () {
        alert("click事件被触发!");
    };
    
    e.bind("click", clickhandler);
     
    
    //模拟click事件:
    e.trigger("click");
    //解除绑定click事件
    e.unbind("click", clickhandler);
    
    
    //事件切换
    
    e.hover(function () {
        e.css("background-color", "Red");
    }, function () {
        e.css("background-color", "Aqua");
    });

    [ExtJs]
    var e = Ext.get("div1");
    //事件绑定
    //给元素绑定click事件:
    var clickhandler = function () {
        Ext.Msg.alert("消息", "click事件被触发。");
    };
    
    e.on("click", clickhandler);
    
    //解除绑定click事件
    
    e.un("click", clickhandler);
    
    //事件切换
    e.hover(function () {
        e.setStyle("background-color", "Red");
    }, function () {
        e.setStyle("background-color", "Aqua");
    });


  • 相关阅读:
    我的浏览器收藏夹分类
    我的浏览器收藏夹分类
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6835797.html
Copyright © 2011-2022 走看看