jQuery+Javascript基础知识汇总

时间:2024-10-07 07:00:42

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
  1. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。
$(this).css("color", "red");
  • 1
  1. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号。
$(this).css({"color":"white", "font-size":"20px"});
  • 1

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

  1. 添加类
$("div").addClass("current");
  • 1
  1. 移除类
$("div").removeClass("current");
  • 1
  1. 切换类
$("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中含有的内容都可以作为标识符。