Jquery-文档处理学习笔记
2011-10-16 20:06
393 查看
一、用试验用的html文件
二、使用方法
1、创建元素。
对于jquery创建元素与书写普通html标签没太大区别,创建好之后返回一个jquery对象。$(html) 按照普通html写法
使用js代码创建相同的元素就要麻烦很多
2、prepend用法,与append类似,只是把当前元素作为追加元素的首元素,prependTo与prepend一样的效果,只是写法上将追加元素与选择器元素调换位置
3、外部插入before,与append类似,只是append将追加元素作为选择元素的子元素插入,before则是将插入元素与选择器元素放在同一个等级上,在选择器元素之前插入
4、删除方法empty(),remove(),detach
empty将其匹配子元素全部删除
remove、detach将包括自身及其子元素删除
5、元素复制 参数true表示连同复制元素的事件一起复制
6、元素替换
7、文档包裹wrap,wrapAll,wrapInner
<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"); 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>');
相关文章推荐
- Jquery 基础学习笔记之文档处理
- python学习笔记-Day16-jquery(文档处理/事件/插件)
- Jquery基础学习笔记(2)-文档处理
- jQuery学习笔记:文档处理
- Jquery 基础学习笔记之文档处理
- jQuery学习笔记 操作jQuery对象 文档处理
- jQuery学习笔记:文档处理
- jQuery学习笔记 操作jQuery对象 文档处理
- Jquery基础学习笔记(2)-文档处理
- jQuery学习笔记 操作jQuery对象 CSS处理
- Jquery重新学习之四[核心属性与文档处理属性]
- jQuery 学习十(文档处理)
- 【JQuery学习笔记二】利用JQuery完成不同的文档和节点操作!
- Jquery学习笔记——处理表单元素
- jQuery文档学习笔记
- jQuery学习笔记之 Ajax操作篇(三) - 过程处理
- HTML——jquery学习笔记+实例+动画效果+表格处理
- jQuery学习笔记 操作jQuery对象 属性处理
- jQuery学习笔记--jqGrid方法列表 官方文档!
- jQuery学习笔记(3)——事件处理