JQuery基础

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

1、jQuery简介

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

2、jQuery功能

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

3、jQuery版本

目前jQuery有三大版本：

1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。

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

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

4、jQuery使用

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

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

<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 可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样可以提高加载速度。

5、jQuery版本查看

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

6、jQuery格式

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

$(this).hide() //隐藏当前元素

$("p").hide() //隐藏所有 <p> 元素

$("p.test").hide() //隐藏所有 class="test" 的 <p> 元素

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

7、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; 

8、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")         // 获取选中的选项元素

9、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);

});

10、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

11、立即执行函数

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

12、jQuery Chaining

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

// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

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

等价于

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

$("#p1").slideUp(2000);

$("#p1").slideDown(2000);

【JQuery】（1）JQuery基础的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  3. jQuery插件编写基础之“又见弹窗”

    本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 ...

  4. jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

    1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...

  5. jQuery和AJAX基础

    jQuery和AJAX基础 jQuery 基础: 1.jQuery 选择器: 元素选择器:$("p"): #id 选择器:$("#test"): .class ...

  6. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  7. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  8. jQuery框架-1.基础知识

    jQuery简介 jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费.开源的.它可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程且兼容多浏览器的jav ...

  9. day 54 jQuery 的初步基础

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  10. jQuery选择器（基础及应用）

    jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要 ...

随机推荐

  1. 整数划分为k份

    题目 将整数n分成k份,且每份不能为空,任意两个方案不能相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有多少种不同的分法. 输入 ...

  2. Java序列初始化

    1.数组 Java数组可以用元素集合初始化: char[] c=new char[]{'.','.','.','.'}; 而想要用指定数量的相同元素来初始化数组,可以使用Arrays.fill()方法 ...

  3. Java：锁笔记

    Java:锁笔记 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 1. Java 锁之公平锁和非公平锁 公平锁 是指多个线程按照申请锁的顺序来获取锁,类似于排队买 ...

  4. MarkDown之Typora使用

    Typora:所见即所得 常用快捷键 加粗:ctrl + B 标题:ctrl + 16,对于与16级标题 插入公式:ctrl + Shift + m 插入代码:ctrl + Shift + K 插入图 ...

  5. [经验] 电源抑制比（PSRR）的测量原理及解决方法

    PSRR(Power supply rejection ratio)又称电源抑制比,是衡量电路对于输入电源中纹波抑制大小的重要参数,表示为输出纹波和输入纹波的对数比,单位为分贝(dB)[1],其计算公 ...

  6. IM服务器：我的千万级在线聊天服务器集群

    一.服务器特点 01.傻瓜式部署,一键式启动: 02.单机支持10万以上在线用户聊天(8G内存,如果内存足够大,并发量可超过10万): 03.支持服务器集群,集群间高内聚.低耦合,可动态横向扩展IM服 ...

  7. python编程中的流程控制

    内容概要 成员运算 身份运算 流程控制 详细 1.成员运算 定义:判断某个个体在不在某个群体内 关键词:in(在) /// not in(不在) 例: num_list = [1, 2, 3, 4, ...

  8. 🏆【JVM深层系列】「云原生时代的Java虚拟机」针对于GraalVM的技术知识脉络的重塑和探究

    GraalVM 背景 新.旧编程语言的兴起躁动,说明必然有其需求动力所在,譬如互联网之于JavaScript.人工智能之于Python,微服务风潮之于Golang等等.大家都清楚不太可能有哪门语言能在 ...

  9. RedHat 7.0 下 FTP 服务的安装，启动，配置，以及虚拟用户的建立

    (注意! 区分shell命令和往配置文件里加的代码不同) 一:ftp服务的安装,启动和启用.   1:vim /etc/sysconfig/selinux     改为disabled后重启     ...

  10. .Net Core微服务——网关（2）：ocelot集成consul

    有consul基础的都知道,consul可以发现新增的服务,剔除掉无效的服务,赋予应用自动伸缩的能力.而ocelot如果集成了consul,那ocelot也能拥有这些能力,还可以自主选择负载均衡策略, ...