jQuery操控DOM元素
2015-06-11 15:21
591 查看
创建节点元素
$(html)用于动态的创建节点元素,只需要找到元素的上级节点点击按钮创建p元素节点,并设置内容为:创建的节点,颜色为红色,字体大小为20像素
<script type="text/javascript"> $(function(){ var p=$('<p style="color: red;font-size: 20px">创建的节点</p>'); $("input").click(function(){ $("#wrapper").append(p); }); }); </script> <div id="wrapper"> <input type="button" value="点击创建图片节点" /> </div>
插入节点
插入内部节点
append(function(index,html))
这个方法是将一个function函数作为append方法的参数,该函数的功能必须返回一个字符串,作为append方法插入的内容,index参数为对象在这个集合中的索引值,html参数为该对象原有的html值通过append(function(index,html))方法插入节点
<script type="text/javascript"> $(function(){ var p=$('<p style="color: red;font-size: 20px">创建的节点</p>'); $("input").click(function(){ $("#wrapper").append(fun); }); function fun(){ var p=$('<p style="color: red;font-size: 20px">创建的节点</p>'); return p; } }); </script> <div id="wrapper"> <input type="button" value="点击创建图片节点" /> </div>
appendTo(content);
该方法用于将一个指定的元素插入到另一个元素的内容中将img元素插入到div元素中去
<script type="text/javascript"> $(function() { $("input").click(function() { $("img.img").appendTo($("div.con")); }); }); </script> <div id="wrapper"> <input type="button" value="点击创建图片节点" /> <div class="con" style="border: 2px solid red"> <img src="http://xinxinjs.github.io/img_test/st1.jpg" /> </div> <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" /> </div>
其他方法:
append(context);context表示追加到目标中的内容
prepend(content);
content表示插入目标元素内部前面的内容
prepend(function(imdex,html));
通过function函数返回插入目标元素内部前面的内容
prependTo(content);
content用于表示选择元素的jQuery表达式
插入外部节点
after(content);content表示插入目标元素外部后面的内容
after(function);
通过function函数返回插入目标元素外部后面的内容
before(content);
content表示插入目标元素外部前面的内容
before(function);
通过function函数返回插入目标元素外部前面的内容
insertAfter(content);
content表示插入目标元素外部后面的内容,(经测试,该方法会删除目标元素,然后在目标元素的外部后面插入新的内容)
insetBefore(function);
content表示插入目标元素外部前面的内容,(经测试,该方法会删除目标元素,然后在目标元素的外部前面插入新的内容)
在目标元素的外部后面插入图片
<script type="text/javascript"> $(function() { $("input").click(function() { $(".con").after('<img src="http://xinxinjs.github.io/img_test/st1.jpg" />'); }); }); </script> <div id="wrapper"> <input type="button" value="点击创建图片节点" /> <div class="con" style="border: 2px solid red"> <img src="http://xinxinjs.github.io/img_test/st1.jpg" /> </div> <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" /> </div>
复制节点
将某个元素节点复制到另一个节点后,在jQuery中通过clone方法实现,其功能是复制匹配的DOM元素,并且选中复制成功的元素,该方法仅是复制元素本身,被复制后的新元素不具有任何元素行为。如果在复制时将该元素的全部行为也进行复制,可以通过方法clone(true);实现点击图片,对图片进行复制,并添加到原来图片的后面
<script type="text/javascript"> $(function() { $("img").click(function() { $(this).clone().appendTo("div.con"); }); }); </script> <div id="wrapper"> <div class="con" style="border: 2px solid red"> <img src="http://xinxinjs.github.io/img_test/st1.jpg" /> </div> </div>
替换节点
在jQuery中替换节点有replaceWith和replaceAll两种方法,其语法如下replaceWith(content);
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素,其中参数content为被所选元素替换的内容
replaceAll(selector);
该方法是将所有选择的元素替换成指定selector的元素,其中参数selector为需要被替换的元素
分别用两种方法实现图片的替换
<script type="text/javascript"> $(function(){ $("#s1").click(function(){ $(this).replaceWith('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />'); }); $("#s2").click(function(){ $('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />').replaceAll("#s2"); }); }); </script> <img id="s1" src="http://xinxinjs.github.io/img_test/st2.jpg" /> <img id="s2" src="http://xinxinjs.github.io/img_test/st1.jpg" />
包裹节点
在jQuery中可以根据需求包裹某各指定节点,对节点的包裹也是DOM对象操作中很重要的一项以下列表展示包裹节点的全部方法
wrap(html);
html参数为字符串代码,用于生成元素并包裹所选元素功能:把所有选择的元素,用其他字符创代码包裹起来
wrap(elem);
elem参数用于包装所选元素的DOM元素功能:把所有选择的元素用其他DOM元素包裹起来
wrap(fn);
fn参数为包裹结构的一个函数功能:把所有选择的元素用function函数返回的代码包裹起来
unwrap();
无参数功能:移除所选元素的父元素或包裹标记
wrapAll(html);
html参数为字符串代码,用于生成元素,并包裹元素功能:把所有选择的元素用单个元素包裹起来
wrapAll(elem);
elem参数用于包裹所选元素的DOM元素功能:把所有选择的元素用单个DOM元素包裹起来
wrapInner(html);
html参数为字符串代码,用于生成元素,并包裹所选元素功能:把所有选择元素的子内容(包括文本节点),用字符串代码包裹起来
wrapInner(elem);
elem参数用于包裹所选元素的DOM元素功能:把所有选择元素的子内容(包括文本节点),用DOM元素包裹起来
wrapInner(fn);
fn参数为包裹结构的一个函数功能:把所有选择元素的子内容(包括文本节点),用function函数返回的代码包裹起来
点击文本,用a标签包裹文本
<script type="text/javascript"> $(function(){ $("p").click(function(){ $(this).wrap("<a href='#'></a>"); }); }); </script> <p>元素,点击之后用a标签包裹</p>
遍历元素
在DOM文档中,有时候需要对同一标记的元素进行同一操作。在传统的JavaScript中,总是先获取元素的总长度,然后以for循环语句,递减总长度,访问其中的某各元素,代码相对复杂而在jQuery中可以使用each方法实现元素的遍历,其语法如是:each(callback);
其中callback是一个function函数,该函数还可以接受一个形参,此形参为遍历元素的序号,从0开始。如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取
删除元素
带DOM操作页面时,jQuery提供了两个删除元素的方法remove和empty方法,严格来说empty并非真正意义上的删除,使用该方法仅仅可以清空所有的节点或节点所包括的所有后代元素,并非删除节点和元素remove方法的语法如下:remove([expr]);
其中expr为可选项,如果接受参数,则该参数为筛选元素的jQuery表达式,通过该表达式获取指定的元素,并进行删除。
empty语法的格式如下:empty();
点击文字,删除文字
<script type="text/javascript"> $(function(){ $("p").click(function(){ $(this).remove(); }); }); </script> <p>元素,点击之后用a标签包裹</p>
相关文章推荐
- ie8下jquery改变PNG的opacity出现黑边
- jquery实现的流式布局
- jquery实现的流式布局
- jquery实现可编辑的下拉框( input + select )
- jQuery hover()方法和jQuery toggle()方法用法示例
- jquery鼠标拖拽效果分享
- jQuery与Java实现图片的剪切
- 基于jQuery的GridView-Flexigrid(2)-扩展和修复
- 基于jQuery的GridView-FlexiGrid的使用和改造(1)--如何使用,完全参数说明
- JQUERY动态绘制表格,实现动态添加一行,删除一行
- 使用jquery jcrop插件进行图片的截取与保存
- 利用jquery实现滚动图片
- jquery easyui textbox添加事件不起作用的解决办法
- 基于jquery的ajax 异步获取json
- Jquery绑定事件
- jQuery轻量级简单实用的图片放大镜特效
- Jquery Ajax调用aspx页面方法
- 从零开始学习jQuery
- JS/Jquery判断对象为空的方法
- jQuery使用drag效果实现自由拖拽div