23-jQuery(前端)

王宇辉

已于 2022-02-26 09:44:18 修改

阅读量141

点赞数

分类专栏： java知识体系文章标签： jquery 前端 javascript

于 2021-12-27 07:58:22 首次发布

本文链接：https://blog.csdn.net/weixin_42688085/article/details/122153421

版权

感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接
在这里插入图片描述

目录标题

一，概念

   jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
      jQuery库包含以下功能：
         HTML 元素选取
         HTML 元素操作
         CSS 操作
         HTML 事件函数
         JavaScript 特效和动画
         HTML DOM 遍历和修改
         AJAX Utilities
   提示：除此之外，jQuery还提供了大量的插件。目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
    bsp; 选择使用1.11.1的版本学习
      jQuery的使用
         jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。
在这里插入图片描述

二，jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。  基础语法： 
	$(selector).action()
	说明：美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作
文档就绪事件 
	文档就绪事件，实际就是文件加载事件。 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。 如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。 
写法1：
	$(document).ready(function(){ // 开始写 jQuery 代码... });
写法2：简介写法-推荐 
	$(function(){ // 开始写 jQuery 代码... }); 
	jQuery的ready方法与JavaScript中的onload相似，但是也有区别：

在这里插入图片描述

三，jQuery选择器:

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经 存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。
元素/标签选择器 
	jQuery 元素选择器基于元素/标签名选取元素。 
	语法：$("标签名称")
#id 选择器 
	jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。 
	通过 id 选取元素语法如下：$("#p1") 
.class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。 
	$(".mydiv")
全局选择器 匹配所有元素 $("*") 
并集选择器 将每一个选择器匹配到的元素合并后一起返回。$("div,ul,li,.mydiv")
后代选择器 在给定的祖先元素下匹配所有的后代元素。 $("form input")
子选择器 在给定的父元素下匹配所有的子元素。$("form > input")
相邻选择器 匹配所有紧接在 prev 元素后的 next 元素。$("label + input") 
同辈选择器 匹配 prev 元素之后的所有 siblings 元素。$("form ~ input") 
属性选择器 匹配包含给定属性的元素
可见性选择器 匹配所有的可见或不可见的元素
	$("div:visible"); $("input:hidden");

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择器</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>			
			//1、标签选择器：
			function htmlSelector(){
     				
				//获取所有的div元素（集合）
				var divList=$("div");
				console.log(divList);//jQuery的对象
				console.log(divList.length);
				for(var i=0;i<divList.length;i++){
     
					console.log(divList[i]);//js的对象
					//将js对象转换为jQuery的对象
					console.log($(divList[i]));
				} 
			}
			//2、id选择器
			function idSelector(){
     
				//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
				var p=$("#p1");
				console.log(p.html());
			}
			//3、.class选择器
			function classSelector(){
     
				var list=$(".mydiv");
				console.log(list.length);
			}			
			//4、 全局选择器
			function allSelector(){
     
				var list=$("*");//包括了html、head、title.....所有标签
				console.log(list.length);
				for(var i=0;i<list.length;i++){
     
					console.log(list[i]);//js的对象					
				}  
			}
			//5、并集选择器
			function andSelector(){
     
				var list=$(".mydiv,p,li");
				printList(list); 
			}
			//6、后代选择器:包括所有的后代，儿子和孙子辈都有
			function subSelector(){
     
				var list=$("form input");
				printList(list);
			}
			//7、子选择器：只有子元素
			function sunSelector(){
     
				var list=$("form>input");
				printList(list);
			}
			//8、相邻选择器
			function nextSelector(){
     
				var list=$("label + input");
				printList(list);
			}
			//9、同辈选择器
			function sublingsSelector(){
     
				var list=$("form ~ div");
				printList(list); 
			}
			//10、属性选择器
			function attrSelector(){
     
				var list=$("div[id]");//获取所有有id属性的div的元素集合
				list=$("div[class]");//获取所有有class属性的div的元素集合
				list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
				list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
				list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
				list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
				list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
				printList(list);
			}
			//11、可见性选择器
			function seeSelector(){
     
				//匹配所有的可见div元素
				var list=$("div:visible");
				//匹配所有的不可见div元素
				var list=$("div:hidden");
				//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素
				list=$("input:hidden"); 
				printList(list);
			}
			
			//文档就绪事件：页面加载完毕之后执行：
			$(function(){
     
				seeSelector();
			});
			//打印集合
			function printList(list){
     
				for(var i=0;i<list.length;i++){
     
					console.log(list[i]); 
					console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
					console.log(list[i].value);//只有表单项元素才有value
				}
			} 
		</script>
	</head>
	<body>	
		<form>
			<label>用户名：</label>
			<input type="hidden" name="userId" value="1001" />
			<input style="display: none;" value="隐藏的input" />
			<input id="userName" name="userName" value="jiaobaoyu" /><br />
			<label>密码：</label>
			<input name="userPass"  type="password" value="1234567"/><br />
			<fieldset>
				电话：<input id="phone" name="phoneuser" value="13712345789"/><br />
				邮箱：<input name="emailuser" type="email" value="lina@sina.com" />
			</fieldset>
		</form>
		地址：<input name="addressuser1" value="北京" /><br />
		<ul>
			<li>li111111</li>
			<li>li111111</li>
			<li>li111111</li>
		</ul>
		<p id="p1">p111111111111</p>
		<div id="div1" class="mydiv" style="display: none;" >div1</div> 
		<div class="mydiv">div2</div>
		<div id="div3">div3</div>
	</body>
</html>

四，jQuery常用函数

与标签内容相关函数
与标签属性相关函数 
与标签样式相关函数 
JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时，更加方便。
	2. JQuery对象和js对象方法不通用的.
	3. 两者相互转换
		* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
		* js -- > jq : $(js对象)

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			.redBg{
     
				background-color: red;
			}
			.fontColor{
     
				color: gold;
			}
		</style>
		<script>
			//1、与内容相关的函数
			function textFun(){
     
				var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
				console.log(str1);
				var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
				console.log(str2);
				var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
				var str4=$("input").val();//input是表单项元素，val()可以获取到
				console.log(str3);
				console.log(str4);
			}
			//2、与属性相关的函数
			function attrFun(){
     
				var img=$("img");
				//设置属性
				img.attr("src","img/cat.jpg");
				img.attr("title","不服！");
				//移除属性
				img.removeAttr("title");
				//获取属性
				var src=img.attr("src");
				var title=img.attr("title");
				console.log(src+"===="+title);
				
				//获取checked属性使用prop函数，获取到的值是boolean类型，表示十分被选中
				var list=$("input[type='radio']");
				for(var i=0;i<list.length;i++){
     
					var flag=$(list[i]).prop("checked");
					console.log("checked="+flag);
				}				
			}
			//3、与css相关的函数
			function cssFun(){
     
				//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
				$("div").addClass("redBg");
				$("div").addClass("redBg fontColor");
				$("div").removeClass("fontColor");
				$("div").removeClass();//没有参数的时候直接移除所有的样式
				//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
				//给所有的元素添加样式，样式直接添加，无需提前定义
				$("input").css("border-color","blue");
				$("input").css({
     "color":"red","border-color":"green"});
			}
			function changeCss(){
     
				$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
			}
			
			$(function(){
     
				cssFun();
			});
		</script>
		
	</head>
	<body>
		<button type="button" onclick="changeCss()">切换div样式</button>
		性别：<input type="radio" value="0" name

最低0.47元/天解锁文章

王宇辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23-jQuery(前端)

感谢你的路过，希望学生的笔记能给你一点微不足道的参考Java基础思维导图，完整Java体系的链接一，概念   jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。      jQuery库包含以下功能：         HTML 元素选取 &nb
复制链接

扫一扫