jQuery

最新推荐文章于 2023-04-28 10:33:56 发布
最新推荐文章于 2023-04-28 10:33:56 发布
阅读量1k 收藏
点赞数
分类专栏： 笔记 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48496502/article/details/121914532
版权

jQuery

1、jQuery 介绍

1.1、 介绍

需求：
给一个按钮绑定单击事件

使用 JS 中的 onclick 单击事件来完成

<script type="text/javascript">
	window.onload = function () {
		var element = document.getElementById("btnId");
		element.onclick = function () {
			alert("SayHello")
		}
	}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

使用 jQuery 来完成给一个按钮绑定单击事件

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function () {    //表示页面加载完成之后，相当 window.onload = function () {}
        var $btnId = $("#btnId");  // 表示按 id 查询标签对象
        $btnId.click(function () {  // 绑定单击事件
            alert("jQuery 单击事件")
        })
    })
</script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>

注意：

  1. 使用 jQuery 一定要引入 jQuery 库
  2. jQuery 中的 $ 是是一个函数
  3. jQuery 怎么为按钮添加点击响应函数的？
    1. 第一步，使用 jQuery 查询到标签对象
    2. 第二步，标签对象.click( function(){} );

1.2、jQuery 核心函数 $

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。

$()就是调用 $ 这个函数

  1. 传入参数为 [ 函数 ] 时：
    表示页面加载完成之后。相当于 window.onload = function(){}
  2. 传入参数为 [ HTML 字符串 ] 时：
    会为我们创建这个 html 标签对象
  3. 传入参数为 [ 选择器字符串 ] 时：
    $(“#id 属性值”); id 选择器，根据 id 查询标签对象
    $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
    $(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
  4. 传入参数为 [ DOM 对象 ] 时：
    会把这个 dom 对象转换为 jQuery 对象

传入参数为 HTML 字符串时， 会创建这个 html 标签对象

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
    $(function () {
        $(
            "<div>" + "<span>演示1</span>" + "<span>演示2</span>" + "</div>"
        ).appendTo("body");
    })
</script>

在这里插入图片描述

传入参数为 DOM 对象时
var $1 = $(element);传入的 dom 对象，输出为 jQuery 对象

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		var element = document.getElementById("btnId");
		alert(element)    //[object HTMLButtonElement],是dom对象
		var $1 = $(element);
		alert($1)     //[object Object],是jquery对象
	})
</script>

2、jQuery 对象和 dom 对象

2.1、二者区分

  1. Dom 对象
    在这里插入图片描述
    DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

  2. jQuery 对象
    在这里插入图片描述
    jQuery 对象 Alert 出来的效果是：[object Object]

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		var element = document.getElementById("btnId");
		alert(element)    //[object HTMLButtonElement],是dom对象
		var $1 = $(element);
		alert($1)     //[object Object],是jquery对象
	})
</script>

jQuery 对象本质上就是 dom 对象的数组 + jQuery 提供的一系列功能函数

但是jQuery 对象不能使用 DOM 对象的属性和方法 ，DOM 对象也不能使用 jQuery 对象的属性和方法

以下代码中：
遍历 jQuery 对象得到的是 4个 DOM 对象，可见 jQuery 对象是 dom 对象的数组

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//通过 JQuery 提供的 API 查询到的对象
		var button = $("button");
		//遍历这个jQuery对象
		for (var i = 0; i < button.length; i++) {
			alert(button[i])  //遍历的结果是4个DOM对象
			//[object HTMLButtonElement]、[object HTMLButtonElement]、[object HTMLButtonElement]、[object HTMLButtonElement]
		}
	});
</script>

jQuery 有一系列功能函数
css()可以设置和获取样式

将标签名为button的对象设置颜色为红色
$("button").css("color","red")

将标签名为button的对象设置颜色为蓝色
$("button").style.color = "blue";

2.2、二者互转

  1. dom 对象转化为 jQuery 对象
    1. 先有 DOM 对象
    2. $( DOM 对象 )
  2. jQuery 对象转为 dom 对象
    1. 先有 jQuery 对象
    2. jQuery 对象[下标]取出相应的 DOM 对象，即数组元素

在这里插入图片描述

3、jQuery 选择器★★★

3.1、基本选择器

选择器描述
#ID 选择器：根据 id 查找标签对象
.class 选择器根据 class 查找标签对象
element 选择器根据标签名查找标签对象
* 选择器表示任意的，所有的元素
selector1，selector2 组合选择器合并选择器 1，选择器 2 的结果并返回

selector1，selector2 组合选择器
示例：
在这里插入图片描述

注意组合选择器的逗号和内容都在一对双引号内

这里的p.class是指标签名必须是 p 标签，并且 class 属性必须是 myClass

在 CSS 和 jQuery 中，div.mini都是表示标签名为 div ，且 class 属性为 mini 的标签

案例1：
单击第一个按钮时，会将 id 为 one 的元素设置样式 “background-color”，颜色为"#bbffaa"

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//1.选择 id 为 one 的元素 "background-color","#bbffaa"
	$(function () {   //注意这一步，不要忘记这是页面加载完成的步骤
		//对象.click(function(){})
		$("#btn1").click(function () {
			//css()方法，可以设置和获取样式
			$("#one").css("background-color","#bbffaa")
		})
	})
</script>

在这里插入图片描述
案例2：
单击第二个按钮时，选择 class 为 mini 的所有元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//2.选择 class 为 mini 的所有元素
	$(function () {   //注意这一步，不要忘记这是页面加载完成的步骤
		$("#btn2").click(function () {
			$(".mini").css("background-color","#bbffaa")
		})
	})
</script>

在这里插入图片描述
案例3：
单击第三个按钮时，选择元素名是 div 的所有元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//3.选择元素名是 div 的所有元素
	$(function () {   //注意这一步，不要忘记这是页面加载完成的步骤
		$("#btn3").click(function () {
			$("div").css("background-color","#bbffaa")
		})
	})
</script>

在这里插入图片描述
案例4：
单击第四个按钮时，选择所有的元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//4.选择所有的元素
	$(function () {   //注意这一步，不要忘记这是页面加载完成的步骤
		$("#btn4").click(function () {
			$("*").css("background-color","#bbffaa")
		})
	})
</script>

在这里插入图片描述
案例5：
单击第五个按钮时，选择所有的 span 元素和id为two的元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//5.选择所有的 span 元素和id为two的元素
	$(function () {   //注意这一步，不要忘记这是页面加载完成的步骤
		$("#btn5").click(function () {
			$("span,#two").css("background-color","#bbffaa")
		})
	})
</script>

在这里插入图片描述

3.2、层级选择器

在这里插入图片描述

选择器描述
ancestor descendant 后代选择器在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 后面的兄弟元素选择器匹配 prev 元素之后的所有 siblings 元素

ancestor descendant 后代选择器
只要在该标签之下，无论是子元素还是孙子元素，都可以查到
示例：
在这里插入图片描述
parent > child 子元素选择器
只是在该标签之下，只能查一代子元素，再往下的孙子元素等等就查不到了
示例：
在这里插入图片描述
prev + next 相邻元素选择器
示例：
在这里插入图片描述
prev ~ sibings 后面的兄弟元素选择器
查询所有与 prev 元素同辈的 sibings 元素
示例：

在这里插入图片描述

3.3、过滤选择器

3.3.1、基本过滤器

选择器描述
:first获取第一个元素
:last获取最后个元素
:not(selector)去除所有与给定选择器匹配的元素
:even匹配所有索引值为偶数的元素，从 0 开始计数
:odd匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)匹配一个给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:lt(index)匹配所有小于给定索引值的元素
:header匹配所有标题，如 h1, h2, h3 之类的标题元素
:animated匹配所有正在执行动画效果的元素

:first 获取第一个元素
示例：
在这里插入图片描述
:not(selector) 去除所有与给定选择器匹配的元素
括号里面填的是表单对象属性过滤器
示例：
在这里插入图片描述
:even 匹配所有索引值为偶数的元素，注意从 0 开始计数
示例：
在这里插入图片描述
:eq(index) 匹配一个给定索引值的元素
注意索引从 0 开始
示例：
在这里插入图片描述

:header 匹配所有标题
示例：
在这里插入图片描述

$(":animated")  //选择正在执行动画的元素
$("div:not(:animated):last")  //选择没有执行动画的最后一个标签 div 标签

3.3.2、内容过滤器

选择器描述
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:parent匹配含有子元素或者文本的元素
:has(selector)匹配含有选择器所匹配的元素的元素

:contains(text) 匹配包含给定文本的元素
示例：
在这里插入图片描述
:empty 匹配所有不包含子元素或者文本的空元素
和:parent 相对应，:parent是查询包含子元素或文本
示例：
在这里插入图片描述

在这里插入图片描述

:has(selector) 匹配含有选择器所匹配的元素的元素

括号里面的填入标签名就直接是标签名
填入 class 属性，就填入 .class
填入 id 属性，就填入 #id
示例：
在这里插入图片描述

3.3.3、属性过滤器

在这里插入图片描述

选择器描述
[attribute]匹配包含给定属性的元素
[attribute=value]匹配给定的属性是某个特定值的元素
[attribute!=value]匹配所有不含有指定的属性，或者属性值不等于特定值的元素
[attribute^=value]匹配给定的属性是以某些值开始的元素
[attribute$=value]匹配给定的属性是以某些值结尾的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用

示例：
在这里插入图片描述
在这里插入图片描述
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

注意是需要同时满足

基本选择器中的组合选择器是合并多个结果，是或者关系

示例：
在这里插入图片描述

3.3.4、表单过滤器

该类过滤器，是对表单中的 type 属性类型进行筛选

选择器描述
:input匹配所有 input, textarea, select 和 button 元素
:text匹配所有文本输入框
:password匹配所有的密码输入框
:radio匹配所有的单选框
:checkbox匹配所有的复选框
:submit匹配所有提交按钮
:image匹配所有 img 标签
:reset匹配所有重置按钮
:button匹配所有 input type=button 按钮
:file匹配所有 input type=file 文件上传
:hidden匹配所有不可见元素 display:none 或 input type=hidden隐藏元素

:text 匹配所有文本输入框

即指表单中，谁的 type 属性为 text 的元素

示例：
在这里插入图片描述

style="display:none;" 该属性的作用是不在页面上显示该标签
<div style="display:none;" class="none"></div>

在 CSS 中可以这么用

div.hide 表示标签为 div，class  属性值为hide的元素
div.hide {  
	display: none;
}

3.3.5、表单对象属性过滤器

该类过滤器，是对表单中的属性类型进行筛选

选择器描述
:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:checked匹配所有选中的单选，复选
:selected匹配所有选中的 option

什么叫可用和不可用？
disabled="disabled"有这个属性的都是不可用的，按钮按不了，输入框也输入不了

有了这个属性disabled="disabled"就会变成不可用的
<input name="email" disabled="disabled" />

:checked 匹配所有选中的单选，复选
示例：
在这里插入图片描述

:selected 匹配所有选中的 option

select option 表示层级选择器中的后代选择器

示例：

在这里插入图片描述

案例1：
对表单内可用文本输入框进行赋值New Value

val()可以操作表单项的value属性
表单项是指表单过滤器中的那些文本输入框、密码输入框、单选框、复选框

对表单内可用文本输入框进行赋值New Value
$("#btn1").click(function(){
	$(":text:enabled").val("New Value");
});

在这里插入图片描述
案例2：
获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数

size()方法获取 jQuery 的元素个数
length()方法获取 jQuery 的元素个数

$("#btn3").click(function(){
	alert($(":checkbox:checked").size())
	alert($(":checkbox:checked").length())
});

案例3：
获取选中的多选框中，每个的value值

each(function(){})方法是 jQuery 对象提供的用来遍历元素的方法，将遍历体内要做的操作放进function函数体内

在遍历的function函数中，有个this对象，指的就是当前遍历到的 dom 对象

第一种，使用给 jQuery 数组使用fori遍历
$("#btn4").click(function(){
	var str = "";
	var eles = $(":checkbox:checked");
	console.log(eles);
	for(var i=0;i<eles.size();i++){
		str += "【"+$(eles[i]).val()+"】";
	}
	alert(str)
});

第二种，使用 jQuery 提供的 each() 方法进行遍历
$("#btn4").click(function(){
	//each(function(){})方法是 jQuery 对象提供的用来遍历元素的方法，将遍历体内要做的操作放进function函数体内
	//在遍历的function函数中，有个this对象，指的就是当前遍历到的 dom 对象
	eles.each(function () {
		// alert(this);   //输出多个[object HTMLInputElement]
		alert(this.value)
	})
});

案例4：
获取选中的下拉框中，选中的内容

第一种，使用给 jQuery 数组使用fori遍历
$("#btn5").click(function(){
	var str = "";
	var els = $("select option:checked");
	console.log(els);
	for(var i=0;i<els.size();i++){
		str += "【"+$(els[i]).val()+"】";
	}
	alert(str)
});

第二种，使用 jQuery 提供的 each() 方法进行遍历
$("#btn5").click(function(){
	els.each(function () {  //拿到被选中的option标签的dom对象
		alert(this.innerHTML)
	})
});

4、jQuery 元素筛选

在这里插入图片描述
在这里插入图片描述
filter()筛选出与指定表达式匹配的元素集合
用逗号分隔多个表达式

示例：
查找body中选择所有 class属性值为one的 div子元素

$("body").children("div.one")

示例：
查找索引为偶数的 div 标签

$("div").filter(":even")

示例：
在这里插入图片描述

nextUntil(exp)返回当前元素与exp元素之间的元素，不包括首尾

exp元素在当前元素的后面

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		$("div:first").nextUntil("span").addClass("after");
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<span></span>
	<div></div>
</body>

在这里插入图片描述
prevUntil(exp)返回当前元素与exp元素之间的元素，不包括首尾

exp元素在当前元素的前面

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		$("div:last").prevUntil("span").addClass("after");
	});
</script>
</head>
<body>
	<div></div>
	<span></span>
	<div></div>
	<div></div>
	<div></div>
</body>

在这里插入图片描述
add()将与方法括号中相匹配的元素添加到当前的 jQuery 对象中

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		alert($("div").length)    //2
		alert($("div").add("span").length)    //3，是将 div 标签带着 span 标签一起
	});
</script>
</head>
<body>
	<div></div>
	<span></span>
	<div></div>
</body>

5、jQuery 的属性操作

在这里插入图片描述
不传参数是获取，传入参数是设置

alert($("div").html())  //获取中间元素，包括标签
alert($("div").html("<h1>div中的标题</h1>"))   //设置值

text()是只获取文本，不包括里面的子标签
html()是里面的子标签和文本都获取
val()是输入框的里面的值

单选框、多选框、下拉框被选中的操作

可以根据单选框的value值，控制单选框被选中
$(":radio").val(["单选框的value值"])
根据多选框的value值，批量控制多选框被选中
$(":checkbox").val(["多选框的value值","多选框的value值","多选框的value值"])
根据下拉框中标签option的value值，批量控制下拉选中
注意：前面是select标签，后面是option标签的value值
$("#select标签的id").val(["标签option的value值"])

也可以一次性让单选框、多选框、下拉框都完成选中

没有顺序限制，顺序颠倒也无所谓

$(
	":radio",":checkbox","#select标签的id"
).val(
	["单选框的value值","多选框的value值","多选框的value值","标签option的value值"]
)

在这里插入图片描述
attr()传入一个参数是获取，传入两个参数就是设置值

$(":checkbox").attr("name")  //获取name属性
$(":checkbox").attr("name","abc")   //设置name属性为 abc

所以可以用此属性来为标签添加自定义属性

$(":checkbox").attr("aba","value")   //自定义属性

对于多选框的checked属性，若此多选选项已被选中，就输出 checked，若未被选中，就输出 undefined

已被选中，输出 checked
未被选中，输出 undefined，官方觉得这个不对
$(":checkbox").attr("checked")

prop(key,value) 只推荐操作attr不方便操作的属性
prop(key,function(index,attr))
对于多选框的checked属性，若此多选选项已被选中，就输出 true，若未被选中，就输出 false

已被选中，输出 true
未被选中，输出 false
$(":checkbox").prop("checked"，true)  //选中多选框

6、jQuery 练习

6.1、全选，全不选，反选

在这里插入图片描述

$("table:eq(1) tr:even")
第二个表里面的偶数行，从0开始

在事件的function函数中，有个this对象，这个this对象是当前正在响应的jQuery对象中的dom对象

在each遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的dom对象

本例中，分六个部分

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//全选按钮
		$("#checkedAllBtn").click(function () {
			$(":checkbox").prop("checked",true)
		})

		//全不选按钮
		$("#checkedNoBtn").click(function () {
			$(":checkbox").prop("checked",false)
		})

		//反选按钮
		$("#checkedRevBtn").click(function () {
			//遍历所有内容选项的多选框，以此除掉【全选/全不选】的选框
			$(":checkbox[name=items]").each(function () {
				//实现反选
				//在each遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的dom对象
				this.checked = !this.checked;
			})

			//要注意，是否满选，【全选/全不选】的选框对应变化
			//获取内容选项的总个数
			var size = $(":checkbox[name=items]").length;
			//获取选中的内容选项的个数
			var checkedsize = $(":checkbox[name=items]:checked").length;
			if(size == checkedsize){
				$(":checkbox#checkedAllBox").prop("checked",true)
			}else {
				$(":checkbox#checkedAllBox").prop("checked",false)
			}
		})

		//展示按钮，即展示所选中的内容
		$("#sendBtn").click(function () {
			$(":checkbox[name=items]:checked").each(function () {
				alert(this.value)
			})
		})

		//根据【全选/全不选】的选框是否选中，来决定内容选框是否全选/全不选
		//给【全选/全不选】的选框绑定单击事件
		$("#checkedAllBox").click(function () {
			//在事件的function函数中，有个this对象，这个this对象是当前正在响应的事件的dom对象
			//即是$("#checkedAllBox")的dom对象
			$(":checkbox[name=items]").prop("checked",this.checked)
		})

		//根据内容选框是否全选/全不选， 来决定【全选/全不选】的选框是否选中
		//给内容选框绑定单击事件
		$(":checkbox[name=items]").click(function () {
			//获取内容选项的总个数
			var size = $(":checkbox[name=items]").length;
			//获取选中的内容选项的个数
			var checkedsize = $(":checkbox[name=items]:checked").length;
			if(size == checkedsize){
				$(":checkbox#checkedAllBox").prop("checked",true)
			}else {
				$(":checkbox#checkedAllBox").prop("checked",false)
			}
		})
	});
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>

6.2、从左到右，从右到左

在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			//第一个按钮：选中添加到右边
			$("button:eq(0)").click(function () {
				$("select[name=sel01] option:selected").appendTo($("select[name=sel02]"))
				//注意，使用appendTo()方法的时候，左边列表里面的option元素也会自动删除，不需要手动删除
				// $("select[name=sel01] option:selected").remove() 该语句多余
			})
			//第二个按钮：全部添加到右边
			$("button:eq(1)").click(function () {
				$("select[name=sel01] option").appendTo($("select[name=sel02]"))
			})
			//第三个按钮：选中删除到左边
			$("button:eq(2)").click(function () {
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"))
				//注意，使用appendTo()方法的时候，前面列表里面的option元素也会自动删除，自动跳队进入后面列表
			})
			//第四个按钮：全部删除到左边
			$("button:eq(3)").click(function () {
				$("select:eq(1) option").appendTo($("select:eq(0)"))
			})
		})
	</script>
</head>
<body>
	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>
</body>

6.3、动态添加、删除表格记录

confirm()是JS提供的一个确认提示框函数，给他传什么，就提示什么
和alert的区别在于，这里的提示框有确定和取消按钮，alert仅仅显示文字内容
当用户点击了确定，该方法就会返回true，当用户点击了取消，就返回false

return false; 可以阻止元素的默认行为，在超链接里面阻止超链接跳转网页

$("a").click(function () {
	return false;
})

return false; 可以阻止元素的默认行为，在 onsubmit 表单提交事件可以阻止提交

window.onload = function () {
	formObj.onsubmit = function () {
		return false;
	}
}

在这里插入图片描述

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		//Submit按钮
		$("#addEmpButton").click(function () {
			//注意一定要定义变量再加进去，不然就是死的字符串
			var n = $("#empName").val()
			var n1 = $("#email").val()
			var n2 = $("#salary").val()
			var bb = $("<tr>"+
				"<th>"+n+"</th>"+ "<th>"+n1+"</th>"+ "<th>"+n2+"</th>"+
				"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +"</tr>");
			bb.appendTo($("#employeeTable"))

			//在添加Delete点击事件之后，要在这里单独加一段的代码，来完成新添加信息的Delete的点击事件
			//这里是提交点击事件之内，只有提交按钮点击之后才会生效
			bb.find("a").click(function () {
				var $1 = bb.children(":first").html()
				if(confirm("确定删除"+$1+"吗？")){
					bb.remove()
				}
				return false;
			})
		})

		//注意，此时仅仅设置了两个按钮的点击事件，此时Delete超链接点击事件是在页面加载完成之后就会执行的
		//所以在运行之后，新添加的信息的Delete超链接仍然无效

		//Delete超链接
		$("a").click(function () {
			//获取当前点击的Delete超链接所在的行标签tr
			var aa = $(this).parent().parent();
			//获取当前Delete超链接所控制删除的Name
			var $1 = aa.children(":first").html()

			//confirm()是JS提供的一个确认提示框函数，给他传什么，就提示什么
			//和alert的区别在于，这里的提示框有确定和取消按钮，alert仅仅显示文字内容
			//当用户点击了确定，该方法就会返回true，当用户点击了取消，就返回false
			if(confirm("确定删除"+$1+"吗？")){
				aa.remove()
			}

			//return false 可以阻止元素的默认行为，在这里阻止超链接跳转网页
			//在 onsubmit 表单提交事件提到过
			return false;
		})
	})
</script>
</head>
<body>
	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>

因为本例中的删除键的点击事件代码有重复，可以封装进单独的函数中，然后使用点击事件进行调用，升级优化，如下

var deletef = function(){
	var aa = $(this).parent().parent();
	var $1 = aa.children(":first").html()
	if(confirm("确定删除"+$1+"吗？")){
		aa.remove()
	}
	return false;
}
因为点击事件里面传入的是函数，而不是函数的返回值，所以注意函数进行调用时的写法
不能写成 deletef()
$("a").click(deletef);

6.4、CSS_动画 品牌展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 12px;
	text-align: center;
}
a {
	color: #04D;
	text-decoration: none;
}
a:hover {
	color: #F50;
	text-decoration: underline;
}
.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}
.SubCategoryBox ul {
	list-style: none;
}
.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}
.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}
.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}
.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		var hidebox = $("li:eq(5)").nextUntil($("li:last"));

		//给链接提供点击事件
		$("div div a").click(function () {
			//实现品牌隐藏或显示
			hidebox.toggle()
			//因为按钮上的文字图案会随着品牌内容的变化而变化
			//判断品牌内容是否隐藏
			if(hidebox.is(":hidden")){
				//这里可以用空的removeClass()，表示把类属性全部情况清空
				$("div div").removeClass()
				$("div div").addClass("showmore")
				$("div div a span").text("显示全部品牌")
				//可以用索引，也可以用包含文字
				$("li:contains('佳能')").removeClass()
				$("li:eq(3)").removeClass()
				$("li:eq(10)").removeClass()
			}else {
				$("div div").removeClass("showmore")
				$("div div").addClass("showless")
				$("div div a span").text("显示精选品牌")
				$("li:eq(0)").addClass("promoted")
				$("li:eq(3)").addClass("promoted")
				$("li:eq(10)").addClass("promoted")
			}
			return false;
		})
	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>

6.5、事件 图片跟随

mousemove 鼠标移动事件，event会记录鼠标移动的每次坐标pageX、pageY

图片跟随鼠标动
在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		text-align: center;
	}
	#small {
		margin-top: 150px;
	}
	#showBig {
		position: absolute;
		display: none;
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#small").bind("mouseenter mouseout mousemove",function (event) {
			if(event.type == "mouseenter"){
				$("#showBig").show()
			}else if(event.type == "mouseout"){
				$("#showBig").hide()
			}else if(event.type == "mousemove"){
			//mousemove 鼠标移动事件，event会记录鼠标移动的每次坐标pageX、pageY
				$("#showBig").offset({
					//+10 是因为如果图片紧跟着鼠标的话，当鼠标向右下角移动时，有一瞬间会点在大图片上
					// 此时浏览器会认为离开了小图片，就触发mouseout事件，最后会导致大图片一闪一闪
					top: event.pageY +10,
					left: event.pageX +10
				})
			}
		})
	});
</script>
</head>
<body>
	<img id="small" src="img/small.jpg" />
	<div id="showBig">
		<img src="img/big.jpg">
	</div>
</body>

7、DOM 的增删改

内部插入： 就是让 a 变成括号内的 b 的子元素
在这里插入图片描述
括号内可以填放选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		$("<h6>标题</h6>").appendTo($("#1"))
	});
</script>
</head>
<body>
	<div id="1">1234</div>
	<span>FFFFF</span>
	<div>abcd</div>
</body>

在这里插入图片描述

在这里插入图片描述
可以实现批量插入，同等级的兄弟元素

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		$("<h6>标题</h6>").insertAfter($("#1"))
	});
</script>
</head>
<body>
	<div id="1">1234</div>
	<span>FFFFF</span>
	<div>abcd</div>
</body>

在这里插入图片描述
在这里插入图片描述
a.replaceWith(b) b 替换掉了所有的 a

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		$("div").replaceWith($("<h6>标题</h6>"))
	});
</script>
</head>
<body>
	<div id="1">1234</div>
	<span>FFFFF</span>
	<div>abcd</div>
</body>

在这里插入图片描述
在这里插入图片描述
清空内容只是清空前后标签里面的文本内容，并不会删除标签

8、CSS 样式操作

在这里插入图片描述
一般都是在CSS中将准备好的样式固定封装进指定class属性的某标签，比如：

<style type="text/css">
	div.blackDiv{
		border: 5px blue solid;
	}
</style>

以下这种写法是规定哪些标签可以用这个样式，规定为类属性为.showmore并且有个a元素作为后代，并且a元素后面还有个后代是span元素

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

而addClass()等的方法是给给指定标签添加class属性，再给标签添加进同名属性之后，前面设定的CSS样式自然就安排进了这个标签了

$('#btn01').click(function(){
	//addClass() - 向被选元素添加一个或多个类
	//添加多个类属性，使用空格隔开
	$divEle.addClass("redDiv blackDiv");
});

注意添加和删除 类属性的时候，双引号里面的属性不要小数点addClass("showmore")

console.log(pre)该方法是向浏览器的调试控制台输出指定pre内容

offset()返回在运行之后，浏览器页面下，该元素距离浏览器边框的距离，返回top和left
也可以进行赋值操作
offset({top:12,left:200})

9、jQuery 动画

在这里插入图片描述
因为以上的动画方法可以设置回调函数作为参数，所以简单演示动画一直动

//显示和隐藏每隔一秒就交替执行
var a = function(){
	$("div").toggle(1000,a)
}
a();    //需要进行调用

在这里插入图片描述

以上动画方法也可以传入两个参数，第一个参数是动画执行的时长，第二个是回调的函数

fadeTo()可以穿入三个参数，第一个是执行时长，第二个是透明度，第三个是回调函数

10、jQuery 事件操作

10.1、常用事件

$( function(){} )的全写是$(document).ready(function(){})

$( function(){} ); 和window.onload = function(){} 的区别？

  1. 在什么时候触发？
    1. jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行
    2. 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成
  2. 触发的顺序？
    1. jQuery 页面加载完成之后先执行
    2. 原生 js 的页面加载完成之后
  3. 当有多个页面加载的操作时
    1. jQuery 的页面加载完成之后是将全部语句中包含的 function 函数，依次顺序全部执行
    2. 原生 js 的页面加载完成之后，只会执行最后一次语句中包含的赋值函数

以下在文档中都有详细介绍
在这里插入图片描述
绑定单击事件，就是在里面传入函数
$("h5").click(function(){alert("h5的单击事件")})
触发单击事件，就是不向括号里面传入内容，实现触发
实现当点击button按钮的时候，触发h5的单击事件
$("button").click(function(){$("h5").click()})

bind()绑定多个事件
在这里插入图片描述
unbind()不传入参数，就是解除所有的绑定
多个解绑用空格隔开

live('click',function(){})可以实现动态绑定
原有的标签绑定了事件，在该操作之后新创建的同名标签并不会附带事件效果，但使用live()绑定事件就可以解决这个问题

//当给定的标签里面有一个 h5 标签时候，编写绑定单击事件代码
$("h5").click(function(){alert("h5单击事件")})
//在此之后在编写创建一个 h5 标签时，该标签不附带单击事件效果
//这个情况在【动态添加删除】练习里面给delete按钮添加单击事件时候提到过，因为代码是自上而下执行的
$("<h5>动态添加的新的 h5 标签</h5>")

10.2、事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应

比如父子都各自绑定了单击事件，当点击子元素时候，父元素的单击事件也响应了

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递

10.3、javaScript 事件对象

事件对象

是封装有触发的事件信息的一个 javascript 对象

我们重点关心的是怎么拿到这个 javascript 的事件对象，以及使用

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event

这个 event 就是 javascript 传递参事件处理函数的事件对象

示例：

  1. 原生 javascript 获取 事件对象
window.onload = function(){
	document.getElementById("areaDiv").onclick = function(event){
		console.log(event);
	};
}
  1. jQuery 代码获取 事件对象
$(function(){
	$("#areaDiv").click(function(event){
		console.log(event);
	})
})
  1. 使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$(function(){
	$("#areaDiv").bind('click mouseenter',function (event) {
		// console.log(event)  打印出来可以发现里面包含了事件类型
		if(event.type == "click"){
			console.log("单击事件");
		}else(event.type == "mouseenter") {
			console.log("鼠标移入事件");
		}
	})
})
磊哥的小迷妹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery中empty()方法与remove()方法
Liuxiaoyang1999的博客
11-11 399
目录 empty()方法: remove()方法: empty()方法: empty() ：删除匹配的元素集合中所有的子节点，但不包括自身; 代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> ...
Java Web Jquery表单验证
最新发布
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JavaWeb学习第三章——jQuery入门
u014681502的博客
08-12 280
jQuery介绍 什么是 jQuery ? jQuery，顾名思义，就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery 好处！！！ jQu
jq清除数组中的空值
低调哥的博客
05-04 5535
  var arr1  =[1,2,3,null,undefined];      var arr=$.grep(arr1,function(n,i){          return n;      },false);      console.info(arr);//(3) [1, 2, 3];过滤掉了null和undeifind  ...
jQuery清除数组中的空值
Nightliar的博客
04-17 9189
var aa = ["12", "34", "", "423", " "]; console.log($.grep(aa, function(n) {return $.trim(n).length &gt; 0;})) var aaa = aa.filter(s =&gt; $.trim(s).length &gt; 0); console.log(aaa); 结果：[&quot
jquery中用emprty，remove删除
ruoyuanyi的专栏
03-28 1205
/*删除节点*/ $(function(){ //1,remove()移除 删除根据指定的参数删除 $("ul li").remove("li[name=orange]"); //$("ul li").remove("li[name=melon]"); //如果没有指定参数,表示都删除 //$("ul li").remove(); //$("ul li").remove(); //
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
html 如何让按钮浮在object,html - JavaScript Button says [object HTMLButtonElement] - Stack Overflow...
weixin_39605997的博客
06-23 303
Here is my code:var newRow = tableRef.insertRow(tableRef.rows.length);var newCell0 = newRow.insertCell(0);var newCell1 = newRow.insertCell(1);var newCell2 = newRow.insertCell(2);var newCell3 = newRow....
input 各类事件汇总&&触发时机&&触发顺序
jinse29的博客
04-28 8351
今天梳理了一下input框的各类事件，简单介绍一下吧。
html中绑定点击事件的三种方法
cdd9527的博客
11-30 1万+
html中绑定点击事件的三种方法
H5页面a标签点击不跳转解决办法
sd1561026的博客
09-29 682
H5页面a标签点击不跳转解决办法
学习Vue看这个就够了（上）
小白在线学前端的博客
10-05 4445
vue总结 VUE基础 一、什么是vue 官方给出的概念是：Vue(类似于View)是一套用于构建用户界面的前端框架 构建用户界面 用Vue往html页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能 要学习的vue，就是在学习vue框架中规定的用法！ vue的指令、组件(是对UI结构的复用)、路由、Vuex、Vue组件库 二、Vue的两个特性 数据驱动视图 数据的变化会驱动视图自动更新 好处是：程序员只管把数据维护好，那么页面
js(jquery)绑定点击事件
热门推荐
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
HTML-input标签事件监听
samuelandkevin的专栏
04-17 1万+
转载出处：https://www.cnblogs.com/angleStudy/p/input.html 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js 3.onchange 当input失去焦点并且它的value值发生变化时触发 4.onkeydown ...
input触发的事件触发流程
aliven1的博客
07-10 3154
我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input上面，模拟点击选择了一个文件，触发事件的流程是下面这样的： （1）mousedown （2）focus （3）mouseup （4）click （5）blur （6）focus （7）change 首先触发了鼠标按下事件，然后就是焦点到了input上面，然后鼠标抬起，触发click点击事件，失去焦点以后弹出了文件选择框，选中文件以后触发焦点，最后触发的change事件。 如果你没有选择文
input的各种事件
dream_sail_的博客
09-30 1374
1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。 3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。 4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过 6.onclick

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值