【JavaScript】4.初识 jQuery

news/2024/7/11 1:40:13 标签: javascript, jquery

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

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

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

开始了，奥里给！

目录

1. jQuery的引入

2. jQuery的功能

2.1 基础语法

2.2 jQuery选择器

2.3 jQuery处理事件

2.4 jQuery修改元素属性

2.5 jQuery修改元素样式

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编程时，用如下方式等待窗口加载：

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

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

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

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

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

javascript">$(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 中事件处理器与元素关联的方法：

javascript">//单击事件
$("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() 方法修改选中的元素的属性，该参数的第一个参数是访问的属性，另一个参数是设置的新值：

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

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

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

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

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

javascript">$("#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() 方法用于设置或返回被选元素的一个或多个样式属性：

javascript">//返回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属性

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

对于一些常用的属性，例如width、height之类的，使用 attr("width") 和 css("width") 是无法正常获取其值的，但是这些属性的值可以直接访问。

（1） 宽高属性

注意：返回的高度、宽度均为数字，不带px。

（2）位置属性

3. jQuery效果


http://www.niftyadmin.cn/n/1397619.html

相关文章

理论：网络层协议介绍 理论详解

理论：网络层协议介绍 理论详解

文章目录前言&#xff1a;1.IP数据包格式2.0 ICMP协议介绍2.1 ICMP协议的封装2.2 Ping 命令3.ARP协议概述4.ARP攻击原理5.绑定ARP前言&#xff1a; 网络层位于物联网三层结构中的第二层&#xff0c;其功能为“传送”&#xff0c;即通过通信网络进行信息传输。网络层作为纽带连…
阅读更多...
【报错】(Javascript):Cannot set property 'onclick' of null

【报错】(Javascript):Cannot set property 'onclick' of null

这个错误呢&#xff0c;很明显&#xff0c;就是找不到设置“onclick”属性的对象&#xff0c;有两个解决思路&#xff1a; 1. 改变JS文件的加载位置 当js代码放在head里面时&#xff0c;如果绑定了类似onclick或者onmouseover事件&#xff0c;很可能出现类似的错误。这是因为…
阅读更多...
实验：安装VMware-workstation-14版本和创建win10系统虚拟机

实验：安装VMware-workstation-14版本和创建win10系统虚拟机

文章目录1.安装VMware-workstation-14版本2.创建虚拟机1.安装VMware-workstation-14版本 1.以管理员身份运行应用程序 2.进入安装界面 3.点击下一步 4.勾选我接受&#xff0c;点击下一步 5.可以更改安装路径&#xff0c;但是不要有中文 6.不更新产品&#xff0c;不参与改进计…
阅读更多...
【报错】(webRTC):navigator.mediaDevices undefined

【报错】(webRTC):navigator.mediaDevices undefined

最近做了一个通过webRTC实现在线视频功能的网页&#xff0c;在自己的电脑上用localhost打开两个网页是没问题的&#xff0c;但是设置了一个简单的HTTP请求的NodeJS服务器之后&#xff0c;在局域网中用ip地址访问就不行了&#xff0c;浏览器会弹出 navigator.mediaDevices undef…
阅读更多...
理论：静态路由原理与配置 理论浅析

理论：静态路由原理与配置 理论浅析

文章目录讲述内容&#xff1a;1.路由的工作原理1.1路由概述1.2路由器的工作原理2.路由表的形成3.静态路由和默认路由&#xff08;重点&#xff09;4.路由器转发数据包的封装过程5.静态路由和默认路由的配置配置实例一配置实例二引言&#xff1a;静态路由是网络基础中第一个入门…
阅读更多...
WebRTC学习总结（1）：本地视频的获取和录制

WebRTC学习总结（1）：本地视频的获取和录制

WebRTC学习总结&#xff08;1&#xff09;&#xff1a;本地视频的获取和录制简单介绍1. 本地视频的播放2. 视频录制简单介绍 WebRTC &#xff08; Real-Time Communications&#xff09;是一个可以在 Web 应用程序中实现音频、视频和数据的实时通信的开源项目&#xff0c;它封…
阅读更多...
实验：通过设置静态路由或者默认路由实现三台不同网段之间的HOST主机互联互通

实验：通过设置静态路由或者默认路由实现三台不同网段之间的HOST主机互联互通

文章目录实验环境实验目的实验原理1. 静态路由原理&#xff1a;2. 默认路由原理3. ping原理实验步骤小结实验环境 1.win10系统企业版宿主机&#xff0c;宿主机创建三台虚拟机 2.安装vmware workstaion 3.安装GNS3以及CRT和wireshark&#xff0c;GNS3中配置四台路由器 实验目…
阅读更多...
WebRTC学习总结（2）：Nodejs和socket.io搭建信令服务器

WebRTC学习总结（2）：Nodejs和socket.io搭建信令服务器

信令服务器 webRTC采用的是“端对端”对等连接&#xff0c;在信息通路形成之后&#xff0c;可以没有服务器参与&#xff0c;但是信息通路的搭建不能没有信令服务器。 信令服务器主要用于交换以下信息&#xff1a; 会话控制信息&#xff1a;比如加入房间&#xff0c;离开房间…
阅读更多...
最新文章

Copyright @ 2022~2023