3-1. jQuery学习导入（jQuery文件引入、函数$、等待页面加载完毕）

从JS到 jQuery:

jQuery、jQuery UI、jQuery mobile

 

客户端JS的功能：

对浏览事件做出响应
在数据被提交到服务器之前验证数据
检测访客的浏览信息
控制cookie信息
其实还有服务器端JS

 

为什么要使用jQuery？

最主要是解决浏览器器兼容问题

 

jQuery能够做什么？

轻松获取文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、使用Ajax实现无刷新从服务器获取信息、简化常见的JS任务
 

下载地址：

https://jquery.com/

 

• 引入jQuery

XXXX.js 文件

<script> </script>标签

jQuery.js: 未经压缩，适合学习用，加载慢

jQuery.min.js: 压缩过，适合项目直接用，加载快

jQuery各大版本都是相同的API，里面函数名字，以及参数等等都是一样的，使用的时候没有区别，但对浏览器兼容有影响

 

• 引入方法：<script type="text/javascript" src="xxx.js">   </script>

<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			/* 第一个jQuery程序 */
				$(function(){
					alert("hello word!");
				});
		</script>

 

jQuery中的$函数：

•  $在jQuery中是一个函数名

jQuery中有一个非常重要的函数：jQuery，为了使用方便简写成 $

• $函数的参数以及功能

$函数传入的参数类型不同所实现的功能也是不一样的，主要的参数类型有4种：

1. 传入一个函数：传入的函数在页面元素加载完毕之后再执行
2. 传入选择器：传入字符串形式的选择器
3. 传入htmlElement对象：传入htmlElement对象可以转为jQuery对象
4. 传入html代码：基于html代码片段生成新元素

		<script type="text/javascript">
			
			$(function(){    //有了这个函数现在代码放在哪个位置都是最后才执行了
				var div1=document.getElementById("div1");
				div1.style.backgroundColor="red";
				div1.style.height="100px";
			});
		</script>

• 自定义jQuery简写符号

除了jQuery库之外，还有别的JavaScript库也使用$符号，如果一个页面加载多个库就会有冲突，

那么我们用 jQuery.noConflict方法让jQuery放弃使用$符号，也可以把它的返回值赋给一个变量实现自定义jQuery简写符号。

1. 让jQuery放弃简写符号$:  jQuery.noConflict();
2. 自定义简写符号：var jq=jQuery.noConflict();

		<script type="text/javascript">
		
			jQuery.noConflict(); //让jQuery放弃使用$这个简写符号
			
			jQuery(function(){  //这边就不能使用$这个函数了，必须写全
				var div1=document.getElementById("div1");
				div1.style.backgroundColor="red";
				div1.style.height="100px";
			});
		</script>

		<script type="text/javascript">
		
			var jq=jQuery.noConflict(); 
			
			jq(function(){
				var div1=document.getElementById("div1");
				div1.style.backgroundColor="red";
				div1.style.height="100px";
			});
		</script>

 

等待页面元素加载完毕

为什么要等待页面元素加载完毕才进行操作，因为没加载完毕我们连元素可能都没获取到

保证页面加载完毕的两种方法：

//方法一: 
$(document).ready(function(){
.....
//alert("222");
});

//方法二:
$(function(){
.....
});

//一个页面可以有多个上面的代码而不会产生冲突