【JavaScript】4.初识 jQuery

最新推荐文章于 2024-01-25 16:27:09 发布

M＆Q

最新推荐文章于 2024-01-25 16:27:09 发布

阅读量506

点赞数 1

分类专栏：前端基础文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_45427038/article/details/105677296

版权

前端基础专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本来这一篇要写JavaScript的事件处理的，但是内容好多啊，这一套那一套的，看得有点晕……查资料的时候发现好些东西大家都是用 jQuery 实现的，据说挺好上手的，那我就先看看 jQuery，之后和JS对照着学吧。

jQuery是一个JavaScript函数库，它和JS的联系与区别是：

JavaScript是用于Web客户端开发的脚本语言，Ajax是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架，基于JS语言，集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了Ajax，JS的操作。

开始了，奥里给！

2.6 注意：jQuery中常用属性的获取

（1）宽高属性

（2）位置属性

1. jQuery的引入

可以通过多种方法在网页中添加 jQuery：

从 jquery.com 下载 jQuery 库，将下载的文件放在网页的同一目录下，通过HTML的<script>标签引用：

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

从 CDN （内容分发网络）中载入 jQuery，通过下面的代码引用：

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

可选用的CDN包括：

国内推荐站点：

Staticfile CDN：src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"

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

新浪CDN：src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"

又拍云 CDN：src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"

国外推荐站点：

Google CDN：src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

Microsoft CDN：src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"

我用的是第二种方法，因为这些大公司的CDN比较流行，用户访问你网站之前很可能在访问别的网站时已经将jQuery缓存在浏览器中了，所以能加快网站的打开速度，懒洋洋美滋滋。

当然，刚刚那句话只是引入了jQuery的库，我们还要自己编写很多代码。对于少量的代码，我们可以把它放在<head>部分的<script>标签内：

<head>
<!--引入jQuery库-->
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>

<!--jQuery代码-->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

为了便于维护，很多时候，我们会把jQuery函数放到独立的.js文件中，因此在<head>部分引入对应的文件：

<head>
<!-- 引入jQuery库 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- 引入独立的jQuery代码 -->
<script src="my_jquery_functions.js"></script>
</head>

2. jQuery的功能

看到这样一个说法，jQuery的使用类似于CSS的选择器，可以方便的操作HTML元素。刚开始看的确是有这样的感觉。jQuery 语法是为 HTML 元素的选取编制的，通过选择器，选取（或者查询query）HTML元素，然后像用CSS进行格式设置一样，对元素执行某些操作（action)。

2.1 基础语法

jQuery的基础语法是： $(selector).action()

美元符号$：定义 jQuery，这也是jQuery与JS最直观的区别。
选择符（selector）："查询"和"查找" HTML 元素。
action()：执行对元素的操作。

下面是最常见的例子：

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

不管是用JS还是jQuery等JS框架，都需要在进行交互之前确定整个DOM已经加载（这个之后会讲）。在直接JavaScript编程时，用如下方式等待窗口加载：

window.onload = function(){
    //Do whatever
}

在jQuery中，等价的操作时将所有jQuery函数写在一个 ready() 函数中：

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

对比 $(selector).action() 结构来分析一下，$(document) 指选择窗口文档；ready()方法，等同于在就绪事件触发时调用一个内部匿名函数。

特殊的是，因为ready() 方法只能用于当前文档，无需使用选择器，也可以使用下面的简写：

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

这里还有一个小知识点—— jQuery 入口函数与 JavaScript 入口函数的区别：

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

2.2 jQuery选择器

当当当当，就像刚才说的，jQuery的选择器是基于已经存在的CSS选择器的，所以这部分内容可以快快过一下就好~开心

对了，别忘了jQuery 中所有选择器都是以美元符号开头的——$()。

元素选择器：$("p") 在页面中选取所有 <p> 元素
#id 选择器：$("#test") 选取id="test"的元素
.class 选择器：$(".test") class="test" 属性的元素

当然，还有复合的用法，下面是一些比较常见的，大家可以在教程网站上在线看一看效果，我就不多说了：

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

2.3 jQuery处理事件

在事件中，我们经常听到的术语“触发”或者“激发”，比如：当您点下按钮时，就触发了click事件。页面的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。常见的事件有：

大家可以在教程网站上尝试一下这些代码的操作：https://www.runoob.com/jquery/jquery-events.html

下面我只写几个简单的例子，大家体会一下 jQuery 中事件处理器与元素关联的方法：

//单击事件
$("p").click(function(){
  $(this).hide();
});

//双击事件
$("p").dblclick(function(){
  $(this).hide();
});

//焦点事件
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

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

2.4 jQuery修改元素属性

通过 jQuery 选择器选择了元素之后，还可以应用 jQuery 函数修改元素的属性。

对于下面这样一个标签元素:

<img id='img' src="1.jpg" alt='1' class="imgs"></img>

我们通常将 id、src、alt、class等称为属性，或者元素属性。但是，当浏览器对标签元素进行解析时，会将元素解析为Dom对象，相应的，元素属性也就解析为Dom属性。

元素属性和Dom属性只是在我们对元素进行不同解析时的不同称呼，但是元素属性和Dom属性并不一定完全相同，比如<img>的class属性，在表现为元素属性时属性名是class，在表现为Dom属性时，属性名为className。在JavaScript中，我们可以直接获取或设置Dom属性。

在jQuery中，可用 attr() 方法修改选中的元素的属性，该参数的第一个参数是访问的属性，另一个参数是设置的新值：

$("button").click(function(){
  $("#my-link").attr("href","https://blog.csdn.net/qq_45427038"); //修改id为my-link的herf属性
});

也可以使用“链式函数调用”，将选择器和方法分成两句话来写。下面的两组代码是等效的：

//添加属性 disabled = "disabled"
$('#submitButton').attr('disabled','disabled');

//链式调用
var submit = $('#submitButton');
submit.attr('disabled','disabled');

attr() 方法也允许您同时设置多个属性：

$("#my-link").attr({
    "href" : "https://blog.csdn.net/qq_45427038",
    "title" : "MQ的博客"
});

//另一种方法
$("#my-link").attr("href","https://blog.csdn.net/qq_45427038").attr("title", "MQ的博客");

2.5 jQuery修改元素样式

jQuery 拥有若干进行 CSS 操作的方法。常用的有以下几种：

addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作

动态的练习可以在https://www.runoob.com/jquery/jquery-css-classes.html上做。

这里说一下toggleClass()，还挺有意思的。toggleClass()函数用于切换类的应用，如果选中的元素没有应用类则添加，否则删除类。可以看出，toggleClass() 这个方法的侧重点在指定样式的切换,一般配合点击、鼠标悬浮、鼠标划过事件。

但是toggleClass()方法还有另一个可选的参数——switch参数。若switch为true，则只进行添加操作，如为false，则只删除类，感觉就变成了一个一次性的变化操作了。

顺便说一个和toggleClass()很像的方法，toggle()。toggle() 方法在被选元素上进行hide()和show()之间的切换，也就是如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide()，该方法也会造成一种切换的效果。

jQuery css() 方法用于设置或返回被选元素的一个或多个样式属性：

//返回css属性： css("propertyname"); 
$("p").css("background-color");  //返回首个<p>元素的background-color值

//设置css属性:  css("propertyname","value");
$("p").css("background-color","yellow");  //为所有匹配元素设置background-color值

//同时设置多个属性： css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"}); //为所有匹配元素设置background-color和font-size属性