Jqueryでのイベント処理(自動トリガイベント、無効ボタン、サスペンション、ズームアウト、スライドエフェクト)
7372 ワード
1.自動トリガーイベント
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('click', function () {
alert('you click' + $(this).text());
$('.Green').trigger('click');
});
});
</script>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
</code></pre>
<p>2. </p>
<pre><code>
<title/>
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('click', function () {
alert('you click' + $(this).text());
$('.buttons').unbind('click');
});
});
</script>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
</code></pre>
<p>3. ( ， ， )</p>
<pre><code>
<title/>
<style type="text/css">
.Red
{
color:Red;
}
.Green
{
color:Green;
}
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$('.buttons').bind('mousedown', function () {
alert('you mouse button is pressed down' + $(this).text());
});
$('.buttons').bind('mouseup', function () {
alert('The mouse button is released over'+$(this).text());
});
$('.buttons').bind('mouseover', function () {
alert('The mouse button is over' + $(this).text());
});
});
</script>
<span class="Red buttons">Red</span>
<span class="Green buttons">Green</span>
</code></pre>
<p>4. ， </p>
<pre><code>
<title/>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$("#Name").focus(function () {
alert('Name has been focused');
}
);
$("#Name").blur(function () {
alert('Name lost focus');
});
});
</script>
Name <input id="Name" type="text"/>
</code></pre>
<p>5. </p>
<pre><code>
<title/>
<style type="text/css">
.buttons
{
text-align:center;
font-weight:bold;
border:2 solid;
width:100px;
float:left;
margin:5px;
background-color:Gray;
}
.hover
{
cursor:crosshair;
color:Blue;
background-color:cyan;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
// ， ，
//
$('.buttons').hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
</script>
<span class="buttons">Click</span>
</code></pre>
<p>6.' ' </p>
<pre><code>
<title/>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$('#Message').hide();
$("#more").toggle(
function () {
$("#Message").show('slow');
$(this).text('read less');
},
function () {
$('#Message').hide();
$(this).text('Read More');
}
)
});
</script>
<div>Welome to My Blog</div>
<span id="more">Click More</span>
<div id="Message">
I'm a software engineer development,i have been work in shanghai for about 6 months.I love this job.
it got a lot of potential than my old job.In order to Earning money,I need to work hard and contribute to my team.
</div>
</code></pre>
<p>7. </p>
<pre><code>
<title/>
<style type="text/css">
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready(function () {
$('#message1').css({ 'backgroundColor': '#f00', 'text-align': 'center','width':'200px' }).hide();
$("#message2").css({ 'backgroundColor': 'gray', 'text-align': 'center','width': '200px' }).click(function () {
$(this).slideUp();
$("#message1").slideDown();
});
});
</script>
<p id="message1">Welome to My Blog</p>
<p id="message2">Welcome to My Facebook</p>
</code></pre>
<p>8. </p>
<p> </p>
</div>
</div>
</div>
</div>