JavaScript（二）jQuery

最新推荐文章于 2024-08-27 01:45:00 发布

Nancy1709

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript+jQuery

本文链接：https://blog.youkuaiyun.com/Nancy1709/article/details/88746813

JavaScript+jQuery 专栏收录该内容

5 篇文章

订阅专栏

文章目录

一、为什么要有jQuery

1.使用js操作html的节点或属性，比较麻烦，类型"document.getElementsXXX()"这种方式比较累赘
2.利用js开发的时候还要考虑浏览器的兼容性的问题，也增加了开发难度
3.使用原生的js代码发送一个异步请求也是需要写一堆代码
4.基于这些问题的存在于是就出现了一个js的开发框架–jQuery（只是其中一个），这个框架将原生的js代码封装了，成为了一个函数库，我们只需要按照其语法进行调用即可

二、使用jQuery

1.下载jQuery函数库（有一些版本存在一些bug，更换版本即可）
2.jQuery只是一个js函数库，要使用里面的函数还需要在其他js文件中进行调用
3.将jQuery拷贝到项目中进行使用
4.使用jQuery的加载事件

	<body>
		<script type="text/javascript">
			//方式一
			$(document).ready(function(){
				alert("加载完毕html之后马上执行的代码");
			})
			//方式二:
			$(function(){
				alert("加载完毕html之后马上执行的代码");
			})
			//方式三:
			jQuery(document).ready(function(){
				alert("加载完毕html之后马上执行的代码");
			})
		</script>
	</body>

三、jQuery选择器

<script>
***小括号里面一定要写双引号
			1.id选择器 $("#div1")
			2.类选择器 $(".div2")
			3.元素选择器 $("div")
			4.组选择器 $("div,span,p.myclass")
			5.后代选择器 $("form input")
			6.子选择器 $("form>input")
			7.选择第一个元素 $("li:first")
			8.选择最后一个元素 $("li:last")
			9.not选择器(在复选框中使用较多) $("input:not(:checked)")
			10.偶数选择器 $("table tr:even")
			11.奇数选择器 $("table tr:odd")
			12.eq选择器(选择指定索引的元素) $("table tr:eq(1)")
			13.gt(index)选择器 $("table tr:gt(1)")(大于指定索引的元素)
			14.lt(index)选择器 $("table tr:lt(1)")(小于指定索引的元素)
			15.属性选择器 $("div[id]")(选择出具备id属性的所有div)
			16.属性值选择器 $("input[name='items[]']")(选择具有指定属性并且属性值等于指定的内容的所有元素)
			17.属性值选择器 $("input[name!='items[]']")(选择属性值不等于指定的内容的所有指定元素)
			18.属性值选择器 $("input[name^='news']")(选择出以指定内容开始的属性的所有元素)
			19.属性值选择器 $("input[name*='man']")(选择出包含指定内容属性的所有元素)
			20.属性值选择器 $("input[name$='letter']")(选择出以指定内容结尾的元素)
</script>

四、jQuery事件绑定

1.为一个元素绑定事件

<script>
//使用jq的加载事件
			$(function(){
				//绑定事件方式一
				$("button").click(function(){
					alert("绑定了一个单机事件");
				})
				//方式二
				$("button").click(func);
				function func(){
					alert("绑定了一个单机事件");
				}
				//方式三
				$("button").on("click",function(){
					alert("绑定了一个单机事件");
				})
				//方式四
				$("button").bind("click",function(){
					alert("绑定了一个单机事件");
				})
			})
</script>

2.为多个元素绑定事件

<body>
	<table border="1px">
			<tr><td>编号</td><td>姓名</td><td>薪资</td><td>操作</td></tr>
			<tr>
				<td>1001</td><td>SMITH</td><td>9000</td><td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td>1002</td><td>SMITH</td><td>9000</td><td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td>1003</td><td>SMITH</td><td>9000</td><td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td>1004</td><td>SMITH</td><td>9000</td><td><button type="button">删除</button></td>
			</tr>
		</table>
		<script>
			//点击删除按钮,获取到当前行的编号
			$(function(){
				$("button").click(function(){
					var empno=$(this).parents("tr").find("td:first").text();
					alert("要删除的编号是："+empno);
				})
			})
		</script>
</body>

五、jQuery常用方法

	<body>
		<script>
			//1.取得指定元素下的所有子元素
			$("div").children();
			//2.取得指定元素下的所有指定子元素
			$("div").children(".selected");
			//3.查找父元素下的指定子元素
			$("p").find("span");
			//4.取得指定元素的所有祖先元素
			$("span").parents();//括号中没有参数,基本没用
			//5.取得指定元素的父元素
			$("span").parent();
			//6.为指定的元素追加子元素
			$("p").append("<h1>这是追加的内容</h1>");
			//7.删除元素本身(谁调用删除谁)
			$("p:first").remove();
			//8.表单中的数据序列化,方便提交到服务器端(项目中大量使用到)
			$("input[type='button']").click(function(){
				var data=$("data").serialize();
				console.log("需要提交的数据："+data);
			})
		</script>
		<!-- 第8题form表单 -->
		<form action="cart_submit" method="post">
			<fieldset>
				<legend>title or explanatory caption</<caption></caption>
				用户名:<input type="text" name="ename" /><br><br>
				编号:<input type="text" name="empno"/><br><br>
				职位:<input type="text" name="job" /><br><br>
				薪资:<input type="text" name="sal" /><br><br>
				佣金:<input type="text" name="comm" /><br><br>
				<input type="button" value="提交" /><input type="reset" value="重置" />
			</fieldset>
		</form>
	</body>

六、淡入淡出效果

1.淡入 fadeIn(时间，函数)：让元素按照指定的时间出现（显示）
2.淡出 fadeOut(时间，函数)：让元素按照一定的时间实现隐藏

<html>
	<head>
		<meta charset="utf-8">
		<title>借问酒家何处有</title>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#div1{
				width: 400px;
				height: 200px;
				background-color: green;
				margin: 100px auto;
				display: none;/* 很重要,让div隐形 */
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<button type="button">淡入</button>
		<button type="button">淡出</button>
		<script type="text/javascript">
			//为两个按钮绑定事件
			$("button:first").click(function(){
				$("div").fadeIn(2000,function(){
					alert("淡入");
				})
			})
			$("button:last").click(function(){
				$("div").fadeOut(2000,function(){
					alert("淡出");
				})
			})
		</script>
	</body>
</html>

七、jQuery属性操作

<html>
	<head>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			// 1.取得元素的指定属性值
			var src = $(img).attr("src");
			//2.为元素的指定属性赋值
			$("img").attr("src","test.img");
			//3.删除元素的指定属性
			$("img").removeAttr("src");
			//4.取得指定属性的值(另外一种方式，prop())
			$("input[type='checkbox']").prop("checked");
			//5.为元素设置属性值
			$("input[type='checkbox']").prop("disabled",false);
			$("input[type='checkbox']").prop("checked",true);
			//6.为元素添加class属性
			$("p").addClass("selected");
			$("p").addClass("selected1 selected2");
			//7.删除元素的指定class属性
			$("p").removeClass("selected");//删除的是值
			//8.取得指定元素下的html内容
			$("div").html();
			//9.为指定元素设置新的html代码
			$("p").html("Hello <b>world</b>!");
			//10.取得指定元素下的文本值
			$("p").text();
			//11.替换文本值
			$("p").text("hello world!");
			//12.取得文本框的值
			$("input").val();
			//13.特还文本框的值
			$("input").val("hello world!");
		</script>
	</body>
</html>