jQuery学习笔记之控制页面实现代码(2)

$(function () {
$("div").click(function () {
alert("单击事件");
});
$(".myClass3").trigger("click");
});

实现单击事件的动态交替（k6）toggle(fn,fn)

复制代码 代码如下:

$(function () {
$("img").attr("title","toggle()实现单击事件的动态交替").toggle(function (event) {
$(event.target).attr("src", "Img/Img2.jpg");
},
function (event) {
$(event.target).attr("src", "https://www.jb51.net/Img/Img1.jpg");
});
});

实现感应鼠标（k6）

复制代码 代码如下:

$(function () {
$("img").hover(function (event) {
$(event.target).css("opacity", "1.0");
},
function (event) {
$(event.target).css("opacity", "0.5");
}
);
});

html代码

复制代码 代码如下:

<%--k1--%>
<form runat="server">
<div title="iPhone"></div>
<div title="Lumia900"></div>
<div title="HTC"></div>
<button></button>
</form>
<%--k2--%>
<a href="#">要被添加的链接1</a>
<a href="#">要被添加的链接2</a>
<p>iPhone</p>
<p>Lumia900</p>
<%--k3--%>
<button></button>
<%--k4--%>
<input type="button" value="iPhone5" />
<input type="button" value="Lumia900" />
<input type="button" value="HTC" />
<input type="text" />
<%--k5--%>
<div>点击我</div>
<%--k6--%>
<img alt="美图" src="https://www.jb51.net/Img/Img1.jpg"/>

css代码

复制代码 代码如下:

.myClass1{ color:Blue; background:#e58302;}
.myClass2{ color:Red;}
.myClass3{ border:1px solid #FF0000; height:50px; width:80px; float:left;}