jQuery学习记录一

前端应用框架

基础：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"});