区块链技术博客
www.b2bchain.cn

Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器

这篇文章主要介绍了Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器的讲解,通过具体代码实例进行17534 讲解,并且分析了Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=17534

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

系列文章目录

Web前端 学习知识点总结(一)HTML基本标签.
Web前端 学习知识点总结(二)之Form和Css选择器.
Web前端 学习知识点总结(三)Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结(四)之display 和 float.
Web前端 学习知识点总结(五)qq导航条案例,使用min-width解决留白.
Web前端 学习知识点总结(六)定位position.
Web前端 学习知识点总结(七)Css3动画animation.
Web前端 学习知识点总结(八)JavaScript的常用基础.
Web前端 学习知识点总结(九)JavaScript的BOM和DOM基础.
Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器.


文章目录

  • 系列文章目录
  • 前言
  • 一、jQuery介绍
  • 二、jQuery基础
    • 2.1语法格式
    • 2.2获取文本
    • 2.3获取样式
    • 2.4获取属性
    • 2.4 密码可见案例
    • 2.5 事件
    • 2.5 选择器
    • 2.5 选择器案例 隔行变色


前言

在学习了JS的基础以后,多练习简单的案例可以帮助我们更好的理解JS语言的使用方式,以及相应功能的实现。有了JS的基础,下面就可以进行jQuery的学习,JQ是一个轻量库,jQuery已经有了许多强大的本身的函数功能,可以帮助我们解决一些基本的,简单的问题,与JS相结合可以发挥更大的作用。


一、jQuery介绍

  • 1.JavaScript的一个封装库。
  • 2.更方便的使用js、解决兼容性问题。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画等等。
  • 3.jQuery 点击下载

Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器
一般选择前两个一个是解压缩版本,一个是不解压缩的版本。
对于JQ -。。。.js和JQ -。。。min…js的区别
前者,是供学习开发使用的。后者是生产版本,运用了一些压缩的技术,用于发布使用的。


二、jQuery基础

2.1语法格式

jq的引用一般在我们使用的script的开头
Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器
上面是jq的引用通过src引入版本号,剩下的我们自己的函数写在引用的函数下面。

在script中引用的格式为:

$(选择器).函数

2.2获取文本

用对比的方式来理解, JQ和JS的区别。
代码如下(示例):
当()内部没有数值的时候,用于获取内部全部数据,包括标签

$("#选择器").html()
$("#选择器").text() 只获取文本

当有值的时候,则进行替换设置。

$("#选择器").html(“Monday”)

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 	</head> 	<body> 		<p id="mondey"><span>星期一</span></p> 		<p>星期二</p> 		<p>星期三</p> 		<p>星期四</p> 		<input type="text" name="username" id="username" value="zhangsan" /> 	</body> </html> <script src="js/jquery-1.12.4.js"></script> <script> //	js //获取 	var mon = document.getElementById("mondey") 	console.log(mon.innerHTML) 	console.log(mon.innerText) 	 	console.log(document.getElementById("username").value) 	 	 //	jQuery //无参数是获取,有参数是设置 //获取数据 	console.log($("#mondey").html()) 	console.log($("#mondey").text()) 	console.log($("#username").val()) //	设置 	console.log($("#mondey").html("Monday"))	 	console.log($("#username").val("lisi")) </script> 

2.3获取样式

获取样式
console.log($(“选择器”).css(“color”));

替换样式有三种方式,见下列代码。
代码如下(示例):

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 	</head> 	<body> 		<p id="mondey"><span>星期一</span></p> 		<p>星期二</p> 		<p>星期三</p> 		<p>星期四</p> 		<input type="text" name="username" id="username" value="zhangsan" /> 	</body> </html> <script src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> //	设置 //方式一 //	$("#mondey").css("color","red") //方式二 //	$("#mondey").css("color","red").css("font-size","30px") //方式三 //多个样式 $("#mondey").css( 	{ 	 "color":"red", 	 "font-size":"32px" 	} ); //获取样式 console.log($("#mondey").css("color")); </script> 

2.4获取属性

prop 和 attr
prop的用于check等选项的赋值操作,而attr 的使用的常规的赋值操作。

$(“选择器”).attr(“type”)
$(“选择器”).attr(“type”,“password”);

2.4 密码可见案例

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 	</head> 	<body> 		<input type="password" name="pwd" id="pwd" value="" /> 		<input type="button" name="" id="btn" value="可见" onclick="change()" /> 	</body> </html> <script src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> 	function change(){ 		if($("#pwd").attr("type")=="password"){ 			$("#pwd").attr("type","text"); 			$("#btn").attr("value","不可见"); 		}else{ 			$("#pwd").attr("type","password"); 			$("#btn").attr("value","可见"); 		}		 	} </script> 

2.5 事件

$(“选择器”).click(function(){
alert(888);
})

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 	</head> 	<body> 		<input type="button" name="all" id="btn" value="按钮"  /> 	</body> </html> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> //	function doClick(){ //		alert("111") //	} //	等于οnclick=doclick() //方法一 //	document.getElementById("btn").οnclick=doClick //	方法二 //document.getElementById("btn").οnclick=function(){ //		alert("111") //	}   //jQuery //$("#btn").click(doClick) 	$("#btn").click(function(){ 		alert(888); 	}) </script> 

2.5 选择器

JQ的选择器很重要,是CSS的基础。
CSS基本选择器和高级选择器
在此基础上,补充一些过滤选择器
①:last 选中最后一个
②:first 选中第一个
③:eq(index) equal 判断是否与index相等
④:It(index) little than 判断是否比index小
⑤:gt(index) great than 判断是否比index大
⑥:even() 选中奇数
⑦:odd() 选中偶数
⑧(了解):header 全部选h标签
⑨:focus JQ特有的过滤选择器。
可见性选择器
⑩:hidden可以显示display=none的值

2.5 选择器案例 隔行变色

使用jquery的过滤选择器实现。

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 		<style type="text/css"> 			td{ 				color: white; 			} 		</style> 	</head> 	<body> 		<table border="1"> 			<tr> 				<td>商品</td> 				<td>单价</td> 				<td>数量</td> 				<td>操作</td> 			</tr> 			<tr> 				<td><a href="#">丹幕妮通勤波点印花毛衣</a></td> 				<td></td> 				<td></td> 				<td></td> 			</tr> 			<tr> 				<td><a href="#">预售太平洋女装连衣裙</a></td> 				<td></td> 				<td></td> 				<td></td> 			</tr> 			<tr> 				<td><a href="#">丹幕妮通勤红色小外套</a></td> 				<td></td> 				<td></td> 				<td></td> 			</tr> 			<tr> 				<td><a href="#">曼巴森新款套头</a></td> 				<td></td> 				<td></td> 				<td></td> 			</tr> 		</table> 	</body> </html> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> 	$("*").css("color","gray") 	$("tr").css("height","50px"); 	$("td").css({ 		"width":"240px", 		"text-align":"center", 		 	}); 	$("tr:first-child td").css("color","white"); 	$("tr:odd").css("background-color","#EFF7D1"); 	$("tr:even").css("background-color","#F7E195"); 	$("tr:nth-of-type(1)").css("background","#0000FF") </script> 

效果图
Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器


本文转自互联网,侵权联系删除Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们