jQuery快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35849321/article/details/105359039

一.基本概念

jquery
- 是一个 JavaScript 库。
- 极大地简化了 JavaScript 编程

引入框架编写jQuery代码的位置

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JQuery框架</title>
//引入框架
	<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
// 通过 CDN（内容分发网络） 引用它
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

	<script type="text/javascript">
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide();
			});
		});
	</script>
</head>
<body>
	<p>如果你点我，我就会消失。</p>
	<p>继续点我!</p>
	<p>接着点我!</p>
</body>
</html>

JQuery的功能
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery 语法
- 基础语法： $(selector).action()
  - 美元符号定义 jQuery
  - 选择符（selector）"查询"和"查找" HTML 元素
  - jQuery 的 action() 执行对元素的操作
  - 实例
    - $(this).hide() - 隐藏当前元素
    - $("p").hide() - 隐藏所有 <p> 元素
    - $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
    - $("#test").hide() - 隐藏所有 id="test" 的元素
- 文档就绪事件
  - ```
  $(document).ready(function(){
   
     // 开始写 jQuery 代码...
   
  });
  
  
  
  // 简写
  
  $(function(){
   
     // 开始写 jQuery 代码...
   
  });
```
- 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
  
  如果在文档没有完全加载之前就运行函数，操作可能失败
  - 试图隐藏一个不存在的元素
  - 获得未完全加载的图像的大小

二.选择器

特点
- jQuery 中所有选择器都以美元符号开头：$()。
分类
- 元素选择器 $("p")
- 类选择器 $(".test")
- ID选择器 $("#test")
  - 注意事项
    - 元素选择器是在页面中选取所有 <p> 元素
    - 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器

独立文件中使用 jQuery 函数

jQuery 函数放到独立的 .js 文件

将函数直接添加到 <head> 部分

<head>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>

<script src="my_jquery_functions.js"></script>
</head>