jQuery的$工具方法和属性

于 2022-03-17 23:47:20 发布
阅读量1.3k 收藏 1
点赞数 8
分类专栏： jQuery 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65211978/article/details/123562992
版权

目录

一、思维导图

一、jQuery的$工具方法

 二 、jQuery属性和CSS

一、思维导图

我是小陽，欢迎大家来看我的文章。我们先看一下思维导图来理一下思路，然后在进入方法讲解

一、jQuery的$工具方法

1.1$each()：遍历数组，对象，对象数组中的数据

对象：

                //定义对象
				var stu={"name":"张小凡","age":38};
				//遍历对象
				/* $.each(stu,function(k,v){
					console.info(v);
				}) */
				console.info(stu.name,stu.age);

结果如下：

两种遍历都是可以运行的

数组：

                 //定义数组
				 var names=["张小凡","张大凡","白大纯","沈以诚","白小纯"];
				//遍历数组
				$.each(names,function(i,n){
					console.info(n);
				})

结果如下：

 对象数组：

                //定义对象数组[{}]
				var stus=[{"name":"张小凡","age":30},{"name":"白小纯","age":20}];
				//遍历对象数组
				$.each(stus, function(i, stu) {
					// console.info(stu.name,stu.age);
					$.each(stu, function(a, b) {
						console.info(b);
					})
				})

结果如下：

 由此可见$.each 遍历对象、数组 {一个键对应一个值，用:隔开，键与键之间用','隔开}

1.2 $.trim 去除前后空格

                   var str="   abc   ";
				// alert(str.length);
				console.info($.trim(str).length);

结果：

 1.3 $.type(obj) 得到变量的数据类型

            var str =12.6;//number
			var stu={"name":"张小凡","age":38};//object
			var stus=[{"name":"张小凡","age":30},{"name":"张大凡","age":38}];//array
			console.info($.type(stus));

结果如下：

 1.4 $.isArray()判断是否是数组

				var stu={"name":"白小纯","age":20};//false
				var stus=[{"name":"白小纯","age":25},{"name":"白大纯","age":30}];//true
				console.info($.isArray(stus));

结果如下：

 1.5 $isFunction()判断是否是函数

注意：这里要代入函数的时候带括号为false，不带为true

           var stus=[{"name":"张小凡","age":16},{"name":"张大凡","age":20}];
				// console.info($.isFunction(myf));//true
				console.info($.isFunction(myf()));//false 
				function myf(){
					alert(1);
				}

结果为：false;

1.6 $.parseJSON()将json格式的字符串-->js的对象或者数组（这里是重点！）

				 var stus='{"name":"张小凡","age":19}';
				console.info($.type(stus));//string
				var stu = $.parseJSON(stus);//not available
				console.info($.type(stu));//object		 json格式的字符串-->js对象
				//遍历
				console.info(stu.name,stu.age);
				 $.each(stu,function(k,v){
					console.info(v);
				})

结果如下：

将json格式的字符串-->js的对象数组（这里是重点！）

 

				var stusStr = '[{"name":"张小凡","age":38},{"name":"白小纯","age":39}]';
				console.info($.type(stusStr));//string
				var stus = $.parseJSON(stusStr);
				console.info($.type(stus));//array
				
				//遍历
				$.each(stus,function(a,b){
					// console.info(b.name,b.age);
					$.each(b,function(k,v){
						console.info(v);
					})
				})

结果入下：

 

 二 、jQuery属性和CSS

2.1 attr() 拿属性值和设置属性值

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.1 attr() 拿属性值和设置属性值
			var mpath = $("#aa").attr("src");//拿值
			console.info(mpath);
			//给某个属性设置值
			$("#aa").attr("src","img/5.jpg");//设值
			$("#aa").attr("width","100px");
			
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

2.3 addClass()  增加样式值
     

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xx {
				border: 1px solid red;
			}
			</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.3 addClass()  增加样式值
			$("#aa").addClass("xx");
			
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

2.4 removeClass() 删除某个标签属性值

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xx {
				border: 1px solid red;
			}
			</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.3 addClass()  增加样式值
			$("#aa").removeClass("xx");//class仍然在 值会被移除掉
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

2.5 prop() 和attr类似  prop与attr的区别

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.5 prop() 和attr类似  prop与attr的区别
			//给img标签增加name值
			$("#aa").attr("name","abc");
			$("#aa").prop("name","abc");
			$("#ok").click(function(){
				$(".aaa").prop("checked",true);
			})
			
			$("#nook").click(function(){
				$(".aaa").prop("checked",false);
			}) 
			//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
			//attr和addClass的区别
			//attr:会覆盖之前的样式
			//addClass:会前调用原来的样式 再调用加的样式
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
		<input type="checkbox" class="aaa" value="凡人修仙传" />凡人修仙传
		<input type="checkbox" class="aaa" value="写CSDN" />写CSDN
		<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" /><br />
	</body>

2.6 val()  拿值 设值 

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.6 val()  拿值 设值
			var aa = $("#bb").val();//拿值
			console.info(aa);
			$("#cc").val("你好，世界");//设值
			})
		</script>
	</head>
	<body>
		<input type="text" id="bb" value="你好" />
		<input type="text" id="cc" />
	</body>

结果如下：

 2.7 html() 和text() 的区别

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.7 html() 和text() 的区别
			var a = $("p").html();//会拿到子标签
			console.info(a);
			var b = $("p").text();//不会拿到子标签 只会打印纯文本
			console.info(b);
			})
		</script>
	</head>
	<body>
		<p>张小凡和<span>白小纯</span>的修仙故事</p>
	</body>

如图：

优化隔行换色：

.使用[addClass()]属性；

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cc {
				background-color: azure;
			}
		
			.dd {
				background-color: beige;
			}
		</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//优化隔行换色
			$("table tr:even").addClass("cc");
			$("table tr:odd").addClass("dd");
			})
		</script>
	</head>
	<body>
		<table border="1px" width="50%">
			<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>

 如图：

好了，我的讲解已经结束了，愿大家能健康的生活，一起通过论坛来进步，加油！我是小陽，欢迎大家来看我的文章。

歐陽。
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jQuery中的‘$‘是个啥？
夏商周
08-25 456
把jquery.js源码文件稍微收缩一下，大致看一下在html文件中引入这个js文件时，执行了什么： ( function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { module.exports = global.document ? factory( global, true ) : functi
jQuery（一）--概述、$()函数（选择器、伪类等）
小白小白从不日别的博客
05-01 2236
一、概述 1.本质：快速简洁的JavaScript框架是继Prototype之后的又一个优秀的JavaScript库（或JavaScript框架） jQuery有非常便利的选择元素的能力，用一个$()函数就能搜寻页面上的元素；$是jQuery的别称（另外的名字），在代码中可以使用jQuery代替$，但一般为了方便，通常都是直接用$ $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法 jQuery的操作...
jQuery_02 快速入门 $作用和方法
m0_60786924的博客
03-11 495
jQuery中"$"及方法 1.是一个函数，来源于jQuery库中； 2.自执行函数；（无需调用，自己调用自己，自动执行） 3.jQuery中的"$"作为window对象的一个属性； 3.1.$("") ...
JQuery中$()函数的7种用法总结
罗小辉的专栏
04-15 1662
前言 最近项目中需要用到jQuery，而jQuery中最重要的概念应该就是这个$符号了，特意总结了下$()函数的几种用法。 jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达...
jQuery之$冲突问题
line233的博客
11-27 3601
 $在jQuery中是一个函数，$的参数不同，则实现的功能不同，但是$作为一个符号，可能与其他文件中的定义名称相冲突，在jQuery中含有$,比如说在另一个itcast.js文件中也存在一个$,$的定义见下方： 定义为一个对象，var $ = {name: "lalala",age:18} index.html中要同时使用jQuery文件和itcast文件，那么就会引起$冲突问题，并且后引入的...
JQuery $.each遍历JavaScript数组对象实例
10-25
在JavaScript和jQuery中，`$.each`函数是一个非常实用的工具，用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中，我们将深入探讨如何使用`$.each`处理JSON数据，特别是从JSON字符串...
jQuery操作属性和样式详解
10-22
本文将深入探讨jQuery如何操作属性和样式，帮助开发者更好地理解和应用这一强大的工具。 首先，我们需要理解DOM（Document Object Model）属性与元素属性的区别。在HTML中，像`id`、`src`和`alt`这样的属性被称为...
浅谈jQuery操作类数组的工具方法
11-29
在这种情况下，JQuery提供了几个常用的属性和方法来操作JQuery对象。 length:该属性返回JQuery里包含的DOM元素的个数。 context：该属性返回获取该JQuery对象传入context参数 JQuery：该属性返回JQuery的版本 each...
jQuery HTML设置内容和属性操作实例分析
10-15
本文将深入解析如何使用jQuery设置内容和属性，通过实例分析相关函数及其注意事项。 首先，我们来看如何设置内容。jQuery提供了三种方法来处理元素的内容：`text()`, `html()`, 以及 `val()`。 1. `text()` 方法...
jquery里的each使用方法详解
12-02
jQuery和jQuery对象都实 现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素...
解决jQuery的$冲突问题
Preeminent
02-27 6057
解决jQuery的$冲突问题很多JavaScript的库使用$作为变量名，如果我们同时引用两个使用$作为变量名，或者引入两个不同版本的jQuery时，就可能会出现$冲突问题。作为解决办法，我们可以使用jQuery.noConflict()来解决这个问题。jQuery.noConflict()jQuery.noConflict()的作用是放弃jQuery控制$ 变量。具体应用方法方法一一种方法是使用j
jquery中 $ 和 jQuery 及 $() 的区别
枫飘瞬间
08-15 8403
用过jquery的人都知道，jquery有两种用法，一种是$，还有一种是jQuery，那么这两种方式在使用上有什么区别呢？         答案是这两种用法没什么区别，只是别名而已，用$要比jQuery简短一些、方便一些，另外其他的前端框架也都用到$符号，如果想不跟其他框架冲突，建议使用jQuery方式。         还有种方法就是换一个新的缩写： 1、调用jquery的noConf
【jQuery 教程系列第 6 篇】jQuery 中的 $ 符号是什么
“Allen Su”的博客
01-30 2926
jQuery 中的 $ 符号是什么 $ 符号常用的参数有哪些
jQuery $工具方法&属性&CSS
weixin_62270300的博客
03-16 990
目录 一、工具方法 1.1$.each():遍历数组、对象、对象数组中的数据 遍历数组 遍历对象 遍历对象数组 1.2$.trim():去除字符串两边的空格 1.3$.type(obj):拿到数据的类型 1.4$.isArray(obj):判断是否是数组 1.5$.isFunction(obj):判断是否是函数 1.6$.parseJSON(obj):解析json字符串转换为js对象/数组 二、jQuery属性 2.1 arrt():获取某个标签属性的值，或者设置某个标签属性的值
jq中$冲突问题处理
WY001的博客
04-25 698
test.js: var $ = 123; 引入test.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js">...
jQuery常见方法汇总
weixin_43866830的博客
04-20 3277
jQuery常见方法一、遍历筛选元素的方法find()children()siblings()first()eq()parent()filter()end()二、获取设置标签属性值的方法三、获取和设置元素尺寸位置样式的方法四、HTML文档结构处理的方法 一、遍历筛选元素的方法 find()   find(selector)方法实现的是找出正在处理的元素的后代元素的功能，这里只能找到 children()   children(selector)方法实现的功能与find()类似，但是不同的是，children
$().attr() 和 $().css的区别
banjing_1993的博客
03-21 4923
 最近调整前台的时候发现 使用jquery的.attr( )方法去给div隐藏，我是这样写的 $("#div_id").attr("display","none"),发现并没有生效，但是docunment.getElementById("div_id").style("display","none")就生效了。 而且再调试的时候发现，使用$("#div_id").att
$("xxx").attr添加属性的时候不好用
weixin_34218579的博客
01-11 300
　　今天在工作中碰到了使用$(this).attr("selected","selected")为option属性添加默认值时发现时而好用 　　时而不好用，后经百度发现 　　1、在设置标签固有属性的时候使用$(this).prop("selected","selected")方法 　　如：　 <select id=""></select> 其中的id属性为标签...
基于点击和滑轮事件的任意缩放和平移HTML中SVG解决方案
SL_World的博客
04-08 3698
SVG概述：SVG是可缩放矢量图形(Scalable Vector Graphics)，它基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。 Tips 欲看以下完整代码、js文件和svg文件，请移步我的GitHub。 一、SVG特点简述 百度上有SVG的一大堆介绍，这里就不细细说明，仅摘出重点，SVG主要特点是： 不失真——因为是矢量图 支持任意缩放——可用于地图存储 存储介...
jquery弹出新窗口的属性
最新发布
06-02
您可以使用 jQuery 的 `window.open()` 方法来弹出一个新窗口，并设置该窗口的属性。以下是一个示例代码： ```javascript $(document).ready(function() { $('#openWindowBtn').on('click', function() { var url = 'https://www.example.com'; var windowName = 'exampleWindow'; var windowSize = 'width=800,height=600'; var windowPosition = 'left=100,top=100'; var windowFeatures = windowSize + ',' + windowPosition; window.open(url, windowName, windowFeatures); }); }); ``` 在这个示例中，我们使用了 `window.open()` 方法来弹出一个新窗口，并设置了该窗口的 URL、名称、大小和位置。其中，`url` 是弹出窗口的 URL，`windowName` 是弹出窗口的名称，`windowSize` 是弹出窗口的大小，`windowPosition` 是弹出窗口的位置，`windowFeatures` 是弹出窗口的属性，包括大小和位置。 您可以根据需要来设置 `windowSize` 和 `windowPosition` 的值，以满足您的需求。您还可以设置其他的属性，例如窗口的工具栏、菜单栏、状态栏、地址栏等，具体请参考 `window.open()` 方法的文档。 另外，需要注意的是，由于弹出窗口的行为容易被浏览器的广告拦截器阻止，因此您需要确保在用户单击按钮时，弹出窗口是由用户意愿触发的，而不是自动触发的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

歐陽。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值