html元素操作
1、创建元素
$("<div></div>") -- 创建一个div元素,返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") -- 创建一个包含内容的div元素,返回的是一个表示div元素的jQuery对象,等同于下边两行
Var $div=$("<div></div>");
$div.html("<div>xxx</div>");
2、添加子元素
$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" );
-- 往body元素内部追加一个div子元素
3、删除元素
$("div").remove() -- 删除所有的div元素
4、替换元素
$("div").replaceWith("<p>我是来替换的…</p>")
html元素内容和值的操作
1、html()函数 (类似于js中的innerHTML属性)
-- 用于获取或设置元素的内容,比如为div、span、p、h1等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容原有内容将会被覆盖
2、text()函数 (类似于js中的innerText属性)
-- 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容原有内容将会被覆盖
<div>
这是一个div元素
<span>这是一个span元素</span>
</div>
3、val()函数 (类似于js中的value属性)
-- 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值
元素属性和css属性操作
<input type="text" name="username" id="user"/>
1、prop()函数 -- 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数,1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态, 返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态
2、css()函数 -- 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
"width" : "200px",
"height" : "150px",
"border" : "5px solid red",
"background" : "pink"
})
--设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式
其他函数
1、show()/hide()
show() -- 设置元素由隐藏变为显示
hide() -- 设置元素由显示变为隐藏
$("div").show() -- 设置所有的div元素为显示
等价于:
$("div").css("display", "block");
$("div").hide() -- 设置所有的div元素为隐藏
等价于:
$("div").css("display", "none")
2、toggle()/slideToggle()
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slideToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.