html总结

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() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.