jQuery前端框架，你了解多少 ???

最新推荐文章于 2024-07-29 22:23:29 发布
最新推荐文章于 2024-07-29 22:23:29 发布
阅读量3.7k 收藏 58
点赞数 8
分类专栏： Web之道: 探索数字世界的前沿 文章标签： html css js javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1808814025/article/details/106106742
版权

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jquery设计的宗旨是“write Less，Do More”（即倡导写更少的代码，做更多的事情），其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

在这里插入图片描述

文章目录

在这里插入图片描述

一、jQuery简介

1、什么是jQuery(了解即可)

  • jQuery: JavaScript Query JS查询

  • jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）

  • jQuery可以极大的简化JS代码

  • jQuery的核心思想：“写的更少，但做的更多”

轻量的：是指一个技术对代码或程序的侵入程度是比较低的。

或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。

jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中（想使用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）

2、jQuery的优势(了解即可)

(1) 可以极大的简化JS代码

(2) 可以像CSS选择器一样获取html元素

css中获取所有的div,给div添加样式:

div{ css属性... }

jQuery中获取所有div,给div添加边框样式:

$("div").css("border", "2px solid red");

JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")

(3) 可以通过修改css属性控制页面的效果

(4) 可以兼容常用的浏览器

比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。

jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）

常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等

3、jQuery引入

jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。

<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>

在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：

在这里插入图片描述

4、文档就绪事件函数
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	//1.获取id为demo的h1元素
	var h1 = document.getElementById( "demo" );
	//2.获取h1元素中的内容( innerHTML )
	alert( h1.innerHTML );
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

问题描述：上面的代码在执行时，会报一个错误：

在这里插入图片描述

原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

  • 解决方式一：

将script标签移到body内部，也就是h1元素的后面

这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！

代码示例：

<body>
	<h1 id="demo">jQuery的引入示例...</h1>
	<script>
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	</script>
</body>
  • 解决方式二：

将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）会立即执行。

由于整个html网页都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	});
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>
  • 解决方式三：

将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	function fn1(){
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	}
</script>
</head>
<body>
	<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>
  • 总结：什么时候该使用文档就绪事件函数?

如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

<script>
	$(function(){
		//在浏览器加载完整个html网页后立即执行
  });
</script>

其完整写法为：

<script>
	$(document).ready(function(){
		//在浏览器加载完整个html网页后立即执行
	})
</script>

JS也为我们提供了文档就绪事件函数，其写法为：

<script>
	window.onload = function(){
		//在浏览器加载完整个html网页后立即执行
	}
</script>

在这里插入图片描述

二、jQuery选择器(重点掌握)

1、基本选择器
(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素
2、层级选择器
$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素
3、基本过滤选择器
(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

三、综合案例

1、创建表格元素
  • 练习1：创建单行单列的表格
function createTable1(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	//2.创建一个tr元素
	var $tr = $("<tr></tr>");
	//3.创建一个td元素, 并为td添加内容
	var $td = $("<td></td>");
	$td.html("Hello TD~~");
	//4.将td添加到tr元素内部
	$tr.append( $td );
	//5.将tr添加到table元素内部
	$tab.append( $tr );
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
	
	//$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
}
  • 练习2.1：创建单行6列的表格
function createTable2(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	//2.创建一个tr元素
	var $tr = $("<tr></tr>");
	for(var i=0;i<6;i++){ 
		//3.创建一个td元素, 并为td添加内容
		var $td = $("<td></td>");
		$td.html("Hello TD~~");
		//4.将td添加到tr元素内部
		$tr.append( $td );
	}
	//5.将tr添加到table元素内部
	$tab.append( $tr );
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}
  • 练习2.2：创建5行6列的表格
function createTable2(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	for(var j=0;j<5;j++){ //外层循环:控制行数
		//2.创建一个tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<6;i++){ //内层循环:控制列数
			//3.创建一个td元素, 并为td添加内容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.将td添加到tr元素内部
			$tr.append( $td );
		}
		//5.将tr添加到table元素内部
		$tab.append( $tr );
	}
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}
  • 练习3：创建指定行和列的表格
function createTable3(){
	//获取用户输入的行数和列数(js方式)
	//var rows = document.getElementById("rows").value;
	//var cols = document.getElementById("cols").value;
	var rows = $("#rows").val();
	var cols = $("#cols").val();
	console.log(rows+" : "+cols);
	//1.创建一个table元素
	var $tab = $("<table></table>");
	for(var j=0;j<rows;j++){ //外层循环:控制行数
		//2.创建一个tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<cols;i++){ //内层循环:控制列数
			//3.创建一个td元素, 并为td添加内容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.将td添加到tr元素内部
			$tr.append( $td );
		}
		//5.将tr添加到table元素内部
		$tab.append( $tr );
	}
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}
3、仿QQ好友列表
/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象
	//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )
	$("table span").not(thisobj).next("div").hide(); //css("display", "none")
	//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态
	$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}
4、模拟员工信息管理系统
  • 练习1：添加员工信息
function addEmp(){
	//1.获取要添加的员工信息(id, name, email, salary)
	var id = $("#box1 input[name='id']").val().trim();
	var name = $("#box1 input[name='name']").val().trim();
	var email = $("#box1 input[name='email']").val().trim();
	var salary = $("#box1 input[name='salary']").val().trim();
	console.log(id+" : "+name+" : "+email+" : "+salary);
	
	//2.校验员工信息
	//2.1.添加的员工信息不能为空!
	if( id == "" || name == "" || email == "" || salary == "" ){
		alert( "添加的员工信息不能为空!" );
		return;
	}
	
	//2.2.添加的员工id不能重复! (id=3)
	//获取所有的tr元素, 并遍历所有的tr元素
	var flag = false; //false表示id是不存在的!!!
	$("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素 
		// this --转换为jQuery对象--> $( this ) 
		var _id = $(this).find("td:eq(1)").text();
		//拿着用户输入的id和当前员工的id进行比较
		if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加
			alert("您输入的员工ID已存在, 请重新添加!");
			flag = true; //true表示id已存在!!
			//return; 放在这里的return不能终止程序的执行
		}
	});
	if( flag ){ //true表示id已存在!!
		return;
	}
	//3.将员工信息添加到页面上(添加到table中)
	//>>创建一个tr元素
	var $tr = $("<tr></tr>");
	//>>创建5个td元素,并将员工信息添加到td中
	var $td1 = $("<td><input type='checkbox'/></td>"); //复选框
	var $td2 = $("<td>"+id+"</td>"); //ID
	var $td3 = $("<td>"+name+"</td>"); //name
	var $td4 = $("<td>"+email+"</td>"); //email
	var $td5 = $("<td>"+salary+"</td>"); //email
	//>>将td元素添加到tr中
	$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
			
	//>>将tr元素添加到table中
	$("table").append( $tr );
}
  • 练习2：删除员工信息
function delEmp(){
	//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)
	//$("input:checked").parents("tr").remove(); //会连接表头一起删除
	$("input:checked").parent("td").parent("tr").remove();
}
  • 练习3：修改员工信息（自己完成）
function updEmp(){
		//1.获取要修改的员工信息
		var id = $("#box2").find("input[name='id']").val().trim();
		var name = $("#box2").find("input[name='name']").val().trim();
		var email = $("#box2").find("input[name='email']").val().trim();
		var salary = $("#box2").find("input[name='salary']").val().trim();
		//2.检查员工信息是否符合格式(不能为空)
		if(id == "" || name == "" || email == "" || salary == ""){
			alert("修改员工信息不能为空!!!");
		}
		//3.检查ID是否存在(必须要存在)
		var flag = true;
		$("table tr").each(function(){
			if(id == $(this).find("td:eq(1)").text()){
				//4.进行修改
				//>>修改姓名
				$(this).find("td:eq(2)").text(name);
				//>>修改邮箱
				$(this).find("td:eq(3)").text(email);
				//>>修改工资
				$(this).find("td:eq(4)").text(salary);
				flag = false;
			}
		});
		if(flag){
			alert("您修改的员工id不存在!!!");
		}
	}
  • 练习4：实现全选或全不选
function checkAll(){
	//1.获取全选复选框的选中状态( 选中(true)?  没选中(false)? )
	var isCheck = $("#all").prop("checked"); //true|false
	//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框
	$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}
  • 案例总代码
<!DOCTYPE HTML>
<html>
<head>
<title>模拟员工信息管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{font-family: "微软雅黑"}
	h2, h4{ text-align: center; }
	div#box1, div#box2 {text-align:center;}
	hr{margin: 20px 0;}
	table{margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;}
	td, th{padding: 7px; width:20%;}
	th{background-color: #DCDCDC;}
	input[type='text']{width:130px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	/* --- 添加一个新员工 --- */
	function addEmp(){
		//1.获取新员工的信息
		var id = $("#box1").find("input[name='id']").val().trim();
		var name = $("#box1").find("input[name='name']").val().trim();
		var email = $("#box1").find("input[name='email']").val().trim();
		var salary = $("#box1").find("input[name='salary']").val().trim();

		//2.检查员工信息是否符合格式(信息不能为空)
		if( id == "" || name == "" || email == "" || salary == ""){
			alert("员工信息不能为空!!!");
			return;
		}
		//3.检查ID是否已存在
		/* 获取当前所有员工的id, 循环遍历, 比较id是否存在 */
		var flag = true;
		$("table tr").each(function(){
			if(id == $(this).find("td:eq(1)").text()){
				alert("id已存在!!!");
				flag = false;
			}
		});
		if(!flag){
			return;
		}
		//4.将新员工信息添加到员工信息列表中(table)
		var $td1 = $("<td><input type='checkbox'/></td>");
		var $td2 = $("<td>"+id+"</td>");
		var $td3 = $("<td>"+name+"</td>");
		var $td4 = $("<td>"+email+"</td>");
		var $td5 = $("<td>"+salary+"</td>");
		var $tr = $("<tr></tr>");
		$tr.append($td1).append($td2).append($td3).append($td4).append($td5);

		//5.将tr挂载到table上
		$("table").append($tr);
	}
	/* --- 删除选中的员工 --- */
	function delEmp(){
		//1.获取被选中的员工
		$(":checked").parents("tr").each(function(){
			//如果当前行是表头, 不要删除
			if($(this).find("th").length == 0){
				$(this).remove();
			}
		});
	}
	/* --- 修改指定id的员工 --- */
	function updEmp(){
		//1.获取要修改的员工信息
		var id = $("#box2").find("input[name='id']").val().trim();
		var name = $("#box2").find("input[name='name']").val().trim();
		var email = $("#box2").find("input[name='email']").val().trim();
		var salary = $("#box2").find("input[name='salary']").val().trim();
		//2.检查员工信息是否符合格式(不能为空)
		if(id == "" || name == "" || email == "" || salary == ""){
			alert("修改员工信息不能为空!!!");
		}
		//3.检查ID是否存在(必须要存在)
		var flag = true;
		$("table tr").each(function(){
			if(id == $(this).find("td:eq(1)").text()){
				//4.进行修改
				//>>修改姓名
				$(this).find("td:eq(2)").text(name);
				//>>修改邮箱
				$(this).find("td:eq(3)").text(email);
				//>>修改工资
				$(this).find("td:eq(4)").text(salary);
				flag = false;
			}
		});
		if(flag){
			alert("您修改的员工id不存在!!!");
		}
	}
	/* 点击全选设置 员工所在的行全选或者全不选 */
	function checkAll(){
		//获取全选复选框的选中状态（true表示选中，false表示取消选中）
		var isCheck = $("#all").prop("checked");
		//将全选复选框的选中状态设置给所有员工所在行的复选框
		$("input[type='checkbox']").prop("checked", isCheck);
	}
</script>
</head>

<h2>添加新员工</h2>
<div id="box1">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="addEmp()" id="add" value="添加新员工"/>
</div>
<hr/>
<table border="1">
	<tr>
		<th>
			<!-- 全选复选框 -->
			<input type="checkbox" onclick="checkAll()" id="all"/>
		</th>
		<th>ID</th>
		<th>姓名</th>
		<th>邮箱</th>
		<th>工资</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>1</td>
		<td>宋江</td>
		<td>sj@163.com</td>
		<td>12000</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>2</td>
		<td>武松</td>
		<td>ws@163.com</td>
		<td>10500</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>3</td>
		<td>孙二娘</td>
		<td>sen@163.com</td>
		<td>11000</td>
	</tr>
</table>
<h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2>
<hr/>

<div id="box2">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/>
</div>
</body>
</html>

四、jQuery总结

1、html元素操作
  • 1.1 创建元素
$("<div></div>") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素
  • 1.2 添加子元素
$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
  • 1.3 删除元素
$("div").remove() -- 删除所有的div元素

JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
    //通过当前元素的父元素删除当前元素(始终删除第一个)
    divArr[0].parentNode.removeChild( divArr[0] );
}
  • 1.4 替换元素
$("div").replaceWith("<p>我是来替换的…</p>")
2、html元素内容和值的操作
<div>
  	这是一个div11元素
    <span>这是一个span元素</span>
    这是一个div1111元素
</div>
  • 2.1 html()函数 (类似于js中的innerHTML属性)

– 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容

$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
  • 2.2 text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)

– 用于获取或设置元素的文本内容

$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容
  • 2.3 val()函数 (类似于js中的value属性)

– 获取或设置表单项元素的value值(input/select/option/textarea)

$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值
3、元素属性和css属性操作
<input type="text" name="username" id="inp"/>
  • 3.1 prop()函数 – 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态

$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user
  • 3.2 css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
	"width" : "200px",
	"height" : "150px",
	"border" : "5px solid red",
	"background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式
4、其他函数
  • 4.1 each() 函数
$(selector).each(function( index,element ){})
-- each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
-- function中的index -- 表示遍历的元素的下标
-- function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

  • 4.2 show()/hide() 函数

    • show()– 设置元素由隐藏变为显示

    • hide() – 设置元素由显示变为隐藏

$("div").show() -- 设置所有的div元素为显示

等价于:

$("div").css("display", "block");

$("div").hide() -- 设置所有的div元素为隐藏

等价于:

$("div").css("display", "none")

  • 4.3 toggle()/slideToggle()

    • toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示

    • slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。

五、扩展内容

1、为元素绑定点击事件

以点击事件为例，为元素绑定点击事件的方式为:

  • 方式1(js版)：
<script>
  function fn(){
    alert("input按钮被点击了...");
  }
</script>
<body>
	<input onclick="fn()" type="button" value="点我~!" />
</body>
  • 方式2(js版)：
<script>
	window.onload = function(){
		//获取id为btn的元素
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert("input按钮被点击了...");
		}
	}
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>
  • 方式3(jQuery版)：
<script>
$(function(){
    //当点击btn按钮时,触发点击事件执行其中的函数
    $("#btn").click( function(){
        alert("input按钮被点击了...");
    });
});
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>
2、js对象和jQuery对象的互相转换

  • 通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数

  • 通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。

  • 如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；

  • 如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；

在这里插入图片描述

总结：

1、前端框架还有很多，在此就介绍jQuery，像一些Bootstrap、Angularjs框架、React框架、Vue框架是目前非常主流的框架，如果你致力于做前端开发，我想这些至少精通一种吧！！
2、前端到后端的基础，都系统的介绍了一遍了，接下来，就要了解一些服务器的知识了。
3、下篇文章的主题是Tomcat和HTTP的内容。相对于以前的基础来说，可以说后面的文章会经常用到tomcat，所以一定要掌握好。

在这里插入图片描述

经理，天台风好大
关注
专栏目录
前端框架之jQuery
ZhangQiye1993的博客
07-01 414
一 iQuery是什么jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其teamjQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器jQuery是一个快速的，简洁的ja...
前端Jquery框架
09-20
完整版的JQuery框架，包含了jquery1.1和jquery2.1两个版本，还有两个版本相关的API文档，另外给初学者提供了一份详细的PDF文档。
前端框架：jQuery
qq_39935684的博客
04-11 1109
一、jQuery介绍 jQuery是什么？ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Javascript框架）。jQuery的涉及宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事；它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互； jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功
Java前端-Jquery框架
最新发布
2301_79975618的博客
07-29 200
jQuery对JavaScript进行了封装，使DOM，事件处理，Ajax等功能的实现代码更加简洁，有效提高了程序开发效率。2.jQuery的操作。1.jQuery介绍。
前端 jQuery框架
wk3510的博客
07-29 4242
bootstrap帮我们写好了一个css文件里面定义好了很多的css样式100%;}我们在使用的时候只需要在html中写标签添加响应的class即可学习有哪些class会有什么效果jquery我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可。............
前端jQuery框架
qq_41767337的博客
04-26 1169
前端页面除了模板语言freemarker之外还有页面的脚本语言：JavaScript… jQuery是JavaScript的一个框架，将JavaScript的使用方便了很多 对于任何浏览器而言，都是内置JavaScript引擎的 1 在.ftl文件中定义标签的范围 <script type="text/javascript"> alert("你好"); </script> ...
jQuery前端框架/高端技能
06-09
jQuery是一个、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用...
前端框架和jquery.rar
11-16
在IT行业中，前端框架与jQuery是两个非常重要的概念，它们都是构建现代Web应用程序不可或缺的工具。前端框架是为了简化网页开发，提高效率，提供统一的代码结构和最佳实践，而jQuery则是一个广泛使用的JavaScript库...
前端框架是什么？web前端框架有哪些？.
09-18
### 前端框架概述 前端框架是一种软件框架，它为Web开发提供了预先定义的结构，使得开发者可以更快地创建动态且交互式的Web应用程序。框架通常包含一系列预先编写好的脚本和样式表，以及一系列约定的规则，这些规则...
前端：jQuery框架
浔者的博客
09-10 335
 1. jquery   1.1  版本     1.x 兼容性更好，支持很多旧的浏览器， ie6,ie7     3.x 更新，体积更小      1.2 使用 导入jquery的js &lt;script src="路径/js文件名"&gt;&lt;/script&gt; 1.3 jquery API 链接：https://pan.baidu.com/s/1AnLMdjw0...
前端类库之jQuery
go|Python的个人博客
02-15 971
文章目录前端类库之jQueryjQuery简介jQuery内容目录jQuery对象jQuery基本语法查找标签基本选择器层级选择器基本筛选器属性选择器表单筛选器筛选器方法节点操作位置操作事件常用事件 前端类库之jQuery jQuery简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库，主要功能是能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程 内部封装了js代码 ，能使编程更加简单并且兼容所有
前端最容易入门的框架-jQuery（史上最详细）
weixin_54585403的博客
06-09 2223
jQuery是什么？ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵
前端框架介绍
weixin_50748675的博客
03-20 1476
常见前端框架及js运行机制
Ajax
qingqiutree的博客
09-10 368
Ajax 一、概述 1. Ajax概念 AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术； 2. 传统交互方式与ajax交互方式 1. 传统交互方式： 客户端（浏览器）向服务器发送请求，服务器接收请求并处理完毕后会重新加载一个完整的网页（而且这个网页与之前的网页几乎差不多），并且将响应数据返回给客户端（浏览器...
jQuery 基础
stanwuc的博客
11-29 3262
一、入门 1、jquery 就是一个js的框架； 2、好处就是能让我们的js代码写的更少； 3、基本使用：引入script，后面使用即可； 4、关于版本选择：1.* 版本的兼容性比较好，大公司用的多； 5、关于压缩版和为压缩版：开发用未压缩的便于看源码学习，生产环境用压缩版可以提高速度； 二、jQuery函数 1、入口函数 （1）入口函数：开发中一般用第三种 //1 $(...
jquery前端篇
jiaojiao520专栏
06-23 1040
jquery前端篇
前端 之 jQuery
Hello LinWoW~ ⊙o⊙
06-04 3548
jQuery jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程，jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。 实例找到div标签并给div标签设置为红色 原生js操作 var d1Ele...
H5开发常用哪些前端框架或库？
07-13
H5开发中常用的前端框架和库有： 1. **Vue.js**：轻量级的MVVM框架，以其简洁的API和渐进式开发理念受到欢迎。 2. **React**：由Facebook开发的JS库，强调组件化开发，适合大型复杂的单页应用。 3. **Angular**：...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经理，天台风好大

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值