jQuery学习日记02

jQuery选择器
#id 选择器
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#test")

实例如下：


```html
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"> 
<title>id选择器</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>不要提醒我</h2>
<p>数学作业还没交</p>
<p id="test">只有我会消失</p>
<button>点我</button>
</body>

</html>

.class 选择器
Query 类选择器可以通过指定的 class 查找元素。
语法如下：

$(".test")

实例如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"> 
<title>.class选择器</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">人海茫茫</h2>
<p class="test">无风起浪</p>
<p>明月当空，乘风破浪 只有我不消失</p>
<button>点我</button>
</body>
</html>

jQuery 事件
页面对不同访问者的响应叫做事件。
常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
实例如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"> 
<title>click</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

dblclick()

当双击元素时，会发生 dblclick 事件。
实例如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"> 
<title>dblclick</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>

更多事件方法可戳-来源：菜鸟教程

jQuery 效果- 动画
animate() 方法
用于自定义动画。
语法：

$(selector).animate({params},speed,callback);

·必需的 params 参数定义形成动画的 CSS 属性。

·可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
·可选的 callback 参数是动画完成后所执行的函数名称。
实例如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

注意：生成动画的过程中可同时使用多个属性

animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。
实例如下：

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

相关推荐