jQuery-DOM操作
元素属性操作
1.获取元素的属性
语法:attr(name)
参数name表示属性的名称
2.设置元素的属性
单个属性设置语法:attr(key,value)
多个属性设置语法:attr({key0:value0,key1:value1})
3.删除元素的属性
语法:removeAttr(name)
$(function(){$("#a1").attr("href","http://www.baidu.com");//设置a标记中的href属性var $url = $("#a1").attr("href");//获取a标记中的href属性$("#tip").html($url);
})
$(function(){//删除a标记中的href属性$("#a1").removeAttr("href");
})
元素内容操作
语法格式 参数说明 功能描述 html() 无参数 用于获取元素的html内容 html(val) val参数为元素的html内容 用于设置元素的html内容 text() 无参数 用于获取设置元素的文本内容 text(val) val参数为元素的文本内容 用于设置设置元素的文本内容
html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也支持XML文档
$(function(){ //增加表单中所有属性为可用的元素类别var strHtml = $("#divShow").html();//获取HTML内容var strText = $("#divShow").text();//获取文本内容$("#divHtml").html(strHtml);//设置HTML内容$("#divText").text(strText);//设置文本内容
})
操作元素的样式
通过addClass()和css()可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
<h3>css()方法设置元素样式</h3><div id="content0">我穿了一件红色外衣</div><div id="content1">我穿了一件红色外衣</div><div><button id="rem">脱下蓝色的外衣</button></div>
.blue{background-color:blue}
$(function(){ //增加表单中所有属性为可用的元素类别$("#content0").css("background-color","red");$("#content1").addClass("blue");$("#rem").click(function(){//click点击事件我们将在后面介绍到。$("#content1").removeClass("blue");})
})
向元素中追加内容
<p id="id1">append()追加内容:</p><p id="id2">appendTo()追加内容:</p><p id="id3">before()追加到前面</p><p id="id4">after()追加到后面</p>
</body>
$(function(){ //增加表单中所有属性为可用的元素类别var $content = "<b>我是append()方法追加的内容</b>";var $contentTo = "<b>我是appendTo()方法追加的内容</b>";var $before = "<b>我是before()方法追加到前面的内容</b>";var $after = "<b>我是before()方法追加到后面的内容</b>";$("#id1").append($content);$($contentTo).appendTo("#id2");$("#id3").before($before);$("#id4").after($after);
})
result:
append()追加内容:我是append()方法追加的内容appendTo()追加内容:我是appendTo()方法追加的内容我是before()方法追加到前面的内容
before()追加到前面after()追加到后面我是before()方法追加到后面的内容
复制元素
想要复制元素,调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性
语法形式:$(content).clone()
参数content可以HTML内容、HTML元素标记。
$(function(){$("body").append($("div").clone());
})
元素替换
replaceWith()语法形式:$(selector).replaceWith(content)
replaceAll()语法形式:$(content).replaceAll(selector)
参数selector为被替换的元素,content为替换的内容。
$("#me").replaceWith("<div>人生巅峰</div>");$("<div>逝去的青春</div>").replaceAll("#yi");
包裹元素
wrap()语法形式:$(selector).wrap(wrapper)
wrapInner()语法形式:$(selector).wrapInner(wrapper)
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
$("p").wrap("<b></b>");//所有段落标记字体加粗$("span").wrapInner("<i></i>");//所有段落中的span标记斜体
遍历元素
在DOM元素操作中,有时需要对同一标记的全部元素进行统一操作。在jQuery中,使用each()方法可以实现元素的遍历。
语法形式:$(selector).each(callback)
参数callback是一个function函数,该函数还可以接收一个行参 index,这个形参为遍历元素的序号,序号从0开始;如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。
<h3>each()遍历元素</h3><div>帽子</div><div>上衣</div><div>裤子</div><div>鞋子</div>
$(function(){ $("div").each(function(index){if(index == 2){$(this).addClass("red");}})
})
删除元素
remove()-删除被选元素(及其子元素),empty()-从被选元素中删除子元素
$(function(){$("#rem").click(function(){$("#div0").remove();});$("#emp").click(function(){$("#div1").empty();});
})
jQuery-DOM操作相关推荐
- jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery DOM操作之查找结点
下面是对jQuery DOM操作中查找结点的整理,希望可以帮助到有需要的小伙伴. 1.查找元素节点 使用jQuery中的选择器用法可以完成查找结点的操作,相对于DOM,jQuery更方便 2.查找属性 ...
- jQuery DOM操作与简单事件
1.1 DOM查询 过滤 eq(index|-index) 选出索引为index 的元素(0开始) ,负号表示可以倒着选(-1开) first() 选出第一个元素 last() 选出最后一个元素 ha ...
- jQuery Dom 操作,动态生成dom,绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
- jquery --- DOM操作、表单元素的初始化
1.获取ul里第2个li节点: var $li_two = $("ul li:eq(1)"); // 获取该节点的内容 var $li_two_txt = $li_two.text ...
- 锋利的JQuery —— DOM操作
图片猛戳链接 转载于:https://www.cnblogs.com/xing901022/p/5034527.html
- 03-老马jQuery教程-DOM操作(上)
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- JQuery(下) DOM操作习题
jQuery DOM 操作文本 常用方法 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
最新文章
- 二十三、斐波那契查找算法
- 面向对象原则之GOF是招式,九大原则才是精髓
- GitHub user guide:Hello world
- PHP CLI模式开发
- 图片马可以直接连接吗_商标买来可以直接使用吗?
- React开发(199):参数请求错误修改请求
- MATLAB图像小波变换
- java int相除向上取整_java实战项目常用类,Date、Calendar、BigDecimal、Math、UUID
- html字体外颜色轮廓,HTML5 文本特效 - 轮廓提取
- graphviz安装以及入门
- 火狐 mysql插件_火狐firebug和firepath插件安装方法(最新)
- 2019百度之星程序设计大赛 1005 Seq
- linux命令别名永久生效
- 奥运22日看点:女乒女曲有望夺金 皮划艇全线出击
- java script 下载_JavaScript下载
- OpenCV:帧差法
- 代码比较工具三款功能强大Beyond compare、DiffMerge、WinMerge
- matlab containers,matlab中的containers.Map()
- 【转载】Aquanaut:水下变形金刚
- sap清账使用反记账_SAP反记账功能祥解