JQuery DOM

DOM = Document Object Model(文档对象模型)

获得内容 - text()、html() 以及 val():

text() - 设置或返回所选元素的文本内容 
html() - 设置或返回所选元素的内容(包括 HTML 标记) 
val() - 设置或返回表单字段的值 

text:
得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
    1. $(element).text() 获取element元素的文本内容
    2. $(element).text("textString") 用于设置匹配元素内容的文本


html:
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容
1. $(element).html() 获取element元素的HTML内容
    2. $(element).html("htmlString") 为每一个匹配元素添加html内容
    重要说明:$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的,
所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)

	val:
方法主要是用于处理表单元素的值,比如 input, select 和 textarea。
        //JavaScript中的value属性
        1. $(ele).val() 获取匹配的元素集合中第一个元素的当前值
        2. $(ele).val(value) 设置匹配的元素集合中每个元素的值

添加元素:

append() - 在被选元素的结尾插入内容 
$(element).append("<div class='box1'>这是在被选元素的结尾插入的内容");

prepend() - 在被选元素的开头插入内容 
$(element). prepend ("<div class='box2'>这是在被选元素的开头插入的内容");

after() - 在被选元素之后插入内容 
	//$(A).after(B); 在A后面插入B元素
$(element). after ("<div class='box3'>这是在被选元素之后插入内容 ");

before() - 在被选元素之前插入内容 
//$(A).before(B);在A前面插入B元素	
$(element). before ("<div class='box4'>这是在被选元素之前插入内容 ");
	
insertAfter()与insertBefore()
    insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    $(A).insertAfter(B) 在B后面插入A元素     
与$(A).after(B)是相反的操作,但是功能一样
    $(选择要插入内容元素).insertAfter("要插入的内容");
            
insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
    $(A).insertBefore(B) 在B前面面插入A元素
与$(A).before(B)是相反的操作,但是功能一样
$(选择要插入内容元素).insertBefore("要插入的内容");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值