JQuery——DOM操作总结

原创 2015年07月09日 21:35:45

一.创建节点
1.创建元素

$( function(){
    var $div = $("<div></div>");   //创建div元素
    $("body").append($div);  //添加到body下
})

2.输入文本

$(function(){
    var $div = $("<div>DOM</div>");
    $("body").append($div);
})
//js下用
var txt = document.createTextNode("DOM");
div.appendChild(txt);...执行效率高

3设置属性

$(function(){
    var $div = $("<div title="盒子"></div>");
    $("body").append($div);
})
//可见jQuery简便,但效率低

二.插入内容
1.内部:

  • append():每个元素内部加内容content
  • appendTo():append用法的颠倒
  • prepend():每个元素内部前置内容
  • prependTo():prepend的颠倒

2.外部:

  • after():元素后面
  • before():元素前面
  • insertAfter():所有元素插入到另一个指定的元素集合后面
  • insertBefore():。。。前面

3.删除:

  • remove():从DOM中删除元素(不保留数据)
  • empty():删除所有匹配的元素的子元素
  • detach():从DOM中删除所有匹配元素(会保留数据,再移回DOM时用这个)

三.克隆内容

$(function(){
    $("b").click(function(){
        $(this).toggleClass("off");
    });
    $("b").clone(true).insertAfter("p");
})
//clone(true)复制<b>标签,并把它复制到<p>后,同时保留该标签默认的事件处理函数

四.替换内容

$(function(){
    $("button").click(function(){
        $(this).replaceWith("<div>"+$(this).text()+"</div>");
    });
})
//把当前按钮换成div元素+按钮
//replaceAll和replaceWith操作相反

五.包裹内容
1.外包:

$(function(){
    $("a").wrap("<li></li>");
})_
//<a>被一个<li>元素包裹

2.内包:

$(function(){
    $("a").wrap("<li></li>");
    $("body").wrapInner("<ul></ul>");
})_
//<a>被一个<li>元素包裹

3.卸包:

$(function(){
    $("button").toggle(function(){
         $("a").wrap("<li></li>");
    },function(){
            $("a").unwrap();
    });
})

六.设置属性
1.prop

$(function(){
    $("input").prop({
        disabled:true
     });
})
//prop大多用于设置disabled和checked等是或否的属性

2.attr

$(function(){
    $("img").attr("src",function(index){
        return "images/icon("+(index+1)".png";
    })
})

3.删除属性:
removeProp、removeAttr

七.类操作

  • addClass()、removeClass()
  • 切换类:toggleClass(…)
  • 判断类:hasClass(…)

八.读写文本和值

1.读写html

$(function(){
    var s = $("div").html();
    $("p").html(s);
})
//s保存div的值,再传给p

2.读写文本
(function(){  
    var s =
(“div”).text();
$(“p”).text(s);
})
//访问div内容,写入到p中

3.读写值

$(function(){
    $("input").focus(function(){
         if($(this).val()=="请输入文本")$(this).val("");
    })
})
//如果文本的值是。。。就设为空“”

九.定位:

offset就对定位
position相对定位

var o1 = $("div").eq(0).position();
//获取o1的相对偏移位置
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery自学教程(三)——DOM操作

DOM有三种形式,标准DOM、HTML DOM、CSS DOM,大部分进行了封装,然而jQuery中并不需要深刻理解它们。 其中最重要的DOM操作,就是元素及内容的操作和元素的属性操作。 一、元素及内...

jQuery学习笔记(二)—— 操作DOM元素

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。...

锋利的Jquery——学习笔记(四)DOM操作(一)

Jquery中的DOM操作(一)

锋利的Jquery——学习笔记(五)DOM操作(二)

Jquery中的DOM操作(二)

jQuery学习笔记:DOM操作(一)——文档

查找节点可以使用jQuery选择器来完成节点的查找。$("div > p");创建节点创建元素节点直接利用jQuery的工厂函数$()。 根据提供的原始 HTML 标记字符串,动态创建由 jQuer...

jQuery高级技巧——DOM操作篇

阅读目录 页面加载之DOMReady事件根据特定页面的执行对应的代码使用逻辑与运算符非常有用的jquery is()方法定义一个exists函数使用$()函数的第二个参数取消右键Click事件取...

jQuery——操作DOM

所谓Web体验,就是Web服务器与Web浏览器之间的合作。过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档。后来,我们可以用CSS技术来动态修改页面的外观。操作属性jQuery实际上...

jQuery——选择器,操作DOM

选择器,操作DOM,样式操作,DOM与jQuery

jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS

属性操作获取属性和设置属性attr() 如果要获取属性,那么给attr()方法传递一个参数,即属性名称。 $("img").attr("src"); 如果要设置属性,那么就传递两个参数,即属性名和对应...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)