jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

时间：2021-03-04 03:42:06

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

一丶jQ操作标签内文本

html() 标签元素中的内容

/** 替换的内容可以使一个js对象,jq对象,文本 **/

	/* 获取值:获取选中标签元素的所有内容 ,包括标签*/

		$('ul').html()

            "

                <li>1</li>

                <li>2</li>

                <li>3</li>

            "

	/* 设置值:设置该元素的所有内容,会替换掉标签中原来的内容 */

		$('#box').html('<a>哈哈哈</a>')

text() 标签元素的文本内容

/** 替换的内容都会变成文本样式,html标签不会渲染,jsjq对象则是地址	 **/

	/* 获取值:获取选中标签元素的文本内容*/

		$('ul').text()

            "

                1

                2

                3

            "

	/* 设置值:设置该元素的所有文本内容 */

		$('ul').text('替换了所有内容')

		jQuery.fn.init [ul, prevObject: jQuery.fn.init(1)]

//PS:

	text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

二丶jQ操作文档标签

插入标签

​   ​   子元素可以为：stirng | element（js对象） | jquery元素

/* append 和 appendTo  : 追加到某个元素之后 */

	//父元素.append(子元素)

	 $('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象

	//子元素.appendTo(父元素)

	 $('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后

/* prepend 和 prependTo : 添加到某个元素之前 */

	//父元素.prepend(子元素)

	 $('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象

	//子元素.prependTo(父元素)

     $('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前

/* after 和 insertAfter : 兄弟元素之后插入某个元素/内容 */

	//兄弟元素.after(要插入的兄弟元素)

	 $('#l2').after('<li>哈哈</li>') 

	//要插入的兄弟元素.insertAfter(兄弟元素)

     $('<li>哈哈2</li>').insertAfter('#l2') 

/* before 和 insertBefore : 兄弟元素之前插入某个元素/内容 */

	//兄弟元素.before(要插入的兄弟元素)

     $('#l2').before('<li>哈哈3</li>')  

	//要插入的兄弟元素.insertBefore(兄弟元素)

     $('<li>哈哈4</li>').insertBefore('#l2')  

//PS:

	如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。

​   ​   示例代码:

相关文章