JQuary学习之路---初始JQuary

JQuary:

JQuary概述:

  • 访问和操作DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jQuery插件
  • 与Ajax技术完美结合

第一个JQuary项目:

首先在JQuary官网下载JQuary文件:
JQuary官网

jQuery库分开发版和发布版:
在这里插入图片描述
我们用压缩版的就可以,下载完后粘贴到js文件夹中,在html中引入对应的文件

<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

第一个JQuary程序

JQuary语法:

$(selector).action()

使用JQuary弹出一段话:

<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery,势必攻克之!");
    });
</script>

ready:为页面加载事件绑定方法

$(document).ready()与window.onload类似,但也有区别:
在这里插入图片描述

JQuary选择器:

JQuary的选择器与css中的选择器基本相同:
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
在这里插入图片描述

标签选择器:

<body>
	<div>测试JQuary选择器</div>
	<div class="test1">
		<h1>test1</h1></div>
</body>
<script>
	$("div").css("color", "red");
	$(document).ready(function() {
		alert("我欲奔赴沙场征战jQuery,势必攻克之!");
	});
</script>

在这里插入图片描述

类选择器:

$(".price").css({"background":"#efefef","padding":"5px"});

其中的css内容为JSON字符串格式
在这里插入图片描述
其余选择器不再一一列举

jQuery层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素
在这里插入图片描述

jQuery属性选择器

属性选择器通过HTML元素的属性来选择元素
在这里插入图片描述

属性选择器可以根据是否包含某属性来选取元素:

示例:
a标签带有class属性:

$("#news a[class]").css("background","#c9cbcb");

在这里插入图片描述

属性选择器可以根据属性的值来选取元素

class属性值为hot

$("#news a[class='hot']").css("background","#c9cbcb");

在这里插入图片描述

属性选择器可以指定选取不等于属性是某个特定值的元素

class值不等于hot

$("#news a[class!='hot']").css("background","#c9cbcb");

在这里插入图片描述

JQuary基本过滤选择器

相当于css中的nth-child()等来选择第几个:
在这里插入图片描述
在这里插入图片描述

JQuary可见性过滤选择器

通过元素显示状态来选取元素
在这里插入图片描述
注意:
选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的效果
在这里插入图片描述
小结:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

牛总来学习了

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

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

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

打赏作者

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

抵扣说明:

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

余额充值