一javascript
1引入方式
<script type="text/javascript">
</script>
2常用函数
JS获取元素
```html
document.getElementById( id值 )
通过元素的id值,获取一个元素。返回的是表示该元素的js对象。
document.getElementsByTagName( 元素名 )
通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。
document.body
获取当前文档中的body元素
ele.parentNode
获取当前元素的父元素。ele表示当前元素
JS增删改元素
document.createElement( 元素名称 )
根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象
parent.appendChild( child )
通过父元素添加子元素,其中parent表示父元素,child表示子元素
parent.removeChild( child )
通过父元素删除子元素,其中parent表示父元素,child表示子元素
ele.innerHTML
获取当前元素的html内容(从开始标签到结束标签之间的所有内容),还可以设置当前元素的html内容(如果元素内部有内容,将会覆盖原有内容)
二jquery
1引入方式
<script src="js/jquery-1.8.3.js"></script>
<script>
</script>
2jQuery事件绑定
<script>
$(function(){
//当点击btn按钮时,触发点击事件执行其中的函数
$("#btn").click( **function**(){
alert("input按钮被点击了...");
});
});
</script>
<body>
<input id=*"btn" type="button" value="点我~!" /\>
</body>
3常用函数
$("<div></div>")
创建一个div元素,返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>")
创建一个包含内容的div元素,返回的是一个表示div元素的jQuery对象
$parent.append( $child )
父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" )
往body元素内部追加一个div子元素
$("div").remove()
删除所有的div元素
$("div").replaceWith("<p>我是来替换的…</p>")
替换元素
$("div").html()
获取所有div中的第一个div的内容
$("div").html("xxxx")
为所有div设置内容
$("div").text()
获取所有div中的所有文本内容
$("div").text("xxxx")
为所有div设置文本内容
$("input").val()
获取所有input元素中的第一个input元素的value值
$("input").val(值)
为所有的input元素设置value值
$("input[type='checkbox']").prop("checked")
获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
设置所匹配的复选框元素为选中状态
$("#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、边框以及背景颜色等样式
$("div").show()
设置所有的div元素为显示
$("div").hide()
设置所有的div元素为隐藏