jQuery方法摘录2

最新推荐文章于 2023-09-22 11:20:04 发布

qiaoyanma0217

最新推荐文章于 2023-09-22 11:20:04 发布

阅读量381

点赞数

分类专栏： jQuery笔记文章标签： jquery function input button class div

本文链接：https://blog.csdn.net/qiaoyanma0217/article/details/6338751

版权

jQuery笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.jQuery 事件 - bind() 方法

(1)

$(document).ready(function(){
$("button").bind("click",function(){
$("p").slideToggle();
});
});

(2)替代方法：$(selector).bind(event,data,function)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},
    mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>
2.jQuery 事件 - blur() 方法    当输入域失去焦点 (blur) 时改变其颜色

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
3.触发change事件

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>
4.jQuery 事件 - delegate() 方法

$(document).ready(function(){
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
});

5.die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeColor()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("p").live("click",changeSize);
$("p").live("click",changeColor);
$("button").click(function(){
$("p").die("click",changeSize);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>
</html>
6.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});

</script>
</head>
<body>
<p>鼠标指针位于： <span></span></p>
</body>
</html>