2023-6-9（第二十八天）jQueryjQuery ------开原网页用户界面代码库三大框架：VUe、React

jQuery ------开原网页用户界面代码库

三大框架：VUe、React、Angular

jQueryUI

基于jQuery（基于JavaScript的一个框架，是三大框架出现之前，全球最火的一个，但是现在已经被淘汰了）的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库

jQUeryUI的使用

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方法来实现功能！

jQuery

使用jQuery，

必须先引入

<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

工厂函数：$或jQUery

作用： 1、查找元素：$("JQ选择器") - 包含了一切的css选择器，甚至提供了更多www.w3school.com.cn/jquery/jque…

2、创建元素：$(<标签属性>内容</标签>) - 底层原理：document.createElement("");

3、可以将DOM转为JQ：只有一个点this和target，他们得到自动就是一个DOM对象，用不了JQ的API：

$(DOM对象); 4、代替了window.onload -$ (callback)

两者的区别：

window.onload - 等待所有资源（css、js、html、图片、视频、音频...）加载完毕才会执行的，效率降到了最低，而且一个页面只能用一次
$(callback) - 只等待DOM元素(HTML)加载完毕才会执行的，效率比window.onload高，一个页面可以用多次

底层用到了一个人：重载：arguments对象 - 可以通过判断用户传入的实参的不同执行不同的操作

查找元素

1、除了直接查找：$("JQ选择器") 2、通过关系查找：至少要先找到一个人才可以使用关系：父：parent(); 子：children(); 前一个兄弟：prev(); 后一个兄弟：next(); 其他兄弟：siblings(); JQ自带隐式迭代，不需要遍历，可以直接对集合做操作

操作元素：

内容：获取： $("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属性值", ... });

JQ遍历 -（JQ默认只能获取第一的东西，想要获取到所有必须遍历）

$("一堆人").each((i,val)=>{ i - 下标 val - 遍历到的东西 })

上树

$("父").append(儿子)

删除：$("xx").remove();

JQ动画

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

注：JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换

DOM->JQ：$(dom) JQ->DOM：jq对象[下标]

jQuery由4部分组成

1、jQuery.js 2、jQueryUI.js 3、jQueryMobile 4、Qunit - 测试用于来测试JavaScript代码的一个工具

jQuery动画网站

1、百度搜索：jQuery插件库网站，缺陷：有的要收费一个账号一天只能下载2次 2、百度搜索：jQuery之家，免费

2023-6-9（第二十八天）jQuery