是时候复习一下jQuery了

野性酷女 2023-02-17 06:27 37阅读 0赞

本次复习的内容：

*  jQuery中如何获取对象
 *  jQuery中如何设置对象样式
 *  jQuery中如何设置class名相同的对象的样式  
    css代码部分：

<style type="text/css">
    		#one{ 
    			width: 300px;
    			height: 300px;
    			background-color: red;
    			font-size: 100px;
    		}
    		.two{ 
    			font-size: 30px;
    			color: red;
    		}
    	</style>

html代码部分：

<div id="one">one</div>
    		<div class="two">1</div>
    		<div class="two">2</div>
    		<div class="two">3</div>
    		<div class="two">4</div>
    		<input type="text" id="inp">

js代码部分：

<script type="text/javascript">
    		// jQuery是一个快速,小巧,功能丰富的JavaScript库,是对原生JS的封装;
    		// 原生JS中,
    		var oneDiv = document.getElementById("one");
    		oneDiv.style.color = "white";
    		//JQ中,使用 jQuery(选择器或者对象) jQuey简写成$ 获取该标签元素对象
    	    // jQuery("#one") 
    		$("#one").css("color","yellow");
    		// $("#one").style.color = "blue"; //错误
    		// oneDiv.css("color","pink"); //错误
    		$(oneDiv).css("color","green");//正确
    		//2.html()方法,相当于JS中的innerHTML 
    		$("#one").html("云松");
    		$("#one").html("<a href='###'>百度</a>");
    		// 3.text() ---- JS中的 innerText
    		$("#one").text("<a href='###'>百度</a>");
    		var a = $("#one");
    		a.css("width","800px");
    		//为所有的class名 为two设置样式
    		$(".two").css("color","yellow");
    		
    		$(".two").css("font-size",function (i,v){ 
    			// console.log(i);
    			// console.log(v);
    			return (i + 1) * 30 + "px";
    		});
    		
    		
    // 第一个参数:i 返回JQ对象div所在的下标,
    // 第二个参数:v 之前对象对应的属性值;
    		var arrName = ["佳豪","财源","梦珂","丹依"];
    		$(".two").html(function (i,v){ 
    			return arrName[i];
    		});
    		
    		//设置输入框的value值 
    		$("#inp").val("张斌");
    		// 取值
    		$("#inp").val();
    		
            		
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关好久不用 jQuery，来复习一下

1.1 简介 1.1.1 概述 jQuery 是一个优秀的 JavaScript 库，是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在

傷城~/ 2023年02月20日 06:16/ 0 赞/ 154 阅读

相关是时候复习一下jQuery了

本次复习的内容： jQuery中如何获取对象 jQuery中如何设置对象样式 jQuery中如何设置class名相同的对象的样式 css代码部分

野性酷女/ 2023年02月17日 06:27/ 0 赞/ 38 阅读

相关是时候复习下 Webpack 了

点击上方关注前端技术江湖，一起学习，天天进步 ![13e72a6b2b9ccadbaa711260f2dd9d57.png][] 一直以为，我的`Webpack`就是复制

悠悠/ 2022年09月13日 13:28/ 0 赞/ 252 阅读

相关复习一下Kafka

一、前言前几天看了一篇《打造全球最大规模Kafka集群，UBER的多区域灾备实践》的一篇博客，Uber用kafka实践，每天处理数亿级消息和几个PB的数据，kafka现

桃扇骨/ 2022年08月30日 01:45/ 0 赞/ 166 阅读

相关 XPage系列|是时候抛弃ButterKnife了

前言 > 作为 [X-Library系列框架][X-Library] 的灵魂所在，[XPage][] 开源两年以来，一直致力于降低Fragment使用的难度，努力实现一个

ゞ浴缸里的玫瑰/ 2022年08月29日 00:05/ 0 赞/ 177 阅读

相关该是回归的时候了

离开了这个微博很久久到发生了很多很多的事情生了个孩子，现在快9个月了换了个工作，已经到新公司1个月了原来只是颗螺丝钉，现在什么都要自己亲力亲为嗯，失眠好了，

缺乏、安全感/ 2022年06月10日 08:13/ 0 赞/ 321 阅读

相关阿朱，是时候拥抱 Linux 了

阿朱，是时候拥抱 Linux 了！作者：赖勇浩（[http://blog.csdn.net/lanphaday][http_blog.

左手的ㄟ右手/ 2022年02月05日 01:25/ 0 赞/ 371 阅读

相关是时候了解下 nacos 了！

点击上方牧码小子，选择置顶或者星标原创技术干货每日送达！本文由读者 muggle 投稿，muggle 是一位具备极客精神的 90 后单身老实猿，对技术有着狂热追求。mug

分手后的思念是犯贱/ 2021年10月15日 12:59/ 0 赞/ 451 阅读

相关你知道多态的实现机制吗?是时候好好回顾一下了！

你知道多态的实现机制吗?是时候好好回顾一下了！ > Java面向对象的三大特征是封装，继承和多态，这里面我觉得比较难理解的应当属于多态了，而且多态也是一个经常被考查的问题

亦凉/ 2021年09月16日 04:58/ 0 赞/ 212 阅读

相关是时候了解一下 Java 8 新增的函数式接口 Predicate 了

Predicate 是 Java 8 新增的一个函数式接口（通过 `@FunctionalInterface` 注解定义），因此可以将一个 [Lambda 表达式][Lambd

阳光穿透心脏的1/2处/ 2021年08月10日 15:30/ 0 赞/ 297 阅读