javascript 第26节 jQuery对象
<html>
<head>
<title>jQuery</title>
<!--导入jquery库-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
jQuery(document).ready(
function () {
alert("AA:jquery加载成功...");
}
);
$(document).ready(
function () {
alert("BB:jquery加载成功...");
}
);
$(
function () {
alert("CC:jquery加载成功...");
}
)
*/
$(
function () {
$("#but").click(
function () { alert("按钮事件") }
)
}
)
</script>
</head>
<body>
<div >jQuery</div>
1. 页码加载监听</br>
测试添加事件</br>
<input type="button" value="按钮" id="but"/>
</body>
</html>
rs:
2.Jquery对象和document对象转换
<html>
<head>
<title>jQuery</title>
<!--导入jquery库-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#but1").click(
function () {
var oMsg = document.getElementById("msg");//Dom对象
alert("Dom对象的属性 ： " +oMsg.innerHTML);
});
$("#but2").click(
function () {
var $msg = $("#msg");//jquery对象
alert("jquery对象的方法 ： " + $msg.text());
//alert($msg.innerHTML); //jquery对象不能访问dom属性
});
$("#but3").click(
function () {
var oMsg = document.getElementById("msg");//Dom对象
//转换
//var $msg = $(oMsg);
var $msg = jQuery(oMsg);
alert("jquery对象的方法 ： " +$msg.text());
});
$("#but4").click(
function () {
var $msg = $("#msg");//jquery对象
//转换
//var oMsg = $msg.get(0);
var oMsg = $msg[0];
alert(oMsg.innerHTML); //jquery对象不能访问dom属性
/*
var show = "";
for(var name in $msg) {
show+= name + " : " + $msg[name] + "\n";
}
alert(show);
*/
});
$("#but5").click(
function () {
//var $msg = $("#message");//jquery对象
var $msg = $("#username");
//alert($msg.html());
//alert($msg.text());
alert($msg.val());
});
$("#but6").click(
function () {
var $msg = $("#message");
//$msg.html("<font color='blue'>xml</font>");
$msg.text("oracle");
});
$("#but7").click(
function () {
var $img = $("#img");
alert($img.attr("src"));
$img.attr("src","p2.jpg");
});
})
</script>
</head>
<body>
<div >jQuery对象</div>
1. 对象<br/>
<span id="msg">软件</span><br/>
<input type="button" value="DOM对象" id="but1"/>
<input type="button" value="jquery对象" id="but2"/>
<input type="button" value="DOM->jquery" id="but3"/>
<input type="button" value="jquery->DOM" id="but4"/><br/>
2. 对象方法<br/>
<span id="message" value="java"><h3>java</h3></span></br>
<input type="text" value="张三" id="username"/><br/>
<img src="2.gif" id="img"/>
<br/>
<input type="button" value="取值" id="but5"/>
<input type="button" value="赋值" id="but6"/>
<input type="button" value="属性" id="but7"/>
</body>
</html>
rs:
