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