akwolf

做程序重要,做人更重要,实践是硬道理,在实践中成长!!!

Jquery-文档处理学习笔记


一、用试验用的html文件

    <body>
        <div>
            <p id="c">
                1some text!!
            </p>
            <p>
                2some text!!
            </p>
            <p>
                3some text!!
            </p>
            <p>
                4some text!!
            </p>
            <p>
                5some text!!
            </p>
        </div>
        <font id="f" color="#c8c8c8">
        </font>
    </body>

二、使用方法

1、创建元素。

对于jquery创建元素与书写普通html标签没太大区别,创建好之后返回一个jquery对象。$(html) 按照普通html写法

                // 创建元素并添加属性
                var h1 = $('<font color="red"><h1>12</h1></font>');
                $('body').append(h1);
                h1.appendTo($("body"));


使用js代码创建相同的元素就要麻烦很多

                var dom_h = document.createElement("h1");
                var dom_txt = document.createTextNode("123");
                dom_h.appendChild(dom_txt);
                
                var dom_font = document.createElement("font");
                dom_font.setAttribute("color", "red");<pre name="code" class="javascript">                dom_font.appendChild(dom_h);
document.body.appendChild(dom_font);


2、prepend用法,与append类似,只是把当前元素作为追加元素的首元素,prependTo与prepend一样的效果,只是写法上将追加元素与选择器元素调换位置

                var div = $("div");
                div.prepend($("<p>1--prepend text!!</p>"));
                div.prepend($("<p>2--prepend text!!</p>"));

3、外部插入before,与append类似,只是append将追加元素作为选择元素的子元素插入,before则是将插入元素与选择器元素放在同一个等级上,在选择器元素之前插入

var div = $("div");
div.before("<p>1--before text!!</p>") ;

4、删除方法empty(),remove(),detach

empty将其匹配子元素全部删除

$("p").empty();


remove、detach将包括自身及其子元素删除

$('p').detach();

$('p').remove();

5、元素复制 参数true表示连同复制元素的事件一起复制

                $("#c").click(function(){
                    var cl = $("div").clone(true);
                    cl.insertAfter("div");
                });

6、元素替换
// replaceWith与replaceAll功能相同,只是替换内容和选择器的位置改变一下
// replaceWith:对于例子中多个p元素只会用一个div元素去替换
$('p').replaceWith($('<div>new Element!!</div>')) ;
// replaceAll:使用等量的内容去替换选中的内容
$('<div>new Element!!</div>').replaceAll('p');

7、文档包裹wrap,wrapAll,wrapInner
                // wrap对于选中的每一个元素都使用给定的内容进行包裹
                // wrap(html) 创建元素对其进行包裹, '<font color="red"></font>'包裹$('p')
                $('p').wrap('<font color="red"></font>');
                // wrap(ele) 选中一个元素对其进行包裹
                $('p').wrap($("#f"));
                // unwrap解除包裹的元素
                $('p').unwrap();
                // wrapAll对于选中的所有元素使用一个包裹器对其进行包裹
                $('p').wrapAll('<font color="red"></font>');
                
                // wrapInner将选中的元素作为包裹器包裹其他元素
                $('p').wrapInner('<font color="red"></font>');





            
阅读更多
个人分类: Javascript
想对作者说点什么? 我来说一句

jquery-事件冒泡

2011年07月08日 885B 下载

jquery-下拉框down

2009年05月16日 36KB 下载

jQuery-轮换

2013年08月06日 192KB 下载

Jquery-

2011年10月17日 8.43MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭