电梯JQuery

最新推荐文章于 2022-05-19 11:39:40 发布

weixin_48689480

最新推荐文章于 2022-05-19 11:39:40 发布

阅读量165

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_48689480/article/details/107082331

版权

jQuery 快速入门

jQuery 介绍

jQuery 是一个 JavaScript 库。
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。

jQuery HolleWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HolleWorld</title>
</head>
<body>
    <div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>
</html>

jQuery 基本语法

JS 对象和 jQuery 对象转换

JS 的 DOM 对象转换成 jQuery 对象

<script>
    $(JS的DOM对象);
</script>

jQuery 对象转换成 JS 对象

<script>
    jQuery对象[索引];
	jQuery对象.get(索引);
</script>

事件的绑定和解绑

绑定事件

<script>
    jQuery对象.on(事件名称,执行的功能);
</script>

解绑事件

<script>
    jQuery对象.off(事件名称);
</script>

事件的切换

事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。

方式一：单独定义

<script>
    $(元素).事件方法名1(要执行的功能);
	$(元素).事件方法名2(要执行的功能);
	…
</script>

方式二：链式定义

<script>
    $(元素).事件方法名1(要执行的功能)
	.事件方法名2(要执行的功能);
	…
</script>

遍历

方式一：传统方式

<script>
    for(let i = 0; i < 容器对象长度; i++){
		执行功能;
	}
</script>

方式二：对象.each() 方法

<script>
    容器对象.each(function(index,ele){
		执行功能;
	});
</script>

方式三：$.each() 方法

<script>
    $.each(容器对象,function(index,ele){
		执行功能;
	});
</script>

方式四：for of 语句

<script>
    for(ele of 容器对象){
		执行功能;
	}
</script>

jQuery 选择器

基本选择器

选择器	语法	作用
元素选择器	$(“元素的名称”);	根据元素名称获取元素对象们
id 选择器	$("#id的属性值");	根据id属性值获取元素对象
类选择器	$(".class的属性值");	根据class属性值获取元素对象们

层级选择器

选择器	语法	作用
后代选择器	$(“A B”);	A下的所有B(包括B的子级)
子选择器	$(“A > B”);	A下的所有B(不包括B的子级)
兄弟选择器	$(“A + B”);	A相邻的下一个B
兄弟选择器	$(“A ~ B”);	A相邻的所有B

属性选择器

选择器	选择器	作用
属性名选择器	$(“A[属性名]”);	根据指定属性名获取元素对象们
属性名选择器	$(“A[属性名=属性值]”);	根据指定属性名和属性值获取元素对象们

过滤器选择器

选择器	选择器	作用
首元素选择器	$(“A:first”);	获得选择的元素中的第一个元素
尾元素选择器	$(“A:last”);	获得选择的元素中的最后一个元素
非元素选择器	$(“A:not(B)”);	不包括指定内容的元素
偶数选择器	$(“A:even”);	偶数，从 0 开始计数
奇数选择器	$(“A:odd”);	奇数，从 0 开始计数
等于索引选择器	$(“A:eq(index)”);	指定索引元素
大于索引选择器	$(“A:gt(index)”);	大于指定索引元素
小于索引选择器	$(“A:lt(index)”);	小于指定索引元素

表单属性选择器

选择器	语法	作用
可用元素选择器	$(“A:enabled”);	获得可用元素
不可用元素选择器	$(“A:disabled”);	获得不可用元素
单选/复选框被选中的元素	$(“A:checked”);	获得单选/复选框选中的元素
下拉框被选中的元素	$(“A:selected”);	获得下拉框选中的元素

jQuery DOM

操作文本

方法	作用
html()	获取标签的文本
html(value)	设置标签的文本内容，解析标签

操作对象

方法	作用
$(“元素”)	创建指定元素
append(element)	添加成最后一个子元素，由添加者对象调用
appendTo(element)	添加成最后一个子元素，由被添加者对象调用
prepend(element)	添加成第一个子元素，由添加者对象调用
prependTo(element)	添加成第一个子元素，由被添加者对象调用
before(element)	添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)	添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

操作样式

方法	作用
css(name)	根据样式名称获取css样式
css(name,value)	设置CSS样式
addClass(value)	给指定的对象添加样式类名
removeClass(value)	给指定的对象删除样式类名
toggleClass(value)	如果没有样式类名，则添加。如果有，则删除