JQuery入门

最新推荐文章于 2024-07-04 10:38:01 发布

木讷的鱼

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量260

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44726976/article/details/105863308

版权

一，JQuery概述

1.1 jQuery简介

jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
参考文档:https://www.jquery123.com/ jQuery中文网、菜鸟教程

1.2 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

Google
Microsoft
IBM
Netflix很多大公司都在使用 jQuery，例如:

二，jQuery安装

2.1 网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

(1)从 jquery.com 下载 jQuery 最新版本，或从GitHub下载其他版本
(2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head>
   <script src="jquery-1.10.2.min.js"></script>
</head>

2.2 CDN引入

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

//新浪CDN
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

//谷歌CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

//Microsoft CDN
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

三，jQuery语法

jQuery 语法是通过$()核心函数选取 HTML 元素，并对选取的元素执行某些操作。

使用语法1 ： $(selector).action()

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

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

使用语法2： $(匿名函数)
表示页面dom加载完毕，就执行，比onload事件要早，并且可以写多个。
$(匿名函数) 和 $(document).ready(匿名函数) 一样

3.1 jQuery选择器

3.1.1 标签选择器

jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:

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

3.1.2 id选择器

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

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

3.1.3 class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

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

还有属性选择器，结构伪类选择器，层次选择器这里不予以介绍

3.2 jQuery事件

3.2.1 什么是事件？

页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

3.2.2 JQuery事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：

$("p").click();

下一步是定义触发事件。您可以通过一个事件函数实现：

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

也就是说，不传参数是点击，传参数是设置事件。

click()
当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

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

dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){  $(this).hide();});

mouseover()
当鼠标指针穿过元素时，会发生 mouseover 事件。
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数：

$("#p1").mouseover(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseout()
当鼠标指针离开元素时，会发生 mouseout 事件。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数：

$("#p1").mouseout(function(){
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseover);当鼠标移出这个元素时，会触发指定的第二个函数(mouseout)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

四，jQuery效果

4.1 隐藏显示

hide()
您可以使用 hide() 将元素隐藏

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

show()
您可以使用show()将元素显示

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

toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

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

事实上，这三种方法都是有两个参数的：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

4.2 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：

- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()

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

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。0透明 1不透明

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

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

4.3 滑动

通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

- slideDown()
- slideUp()
- slideToggle()

slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

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

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){  $("#panel").slideUp();});

slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4.4 链式编程

直到现在，我们都是一次写一条 jQuery 语句（每个语句都是独立一行）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

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

**提示：**当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

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

五，jQuery HTML DOM操作

5.1 获取

jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容---->innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记）—innerHTML
val() - 设置或返回表单字段的值—value属性

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性-attr()
jQuery attr() 方法用于获取属性值。下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#a1").attr("href"));
});

5.2 设置

设置内容 - text()、html() 以及 val()

我们将使用前一节中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Hello world!");
});

设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）文本中 color属性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

5.3 添加元素

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

5.4 删除元素

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。

$("#div1").remove();

jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class=“italic” 的所有

元素：

$("p").remove(".italic");

5.5 数组或集合元素遍历

$("p").each(function(i,n){
  	alert(i+"...."+n);
});
或
$.each(arr,function(i,n){
    alert(i+"...."+n);
})

5.6 CSS类

jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例样式表

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function(){  $("h1,h2,p").removeClass("blue");});

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5.7 CSS()方法

jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

六，jQuery节点关系

通过 jQuery 节点关系，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行查找。

6.1 祖先

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

6.2 后代

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有<p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于<div> 后代的所有 <span> 元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回

的所有后代：

$(document).ready(function(){
  $("div").find("*");
});

6.3 同胞

jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){
 $("h2").siblings();
});

您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于<h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});