前端应用框架
基础: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"});