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可见性过滤选择器
通过元素显示状态来选取元素
注意:
选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的效果
小结: