【JQuery】（1）JQuery基础

时间 2019-11-18

标签 JQuery jquery 基础栏目 JQuery 繁體版

原文原文链接

JQuery基础

2019-11-02 21:11:17 by冲冲css

一、jQuery简介

jQuery：轻量级、"写的少，作的多"、JavaScript函数库。html

二、jQuery功能

HTML元素选取
HTML元素操做
HTMLDOM遍历和修改
CSS操做
HTML事件函数
JavaScript特效和动画
Ajax异步操做
提供丰富的插件

三、jQuery版本

目前jQuery有三大版本：node

1.x：兼容ie678，使用最为普遍的，官方只作BUG维护，功能再也不新增。所以通常项目来讲，使用1.x版本就能够了，最终版本：1.12.4 (2016年5月20日)。jquery

2.x：不兼容ie678，不多有人使用，官方只作BUG维护，功能再也不新增。若是不考虑兼容低版本的浏览器可使用2.x，最终版本：2.2.4 (2016年5月20日)。浏览器

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，通常不会使用3.x版本的，不少老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2018年1月20日）。服务器

四、jQuery使用

① 官网https://jquery.com/download/下载网络

② CDN(内容分发网络)加载app

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

目前，在百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。若是你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，若是你站点用户是国外的可使用谷歌和微软（国内访问外网不稳定）。例如：异步

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

CDN优点：CDN 能够确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样能够提升加载速度。ide

五、jQuery版本查看

在浏览器的 Console 窗口中输入 $.fn.jquery 命令，能够查看当前 jQuery 使用的版本。

六、jQuery格式

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

$(this).hide() //隐藏当前元素
$("p").hide() //隐藏全部 <p> 元素
$("p.test").hide() //隐藏全部 class="test" 的 <p> 元素
$("#test").hide() //隐藏全部 id="test" 的元素

七、jQuery入口函数

// 第一种
$(document).ready(function(){
    // 执行代码
});

// 第二种
$(function(){
    // 执行代码
});

对比：JavaScript入口函数

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

① jQuery 的入口函数是在全部的HTML标签(DOM)都加载以后，才会执行。

JavaScript 的 window.onload 事件是等到全部内容，包括外部图片之类的文件加载完后，才会执行。

② jQuery 的入口函数能够执行屡次，第N次都不会将上次的结果覆盖。

JavaScript 的 window.onload 事件只能执行一次，若是是第二次，就会覆盖第一次的结果。

<!-- 屡次调用$(document).ready()不会覆盖前一次 -->
<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
    <script src="test1.js"></script>
    <script src="test2.js"></script>
</body> 
</html>
<!-- // test1.js
$(function(){
    $(document.body).append("$(document).ready()1 is now been executed!!!<br/>"); 
});
// -->
<!-- // test2.js
$(function(){
    $(document.body).append("$(document).ready()2 is now been executed!!!<br/>"); 
});
// -->
<!-- // 页面输出
$(document).ready()1 is now been executed!!!
$(document).ready()2 is now been executed!!!
// -->

<!-- 屡次调用window.onload，后一次会覆盖前一次 -->
window.οnlοad=func1;
window.οnlοad=func2;

八、jQuery选择器

jQuery选择器用于选取对应的HTML元素，格式是以美圆符号开头：$()。

jQuery 选择器基于元素的 id、类、元素类型、属性、属性值等查找/选择HTML元素。

（1）基于已经存在的CSS选择器

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

$("*")                              // 选取全部元素
$(this)                             // 选取当前 HTML 元素
$("p.intro")                        // 选取 class 为 intro 的 <p> 元素
$("p:first")                        // 选取第一个 <p> 元素
$("ul li:first")                    // 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")              // 选取每一个 <ul> 元素的第一个 <li> 元素
$("[href]")                         // 选取带有 href 属性的元素
$("a[target='_blank']")             // 选取全部 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")            // 选取全部 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")                        // 选取全部 type="button" 的 <input> 元素 和 <button> 元素
$("button")                         // 选取全部 <button> 元素
$("tr:even")                        // 选取偶数位置的 <tr> 元素
$("tr:odd")                         // 选取奇数位置的 <tr> 元素
$("#id",".class")                   // 复合选择器
$("div p span")                     // 层级选择器
$("div>p")                          // 父子选择器（div里面全部p元素）
$("div+p")                          // 相邻元素选择器（div后面第一个p元素）
$("div~p")                          // 兄弟选择器（div后面全部p元素，要求是同级别的p元素）
$("div p:eq(2)")                    // 索引选择器（div里面第三个p元素，索引从0开始）
$("a[href='www.baidu.com']")        // 属性选择器
$("p:contains(test)")               // 内容过滤选择器，包含text内容的p元素
$(":emtyp")                         // 内容过滤选择器，全部空标签（不包含子标签和内容的标签）
$(":hidden")                        // 全部隐藏元素 visible 
$("input:enabled")                  // 选取全部启用的表单元素
$(":disabled")                      // 全部不可用的元素
$("input:checked")                  // 获取全部选中的复选框单选按钮等
$("select option:selected")         // 获取选中的选项元素

九、jQuery事件

（1）用户动做/行为 -- 触发/激发 -- DOM事件/响应 -- 调用事件的方法

// 给p元素指定一个点击事件
$("p").click();

// 给点击事件添加实现函数
$("p").click(function(){
    // 动做触发后执行的代码
});

（2）DOM事件

① 鼠标事件：click(), dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup(), hover()

② 键盘事件：keypress(), keydown(), keyup()

③ 表单事件：submit(), change(), focus(), blur()

④ 文档/窗口事件：load(), resize(), scroll()

$("document").ready()方法：在HTML元素加载完毕后必须执行的函数。
bind()方法：向某HTML元素绑定事件（旧方法，如今使用on()来绑定事件）

// 给某元素绑定一个事件
$("p").bind("click",function(){
    alert("...");
});

on()方法：向某HTML元素绑定事件。
off()方法：移除全部 <p> 元素上的 click 事件。

// 移除全部 <p> 元素上的 click 事件：
$("button").click(function(){
        $("p").off("click"); 
});

event.preventDefault() 方法：阻止元素发生默认的行为。

// 防止连接打开 URL 
$("a").click(function(event){
    event.preventDefault();
});

event.target属性：返回哪一个 DOM 元素触发了事件。（能够判断事件是否因事件冒泡被处理）

// 返回哪一个 DOM 元素触发了事件。
$("p, button, h1").click(function(event){
    $("div").html("经过 " + event.target.nodeName + " 元素触发。");
});

event.type属性：返回哪一种事件类型被触发.

// 返回哪一种事件类型被触发：
$("p").on("click dblclick mouseover mouseout",function(event){
$("div").html("Event: " + event.type);
});

十、jQuery效果

（1）显示/隐藏 -- hide(), show(), toggle()

// 点击id=hide的元素，触发隐藏事件
$("#hide").click(function(){
  $("p").hide();
});
// 点击id=show的元素，触发显示事件
$("#show").click(function(){
  $("p").show();
});
// 第一个参数指定显示/隐藏的速度（毫秒数），第二个参数指定显示/隐藏后的回调函数
$("#show").click(function(){
  $("p").show(1000,function(){ alert("show occurred!"); });
});
// toggle()是hide()和show()的结合
$("#hide").click(function(){
  $("p").toggle(1000,function(){
     alert("自己是隐藏，点击则显示；自己是显示，点击则隐藏"); 
});

① 第二个可选参数callback函数补充：

callback既能够是函数名，也能够是匿名函数。若是callback的函数名后加括号，会马上执行函数体，而不是等到显示/隐藏完成后才执行。若是匿名函数写成当即执行函数的形式，也是会当即执行，而不是等到显示/隐藏完成后才执行。
$(selector)选中的元素的个数为n个，则callback函数会执行n次。若是此时callback函数是当即执行的形式，那么就只会执行一次，并且是当即执行，而不是等到显示/隐藏完成后才执行。若是callback函数不是当即执行函数的形式，就会在显示/隐藏以后，再执行屡次。

// 在隐藏效果彻底实现后，执行回调函数
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落如今被隐藏了");
  });
});
// 没有回调函数，警告框会在隐藏效果完成前弹出
$("button").click(function(){
  $("p").hide(1000);
  alert("段落如今被隐藏了");
});

② hide() 等于 $("selector").css("display","none")

（2）淡入/淡出 -- fadeIn(), fadeOut(), fadeToggle(), fadeTo()

$("button").click(function(){
  // 淡入已隐藏的元素
  $("#div1").fadeIn();
  $("#div2").fadeIn(1000);
  $("#div3").fadeIn("slow",function(){alert("slow fade in");});
  // 淡出已显示的元素
  $("#div2").fadeOut();
  // 在fadeIn()与fadeOut()方法之间进行切换：若是元素已淡出，则fadeToggle()会向元素添加淡入效果。若是元素已淡入，则fadeToggle()会向元素添加淡出效果。
  $("#div3").fadeToggle();
  // 渐变为给定的不透明度（值介于 0 与 1 之间）
  $("#div4").fadeTo(1000,0.5);
});

注意：fadeTo()必须带参数。

（3）滑动 -- slideDown(), slideUp(), slideToggle()

$("button").click(function(){
  // 滑入已隐藏的元素
  $("#div1").slideIn();
  $("#div2").slideIn(1000);
  $("#div3").slideIn("slow",function(){alert("slow fade in");});
  // 滑出已显示的元素
  $("#div2").slideOut();
  // 在slideIn()与slideOut()方法之间进行切换：若是元素已滑出，则slideToggle()会向元素添加滑入效果。若是元素已滑入，则slideToggle()会向元素添加滑出效果。
  $("#div3").slideToggle();
});

（4）动画

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

https://www.runoob.com/jquery/jquery-animate.html

（5）中止动画/效果

stop() 方法用于中止全部 jQuery 效果函数，包括滑动、淡入淡出和自定义动画，在它们完成以前就中止。

https://www.runoob.com/jquery/jquery-stop.html

十一、当即执行函数

IIFE (Immediately Invoked Function Expression)

// 函数声明/具名函数
function test(){
  alert("hello");
}
// 函数表达式
var fn = function(){
  alert("hello");
}
// 匿名函数
function(){
  alert("hello");
}

（1）匿名函数转化为当即执行函数

两种常见形式：( function(){…} )() 和 ( function (){…} () )

// 使用()，！，+，-，=等运算符都能起到当即执行的做用
(function(args){ alert(args); })(123);  //输出123

(function(args){ alert(args); }(123));  //输出123

!function(args){ alert(args); }(123);   //输出123

+function(args){ alert(args); }(123);   //输出123

-function(args){ alert(args); }(123);   //输出123

var fn = function(args){ alert(args); }(123);  //fn=123

（2）具名函数转化为当即执行函数

// 使用()，！，+，-，=等运算符都能起到当即执行的做用
(function test(args){ alert(args); })(123);  //输出123

(function test(args){ alert(args); }(123));  //输出123

!function test(args){ alert(args); }(123);   //输出123

+function test(args){ alert(args); }(123);   //输出123

-function test(args){ alert(args); }(123);   //输出123

十二、jQuery Chaining

在相同的元素上运行多条 jQuery 命令，一条接着另外一条。做用：浏览器没必要屡次查找相同的元素。

// "p1" 元素首先会变为红色，而后向上滑动，再而后向下滑动
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

等价于

$("#p1").css("color","red");
$("#p1").slideUp(2000);
$("#p1").slideDown(2000);