Web的学习路线之jQuery-1

  • 一、jQuery简单介绍
  • 1.1 原生JavaScript的缺点和jQuery的优缺点（为什么要使用js库？）
  • 二、jQuery的使用和支持
  • 2.1 引用jQuery文件
  • 2.2 写一个入口函数
  • 2.2.1 创建
  • 2.2.2 属性
  • 2.2.3 特点
  • 2.2.4 调用
  • 2.3 寻找要操作的元素（选择器），去操作（添加属性、样式、文本..）
  • 三、jQuery和winodw 的执行顺序：
  • 四、jQuery文件结构
  • 五、重要区别
  • 六、重要特性（jQuery是一个伪数组）


一、jQuery简单介绍

jQuery：

  • 是用于辅助开发JavaScript的一个轻量级函数库。
  • 是继prototype之后的又一个优质的Javascript库，属于开源编程语言。
  • 免费、开源的，使用MIT许可协议。
  • 语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
  • 提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery库包含以下功能：

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

1.1 原生JavaScript的缺点和jQuery的优缺点（为什么要使用js库？）

原生js的缺点

  • 不能设置多个入口函数，如果添加了多个入口函数，后面的会把前面的覆盖
  • api的名字太长
  • 代码冗余
  • 有些属性或者方法有浏览器兼容问题
  • 容错率比较低，前面代码出错，后面的也不会执行

jQuery的优点

  • 可以设置多个入口函数
  • api的名字容易记忆
  • 代码简介（隐式迭代）
  • 有些属性或者方法有浏览器兼容问题
  • 容错率比较高，前面代码出错，后面代码正常执行（链式编程）

jQuery的缺点

  • 不能向后兼容。每一个新版本不能兼容早期的版本。
  • 插件兼容性不是太好，与上一点类似。
  • 在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。
  • 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

二、jQuery的使用和支持

2.1 引用jQuery文件

jQuery 版本
		jQuery 1.x 支持老浏览器   停止更新
		jQuery 2.x 不支持老浏览器   停止更新
		jQuery 3.x 不支持老浏览器   更新中

从 jQuery官网 下载对应的jQuery 库
因为jQuery不能兼容早期的版本，所以要下载生产环境支持的jQuery版本
一般情况下支持jQuery的编译器自带一个jQuery-min.js（压缩版本的jQuery）

2.2 写一个入口函数

2.2.1 创建

方法1： 
			var fun = new Function(形式参数列表，方法体);
	    例如 var fun1 = new Function("a","b","alert(a);");
	方法2： 
			function 方法名称（形式参数列表）{
					方法体}
		例如	function fun1(a,b){  	//创建
					alert(a);}			//在警告窗口显示a的值
					
				 fun1(3,4);   		//测试执行
	方法3： 
			var 方法名 = function (形式参数列表){
					方法体}
			例如	var fun2 = function(a,b){
					alert(a);}			//在警告窗口显示a的值
					
					fun2(3,4);       //测试执行

2.2.2 属性

length  代表形参的个数

2.2.3 特点

方法定义时形参的类型不用写，返回值类型也不用写。
		方法是一个对象，如果定义名称相同的方法会覆盖之前相同名称的方法。
		在JS中方法的调用只与方法的名称有关，和参数列表无关。
		在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数。

2.2.4 调用

方法名称（实际参数列表）;
<head>
		<meta charset="utf-8">
		<title>小测试实例</title>
		<script>
			function add() 					//一般使用方法2创建方法
			{
				alert(arguments[0]);
			}
			
			add(3,3);						//调用
			
		</script>
	</head>

2.3 寻找要操作的元素（选择器），去操作（添加属性、样式、文本…）

这里要用到几个选择器

  • 元素选择器（基于元素名选取元素）
    使用$符号来进行选取
$("table")		//这里可以用单引号'' 效果相同
  • #id 选择器
    针对你自己定义的元素的id来进行选择
<html>
	<head>
		<meta charset="utf-8">
		<title>例子</title>
		<script src="jquery-3.4.1.js"></script>      //导入jQuery
		<script >
			$(function()
			{
				$("#btn").click(function(){			//选择id=btn的元素添加一个点击（click）操作——点击按钮后弹出警告框并提示   “点中我了” 
						alert("点中我了");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn"  value="添加文字"/>    //定义一个提交按钮  id=btn 
	</body>
</html>
  • .class 选择器
    通过指定的 class 查找元素
$(.类名)		//这里类名 是用户自己定义的
  • CSS 选择器
$("p").css("font-size",100);          //将P标签的字体大小设置成100

三、jQuery和winodw 的执行顺序：

！！注意：
	jQuery入口函数要等待页面上的dom树加载完后执行

	window.onload要等待页面上所有的资源(dom树/外部css/js链接，图片)都加载完毕后执行

四、jQuery文件结构

( function( global, factory ) {
		 } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
		} );
		
	其实是一个自执行函数
	这个自执行函数就是给window对象添加一个jQuery属性和$属性
$其实是和jQuery是等价的，是一个函数  
		参数传递不同，效果也不一样
			*如果参数传递的是一个匿名函数-入口函数
			*如果参数传递的是一个字符串-选择器/创建一个标签
				$("#one");
				$("<div>我是一个div</div>");

			*如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象
				$(dom对象);

五、重要区别

document.		原生js选择器获取到的对象，只能调用dom方法或者属性，不能调用jQuery的属性或者方法
		$("")			利用jQuery选择器获取到的对象，只能调用jQuery方法或者属性，不能调用原生js dom的属性或者方法

六、重要特性（jQuery是一个伪数组）

jQuery转换成dom对象

	1.使用下标取出来
		例如：取div标签中第一个元素
		var $divs = $("div");
		var div1 = $div[0];
	2.使用jQuery的方法  get();
		$divs.get(1);
		例如 给按钮btns 设置点击事件
		btns[1].onclick = function(){ 
		$("body").css("background-color","black");
		}
		$(btn[0]).click(function(){
		$("body")[0].style.backgroundColor = "white";
		});