jQuery02

已于 2022-03-19 17:28:23 修改
阅读量260 收藏
点赞数
文章标签： javascript jquery
于 2022-03-19 11:31:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63667859/article/details/123591451
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xx{
				border: solid red 3px;
			}
			.aa{
				background-color: cyan;
			}
			.bb{
				background-color: crimson;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//一,$工具方法
				//1.1$each()遍历数组,对象的数据
				//定义对象{}
				//var stu={"name":"火狐","age":33};
				//遍历对象
				//console.info(stu.name,stu.age);
 				//$.each(stu,function(k,v){//k下标,v内容
 				//	console.info(v);
 				//})
				//定义数组[]
				/* var names=["阿百川","aa","bb","cc"];
				$.each(names,function(i,s){
					console.info(s);
				}) */
				
				//定义对象数组
				/* var stus=[{"name":"火狐","age":33},{"name":"广告","age":13}]
				$.each(stus,function(i,s){
					//第一种
					//console.info(s.name,s.age);
					//第二种
					$.each(s,function(i,sa){
						console.info(sa);
					})
				}) */
				
				//1.2 $.trim()去除两边空格
// 				var str="   zking   ";
// 				console.info($.trim(str).length);
				
				//1.3 $.type得到数据类型
				/* var str="sa";
				console.info($.type(str)); */
				
				//1.4 $.isArray() 判断是否是数组
				/* var str=[1,1,1,1];
				console.info($.isArray(str)); 
				var str=[{"name":"火狐","age":33},{"name":"广告","age":13}];
				console.info($.isArray(str));*/
				//1.5  $.isFunstion() 判断是否是函数
				//注意不能带括号 否则是调用方法
				//console.info($.isFunction(myf));
				
				//1.6  $.parseJSON() 解析json字符串转换为js对象/数组
				//定义对象字符串
				//var aa='{"name":"火狐","age":33}';
				//console.info($.type(aa));
				//将对象字符串转为字符串
				//var stu=$.parseJSON(aa);
				//console.info($.type(stu));
				//console.info(stu.name,stu.age);
				/* $.each(stu,function(i,s){
					console.info(s);
				}) */
				
				//定义一个对象数组的字符串
				//var str='[{"name":"火狐","age":33},{"name":"广告","age":13}]';
				//将它转为js对象数组
				//console.info($.type(str)));
				/* var stra=$.parseJSON(str);
				console.info($.type(stra));
				$.each(stra,function(i,s){
					console.info(s.name,s.age);
				}) */
				
				//二,属性和css
				//2.1 attr()拿值也能设值
				/* var mpath=$("#aa").attr("src");
				console.info(mpath); 拿值 */
				
				//设置值
				/* $("#aa").attr("src","img/3.jpg");
				$("#aa").attr("width","200px"); */
				
				//2.2 removeAttr() 移除属性值
				//$("#aa").removeAttr("src");
				//$("#aa").removeAttr("width");
				
				//2.3 addClass() 增加样式
				//$("#aa").addClass("xx");//样式的叠加
				
				//$("#aa").attr("class","xx");//样式的替换
				
				//2.4 removeClass() 删除对应样式
				//$("#aa").removeClass("xx");
				
				//2.5 prop()和attr()的区别 仅限于属性值是boolean的时候
				//$("#aa").attr("name","aa");
				//$("#aa").prop("name","aa");
				
				/* $("#ok").click(function(){
					$(".abc").prop("checked",true);
				})
				
				$("#nook").click(function(){
					$(".abc").prop("checked",false);
				}) */
				
				//案例3:优化表格的隔行换色
				/* $("table tr:even").addClass("aa");
				$("table tr:odd").addClass("bb"); */
				
				//2.6 html()和text()的区别
				/* var a=$("p").html();//会包含子标签
				var b=$("p").text();//只会打印纯文本
				console.info(a);
				console.info(b); */
				
				//2.7 val()拿值
				//拿到文本框的value指
				/* var a=$("#cc").val();
				console.info(a); */
				
				//赋值
				//var a=$("#cc").val("aa");
				
				//css
				//1.设置值
				//$("p").css("background","red");//单属性
				//$("p").css({"background":"yellow","color":"red"});//多属性
				
				//2.拿值 rgba() 红绿蓝 a为透明度取值范围0.1-1
				var a=$("p").css("background","rgba(111,111,111)");
				console.info(a);
				
			})
			
			function myf(){
				
			}
		</script>
	</head>
	<body>
		<input type="text" value="选项" id="cc"  />
		<img src="img/reg.gif" id="aa" width="200px" class="yy" />
		<hr />
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" />
		<input type="checkbox" class="abc" value="a"/>a
		<input type="checkbox" class="abc" value="b"/>b
		<input type="checkbox" class="abc" value="c"/>c
		<br />
		<p>娃娃机<span>hhh</span></p>
		<table border="1px" width="200px" height="200px">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		
	</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA44Kx44KkOTA3,size_20,color_FFFFFF,t_70,g_se,x_16

 

ケイ907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery02.doc
12-16
Jquery技术的基础详细学习笔记，总结了Jquery技术的各个知识点，可以用来复习以及对基础知识的巩固，对新人的学习很有帮助。
锋利的jquery02
12-17
【锋利的jquery】高清PDF 01，共6部分，全书190M。
jquery02
weixin_65795413的博客
03-19 602
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>课前抽查</title> <!-- 引入外部js=jquery类库--> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"&gt...
JQuery02
weixin_53233582的博客
05-31 103
三级联动
jQuery02 工具方法&属性
zsm030616的博客
03-18 538
先看思维导图： 今天聊到的是关于jQuery工具方法以及jQuery属性 工具方法 1.$.each()：遍历数组、对象、对象数组中的数据 2.$.trim()：去除字符串两边的空格 3.$.type(obj)：得到数据的类型 4.$.isArray(obj)：判断是否是数组 5.$.isFunction(obj)：判断是否是函数 6.$.parseJSON(obj)：解析json字符串转换为js对象/数组 注：这六个方法都是jQuery的工具方法，这些方法..
jQuery02工具方法&属性CSS
m0_68126539的博客
03-19 1141
01选择器的回顾 什么是jQuery以及其基本语法： 例如： 如何用jQuery去获取文本框的值? id="aa" $("#aa").val(); js的window.onload在jQuery里如何表示? $(document).ready(function(){}); $(function(){}) jQuery里如何动态设置样式css的? 单个属性和多个属性的区别? $("div...
JQuery02-JSON和AJAX的使用
小云很优秀
05-10 843
JSON 定义 JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript （欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 格式 JSON 就是一种有格式的字符串。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。 规则如下: 映射用冒号（“:”）表示。”名称” : 值，标准格式名称用双引号括起来； 并
jQuery02--工具&属性&CSS
qq_63531917的博客
03-17 767
工具方法 $.each() 遍历数组、对象、对象数组中的数据 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 遍历对象 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", ...
jQuery_02
weixin_67856139的博客
03-11 347
$ 1.$是什么？ $(function(){}); 如果使用上述语句报错了 $ is not deifned，就说明没有引入jQuery文件。 2.jQuery文件结构 其实时一个自执行函数 (function(){ window.jQuery = window.$ = jQuery }()); 3. a.引入一个js文件，是会执行这个js文件中的代码的 b.jQuery文件时一个自执行函数，执行这个jQuery文件中的代码，其实就是在执行这个自执行函数 c.这个自执行文件就是windo...
jQuery02&工具&属性&CSS
m0_65795902的博客
03-17 677
今天主要讲jQuery的工具和属性和css 1思维导图 1.工具方法 1.1如何使用工具方法：代码展示 2 属性 2.1jQuery属性该如何使用 关于全选的方法 拿值和设置值 优化表格隔行换色 attr（）和addclass（）的区别 3、css 底层代码展示 网页界面 ...
jQuery02——jQuery操作属性、元素、元素尺寸、位置
小白的学习路
12-16 216
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 语法 注意:prop() 除了普通属性操作，更适合操作表单属性:disabled / checked / selected 等。 1.1.2 元素自定义属性值 attr() 用户自己给元素添加的属性，我们称为自定义属性。 比如给 d
jquery文档02
06-20
jquery文档02
Jquery第02天.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
lab02-JQuery
03-27
在"lab02-JQuery"这个实验项目中，我们将深入探讨 jQuery 的核心概念和常见用法。 ### 1. jQuery 的基本使用 jQuery 的引入通常通过 `<script>` 标签在 HTML 文件中完成。引入 jQuery 后，我们可以通过 `$` 或 `...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1118
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 162
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 588
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
jQuery实现省市区联动效果
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAs5In0-0HWhAOT02sn4PouxTN_ou44HV0kOg00GnPU25UF-c_JhSJfeLjDAYNXJb7u8YdHu7w6opn0g&sensor=false" type="text/javascript"> ``` 接下来，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值