标签：mouse   amp   html   click   学习   必须   sub   hit   sed   

jQuery学习

本篇主要参考菜鸟教程

jQuery安装

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

jQuery语法

通过jQuery,可以选取(查询,query) HTML元素,并对它们执行"操作"(actions)
基础语法:$(selector).action()

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

实例

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

  元素
  

• $("p.test").hide()-隐藏所有class="test"的

  元素
  

• $("#test").hide()-隐藏所有id="test"的元素

文档就绪事件

$(document).ready(function(){
    //开始写jQuery代码
});  

这是为了防止文档在完全加载就绪之前运行jQuery代码.还有更加简洁的写法:

$(function(){

    //开始写代码
});

JavaScript入口函数:

window.onload = function(){
    //开始写代码
}

jQuery入口函数与javaScript入口函数的区别:

• jQuery的入口函数式在html所有标签(DOM)都加载之后,就会去执行.
• JavaScript的window.onload事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行.

jQuery选择器

元素选择器
jQuery元素选择器基于元素名选取元素.
在页面中选取所有

元素

$("p")

实例
用户点击按钮后,所有

元素都隐藏

$(function(){
    $("button").click(function(){
        $("p").hide();
    })
})

ID选择器
通过id选取元素语法如下:

$("#test")

实例
当用户点击按钮后,有id="test"的属性的元素将被隐藏:

$(function(){
    $("button").click(function(){
        $("#test").hide();
    })
})

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

$(".test");

实例
用户点击按钮后所有带有class="test"属性的元素都隐藏:

$(fucntion(){
    $("button").click(function(){
        $(".test").hide();
    })
});

番外

通过$(":button")可以选取所有type="button"的<input>元素和<button>元素,如果去掉冒号,$("button")智能选取<button>元素.
关于:和[]这两个符号的理解  
:可以理解为种类的意思,如:p:first,p的种类为第一个.  
[]很自然的可以理解为属性的意思,如:[href]选取所有带href属性的元素.

jQuery事件

常用DOM事件

jQuery事件方法语法
页面中指定一个点击事件:

$("p").click()

下一步是定义完成什么:

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

常用的jQuery事件方法

$("p").click(function(){

})
$("p").dblclick(function(){

})
$("p").mouseenter(function(){

})
$("p").mouseleave(function(){

})
$("p").mousedown(function(){

})
$("p").mouseup(function(){

})
$("p").hover(function(){

})
$("input").focus(function(){

})
$("input").blur(function(){

})
$(window).keydown(function(event){
    //通过event.whitch可以拿到按键代码.
})

传递数据给事件处理函数

jQuery.keydown([[data,] handler]);

• data:通过event.data传递给事件处理函数的任意数据
• handler:指定的事件处理函数;

举例:

var validKeys = {start: 65, end: 90};
$("#key").keydown(validKeys, function(event){
    var keys = event.data;//拿到validkeys对象.
    return event.which >= keys.start && event.which <= keys.end;
})

jQuery效果-隐藏和显示

隐藏,显示,切换,滑动,淡入淡出,以及动画.
jQuery.hide()和show()

$("#hide").click(function(){
    $("p").hide();
})
#("#show").click(function(){
    $("p").show();
})

语法:

$(selector).hide(speed, callback);
$(selector).show(speed, callback);

可选的speed参数规定隐藏/显示的速度,可以取以下值:"slow","fast"或毫秒.
可选的callback参数是隐藏或显示完成后执行的函数名称.
例子:

$(function(){
    $("click").click(function(){
        $("p").hide(2000, function(){
            console.log("隐藏完毕!");
        })
    })
})

jQuery.toggle()
通过jQuery,可以使用toggle()方法来切换hide()和show()方法.
语法:

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

与show,hide相同的参数意义

$("button").click(function(){
    $("p").toggle(1000, function(){
        console.log("ok");
    });
})

番外
对于可选的callback参数,有以下两点说明:

1. $(selector)选中的元素的个数为n哥,则callback函数会执行n次.
   
2. callback函数名后加括号,会立即执行函数,而不是等到显示或隐藏完成后执行,但是只会执行一次.

3. callback既可以是函数名,也可以是匿名函数;

   jQuery效果-淡入淡出

   通过jQuery可以实现元素的淡入淡出效果,拥有四种fade方法:
   

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn()方法
用于淡入已隐藏的元素.
语法:

$(selector).fadeIn(speed, callback)

例子:

$("#wo").click(function(){
    $("p").fadeIn(1000, function(){
        console.log("可以整");
    })
})

jQuery fadeOut()方法
用于淡出可见元素.
语法:

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

例子:

$(selector).click(function(){
    $("#p").fadeOut();
    #("#a").fadeOut(3000);
})

jQuery fadeToggle()方法
该方法可以在fadeIn()方法和fadeOut()方法之间进行切换.
语法:

$(selector).fadeToggle(speed, callback)

例子:

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle(3200);
})

jQuery fadeTo()方法
该方法允许渐变为给定的不透明度(值介于0与1之间).
语法:

$(selector).fadeTo(speed, opacity, callback)

必须的speed参数规定效果的时长
opacity参数为淡入淡出效果设置的不透明度.
可选的callback参数是该函数完成后所执行的函数名称.
例子:

<p style="color: red;">设施显示的画面</p>
<p style="color: blue;">这是例外</p>
<button id="abc">点击我</button>
<button id="wo">点对对对</button>
<script>
    $(function(){
        $("#abc").click(function(){
            $("p").fadeTo(2000, 0.3);
        })
    })
</script>

jQuery效果-滑动

滑动方法:

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

jQuery slideDown()方法

$(selector).slideDown(speed, callback)

例子:

<div style="color: red;">设施显示的画面</div>
    <div style="color: blue;">这是例外</div>
    <button id="abc">点击我</button>
    <button id="wo">点对对对</button>
    <script>
       $(function(){
           $("#abc").click(function(){
              console.log("ds");
               $("div").slideDown(2000);
           })
       })
    </script>

jQuery slideUp()方法
该方法用于向上滑动元素

$(selector).slideUp(speed, callback)

jQuery slideToggle()方法
该方法可以在slideDown()与slideUp()方法之间切换.

$(selector).slideToggle(speed, callback)

学习jQuery

标签：mouse   amp   html   click   学习   必须   sub   hit   sed   

原文地址：https://www.cnblogs.com/zzr-stdio/p/9363221.html