Jquery笔记之第一天

1.使用Jquery

方法一：下载JQuery

方法二：使用CDN内容分发网络

常用的国内CDN：

百度：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

新浪：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2.jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

(1)基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

• $(this).hide() - 隐藏当前元素
  $("p").hide() - 隐藏所有 <p> 元素

• (2)文档就绪时间

• $(document).ready(function(){    // 开始写 jQuery 代码... });为了防止文档在完全加载（就绪）之前运行 jQuery 代码

3.jQuery 事件

$ ( " p " ) . click ( ) ;

$("p").click(function(){ // 动作触发后执行的代码!!});

<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(event) {
        alert("click");
    });
    $("#btn1").dblclick(function(event) {
        alert("dbclick");
    });

    $("#btn1").hover(function(event) {
        alert("hover");
    });
    $("#btn1").mouseenter(function(event) {
        alert("mouseenter");
    });
    $("#btn1").mouseleave(function(event) {
        alert("mouseleave");
    });

    $("#btn1").blur(function(event) {
        alert("blur");
    });
    $("#btn1").focus(function(event) {
        alert("focus");
    });

});


</script>

4.jQuery 效果

4.1淡入淡出

fadeIn 淡入已隐藏的元素。,fadeOut,fadeToggle,fadeTo

$(selector).fadeIn(speed,callback);

$(document).ready(function(){
  $("button").click(function(){
	  $("#div1").fadeIn(3000,function(){
	  	alert("执行完毕");
	  });
  });
});

$(selector).fadeOut(speed,callback);

4.2滑动

jQuery 拥有以下滑动方法：

• slideDown()
• slideUp()
• slideToggle()

• $(document).ready(function(){
    $("#flip").click(function(){
      $("#panel").slideDown("fast",function(){
  		alert("over");
  	});
    });
  });

4.3动画

jQuery animate() 方法用于创建自定义动画。

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

	使用绝对值

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px',height:'200px'});
  });
});

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

使用相对值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用队列方式

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});

4.4停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

Callback 函数在当前动画 100% 完成之后执行。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。