1、规划:jQuery框架+Bootstrap框架+Node.js + 小东西(gulp/git/svn) - 除Node.js其余都非常简单,量大 要求:1、习惯使用帮助文档(官方文档|百度)
2、jQuery框架概念: jQuery类库其实就一个.js文件 在三大框架(vue、react、angular)出现之前,曾经全球最火的一个框架 在三大框架(vue、react、angular)出现之前,曾经全球第二火的框架:prototype.js ...多不胜数,15年统计过一次,8000+类库,导致了一个问题,永远学不完,所以以某一个类库为案例,学习类库的特点 目的|特点:简化DOM开发、事件、ajax
3、面试题:为什么有的人称呼jQuery是一个框架,有的人称呼jQuery是一个类库? 因为大部分人不知道jQuery其实由4部分组成: 1、jQuery.js - 专门简化js开发 - 大部分人只知道它,所以称呼jQuery叫做一个类库 2、jQuery.ui.js - 专门针对UI开发 - 初衷:哪怕没有UI设计师,使用jQuery.ui,做出来的网页不会太丑(HTML+CSS+JS) - 插件库 3、jQuery.mobile.js - 专门针对移动端开发 - 淘汰的:三阶段学习uniapp 4、Qunit - 专门给测试人员(不懂代码,英语好)测试js代码的
4、jQuery的历史: 版本:1.xx - 在支持老IE的同时,还做了向上兼容(新版本带来的新特性,我们也可以使用到) 2.xx - 不再支持老IE 3.xx 诞生:06年 爆火:免费、简单、开源 目的:提供了10000多行代码,带来了一个叫做jQuery的对象(属性和方法) - 但是一定比以前简单的多
5、如何使用jQuery: 1、固定步骤: 1、在HTML页面引入jquery-1.11.3.js文件 2、*使用jQuery提供的选择器去获取元素 3、*使用jQuery提供的API去操作元素
2、jQuery提供了一个工厂函数(很重要,可以干很多操作): 语法:*("jQuery选择器") - 一切的css选择器都可以使用,但是jQuery提供了更多的选择器:jQuery的作者非常喜欢css选择器 注意: 1、千万不要记忆,习惯使用帮助文档:www.w3school.com.cn/jquery/jque… 2、封装js的底层代码:document.querySelectorAll(); 提供了更加丰富的选择器 3、*****返回:不再使用DOM集合,而是一个JQ对象:
2、转换:
问题:jQuery和DOM对象都只能使用自己提供的操作,不能用别人的方法
解决:
1、jQuery -> DOM
语法:$("jQuery选择器")[下标] - 绝对没用,不会把简单的变成复杂的
*2、DOM -> jQuery
语法:$(dom对象) - 真有用,this/e.target -> 自动是一个DOM对象,用不了jQuery的操作
3、jQuery的特性: 1、链式操作 - 找到一个元素后可以不断地连续的.操作它 2、隐式迭代 - 悄悄的自动的循环,不用/千万不要去循环他,千万不要加下标
4、*通过关系获取元素:前提:先找一个元素 父:("xx").children(); 前一个兄弟:("xx").next(); *除了自己的其他兄弟:$("xx").siblings();
5、*操作元素 内容 - html/text/val - 完全等效于以前的innerHTML/innerText/value 语法:获取:("xx").api("新内容")
属性 - attr - 完全等效于以前的getAttribute/setAttribute
语法:获取:$("xx").attr("属性名")
设置:$("xx").attr("属性名","属性值")
删除:$("xx").removeAttr("属性名")
jQuery专门为class提供了一系列操作:
追加class:$("xx").addClass("新的class");
删除class:$("xx").removeClass();
- 如果不传入参数,清空所有class
- 如果传入参数,删除指定的class
切换class:$("xx").toggleClass("新的class");
- 在有此class和没有此class之间进行切换
样式 - css - 无敌的,不关系你的内联还是样式表,他只关心当前生效的样式是什么
获取:$("xx").css("css属性名")
设置:$("xx").css({ - 设置一定设置的是内联样式,优先级最高
"css属性名":"css属性值",
...
})
6、*创建元素&渲染页面&删除元素&克隆元素
工厂函数的第三个作用:
1、创建元素
var 新元素=$(`<开始标签 class=''>${变量}</结束标签>`)
2、渲染页面:4种
向里插入,当儿子
*$("父元素").append(新元素); - 最后一个儿子
$("父元素").prepend(新元素); - 第一个儿子
向外插入,当兄弟
$("兄弟").before(新元素); - 前一个兄弟
$("兄弟").after(新元素); - 后一个兄弟
3、删除元素:$("xx").remove();
4、克隆元素:垃圾
$("xx").clone(true);//添加原来xx的js的功能
总结:工厂函数:
1、找元素:$("选择器")
2、DOM->JQ:$(dom元素)
3、创建元素:$("标签")
端午作业: 0、尝试用所有的选择器 1、咖啡 2、博客 3、作业文件夹中所有的作业