jQuery基础02

最新推荐文章于 2024-02-15 01:18:08 发布
最新推荐文章于 2024-02-15 01:18:08 发布
阅读量150 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html5 html javascript js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/113726172

部分内容选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容选择器</title>
		<style>
			div{
				width: 50px;
				height: 100px;
				background-color: red;
				margin-top: 5px;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//:contains(texr)
				//:empty
				//:has(selector)
				//:parent
				
				//:empty作用：找到即没有文本内容也没有子元素的指定元素
				var $div = $("div:empty");
				console.log($div);//找到第一个div
				
				//:parent作用：找到有文本内容或有子元素的指定元素
				var $div = $("div:parent");
				console.log($div);//除了第一个div，其他全找到
				
				//:contains(texr)作用：找到包含指定文本内容的指定元素
				var $div = $("div:contains('我是div')");
				console.log($div);//找到第二个div
				
				//:has(selector)作用：找到包含指定子元素的指定元素
				var $div = $("div:has('span')");
				console.log($div);//找到有span的div
			});
		</script>
	</head>
	<body>
		<div></div>
		<div>我是div</div>
		<div>她是div</div>
		<div><span></span></div>
		<div><p></p></div>
	</body>
</html>

属性和属性节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性和属性节点（理解）</title>
		<script src="../lib/jquery.js"></script>
		<script>
			/* 
				1.什么是属性
					对象身上保存的变量就是属性
					
				2.如何操作属性
					对象.属性名称 = 值;
					对象.属性名称;
					
					对象["属性名称"] = 值
					对象["属性名称"];
					
				3.什么是属性节点
					<span name = "it666"></span>
					在编写HTML代码时，在HTML标签中添加的属性就是属性节点
					在浏览器中找到span这个DOM元素之后，展开看到的都是属性
					在attributes属性中保存的所有内容都是属性节点
					
				4.如何操作属性节点
					DOM元素.setAttribute("属性名称","值");
					DOM元素.getAttribute("属性名称");
					
				5属性和属性节点的区别
					任何对象都有属性，但是只有DOM对象才有属性节点
			 */
			$(function(){
				
				function Person(){
					
				}
				var p = new Person();
				//p.name = "cqd";
				//console.log(p.name);//cqd
				p["name"] = "CQD";
				console.log(p["name"]);//CQD
				
				var span = document.getElementsByTagName("span")[0];
				span.setAttribute("name","cze");
				console.log(span.getAttribute("name"));
			});
		</script>
	</head>
	<body>
		<span name = "it666"></span>
	</body>
</html>

attr方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>attr方法</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.attr(name|pro|key,val|fn)
					作用：获取或者设置属性节点的值
					可以传递一个参数，也可以传递两个参数
					如果传递一个参数，代表获取属性节点的值
					如果传递两个参数，代表设置属性节点的值
					注意：
						1.如果是获取，无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
						2.如果是设置，找到多少个元素就会设置多少个元素
						3.如果是设置，设置的属性节点不存在，那么系统会自动新增
					
					2.removeAttr(name)
					删除属性节点
					注意：会删除所有找到的元素指定的属性节点
				 */
				
				//console.log($("span").attr("class"));
				//$("span").attr("class","box");
				//$("span").attr("abc","box");
				
				$("span").removeAttr("class name");
			});
		</script>
	</head>
	<body>
		<span class="span1" name="it666"></span>
		<span class="span2" name="it777"></span>
	</body>
</html>

prop方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>prop方法</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.prop方法
						特点和attr方法一致
						
					2.removeProp方法
						特点和removeAttr方法一致
				 */	
				$("span").eq(0).prop("demo","it666");
				$("span").eq(1).prop("demo","cqd");
				$("span").prop("demo");
				console.log($("span").prop("demo"));//it666
				
				$("span").removeProp("demo");
				
				/* 
					注意：prop方法不仅能够操作属性，还能够操作属性节点
					
					官方推荐在操作属性节点时，具有true和false两个属性的属性节点，如checked，selected或者disabled使用prop()，其他的使用attr()
				 */
				console.log($("span").prop("class"));//span1
				$("span").prop("class","box");
				
				console.log($("input").prop("checked"));//打勾返回true，不打返回false
				console.log($("input").attr("checked"));//打勾返回checked，不打返回undefined
			});
		</script>
	</head>
	<body>
		<span class="span1" name="it666"></span>
		<span class="span2" name="it777"></span>
		<input type="checkbox">
	</body>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//1.给按钮添加点击事件
				var btn = document.getElementsByTagName("button")[0];
				btn.onclick = function(){
					//2.获取输入框输入的内容
					var input = document.getElementsByTagName("input")[0];
					var test = input.value;
					//3.修改img的src属性节点的值
					$("img").attr("src",test);
					//$("img").prop("src",text);
				}
				
			});
		</script>
	</head>
	<body>
		<input type="text"/>
		<button>切换图片</button><br><!-- 输入框输入另一张图片的地址，点击按钮会切换图片 -->
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
	</body>
</html>

操作类相关的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作类相关的方法</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.class1{
				width: 100px;
				height: 100px;
				background: red;
			}
			.class2{
				border: 10px solid #000;
			}
		</style>	
		<script src="lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.addClass(class|fn)
					作用：添加一个类
					如果要添加多个，多个类之间用空格隔开即可
					
					2.removeClass([class|fn])
					作用：删除一个类
					如果要删除多个，多个类之间用空格隔开即可
					
					3.toggleClass(class|fn[,sw])
					作用：切换类
					有就删除，没有就添加
				 */
				var btns = document.getElementsByTagName("button");
				btns[0].onclick = function(){
					//$("div").addClass("class1");
					$("div").addClass("class1 class2");
				}
				btns[1].onclick = function(){
					//$("div").removeClass("class2");
					$("div").removeClass("class1 class2");
				}
				btns[2].onclick = function(){
					$("div").toggleClass("class1 class2");
				}
			});
		</script>
	</head>
	<body>
		<button>添加类</button>
		<button>删除类</button>
		<button>切换类</button>
		<div></div>
	</body>
</html>

文本值相关的操作方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本值相关的操作方法</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				border: 1px solid #000;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.html([val|fn])
					和原生js中的innerHTML一模一样
					
					2.text([val|fn])
					和原生js中的innerText一模一样
					
					3.val([val|fn|arr])
				 */
				var btns = document.getElementsByTagName("button");
				btns[0].onclick = function(){
					$("div").html("<p>我是段落<span>我是span</span></p>");
				}
				btns[1].onclick = function(){
					console.log($("div").html());
				}
				btns[2].onclick = function(){
					$("div").text("<p>我是段落<span>我是span</span></p>");
				}
				btns[3].onclick = function(){
					console.log($("div").text());
				}
				btns[4].onclick = function(){
					$("input").val("请输入内容");
				}
				btns[5].onclick = function(){
					console.log($("input").val());
				}
			});
		</script>
	</head>
	<body>
		<button>设置html</button>
		<button>获取html</button>
		<button>设置text</button>
		<button>获取text</button>
		<button>设置value</button>
		<button>获取value</button>
		<div></div>
		<input type="text">
	</body>
</html>

操作样式方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				//1.逐个设置
				$("div").css("width","100px");
				$("div").css("height","100px");
				$("div").css("background","red");
				
				//2.链式设置
				//注意：链式操作如果大于3步，建议分开
				$("div").css("width","100px").css("height","100px").css("background","blue");
				
				//3.批量设置
				$("div").css({
					width: "100px",
					height: "100px",
					background: "yellow"
				})
				
				//获取css样式值
				console.log($("div").css("background"));
			});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

操作尺寸和位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸和位置操作</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
				border: 50px solid #000;
				margin-left: 50px;
				position: relative;
			}
			.son{
				width: 100px;
				height: 100px;
				background: blue;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				var btns = document.getElementsByTagName("button");
				//监听获取
				btns[0].onclick = function(){
					//获取元素的宽度
					console.log($(".father").width());//200
					 
					//offset([coordinates])
					//作用：获取元素距离窗口的偏移位
					console.log($(".son").offset().left);
					
					//position()
					//作用：获取元素距离定位元素的偏移位
					//注意：position方法只能获取不能设置
					console.log($(".son").position().left);
				}
				//监听设置
				btns[1].onclick = function(){
					//设置元素的宽度
					//$(".father").width("500px");
					
					$(".son").offset({
						left:10
					});
				}
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<button>获取</button>
		<button>设置</button>
	</body>
</html>

scrollTop方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.scroll{
				width: 100px;
				height: 200px;
				border: 1px solid #000;
				overflow: auto;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				var btns = document.getElementsByTagName("button");
				//获取监听
				btns[0].onclick = function(){
					//获取滚动的偏移位
					//console.log($(".scroll").scrollTop());
					//获取网页滚动的偏移位
					//console.log($("html").scrollTop());
					//注意：为了保证浏览器的兼容，获取网页滚动的偏移位，需要按照如下写法
					console.log($("body").scrollTop()+$("html").scrollTop());
				}
				btns[1].onclick = function(){
					//设置滚动的偏移位
					//$(".scroll").scrollTop(300);
					//设置网页滚动的偏移位
					//注意：为了保证浏览器的兼容，设置网页滚动的偏移位，需要按照如下写法
					$("html,body").scrollTop(500);
				}
			});
		</script>
	</head>
	<body>
		<div class="scroll">《鬼谷八荒》这游戏太魔性了…………老夫16岁巧遇机缘，踏长生。他人一心筑基，我8年寻材，终以天地人三道之中的最强天道筑基。
		之后突飞猛进，4年之间用雷泽四种天材地宝终成完美结晶境。随后杀华康，斩雷神，跨过雷泽，进华封州，才知金丹分五品。又用8年时间，入剑宗，
		集齐六种灵珠，五种天材成就一品金丹。入境是巅峰，结晶视如狗。然而回首观瞧才知，历经20载，却也只是刚刚迈进门槛。不说了，明天具灵境冲元婴境。
		</div>
		<button>获取</button>
		<button>设置</button>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>
最爱琴女E
关注
angular自带的jquery lite用法实例,不用引入jq照样回到老夫就用jq的感觉~
dokill的博客
03-23 3386
前提~我用的版本1.5.5或许你曾见过这张图~ 言归正传，情况是这样的： 我有三个li，每点击当前li就让其背景色变色； 点击另一个li又让背景色切换到另一个li。 这需求在jq的时代简直不能再简单，然鹅在用了angular后页面就很少引入jq了（当然是为了保持B格~哈哈哈），偶然发现angular自带有jq lite，和指令一起用就又回到老夫就用jquery的快感~附码：<li au-
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1364
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
JQuery老矣，尚能饭否？
最新发布
zhangduo113的博客
02-15 436
尽管在近年来，由于新兴技术的涌现，JQuery的使用率可能有所下降，但它仍然拥有强大的社区支持和广泛的用户基础。随着移动设备和桌面端设备的融合，JQuery在响应式设计中仍然扮演着重要的角色。并且，JQuery团队也在不断地更新和改进JQuery的功能和性能，使其更加符合现代Web开发的需求。JQuery迅速赢得了开发者们的青睐，在不到一年的时间里，它就占据了JavaScript库的主导地位。总之，JQuery是一个强大、易用且广泛使用的JavaScript库，具有许多优点，为Web开发带来了极大的便利。
jQuery中Select的问题
squirrel12345的博客
09-07 163
设置select框option的selected属性时，最好用   option.selected = true; option.setAttribute("selected", "selected");   在出现form.clone()时会无法记录jQuery的attr为option设置的selected，所以用上面的方式更可靠一些...
jQuery 和 javascript 样式 比较 学习笔记
YICONGITSME的博客
10-22 172
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;style&gt; div {
jQuery基础教程
10-03
《jQuery基础教程(第2版)》作为《jQuery基础教程》的升级版，涵盖了jQuery 1.3的全部新特性，特别是新增了介绍jQuery UI（jQuery官方用户界面插件库）的内容。《jQuery基础教程(第2版)》前6章以通俗易懂的方式介绍了...
【练习向】jQuery基础教程第四版章节源码——Book02_jQuery_选择元素
11-28
《jQuery基础教程第四版》是学习JavaScript库jQuery的重要参考资料，其中"Book02_jQuery_选择元素"这一章节主要探讨了如何在DOM（文档对象模型）中高效地选取和操作元素，这是jQuery的核心功能之一。在jQuery中，...
Jquery第02天.zip
12-21
在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和...
jquery基础教程02
08-23
### jQuery基础教程02知识点详解 #### 一、jQuery简介 - **定义**：jQuery是一款优秀的JavaScript库，它简化了HTML文档遍历、事件处理、动画等操作，并且提供了强大的DOM操作能力。 - **特点**： - **轻量级**：...
jQuery复习-(jQuery入门,jQuery语法(DOM),jQuery动画)
m0_64526818的博客
01-04 964
jQuery入门 jQuery语法(DOM) jQuery动画
做web前端，年入50w以上的心得
热门推荐
qietuwang的博客
03-16 2万+
来自头条号：丁向明 （ps：加关注）---大家好， 我是aming ，来自广东的一种称谓（习惯于加阿x来称呼，我曾在广州工作过一段时间，大家习惯这样叫我）不管你之前认识或不认识我， 现在，我们开始重新认识一下！微信 dingxiangming82 / 或者关注我的头条早在2007年接触前端2007年接触前端到现在，有11年的时间，算是大龄前端了，算不上高手，但也算的上是老手，很早就接触jquery...
jquery 设置style_jQuery学习(2)
weixin_39801356的博客
11-29 134
10296`jQuery` 获取并设置`css`类1.获取并设置2.实例jQuery效果1.特殊效果2.动画3.链式调用 jQuery 获取并设置css类 1.获取并设置jQuery拥有若干操作css 属性的方法..css()设置或返回属性样式.addClass() :向被选元素添加一个或多个类.removeClass():从被选元素删除一个或多个类..toggleClass():对被选...
①、jQuery，Hold on!
Augenstern_QXL的博客
06-08 4903
1.jQuery 1.1 jQuery下载 官网: https://jquery.com/ 各个版本的下载：https://code.jquery.com/ 打开官网 点击进入：ctrl+A 全选， ctrl+c 复制 在vs中新建jquery.min.js 文件（此处任何名称均可，只要是js文件即可） 在html 文件进行引入即可 <script src = "jquery.min.js"></script> 1.2 jQuery的入口函数 //
JQuery
qq_46219566的博客
07-08 1352
JQuery、bootstrap
jQuery基础使用与样式篇
sult812的博客
04-30 365
jQuery基础使用与样式篇 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Adobe Dreamweaver JavaScript 作者：陈钰桃 撰写时间：2020年4月20日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
jQuery入门、选择器、事件、静态方法、动画
qq_51066068的博客
04-20 2917
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuery事件 3.1.事件的基本使用 3.2.事件代理 3.3.事件类型 4.jQueryDOM操作 5.jQuery静态方法 5.1.数组及对象操作 5.2.测试操作 5.3.字符串操作 6.jQuery动画 第一章-jQuery基础知识 第一天的授课重点在于梳理与对比..
jQuery节点操作、弹幕案例
流楚丶格念的博客
12-19 4143
文章目录动态创建节点创建与移动节点位置案例：城际移动案例：发布评论清空与删除节点案例：弹幕效果 动态创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px;
jQuery基础教程：选择器与事件操作
### 02 jQuery选择器 jQuery选择器允许我们高效地选取DOM元素。以下是一些常见的选择器示例： - `$("#div0")`：选取ID为"div0"的元素。 - `$("span")`：选取所有`<span>`元素。 - `$(".class-name")`：选取具有特定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值