jQuery学习（二.3）

来源：互联网发布：onlyanna淘宝编辑：程序博客网时间：2024/06/02 03:14
这是jQuery DOM的最后一节，学习的是jQuery DOM的操作。
～～
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>learnJquery-3</title><style type="text/css">.a {background: green;}.b {background: pink;}</style><script type="text/javascript" src="jquery-2.1.1.js"></script></head><body><p class="b">i am style p tag</p><p>i am style p tag</p><p class="p1">111I AM THE old p TAG1111</p><p class="p2">my name is a tag of paragraph2222</p><br/><br/><br/><p>i am p tag</p><span>i am span tag</span><div>i am <strong>div</strong>tag</div> <em>i am em tag</em><br/><br/><a href="#">please click</a><script type="text/javascript">//use obj to new tag/*var newElement = $('<div>222A  new DIV TAG222</div>');$('body').append(newElement);*///use String to new html/*var newElement = '<div>I am the string tag</div>';$('body').append(newElement);*///insert node into html use jquery // var strong = $('<strong>i am the insert into new strong!</strong>');// $('p.p2').append(strong); //相匹配元素尾部插入标签,匹配元素在前// strong.appendTo($('p.p2')) ; //相匹配元素插入标签,匹配元素在后   //两者效果一样/*$('p.p2').prepend(strong);//类比append，不解释strong.prependTo($('p.p2'));*///以上都是内部插入！//外部插入/*$('p.p2').after(strong);strogn.insertAfter($('p.p2'));*//*$('p.p2').before(strong);strogn.insertBefore($('p.p2'));*///包裹节点~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`//将所有匹配元素单独包裹// var out_wrap = '<div class="extra-wrapper" style="background:#abcedf">i am test wrap</div>';// $('p').wrap(out_wrap);// $('p').wrapAll(out_wrap); //用一个内容包裹所有的匹配元素// $('p').wrapInner('out_wrap');//包裹内部内容/*<<<<<<<<<<<<<remove node etc. >>>>>>>>>>>>>>>>>*/// $('p:eq(4)').remove();// $('div').empty();// $('strong').unwrap();//只是删除了元素标签，内容还在/*!!!!!!!!!!!!!!!!!!!*//*$('a').click(function() {alert("a is clicked");});*/// var newA = $('a').clone();//注意不同/*var newA = $('a').clone(true);$('body').append(newA);*/// $('em').replaceWith('<strong>i am new strong replaced em</strong>'); // the same as below// $('<strong>i am new strong replaced em</strong>').replaceAll($('em'));/*操作节点属性！！！*/// $('p:lt(2)').attr('class', 'b');// $('p:eq(0)').removeAttr('class');// prop 和attr是一样的</script></body></html>
0 0