jQuery的基本使用

最新推荐文章于 2022-12-08 11:29:06 发布

`Pluto.

最新推荐文章于 2022-12-08 11:29:06 发布

阅读量80

点赞数 4

分类专栏：脚本语言 jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/iron_nini/article/details/120510874

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

脚本语言

2 篇文章 0 订阅

订阅专栏

** jQuery是一个快速简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。**

1. jQuery预加载

一个脚本中可以包含很多个jQuery的预加载，但在J中预加载的系统事件只能出现一次(出现多个后者会覆盖前者)

$(document).ready(function(){

})

$(function(){

})

以上两种写法都是jQuery的预加载，但我们一般使用第二种简写的方式。

2. jQuery对象

用jQuery方式获取过来的对象为jQuery对象（通过$把DOM元素进行了包装）

<html>
	<div>
		<p></p>
	</div>
</html>
<script>
	$("div"); // 通过$获取div元素
	$("div p");  // 通过$获取 div元素下的p元素
</script>

3. jQuery操作样式-----css

在jQuery中，我们要动态的修改style属性可以使用css()方法实现 .css()方法：获取元素样式属性的计算值或者设置元素的css属性

获取元素样式：

.css(properyName，)：获取匹配元素集合中的第一元素的样式属性的计算值
.css(properyNames)：传递一组数组，返回一个对象结果

设置元素样式：

.css(properyName，value)：设置css
.css(properyName，function)：可以传入一个回调函数
.css(properties)：可以传一个对象，同时设置多个样式

<html>
	<div class='one'> 设置背景颜色 </div>
	<div class='two'> 设置字体 </div>
	<div class='three'> 通过回调函数设置新的值 </div>
	<div class='four'> 同时设置多个样式 </div>
</html>
<script>
	$(".one").css("background","red");
	$(".two").css("font-size","20px");
	$(".three").css("width",function(index,value){
	// value带单位，要先分解 例：100px = [100,'px']
		value = value.split('px');
		// 返回一个新的值，在原有的值上增加了50px
		return (Number(value[0]) +50) + value[1];
	});
	$(".four").css({
	// 合并设置，同时设置多个样式
		'font-size': '15px',
		'background': '#eee',
		'border': '1px solid blue',
		'color': 'red'
	})
</script>

`Pluto.

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery的基本使用

** jQuery是一个快速简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。**1. jQuery预加载一个脚本中可以包含很多个jQuery的预加载，但在J中预加载的系统事件只能出现一次(出现多个后者会覆盖前者)$(document).ready(function(){})$(function(){})以上两种写法都是jQuery的预加载，但我们一般使用第二种
复制链接

扫一扫