前言：

前面学习了JQuery的选择器，今天开始学习新的知识，JQuery操作DOM元素。

元素属性的访问与设置

attr(name) 获取元素属性
attr(name,value) 单个属性设置
attr({key:value,key1:value1,...}) 多个属性设置
attr(name,function(index))通过函数返回的值修改属性
removeAttr(name) 删除单个属性值
元素内容的访问与设置

html() 获取元素的html内容
html(val) 修改元素的html内容
text() 获取元素的文本内容
text(val) 设置元素的文本内容
val()获取元素的值
val(value)设置元素的值
元素样式操作

css(name,value) 修改单个css样式值
addClass(class1) 增加css样式类别
toggleClass(class1)类别切换
removeClass(class1)删除类别
上面几个写个小例子





Title



    
        

    
        百度搜索

节点元素操作

创建节点元素
插入节点
复制节点
删除节点
替换节点
包裹节点

"; //向所选择的元素中插入元素 $("#contentDiv").append($jdDiv); //将选中元素中插入到目标元素 // $($jdDiv).appendTo("#contentDiv"); var $tbDiv = "

淘宝

"; //向所选择的元素中最前面插入元素 $("#contentDiv").prepend($tbDiv); //将选中元素中插入到目标元素最前面 // $($tbDiv).prependTo("#contentDiv"); var $nmDiv = "

糯米

"; //向所选择的元素外部后面插入元素 $("#tb").after($nmDiv); var $ddDiv = "

当当

"; //向所选择的元素外部前面插入元素 $("#tb").before($ddDiv); //每个被选元素后面插入一个已有元素 $("#tb").insertBefore($("#jd")); // 每个被选元素前面插入一个已有元素 $("#nm").insertAfter($("#tb")); //复制节点 var $vp = $("#tb").clone(true).attr({"id": "vp"}); $("#nm").before($vp); $("#vp >img").attr("src", "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95693.png"); //替换节点 $("#vp").replaceWith("

唯品会

"); //所有选择的元素用加粗包裹起来 $("#contentDiv >div").wrap(""); //遍历元素 $("#vp").each(function () { $("#vp >img").attr("src", "https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/93289.png"); }); //删除节点 $("#nm").remove(); }); });

动态添加元素

总结：
今天简单学习使用了一下JQuery操作DOM元素的一些语法。

ITPub博客

Hybrid App开发之jQuery操作DOM

百度搜索

动态添加元素

最新文章