java前端学习笔记(第一阶段)下_tdly是不是表示预热呀-优快云博客

四.jQuery

1.什么是jQuery
	jQuery全称javaScript Query,是js的一个框架，本质上是已经编写好的js程序
2.jQuery的优点
	支持各种主流的浏览器
	使用特别简单
	拥有便捷的插件机制和丰富的插件
3.使用jQuery
	引入jQuery文件
		jQuery的封装原理
		jQuery的选择器
		jQuery操作元素的属性
		jQuery操作元素的样式和内容
		jQuery操作元素的文档内容
		jQuery中的事件
		jQuery中的动画效果

1.jQuery的封装原理

(1)js的全局代码区只有一个，这样会导致同名的变量的值会被覆盖

(2)使用对象进行封装，将代码封装到对象中，但是如果对象被覆盖，则全部失败，风险很高
	var f={};
	f.函数名=function(){}
	然后之后想调用函数时直接f.函数名()就行了，对象不被覆盖就没事
	
(3)使用工厂模式，将代码进行封装，但是并没有解决可能会被覆盖的问题
	function getf(){
		var f={};
		f.函数名=function(){}
		return f;
	}
	这样我们需要f时调用getf方法获取一下就行
	
(4)将封装的函数名字去掉可以避免封装，但是这样就调用不了了

(5)匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，且数据没有办法获取
	(function(){})

(6)使用闭包，将数据一次性挂载到window对象下
	(function(f){
		f.函数名=function(){}
		f.属性=值;
	})(window)
这样就可以把函数和变量都一次性挂载到window对象下了

而jQuery使用的就是闭包，它把jQuery的属性和方法都挂载到window下了
	window.jQuery
但是window可以不写，所以我们调用的时候写的是jQuery

2.jQuery的选择器

基本选择器
	(1)id选择器
		var inp=jQuery("#id号");
	(2)标签选择器
		var inps=jQuery("标签");//返回的是数组
	(3)类选择器
		var inps=jQuery("类选择器");//返回使用了该类选择器的全部标签对象
	(4)组合选择器
		var inps=jQuery("#id号,标签,...");
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
(5)子选择器
	var inps=jQuery("#父标签id>子标签");
	返回父标签下面的指定的子元素

(6)jQuery中选择器获取的是存储了HTML元素对象的数组
   所以jQuery获取的元素对象不能够直接使用js的内容，要按照jQuery的数组操作方式进行操作
   只有用角标将元素单独拿出来后才能使用js的内容
   
(7)jQuery对我们提供了多种多样的选择器来选择需要进行的操作

3.jQuery操作元素属性

(1)获取
	对象名.attr("属性名");//返回当前属性值
		此种方式不能获取属性的实时数据，但一般也就只有value会被修改，因此value的获取我们用别的方法
		对象名.val();
	
(2)修改
	对象名.attr("属性名","属性值");

4.jQuery操作元素的内容

方式一:html()方法，底层调用的是innerHTML
	(1)获取
		对象名.html();
			返回当前对象的所有内容，包括HTML标签
	(2)修改
		对象名.html("新的内容");
			内容中的HTML标签会被解析
			且新的内容会把原来的内容覆盖
		对象名.html(对象名.html()+"新的内容");//追加

方式二:text()方法，底层调用的是innerText
	(1)获取
		对象名.text();
			返回当前对象的所有内容，不包括HTML标签
	(2)修改
		对象名.text("新的内容");
			内容中的HTML标签不会被解析
			新的内容会把原来的内容覆盖
		对象名.text(对象名.text()+"新的内容");//追加

5.jQuery操作元素的样式

(1)方式一：使用css()方法，类似于之前使用的，对象名.style.属性名
	获取样式值
		元素对象名.css("样式名");
	添加或修改：
		元素对象名.css("样式名","值");
		更改多个：
			元素对象名.css({"样式名1":"值1",...});//利用json传参，提高效率

(2)方式二：使用addClass()方法，类似于之前使用的 className
	添加或修改：
		元素对象名.addClass("类选择器名");//追加
	删除：
		元素对象名.removeClass("类选择器名");

6.jQuery操作文档结构

(1)内部追加
	元素对象名.
	append("内容");				将指定的内容追加到对象内部
	appendTo(元素对象或选择器);	将指定的元素对象追加指定对象的内部
	prepend();					将指定的内容移动到对象内部的前面
	prependTo();				将指定的元素对象移动指定对象的内部的前面

(2)外部追加
	元素对象名.
	after("内容");				将指定的内容追加到元素对象的后面
	before();					将指定的内容追加到元素对象的前面
	insertAfter("标签或#id号");	把所有匹配的元素移动到另一个指定元素集合的后面
	insertBefore();把所有匹配的元素移动到另一个指定元素集合的前面

(3)包裹
(4)替换
(5)清空
	empty();

7.jQuery的事件机制

(1)动态操作事件
	Ⅰ.添加
		元素对象.bind("事件类型",函数定义);
			动态的给指定的元素对象追加指定的事件及其监听的函数
		注意：
			js中的事件添加是只添加一次，后面的添加会覆盖前面添加的效果
			jQuery是追加效果，可以实现给一个监听，添加多个事件函数
			
	Ⅱ.解绑
		元素对象.unBind("事件类型");
			移除对象的该种事件类型上的所有函数，但通过js添加的不能移除，即只能移除用bind添加的事件

	Ⅲ.一次性添加
		元素对象.one("事件类型",函数定义);
			该事件执行一次就会失效
			可以给对象添加多个一次性事件，这些事件也可以用unBind来解绑

	Ⅳ.页面载入事件
		$(document).ready(函数);
			页面载入成功后会调用传入的函数对象
			此方式也是可以添加多个事件，和js不同不会被覆盖