jQuery框架的学习笔记

本文是关于jQuery框架的学习笔记,详细探讨了jQuery的基础语法、选择器的使用,包括ID选择器、class选择器、HTML选择器等,并讲解了如何修改HTML对象的属性、CSS样式,如attr()、html()、css()和addClass()函数的应用,以及如何控制表格奇偶行颜色等。
摘要由CSDN通过智能技术生成

jQuery是一个JavaScript的框架

jQuery的基本语法格式
1 选择器 - css选择器
2 事件 - js中的事件 例如:onclick
3 方法 - jQuery中封装的方法

语法格式:  		$(选择器).action()
action可以是事件,也可以是方法

修改HTML对象(HTML标签)的属性

attr()函数

在jQuery中提供了一个attr()函数
作用:获取或设置属性的值
格式:
$(选择器).attr(“属性名称”[,”属性值”]);

获取:
	
$(选择器).attr(“属性名称”);

设置:
$(选择器).attr(“属性名称”, “属性值”);

html()函数

作用:获取或设置对象的innerHTML属性的值
格式:$(选择器).html([“值”]);
获取:$(选择器).html();
设置:$(选择器).html(“值”);

text()函数

作用: 获取或设置对象的innerText属性的值

val()函数

作用: 获取或设置对象的value属性的值

使用json格式一次设置多个属性

格式:	$(选择器).attr(json对象)
保证:	json的key与html对象的属性一致
$("#img1").attr({"src":"imgs/Hokage.PNG", "alt":"三代目", "title":"火影老头"});

修改HTML对象的CSS样式

css()函数

作用:获取或设置对象的css样式属性的值
格式:
$(选择器).css(“属性名称”[,”属性值”]);

获取:
$(选择器).css(“属性名称”);

设置:
$(选择器).css(“属性名称”, “属性值”);

设置多个样式属性:
$(选择器).css({“样式属性1”:”值1”, “样式属性2”:”值2”, … , “样式属性N”:”值N”});

addClass()函数

设置样式的类选择器
格式:$(选择器).addClass(“CSS类选择器名称”);
.divCls{
	border:1px solid red;
	height:100px;
	background-color:#999999;
}
<link rel="stylesheet" type="text/css" href="css/style.css">
$("#btn1").click(function(){
	$("#div1").addClass("divCls");
});

选择器

选择器的作用:在HTML页面上找到对应的元素

ID选择器

$(“#id属性的值”)  按照HTML元素的id属性查找元素

class选择器

$(“.class属性的值”)  按照HTML元素的class属性查找元素

HTML选择器

$(“HTML标签名”)   按照HTML元素的名称查找元素

选择器

$(“*”)  选取所有HTML页面元素

并列选择器

$(“s1, s2, … ,SN”)  满足其中任意一种的都可

后代选择器

$(“s1 s2”)  在选择器1对应的元素中,所有选择器2的元素

子元素

$(“s1>s2”)  在选择器1对应的元素中,所有选择器2的子一级元素

下一个选择器

$(“s1+s2”)  与选择器1平级的紧挨着的下一个选择器2的元素

兄弟选择器

$(“s1~s2”)  选择器1的选择器2兄弟元素

控制表格奇偶行的颜色

$("tr:even"):选取偶数位置的 <tr> 元素,注意下标从0开始;

$("tr:odd"):选取奇数位置的<tr>元素,注意下标从0开始。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值