zoukankan      html  css  js  c++  java
  • 第四章 jQuery文档处理

    一、创建元素

      1.$("html");  创建一个DOM元素

      2.$("html",props); 创建一个DOM元素,并给予props属性、事件或方法

      例:$("<div></div>",{id:"div1",text:"hello",80,css:{textAlign:"center"},click:function(){alert("123")}});

    二、内部插入

      1.$("selector1").append("html");  在匹配selector元素集合的每个元素末尾插入“html”;

      例:$("selector1").append($("h2"));  该方法会将所有的H2标签移动到匹配元素selector元素的末尾。

      2.$("selector1").appendTo("selector2");  将匹配元素selector1插入到selector2元素的末尾。

      3.$("selector1").prepend("html");  在匹配元素selector1元素集合的每个元素开头插入“html”;

      4.$("selector1").prependTo("selector2");  将匹配元素selector1插入到sleector2元素开头。

      5.$("selector1").html(["html"]);  设置或获取selector1的html,当不给参数时代表获取html。

      6.$("selector1").text(["text"]);  设置或获取selector1的内容,当不给参数代表获取其内容值。

    三、外部插入

      1.$("selector1").after(content);  该方法是在所有匹配selector1元素集合后面(同级目录)插入centent(html、DOM对象),若content为选择对象,则该方法将会移动该对象。

      2.$("selector1").insertAfter("selector2");  该方法是将元素selector1插入到selector2后面(同级目录)

      3.$("selector1").before(content);  该方法是将content插入到匹配元素selector1的前面(同级目录)

      4.$("selector1").insertBefore("selector2");  该方法是将元素selector1插入到selector2前面(同级目录)

    四、删除元素

      1.$("selector1").remove();  该方法将会删除匹配selector1的所有元素(不可恢复)。

      2.$("selector1").detach();  该方法将会删除匹配元素,并返回被删除的元素(以便恢复时使用)。

      3.$("selector1").empty();  该方法会清空符合selector1元素集合的所有后代节点,以及其中的任何文本。

    五、替换元素

      1.$("selector1").replaceWith(newContent);  该方法用于将匹配元素sleector1集合中的所有元素替换为newContent(html、DOM,function[返回html])。

      2.$("selector1").replaceAll("selector2");  该方法是使用sleector1替换selecotr2与replaceWith目标相反。

    六、复制元素

      1.$("selector1").clone().appendTo("selecctor2");  该方法是将selector1复制一份再插入到selector2元素末尾,就避免了移动selecot1。

    七、包装元素

      1.$("selector1").wrap(html);  该方法是在所有匹配元素selecotor外面包裹一层html。

      例:$("div").wrap("<h2></h2>");  这样就会在所有div外面加一层H2标签。

      2.$("selector1").unwrap();   该方法是删除所有匹配元素的父元素。与wrap的作用相反。

      例:$("selector1").wrap("<h2></h2>").unwrap();  执行后selector会保持不变。

      3.$("selector1").wrapAll(html);  该方法也是在selecotr外面包裹一层html与wrap方法不同的是,该方法会将所有匹配selecotr1的元素视为一个整体只包装一次。

      4.$("selector1").wrapInner(html);  该方法是在所有匹配元素selecotr1里面内容包裹一层html

      例:$("<div id="div1">123</div>").wrapInner(<h2></h2>);  执行结果为"<div id="div1"><h2>123</h2></div>"

    八、设置和获取DOM属性

      1.$("selecotr1").attr(attrName[,attrvalue]);  该方法将获取selecotor中的attrName属性值,若指定了attrvalue参数则会设置attrName的属性值。

      2.$("selector1").removeAttr(attrName);  删除匹配元素的attrName属性。

      3.$("selecotor1").val([value]);  设置或获取表单元素的value属性值,若指定了value参数则会设置表单元素selecotor的value值。

    九、设置和切换CSS类

      1.$("selector1").addClass("className");  该方法是给所有匹配元素selecotor引用classNmae样式类。

      2.$("selector1").hasClass("classNmae");  该方法用于检测selecotor是否引用了className样式类。

      3.$("selector1").removeClass("className");  该方法用于删除className样式类

      4.$("selector1").toggleClass("className");  该方法作用是判定selecotor1是否拥有className类,若有则删除该类,若没有则添加该类。

    十、设置和获取样式属性

      1.$("selector1").css("css");  该方法用于设置或获取selector1的样式属性。

      例:$("selector1").css("color");  获取其color属性值

        $("selector1").css({"color":"red","background-color":"yellow"});  这是其颜色和背景颜色。

    十一、设置和获取元素的位置

      1.$("selector1").offset();  获取selector1相对文档的当前坐标,其返回值包含top和left属性对象。

      例:$("selector1").offset().top; $("selector1").offset().left;  获取位置

        $("selector1").offset({top:100,left:160});  设置位置

      2.$("selector1").position();  该方法用于获取selector元素相对于父元素的偏移量,其返回值包含top和left属性对象。

      3.$("selector1").scrollLeft([value]);  该方法用于获取或这是匹配元素的水平滚动条位置。

      4.$("selector1").scrollTop();  该方法用于获取或设置匹配元素的垂直滚动条位置。

    十二、设置和获取元素大小

      1.$("selector1").height([value]);  设置或获取元素的高度。(该属性高度不包括:填充、边框、边距)

      2.$("selector1").width([value]);

      3.$("selector1").innerHeight([value]);  设置或获取元素的内部高度。(该属性高度不包括:边框、边距)

      4.$("selector1").innerwidth([value]);

      5.$("selector1").outerHeight([bool]);  设置或获取元素的外部高度,参数默认为false表示不包括:边距;若给定参数true则包括:边距

      6.$("selector1").outerwidth([bool]);  

  • 相关阅读:
    nc之二:nc命令详解
    memcache redundancy机制分析及思考
    memcache和redis区别
    java操作mongodb
    Memcache缓存与Mongodb数据库的优势和应用
    memcache 存储单个KEY,数据量过大的时候性能慢!以及简单的memcache不适合用到的场景
    pkill详解
    修改linux用户密码
    Mysql函数INSTR、LOCATE、POSITION VS LIKE
    Servlet3.0之九:web模块化
  • 原文地址:https://www.cnblogs.com/zyj469470971/p/2380204.html
Copyright © 2011-2022 走看看