Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Jquery入门基础教程免费版

Jquery入门基础教程免费版

作者头像
张哥编程
发布于 2024-12-13 06:26:50
发布于 2024-12-13 06:26:50
39800
代码可运行
举报
文章被收录于专栏:云计算linux云计算linux
运行总次数:0
代码可运行

JQuery

一.JQuery基础语法

1.概念

JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。

宗旨:“Write Less,Do More”,提倡写更少的代码。

核心特性:

  • 链式语法
  • 高效灵活的CSS选择器使用和扩展
  • 丰富的插件

官网:https://jquery.com/

image-20200427155036979.png
image-20200427155036979.png

三大版本:

目前jQuery有三个大版本。 1.X:兼容IE678,使用最为广泛,官网只做BUG维护,功能不再新增。因此一般项目来说,使用1.X版本就可以了,最终版本:1.12.4 (2016年5月20日)

2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.6.3.

————————————————-----------看大厂的源码------

jd:1.6.4

sina:1.7.3 jquery

3.选择器和方法

3.1 使用jquery访问三个div元素
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试页面jquery</title>
		<!-- 要导入jquery函数库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			// window.onload=function(){		
			// }
		//再次强调加载事件:先执行HTML、CSS,最后JS代码。
		//1.jquery 加载事件
		//$(document):当前文档对象;
		//.ready():方法;参数:匿名函数对象,传递进去了;
		
		// $(document).ready(function(){
		// 	alert('...');
		// })
		//2.再简便一点;建议大家使用这种方式,简单;
		// $(function(){
		// 	alert('...测试');
		// });
		//3.改进的代码
		$(function(){
			var div1=$("div")[0];
			console.log(div1.innerHTML);
			
			var div2=$("#two");
			console.log(div2.html()); //html():代替了之前的innerHTML
			
			var div3=$(".three")[0];
			console.log(div3.innerHTML);
		})
		//单个元素的时候,直接是html(),代替了之前的innerHTML。
		
		// window.onload=function(){				
		// 	var div=document.getElementsByTagName("div")[0];
		// 	alert(div.innerHTML);
		// 	//获得的是Element元素
		// 	var div2=document.getElementById("two");
		// 	alert(div2.innerHTML);
		// 	//3.根据类样式的名,来获得元素集合
		// 	var div3=document.getElementsByClassName("three")[0];
		// 	alert(div3.innerHTML);
		// }			
	</script>
</head>
<body>
	<div>标签选择器div:扎克波哥</div>
	<div id="two">第二个div:雷布斯</div>
	<div class="three">类样式的周鸿祎</div>
</body>
</html>

如何不使用innerHTML呢?

.first()

.last()

.eq(0)

3.2 基本选择器

1.id选择器 $("#id名")

2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素

3.标签选择器 $("标签名"),可以访问对应的标签元素

4.并集选择器:$("选择器1,选择器2,选择器3")以逗号隔开,和之前一样;

5.交集选择器$("p.hh")

3.3 层次选择器

7.后代选择器 $("a b")

8.子代(级)选择器 $("parent>child")

9.后继选择器 $("prev+next")

10.兄弟|同辈选择器 $("prev~sliblings")

3.3 基本方法

之前在js代码有很多属性,比较长,jQuery为了简化这些长的属性,就封装成了一些函数|方法。

html()->innerHTML,会把下面的带有html标签的格式给原封不动的输出。

val()-->value

text()-->innerText只出来当前元素下的文本,不会出来html标签的格式.

css():设置当前元素的样式,语法:元素对象.css("属性名","值")

addClass():增加元素的样式,addClass("样式名")

removeClass():移除元素的样式,removeClass('样式名')

总结:

1.基本选择器,重点前3个;id 类样式 标签;其他了解即可。

2.层次选择器,重点子级选择器 后继选择器;

3.基本方法,html() size() css() addClass() removeClass()

4.案例

4.1 计算器案例|购物车统计

4.2 表单验证案例

二.jQuery高级选择器

针对上次课有点复杂的选择器,或之前没有接触过的选择器。

为什么要反复的讲选择器,这个就是jQuery的要点,同CSS3,通过复杂的document.getElement(s)ById|ByTagName|ByClassName等等,这些方式,找页面的元素对象。同样,在jQuery里面,我们要操作页面对象还是需要找对象,找页面对象,就是通过各类的选择器来找,简化我们的业务代码量。

$("各类选择器")-->对象

$("各类选择器").操作

$("div").css('属性',"值)

$("#result").val(result)

$("#jia").click(function(){

​ //在这里我们可以若干操作的代码

})

2.1 基本过滤选择器

基本过滤选择器

符号

说明

用法

:eq(index)

index是从0开始的下一个数字,选择序号为index的元素.(选择第一个匹配的元素)

$("li:eq(1)").css("background","red")

:gt(index)

index是从0开始的一个数字,选择序号大于index的元素

$("li:gt(2)").css("background","red")

:lt(index)

index是从0开始的一个数字,选择序号小于index的元素

$("li:lt(2)").css("background","red")

:odd

选择所有序号为奇数行的元素

$("li:odd").css("background","red")

:even

选择所有序号为偶数行的元素

$("li:even").css("background","red")

:first

选择匹配第一个元素

$("li:first").css("background","red")

:Iast

选择匹配的最后一个元素

$("li:last").css("background","red")

img
img
image-20200429162653005.png
image-20200429162653005.png
2.2.属性选择器

针对页面元素来说,元素的属性是什么???

<img src='/photo/mm0009098.jpg' title='第一美女'/>,这个里面src,title,是属性。

<a rel="nofollow" href='jd.com/ac?httml' class='hotsale'>热卖宝</a>

href class就是a标签的属性。

在jquery里面,使用[]来指定属性选择器,基本选择器[属性选择器]

属性选择器

符号

说明

用法

$("a[href]")

选择所有包含href属性的元素

$("a[href]").css("background","red")

$("a[href='luffy']")

选择href属性值为luffy的所有a标签

$("a[href='bilibili']").css("background","red")

$("a[href!='baidu']")

选择href属性不等于baidu的所有元素(包括没有href的元素)

$("a[href!='baidu']").css("background","red")

$("a[href^='web']")

选择所有以web开头的元素

$("a[href^='web']").css("background","red")

$("a[href$='cn']")

选择所有以cn结尾的元素

$("a[href​$='cn']").css("background","red")

$("a[href*='i']")

选择所有包含i这个字符的元素,可以是中英文

$("a[href*='i']").css("background","red")

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function(){
            //标签名[属性名] 查找所有含有id属性的该标签名的元素
            $('li[id]').css('color','red');
            
            //匹配给定的属性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配给定的属性是以某些值开始的元素
            $('input[name^=user]').css('background','gray');                        
            //匹配给定的属性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')       
 })
2.3.筛选选择器

筛选选择器(通过方法调用)

符号

说明

用法

find(selector)

查找指定元素的所有后代元素(包括子子孙孙)

$("#i_wrap").find("li").css("color","red"); 选择id为i_wrap的所有后代元素li

children()

查找指定元素的直接子元素(亲儿子元素)

$("#i_wrap").children("ul").css("color","red"); 选择id为i_wrap的所有子代元素ul

siblings()

查找所有兄弟元素(不包括自己)

$("#i_liItem").siblings().css("color","red"); 选择id为i_liItem的所有兄弟元素

parent()

查找父元素(亲的)

$("#i_liItem").parent("ul").css("color","red"); 选择id为i_liItem的父元素

eq(index)

查找指定元素的第index个元素,index是索引号,从0开始

$("li").eq(2).css("color","red"); 选择所有li元素中的第二个

first()

last()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">        
        //获取第n个元素 数值从0开始
        $('span').eq(1).css('color','#FF0000');
        
        //获取第一个元素 :first :last    点语法  :get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span标签的父元素(亲的)
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //选择所有的兄弟元素(不包括自己)
                  $('.list').siblings('li').css('color','red');
                  
                //查找所有的后代元素
                   $('div').find('button').css('background','yellow');
                
                //不写参数代表获取所有子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
    </script>
2.5.表单选择器

求同存异,利用之前的知识,迁移过来。判断的是表单的类型,注意,判断的是表单元素的类型,类型,类型。

名称

说明

解释

$(:input)

匹配所有 input, textarea, select 和 button 元素

查找所有的input元素: $(":input")

$(:text)

匹配所有的文本框

查找所有文本框: $(":text")

$(:password)

匹配所有密码框

查找所有密码框: $(":password")

$(:radio)

匹配所有单选按钮

查找所有单选按钮

$(:checkbox)

匹配所有复选框

查找所有复选框: $(":checkbox")

$(:submit)

匹配所有提交按钮

查找所有提交按钮: $(":submit")

$(:image)

匹配所有图像域

匹配所有图像域: $(":image")

$(:reset)

匹配所有重置按钮

查找所有重置按钮: $(":reset")

$(:button)

匹配所有按钮

查找所有按钮: $(":button")

$(:file)

匹配所有文件域

查找所有文件域: $(":file")

表单属性过滤器

语法

描述

示例

:enabled

匹配所有可用元素

$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素

:disabled

匹配所有不可用元素

$(" #userform :disabled" )匹配编号输入框

:checked

匹配所有被选中元素(复选框、单项按钮、select 中的option)

$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项

:selected

匹配所有选中的option 元素,单一的下拉框

$(" #userform :selected" ) 匹配“家乡”中的“北京”选项;#userform是表单名,不是下拉框

2.6 属性操作

jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

  • html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
  • DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
  • 类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
  • 值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

正则:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/ 账号最少4
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   密码
/^(13|15|18)\d{9}$/;                      手机号
/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;      邮箱

总结:

1.选择器重点讲了好几个,今天是表单选择器;

2.掌握如何针对某个选择器进行操作,规律:三个字总结:找 事 匿

3.jQuery链式操作

2.6 作业

使用jQuery+正则表达式,对表单注册进行简单的验证。需要大家去复习正则表达式的使用 。

复习代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				//blur:焦点离开事件
				$("#user").blur(function(){
					//alert('aaaa');
					//定义正则表达式reg =new RegExp("正则")
					let reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
					let user=$("#user").val();
					//正则.test(变量名)
					//console.log(reg.test(user));
					if(reg.test(user)){ 
						$(this).next().html("√").css("color","green");
					}else{//如果是false,不符合规则;
						$(this).next().html("账户不符合规则,最少4位,以a-z|A-z,数字").css("color","red");
					}
				});
			})
		</script>
	</head>
	<body>
		<form>
			账户:<input type="text" name="user" id="user" /><span></span><br/>
			密码:<input type="password" name="pwd" id="pwd" /><br/>
			<button type="button">注册</button>
		</form>
	</body>
</html>

三.jQuery 事件

jQuery事件是对JavaScript事件的封装,分为基础事件和复合事件。

C#就是基于事件机制编程的语言。

事件的使用方法,三步骤:

务必记住:找事匿

1.找对象

2.定事件

3.匿名函数

3.0 常用事件
Blur事件

当元素失去焦点时触发 blur 事件。

Click事件

3.1 jQuery基础事件

3.1.1 鼠标事件

方法

描述

执行时机

click( )

触发或将函数绑定到指定元素的click事件

单击鼠标时

mouseover( )

触发或将函数绑定到指定元素的mouseover事件

鼠标指针移过时

mouseout( )

触发或将函数绑定到指定元素的mouseout事件

鼠标指针移出时

3.1.2 键盘事件

当我们在键盘尚进行按键操作的时候,做出的响应事件。

方法

描述

执行时机

keydown( )

触发或将函数绑定到指定元素的keydown事件

按下键盘时

keyup( )

触发或将函数绑定到指定元素的keyup事件

释放按键时

keypress( )

触发或将函数绑定到指定元素的keypress事件

按下并松开

3.1.3 绑定事件

fadeIn 淡入 用600毫秒缓慢的将段落淡入

​ 速度参数:("slow","normal", or "fast")

fadeOut淡出

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//选择器,on();之前写的是都是方法名(function(){})
				//on("事件名",function(){})
				//相当于把click,单击事件绑定到匿名函数了;
				//选择器对象.on(事件名,function(){代码段})
				$("#on").on("click",function(){
					$("img").css("border","1px solid #f00");
				})
				//我现在在off按钮上写了一个click事件;
				$("#off").click(function(){
					//去除#on的绑定;
					//选择器对象.off("事件名")
					$("#on").off("click");
				})
			})
		</script>
	</head>
	<body>
		<img src="img/shijian.jpg"/>
		<button id="on">绑定on事件</button>
		<button id="off">去除绑定on事件</button>
	</body>
</html>

3.2 复合事件

复合事件,直觉应该是多个事件在一起的。

3.2.1 鼠标悬停事件

hover:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//针对td元素做个hover事件的操作;
				//hover(匿名函数):里面放了2个匿名函数,则先把两个匿名函数写出来;
				$("td").hover(
				//addClass/removeClass,也可以用.css(属性,值);
					function(){$(this).addClass("hover")},
					function(){$(this).removeClass("hover")}
				);
			})
		</script>
		<style>
			table{border:1px solid #000;}
			.hover{background-color: bisque;}
			td{border: 1px solid #000;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>测试</td>
				<td>测试2</td>
			</tr>
		</table>
	</body>
</html>
3.2.2 连续单击事件

用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*针对刚才的index.html做的js代码操作*/
//页面加载事件
$(function(){
	//找元素,找导航下面的dt标签元素即可.
	//针对这个元素做toggle操作
	$(".nav dt").toggle(
	//siblings():这个是dt后面的兄弟元素dd等;
	//slideDown/slideUp
		function(){$(this).siblings().slideDown("slow")},
		function(){$(this).siblings().slideUp("slow")}
	)
})

总结一下:

1.其中基础事件的鼠标和键盘事件比较简单,了解一下;

2.绑定事件,我们用的是最新的on事件,需要大家理解一下;

3.复合事件,第一个就是悬停事件实现了2个鼠标事件的操作,也就说不通过hover事件,也可以做出来hover效果。

toggle(),理解,使用jd案例,来测试一下即可。

四.jQueryDOM

概念:DOM 文档对象模型(必考),jQuery Dom应该是之前的DOM加了个jQuery的封装。

分类:DOM操作分为三类: DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById(),js。 HTML-DOM:用于处理HTML文档,如document.forms CSS-DOM:用于操作CSS,如element.style.color="green"

jQuery对JavaScript中的DOM操作进行了封装。

jQuery中的DOM操作

4.1 样式操作

之前的样式设置: 选择器对象.css('属性','值') 比如:

$("p").css("color",'red')

增加样式:

$("p").addClass('bgStyle')

toggle:模拟连续点击;

toggleClass:如果存在就删除一个类,如果不存在,则添加这个样式。

4.2 追加节点

语法

功能

append(content)

$(A).append(B)表示将子元素B追加到A中

prepend(content)

$(A). prepend (B)表示将子元素B前置插入到A中

before(content)

$(A). before (B)表示将B插入至A之前

after(content)

$(A).after (B)表示将B插入到A之后

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加节点</title>
		<style>
			@import url("css/games.css")
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//在按钮上单击的时候,进行操作;
				$("#app").click(function(){
					//操作的选择器对象是ul无序列表;
					//后置:$(".gameList").append("<li>王者范.</li>")
					//加到了ul的子元素li列表的后面;
					//$(".gameList").prepend("<li>雨鑫战神</li>")
					//before after
					//before:在当前节点之前,增加一个元素,不属于当前节点。
					//$(".gameList").before("<ul><li>海文泽拉斯</li></ul>")
					$(".gameList").after("<ul><li>海文泽拉斯</li></ul>")
				})
				
			})
		</script>
	</head>
	<body>
		<div class="cont">
			<ul class="gameList">
				<li>三星老船长</li>
				<li>艾泽拉斯</li>
				<li>起拉希姆</li>
			</ul>
		</div>
		<button id="app">追加</button><!--用一个按钮来做测试,更简单-->		
	</body>
</html>

4.3 节点操作函数

选取的是比较重要的节点操作函数。

语法

功能

remove()

删除节点

empty()

清空节点内容

replaceWith()

替换节点

clone()

复制节点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作节点</title>
		<style>
			@import url("css/games.css")
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//在按钮上单击的时候,进行操作;
				$("#app").click(function(){
					//1.删除节点的操作;删除某个节点:现在要删除艾泽拉斯;
					//$(".gameList li:eq(1)").remove();
					//2.清空节点内容:是删除吗???相当于设置了html('')
					// $(".gameList li:eq(1)").empty();
					//3.replaceWith:需要注意一下;如果不成可以加$("<li>四星小船长</li>")
					// $(".gameList li:eq(1)").replaceWith("<li>四星小船长</li>")
					//4.克隆:clone(),我们使用的时候就不加参数了.
					//首先$(".gameList li:eq(1)").clone():克隆;
					//第二步:追加到$(".gameList")最后;
					$(".gameList").prepend($(".gameList li:eq(1)").clone());					
				})				
			})
		</script>
	</head>
	<body>
		<div class="cont">
			<ul class="gameList">
				<li>三星老船长</li><!--li序号:0-->
				<li><a rel="nofollow" href='#'>艾泽拉斯</a></li><!--li序号:1-->
				<li>起拉希姆</li><!--li序号:2-->
			</ul>
		</div>
		<button id="app">克隆</button><!--用一个按钮来做测试,更简单-->		
	</body>
</html>

4.4属性节点

首先要了解什么是属性节点。

<img src='图片路径' title='超级炫图片'/

src,title就是img的属性,在DOM里面就是属性节点。

语法

功能

attr()

获取属性节点

attr({name1:value1,..n,nameN:valueN})

设置属性节点的多个属性的值

removeAttr(属性名)

删除指定的属性节点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作节点</title>
		<style>
			@import url("css/games.css")
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//在按钮上单击的时候,进行操作;
				$("#app").click(function(){
					//来获取一下src,这个图片的路径信息;好处:可以得到路径信息,
					//将来可以修改.
					alert($("img").attr('src'));
					//设置图片的路径信息;attr('属性','值')
					//$("img").attr('src','img/2aa.jpg');
					
					//升级:男变女了,加样式:
					$("img").attr('src','img/2aa.jpg').addClass('mm');
					//删除样式:这个需要在查看器来看一下。
					$("img").removeAttr('title');
				})				
			})
		</script>
	</head>
	<body>
		<div class="cont">
			<img src="img/men.jpg" title="纯爷们"/>
			<ul class="gameList">
				<li>三星老船长</li><!--li序号:0-->
				<li><a rel="nofollow" href='#'>艾泽拉斯</a></li><!--li序号:1-->
				<li>起拉希姆</li><!--li序号:2-->
			</ul>
		</div>
		<button id="app">属性节点的操作</button><!--用一个按钮来做测试,更简单-->		
	</body>
</html>

4.5 遍历函数

实际它属性节点的查找:

复习:first() last() sibings()都是查找;

语法

功能

each()

遍历节点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加节点</title>
		<style>
			@import url("css/games.css")
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				//在按钮上单击的时候,进行操作;
				/* $("#app").click(function(){
					//当我们在这个按钮上进行单击的时候,逐个获取li的信息内容
					//然后打印输出;
					//each的前面是需要逐个遍历的选择器对象;当前是li,所以:$("li")
					$("li").each(function(){
						let str=$(this).text();//text()注意;
						//alert(str);
						//变了:追加到span
						$("span").append(str);
					})
				}) */
				//each前面的选择器一定是有好几个的元素对象; 
				$("#app").click(function(){
					//下面要遍历+-* /四个按钮,得到其内容;
					$(".calc").each(function(){
						alert($(this).text());//就可以根据得到+-*/来完善之前的计算器了;
						// let op=$(this).text();
						// switch(op){
						// 	case '+':加操作;break;
						}
					})
				})
				
			})
		</script>
	</head>
	<body>
		<div class="cont">
			<ul class="gameList">
				<li>三星老船长</li>
				<li>艾泽拉斯</li>
				<li>起拉希姆</li>
			</ul>
		</div>
		<span></span>
		<button id="app">遍历按钮</button><!--用一个按钮来做测试,更简单-->	
		<button class="calc">+</button class="calc"><button>-</button>
		<button class="calc">*</button><button class="calc">/</button>
	</body>
</html>

总结:

1.toggleClass():有样式,则删除,没有则增加样式;

2.追加节点有4个,2个子元素街边;2个兄弟元素级别;

3.节点操作就是删除、清空、复制、替换(删改)

4.属性节点:attr() attr('name','name)

5.节点的遍历,注意使用:$("选择器").each()

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验