jQueryUI

用户4581399162229
209 阅读3分钟

1、jQueryUI：基于jQuery（基于JavaScript的一个框架，是三大框架出现之前，全球最火的一个，但是现在已经被淘汰了）的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库 三大框架：Vue（中国人自己的框架：最后诞生，也借鉴了react和angular）+React+Angular（在国内几乎没有市场，三大框架中最早诞生的） 组件库 - 组件：组成网页一部分的部件，代码重用，一般不具备JS功能的，比如：导航条、图文显示... 插件库 - 跟组件差不多，但是带有JS功能 - 选项卡、轮播...

如何使用：
	1、下载jQueryUI - 不需要你们做
	2、必须在页面上进行引入 - 顺序不能错，一定要先引入jQuery的JS，再引入jQueryUI的JS
		<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css">
		<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
		<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
	3、挑选出你需要的/喜欢的插件，直接梭到你的项目之中
	4、根据设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
	5、*使用ajax去获取数据库中的数据，来进行页面渲染！
	6、千万别忘了调用jQuery提供的xx方法来实现功能！

	个人比较推荐的JQUI的插件：
		1、选项卡/标签页
		2、菜单
		3、手风琴/折叠面板
		4、模糊查询/自动完成
		5、JQ动画/特效
		6、交互部分自己试着玩玩

简化了【核心DOM】
使用jQuery，必须先引入：<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

jQuery中最有魅力的一个方法叫做$ 或者 jQuery：工厂函数
	作用：
		1、查找元素：$("JQ选择器") - 包含了一切的css选择器，甚至提供了更多，不需要记忆：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
			底层原理：document.querySelectorAll();
		2、创建元素：$(`<标签 属性>内容</标签>`) - 底层原理：document.createElement("");
		3、可以将DOM转为JQ：只有一个点this和target，他们得到自动就是一个DOM对象，用不了JQ的API：$(DOM对象);
		4、代替了window.onload - $(callback)，面试题：两者的区别？
			1、window.onload - 等待所有资源（css、js、html、图片、视频、音频...）加载完毕才会执行的，效率降到了最低，而且一个页面只能用一次
			2、$(callback) - 只等待DOM元素(HTML)加载完毕才会执行的，效率比window.onload高，一个页面可以用多次
		底层用到了一个人：重载：arguments对象 - 可以通过判断用户传入的实参的不同执行不同的操作
		
1、查找元素：
	1、除了直接查找：$("JQ选择器")
	2、通过 关系 查找：至少要先找到一个人才可以使用关系：
		父：parent();
		子：children();
		前一个兄弟：prev();
		后一个兄弟：next();
		其他兄弟：siblings();
	JQ自带隐式迭代，不需要遍历，可以直接对集合做操作

2、操作元素：
	内容：
		获取：$("xx").html/text/val();
		设置：$("xx").html/text/val("新内容");

	属性：
		获取：$("xx").attr("属性名");
		设置：$("xx").attr("属性名","属性值");
		删除：$("xx").removeAttr("属性名");

	样式：
		1、可以操作class
			1、添加class：$("xx").addClass("新class") - JS中没有此操作，只能替换
			2、删除class：
				$("xx").removeClass()
					如果不传实参，则删除所有class
					如果传入实参，则删除指定class
			3、切换class：
				$("xx").toggleClass("d3") - 在有d3和没有d3之间做切换，不会影响其他的class

		2、直接操作css
			获取：$("xx").css("css属性名");
			设置：$("xx").css({
				css属性名:"css属性值",
				...
			           });
		
3、JQ遍历 - 一般只用于获取（JQ默认只能获取第一的东西，想要获取到所有必须遍历）
	$("一堆人").each((i,val)=>{
		i - 下标
		val - 遍历到的东西
	})

4、上树：$("父").append(儿子)
      删除：$("xx").remove();

5、JQ动画：
	1、显示：$("xx").show();
	2、隐藏：$("xx").hide();
	3、切换：$("xx").toggle();
		如果不传参数，是瞬间显示和隐藏
		如果传入参数$("xx").api("动画名称",时长); - 一定要搭配jQueryUI才可以

JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换
	DOM->JQ：$(dom)
	JQ->DOM：jq对象[下标]

jQuery有的人来称呼是一个类库（小），有的人爱称呼是一个框架（大）？
	因为大部分人只知道jQuery有一个.js文件（类库）jquery.js
	但是实际jQuery是由4部分组成的，很多人不知道：
		1、jQuery.js
		2、jQueryUI.js
		3、jQueryMobile - 但是现在三阶段学的是uniapp
		4、Qunit - 测试用于来测试JavaScript代码的一个工具
avatar
文章
阅读
粉丝