jQuery+Javascript基础知识汇总

jQuery介绍

jQuery是一个Javascript库，里面提供了很多快速方便操作DOM的函数（方法）。学习jQuery的本质就是学习调用这些函数（方法）。

jQuery的入口函数

等DOM结构渲染完毕即执行内部代码，而不必等到所有外部资源加载完成。相当于原生js中的DOMContentLoaded。不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

// 方法一
$(function() {
	... // 此处是页面DOM加载完成的入口
	})
// 方法二
$(document).ready(function() {
	... // 此处是页面DOM加载完成后的入口
	});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

jQuery的*对象$

$是 jQuery的别称，在代码中可以使用$代替 jQuery；同时它也是jQuery的*对象，相当于原生JavaScript中的window，把元素利用$包装成 jQuery对象，就可以调用 jQuery的方法。

jQuery对象和DOM对象

用原生js获取来的对象就是DOM对象；jQuery方法获取的元素就是jQuery对象。jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

1. DOM对象转换为jQuery对象：$(DOM对象)
  $('div')
2. jQuery对象转换为DOM对象
   方法一：
  	$('div')[index] index为索引号
  方法二：
  	$('div').get(index) index为索引号

• 1
• 2
• 3
• 4
• 5
• 6
• 7

jQuery常用API

隐式迭代：遍历内部DOM元素，并以伪数组形式存储，简化操作，方便调用。

jQuery筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个 li 元素
:last	$('li:last')	获取最后一个 li 元素
:eq(index)	$('li:eq(2)')	获取到的 li 元素中，选择索引号为2的元素，索引号 index 从0开始
:odd	$('li:odd')	获取到的 li 元素中，选择索引号为奇数的元素
:even	$('li:even')	获取到的 li 元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
parent	$('li').parent()	查找父级
children(selector)	$('ul').children("li")	相当于$("ul>li")，查找最近一级的子级
find(selector)	$('ul'.find("li"))	相当于$("ul li")，后代选择器
siblings(selector)	$('ul'.find("li"))	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass("protected")	检查当前元素是否含有某个特定的类，如果有，则返回 true
eq(index)	$("li").eq(2)	相当于$("li:eq(2)",index)从0开始

** jQuery排他思想**：当前元素设置样式，其余兄弟清除样式，实现多选一的效果。

$(function() {
	// 1. 隐式迭代 给所有按钮都绑定了点击事件
	$("button").click(function() {
		// 2. 当前的元素变化背景颜色
		$(this).css("background", "pink");
		// 3. 其余的兄弟去掉背景颜色 隐式迭代
		$(this).siblings("button").css("background", "");
	});
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

jQuery链式编程：节省代码量，更简洁优雅
上述代码可以用以下这一行来代替

$(this).css("color", "red").sliblings().css("color", "");

• 1

jQuery样式操作

（1）操作css的方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

$(this).css("color");

• 1

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

$(this).css("color", "red");

• 1

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({"color":"white", "font-size":"20px"});

• 1

（2）操作类的方法
设置类样式方法，可以批量设置css样式，注意操作类里面的参数不要加点。

1. 添加类

$("div").addClass("current");

• 1

2. 移除类

$("div").removeClass("current");

• 1

3. 切换类

$("div").toggleClass("current");

• 1

注 ：类操作与className的区别
原生JS中className会覆盖元素原有的类名，jQuery的类操作知识对指定类进行操作，不影响原有的类名。

jQuery效果

• 显示隐藏效果

// 显示语法规范
show([speed,[easing],[fn]])

<button>显示</button>
<div></div>

<script>
$(function() {
	$("button").eq(0).click(function() {
		$("div").show(1000, function() {
			alert(1);
		})
	}))
})
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

显示参数：参数都可以省略，实现无动画直接显示
speed：三种预定速度之一的字符串（“show”, “normal”, “fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
fn:回调函数，在动画完成时执行，每个元素执行一次

• 滑动效果

// 鼠标经过
$(".nav>li").monseover(function() {
	$(this).children("ul").slideDown(200);
}))
// 鼠标离开
$(".nav>li").monseout(function() {
	$(this).children("ul").slideUp(200);
}))

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 事件切换

// 事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(fun1(经过的函数),fun2(离开的函数));

// 如果只写一个函数。那么经过和离开均会触发这个函数
$(".nav>li").hover(function() {
	$(this).children("ul").slideToggle();
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 动画队列及其停止排队方法
  动画或者效果一旦触发就会被执行，如果多次触发，就会造成多个动画或者效果排队执行。

	$(this).children("ul").stop().slideToggle();

• 1

注: stop()方法用于停止动画或效果，应该始终被写在动画或者效果的前面，相当于结束上一次的动画。

• 淡入淡出

// 淡入
$("div").fadeIn(1000);
// 淡出
$("div").fadeOut(1000);
// 切换
$("div").fadeToggle(1000);

// 修改透明度:必须传两个参数速度和透明度
【语法】 fadeTo([[speed],opacity,[easing],[fn]])
$("div").fadeTo(1000,0.5);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 自定义动画化animate

【语法】 animate(params, [speed], [easing], [fn])

• 1

参数说明
params：必需，想要更改的样式属性，以对象形式传递。属性名可以不带引号，如果是符合属性则需要采取驼峰命名法，其余参数均可省略。

$(function() {
	$("button").click(function() {
		$("div").animate({
			left:500,
			top:300,
			opacity:.4,
			width:500
		}, 500);
	})
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

jQuery属性操作

• 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，<input>元素里的type。

** 【获取属性语法】 prop("属性")
** 【设置属性语法】 prop("属性", "属性值")

$("a").prop("title", "修改后的title名");

• 1
• 2
• 3
• 4

• 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给<div>添加index = "1"。此方法也可用于获取H5自定义属性。

** 【获取属性语法】 attr("属性") // 类似原生 getAttribute()
** 【设置属性语法】 attr("属性", "属性值") // 类似原生 setAttribute()

$("div").attr("index", 4);

• 1
• 2
• 3
• 4

• 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。同时，还可以读取H5自定义属性，得到的是数字型。

** 【获取数据语法】 attr("name") // 向被选元素获取数据
** 【附加数据语法】 attr("name", "value") //  向被选元素附加数据

// 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");

// 使用此方法获取data-index h5自定义属性，不用写 “data-”，而且返回的是数字型
$("div").data("index");

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

jQuery内容文本值

主要针对元素的内容还有表单的值的操作

• 普通元素内容html()

相当于原生innerHTML

** 【获取元素内容】 html() 
** 【设置元素内容】 html("内容") 

$("div").html();
$("div").html("<h1>123</h1>");

• 1
• 2
• 3
• 4
• 5

• 普通元素文本内容text()

相当于原生innerTEXT

** 【获取元素的文本内容】 text() 
** 【设置元素地文本内容】 text("文本内容") 

$("div").text();
$("div").text("123");

• 1
• 2
• 3
• 4
• 5

• 获取表单值val()

$("input").val();
$("input").val("123");

• 1
• 2

jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

• 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历。

【语法1】 $("div").each(function(index, domEle) { xxx; })

• 1

1. each()方法遍历匹配的每一个元素，主要用于DOM对象处理；
2. index 是每个元素的索引号，domEle是每个DOM元素对象，而不是jQuery对象；
3. 要想使用jQuery方法，需要使用$(domEle)将其转换为jQuery对象。

-----------案例：修改单个元素颜色 + 求和

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
	$(function() {
		var arr = ["red", "green", "blue"];
		$("div").each(function(index, domEle) {
			// 修改颜色（注意转换，dom对象没有css方法）
			$(domEle).css("color", arr[i]);
			// 求和
			sum += parseInt($(domEle).text());
		})
		console.log(sum);
	})
</script>
</body>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

【语法2】 $.each(object,function(index, element) { xxx; })

• 1

1. $.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组、对象；
2. 里面的函数有两个参数：index是每个元素的索引号，element是遍历内容。

// 1. 遍历元素
$each($("div"), function(i, ele) {
	console.log(i);
	console.log(ele);
});

// 2. 遍历数组
$each(arr, function(i, ele) {
	console.log(i);
	console.log(ele);
});

// 3. 遍历对象
$each({
	name: "andy",
	 age: 18
	 }, function(i, ele) {
	console.log(i); // 输出的是 name age 属性名
	console.log(ele); // 输出的是 andy 18 属性值
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• 创建、添加、删除元素

创建元素

【语法】 $("<li></li>");

• 1

添加元素——内部添加
把元素放入匹配元素内部最后面，类似于原生appendChild。

【语法】 element.append("内容");

• 1

添加元素——外部添加

【语法】 element.after("内容"); // 把内容放入目标元素后面
		element.before("内容"); // 把内容放入目标元素前面

• 1
• 2

注： 内部添加元素生成之后，他们是父子关系；外部添加元素之后，他们是兄弟关系。

删除元素

【语法】 element.remove() // 删除匹配的元素（本身）
 		element.empty() // 删除匹配的元素集合中所有的子节点
  		element.html("") // 清空匹配的元素内容

• 1
• 2
• 3

 ---------------------综合案例
 
$(function() {

	// 1. 创建元素
	var li = $("<li>后来创建的元素</li>")
	
	// 2， 添加元素
		// （1）内部添加
		$("ul").append(li);   // 内部添加并且放到内容的最后面
		$("ul").prepend(li);  // 内部添加并且放到内容的最前面
		// （2）外部添加
		var div = $("<div>后来添加的元素</div>");
		$(".test").after(div);
		$(".test").before(div);

	// 3， 删除元素
	$("ul").remove(); // 删除匹配元素本身
	$("ul").empty(); // 删除匹配元素里面的子节点
	$("ul").html(""); // 删除匹配元素里面的子节点
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

jQuery尺寸、位置操作

语法	用法
width() / height()	取得匹配元素宽度和高度值 只算 width/height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值 包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值 包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值 包含padding、border 、margin

注： 以上参数为空，则是获取响应值，返回的是数字型；如果参数为数字，则是修改相应值；参数可以不必写单位。

Javascript基础知识部分

字面量和变量

字面量是一些不可改变的值，是可以被直接使用的，但是我们一般都不会直接使用字面量。
变量可以用来保存字面量，是可以任意改变的，在开发中都是通过变量去保存一个字面量。

标识符

在js中所有的可以由我们自主命名的都可以称之为标识符，变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则：

1. 标识符中可以含有字母、数字、_、$；
2. 标识符不能以数字开头；
3. 标识符不能是ES中的关键字或保留字；
4. 标识符一般都采用驼峰命名法

注：js底层保存标识符时实际上采用的是Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符。