前端应用框架

基础：HTML+CSS+JavaScript+BootStrap

框架：jQuery+VUE

jQuery

jQuery是一个优秀的js函数库。jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

优势

1） 简化JS的操作

2） 浏览器兼容

3） 易扩展插件

版本差异

jQuery1.x版本：兼容老版本的IE，文件的体积较大

jQuery2.x版本：部分IE8及以下版本不支持，文件较小，执行效率较高

jQuery3.x版本：完全不支持IE8及以下版本，提供新的API，提供体积更小的版本（不包括动画/Ajax的版本）

引入jQuery库

从jQuery的官网下载

压缩版本：对文件进行压缩处理，去掉多余的空格，去掉注释，体积更小。一般在生产环境中使用。未压缩版：保留多余的空格有良好的缩进，有注释，体积更大，一般在开发时使用。

引入js库的方式

1） 服务器本地库

* 开发测试时使用 * 加重服务器的负担，上线不使用这种方式

2） CDN远程库

减轻服务器的负担上线项目使用比较靠谱的CDN资源库

核心函数

jQuery中提供了一个核心函数，函数名：jQuery或$

案例：

//js获得div var jsDiv=document.getElementById("d01"); console.log(jsDiv); //根据id选择获得对应的元素 var jqDiv=jQuery("#d01"); console.log(jqDiv); jqDiv=$("#d01"); console.log(jqDiv);

jQuery.noConflict([ex])

通过该函数可以取消$函数的定义，实现多库共存。

jQuery.noConflict();//$函数失效 jqDiv=jQuery("#d01"); console.log(jqDiv); var cxb=jQuery.noConflict(); jqDiv=cxb("#d01"); console.log(jqDiv);

ready函数

ready函数确保在页面加载完成之执行jQuery程序。件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。这个函数类似于js中的onload事件。

案例

//onload函数只能定义一次，如果多次定义，会被后面的覆盖 onload = function() { var jsDiv = document.getElementById("d01"); console.log(jsDiv); } onload = function() { console.log("---onload---"); } $(document).ready(function() { var div = $('#d01'); console.log(div); }); $(document).ready(function() { console.log("---ready1---"); });

ready函数的简化形式

//reay函数简化 $(function(){ //jQuery的代码 console.log("---ready2---"); });

jQuery对象

通过jQuery库获得的是jQuery的对象，之后jQuery对象才能使用jQuery的API,通过js的API获得的是js的对象。

jQuery对象转成js对象

jQuery对象内部维护一个数组，数组的内部封装js对象，通过访问这数组就可以获得对应的js对象。·

jQueryObj.get(index);

js对象转成jQuery对象

使用jQuery提供的核心函数对js对象进行包裹，可以获得对应的jQuery对象。

$(jsObj);

jQuery中的选择器

jQuery对于元素的选择器进行了优化，采用类似于CSS选择器的语法对元素进行选择。

基本选择

id选择器: #id值

类选择器: .class值

元素选择器： element值

任意元素：*

选择多个选择器的并集 :selector1,selector2,selectorN

选择多个选择器的交集:selector1 selector2 selectorN

案例

$(function(){ //获得所有的.clss元素 var divs= $(".clss"); console.log(divs); });

层次选择器

查找子元素，后代元素，兄弟元素的选择器。

包含选择器： selector1 selector2

直接包含：parent>child

prev+next: 匹配所有的紧接在prev元素后的next元素

prev~siblings:匹配prev元素之后的所有siblings元素

案例

var lis = $("#u01 li"); console.log(lis); lis = $("#u01>li"); console.log(lis); var li = $(".lis+li"); console.log(li); var li = $(".lis~li"); console.log(li);

内容选择器

:contains(text) ：选择包含指定内容的元素 :empty ：获得空元素 :has(selector) ：选择包含指定选择器的元素

案例

var p=$("p:contains('lucy')"); console.log(p);

jQuery操作DOM

jQuery提供了很多对于DOM操作的API。通过DOM修改元素的属性。

class属性

addClass():向jQuery中添加样式

removeClass():移除样式

案例

//对id=addClassBtn绑定一个单击事件 $("#addClassBtn").click(function(){ var div=$("#d01"); div.addClass("class01"); }); //对id=removeClassBtn绑定一个单击事件 $("#removeClassBtn").click(function(){ var div=$("#d01"); div.removeClass("class01"); });

css()

通过css(attr )可以获得指定attr的值，同时可以设置样式。

案例

var width=$(".class02").css("width"); console.log(width); $(".class02").css("fontSize","4em"); $(".class02").css({"fontSize":"2em","color":"white"});