dengz

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对象原本在文档树中,那么这些元素将从原位置上消失。简言之,就是移动操作。

​   ​   示例代码:

分类:

技术点:

相关文章: