小白入门之前端网页技术JQuery

Posted cgblpx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白入门之前端网页技术JQuery相关的知识，希望对你有一定的参考价值。

文章目录

异步请求局部刷新

架构

主流方式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzQG1CPR-1622609771127)(RackMultipart20210602-4-1s7eaya_html_9fd13dfcebd9ac4.png)]

技术栈

  • javascript 形成交互
  • jQuery 封装JavaScript，代码更加简洁高效
  • ajax 异步请求
  • json 数据传输
  • Web中间件(tomcat) 处理请求和响应
  • mysql数据库 存取数据

执行过程

用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。

jQuery简介

什么是jQuery

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想："写的更少，但做的更多"

通过 jQuery，您可以选取（查询，query） html 元素，并对它们执行"操作"（actions）。

jQuery** 库包含以下功能：**

  • HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX

jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery的优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

var ele = document.getElementById("username");			//js
var ele = $("#username");						// jQuery

var ele = document.getElementsByTagName("p");	//js
var ele = $("p");								//jQuery

var ele = document.getElementsByName("username");		//js
var ele = $('input[name="username"]');		// jQuery

var ele = document.getElementsByClassName("info");		//js
var ele = $(".info");							// jQuery

$("div").css("background", "red");
$("div").css({
	"background" : "blue",
	"border" : "2px solid red",
	"font-size" : "30px"
});

jQuery的使用

jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

文档就绪事件

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq</title>
		<!-- 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 嵌入js代码 -->
		<script>
		// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
			// var a = document.getElementById("p1");
// alert(a); //null
			// alert(a.innerHTML);
			
			// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
			//jQuery语法:$(选择器).action{ } ;
			$(document).ready(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
			// 方式3: 简写
			$(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
		</script>
	</head>
	<body>
		<h1 id="p1">文档就绪</h1>
	</body>
</html>

总结

什么时候该使用文档就绪事件函数？

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

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

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中选择器语法：$()

基本选择器

元素选择器:

$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

id 选择器

$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素

class 选择器

$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素

属性选择器

$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素

元素选择器练习

需求:点击按钮,隐藏段落内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
		$(document).ready(function(){
		  $("button").click(function(){
		    $("p").hide();
		  });
		});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

id选择器练习

需求:点击按钮,隐藏指定id的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

class选择器练习

需求:点击按钮,隐藏指定class的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

高级选择器-层级选择器

$("div span") -- 选中所有div元素下的所有span元素
$("#one div") -- 选中id为one的元素下的所有div元素
<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8"> 
			<title>示例</title> 
			
			<!-- 引入jQuery文件 -->
			<script src="jquery-1.8.3.min.js"></script>
			<!-- 嵌入js代码 -->
			<script>
				$(function(){
					$("button").click(function(){
						// 层级选择器,选中div下的span,隐藏 
						$("div span").hide();
					})
					$("button").click(function(){
						//层级选择器,选中id=one下的div,隐藏
						$("#one div").hide();
					})
				});
			</script>
	</head>
<body>
	<button>点我</button>
	<span id="one">
		<div>我是div1</div>
		<div>我是div2</div>
	</span>
	<div>
		<a href="#">链接</a>
		<span>我是span1</span>
		<span>我是span2</span>
	</div>
	
</body>
</html>

高级选择器-基本过滤选择器

(1)选中第一个div元素

$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2)选中最后一个div元素

$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

//点按钮,隐藏按钮自己
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
//点按钮,隐藏第一个div
$(function(){
	$("button").click(function(){
		// 选中第一个div
		$("div:first").hide();
	})
});

其他选择器

	过滤选择器
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
	内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
	可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
	属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
	状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
	表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

jQuery事件

什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见的DOM事件有很多:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT1mLgQ3-1622609771155)(RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png)]

事件的语法

页面中指定一个点击事件：

$("p").click(); 
$("p").click(function(){   // 事件触发后执行的代码!!   });

常用事件

click()  -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick()  -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover( 
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });

事件练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>示例</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				以上是关于小白入门之前端网页技术JQuery的主要内容，如果未能解决你的问题，请参考以下文章
 

 小白入门之前端网页技术JavaScript


 小白入门之前端网页技术CSS


 小白入门之前端网页技术 Vue进阶


 小白入门之前端网页技术 Vue


 前端小知识点(从一名小白到前端大神需要掌握哪些知识点)


 web前端开发JQuery常用实例代码片段(50个)