jQuery小试牛刀
Posted 喜乐喵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery小试牛刀相关的知识，希望对你有一定的参考价值。
点击蓝字
jQuery - 链
链允许我们在一条语句中运行多个 jQuery 方法。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把上一期学到的 css()、slideUp() 和 slideDown() 链接在一起。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script >
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">先变红然后上滑再下滑!!</p>
<button>点我</button>
</body>
</html>
jQuery 效果- 隐藏和显示
现在可以根据上一期学到的 hide() 和 show() 方法来隐藏和显示 HTML元素。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script >
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
现在介绍下常用的 jQuery 事件方法
$(document).ready()
该方法允许我们在文档完全加载完后执行函数。
click()
该方法是当按钮点击事件被触发时会调用一个函数。
当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aidas(runoob.com)</title>
<script >
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aidas(runoob.com)</title>
<script >
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aidas(runoob.com)</title>
<script >
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="操你妈" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>
－长按关注－
以上是关于jQuery小试牛刀的主要内容，如果未能解决你的问题，请参考以下文章