jQuery的安装和基本使用教程（萌新对课程的回忆篇）

最新推荐文章于 2024-05-05 23:56:47 发布

BlockBook

最新推荐文章于 2024-05-05 23:56:47 发布

阅读量865

点赞数 1

萌新对中午学习的jQuery入门的回忆及网上知识梳理

写在前面

1. 什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2. 为什么使用 jQuery ？

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

很多大公司都在使用 jQuery，举个例子:Google

正文

1. 安装jQuery

度娘jQuery第一个就是它的官网 jQuery.
在其官网右上角有Download
点进去后会有最新版下载，值得一提的是，Chrome浏览器若想将jQuery下载到本地需在下载链接处“另存为”具体目录
将jQuery引入< head >中，其引用方法如下：

<head>
   <meta charset="utf-8">
   <title></title>
   <script src="js/jquery-3.3.1.min.js"></script>
</head>

另外也可以通过cdn（内容分发网络百度百科关于cdn的介绍）加速方式引用（不推荐），其引用方法如下：
此处只引用了Microsoft的cdn加速：

<head>
    <meta charset="utf-8">
    <title></title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
</head>

不推荐的原因如下：

首先，网站加速后，使用者可能会发现这个IP下出现了上百个网站，这是因为CDN的镜像功能，镜像了该服务器的IP地址。
很多站长都知道，这种情况对SEO优化是有很大影响的，不仅将网站的权重分散了，而且一旦这个IP下的某个网站出现问题，牵连的将会是该IP下的所有网站。
其次，CDN加速可能会对网站稳定性产生不良影响，会导致无法访问的情况发生。

当然使用CDN加速有利有弊，此处列举的是缺点，关于优点的介绍，上方百度百科链接中有介绍，是否使用还需要大家自己衡量，但不妨在租用服务器时就选择一个性能好、速度快的，这样也能避免后续很多网站问题。

2.语法规则

使用jQuery之前，要先将文档和文件夹就绪。出于方便程序员之间的协作，代码的验收和后期的维护，需要在项目确立之初就建立一个完整清晰的，约定俗成或者公司规定的整体框架，如：JS文件要建立在JS文件夹内，.CSS文件要建立在CSS文件夹内。
文档就绪如下：

$(document).ready(function(){
		//jQuery代码主体
	})；

或者更为简洁的写法

$(function(){
 	//jQuery代码主体
 })；

如果浏览器中页面出错，开发者工具中提示 $ is not defined,此时需查看是否引入jQuery库。
$ 符号冲突。除jQuery外，也有其他JS框架使用 $ 作为框架缩写，所以jQuery提供了jQuery noConflict()解决此问题。
noConflict()方法会释放对 $ 识别符的控制，便于其他脚本使用。
可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
	jQuery(document).reday(function(){
			jQuery("button").click(function(){
					jQuery("p").text("jQuery:我还能用！")
					//此处p指body内使用的p标签
	})；
})；

可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
如：

var jq = $.noConflict();
jq(document).ready(function(){
		jq("button").click(function(){
    		jq("p").text("jQuery:我还能再战！");
  	});
});

如果你的 jQuery 代码块想继续使用 $ 简写，那么可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 -但是在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
	jQuery(document).ready(function($){
 		 	$("button").click(function(){
    			$("p").text("jQuery：我依旧在工作!");
  });
});

3.选择器

jQuery选择器

jQuery选择器允许开发者队整个HTML元素组或单个元素进行操作；
jQuery中所有的选择器都是以 $() 开头

标签选择器（又称元素选择器）
jQuery标签选择器基于元素名（标签名）选取元素。
如选取页面中选取所有的 < p > 元素。
```
		$("p")
```
实例
```
	$(doucment).ready(function(){
		$("button").click(function(){
				$("p").hide();
		});
	});
```
意为：点击按钮后，所有 < p > 元素都隐藏
具体实际案例可在菜鸟教程的jQuery教程中查看，路径：jQuery教程->jQuery选择器->元素选择器->实例，以下两种选择器也一样。　　链接地址：菜鸟教程中jQuery元素选择器
ID选择器
jQuery ID选择器通过HTML元素的id属性选取制定的元素。由于页面中元素的id是唯一的，所以id选择器便于对页面的精确控制；
通过id选取元素的语法如下：
```
$("#test")
```
实例为：
```
$(doucment).ready(function(){
		$("button").click(function(){
				$("#test").hide();
		});
	});
```

意为：点击按钮后，id=“test”的元素将会被隐藏

.class选择器
jQuery类选择器可以通过指定的class查找元素，其语法为：

	$(".test")

实例为：

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

意为：点击按钮后，class=“test”的内容将会被隐藏。
-----------文章参考菜鸟教程菜鸟教程链接地址

BlockBook

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery的安装和基本使用教程（萌新对课程的回忆篇）

     萌新对中午学习的jQuery入门的回忆及网上知识梳理1. 安装jQuery度娘jQuery第一个就是它的官网 jQuery.在其官网右上角有Download点进去后会有最新版下载，值得一提的是，Chrome浏览器若想将jQuery下载到本地需在下载链接处“另存为”具体目录2.语法规则使用jQuery之前，要先将文档和文...
复制链接

扫一扫