jQuery操作实例-优快云博客

本文链接：https://blog.youkuaiyun.com/vbloveshllm/article/details/52038446

1.学习实例
一：
1）显示，隐藏和改变msg内容
<html>
<head>
<title>hello jquery</title>
<script src="~/Scripts/jquery-1.7.1.js"></script>
</head>
<body>
<div id="msg">hello,word</div>
<input id="btnShow" type="button" value="显示" />
<input id="btnHide" type="button" value="隐藏" />
<input id="btnChange" type="button" value="改变内容为hello jquery" />
<script type="text/javascript">
$(function () {
$('#btnShow').click(function () {
$('#msg').show();
})

$('#btnHide').click(function () {
$('#msg').hide();
})

$('#btnChange').click(function () {
$('#msg').html("hello,jquery");
})

})
</script>
</body>
</html>

2）另一种方式如下：
<script type="text/javascript">
$('#btnShow').bind("click", function (even) {
$('#msg').show();
});
$('#btnHide').bind("click", function (even) {
$('#msg').hide();
});
$('#btnChange').bind("click", function (even) {
$('#msg').html("hello,world");
})
</script>


二、动态创建元素
1.通过dom创建动态元素
function CreateElement()
{
var select = document.createElement("select");
select.options[0] = new Option("加载项1", "3");
select.options[1] = new Option("加载项2", "4");
var object = testdiv.appendChild(select);
}

2.通过jquery动态创建元素 innerHTML
$("<div style=\"border:solid 2px #ABCDEF\">jquery 动态创建的元素div</div>").appendTo("#testdiv");
$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>").appendTo("#testdiv");
3.第三种方式 //jQuery内部使用document.createElement创建元素:
$("<div/>").css("border", "solid 4px #333").html("动态创建的元素").appendTo("#testdiv");
4.初始化创建动态元素
$(document).ready(function () {
testdiv.innerHTML = "<div style=\"border:solid 5px #333\">初始化创建动态元素</div>";
})
三、jquery属性和样式：
用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式.

jquery基本用法一