第一章 jQuery基础

1 jQuery简介

jQuery 是一款跨主流浏览器的 JavaScript 库,封装了 JavaScript 相关方法调用,简化JavaScript 对 HTML DOM 操作

jQuery 是一个快速,小巧,功能丰富的 JavaScript 库。 它通过易于使用的 API 在大

量浏览器中运行,使得 HTML 文档遍历和操作,事件处理,动画和 Ajax 变得更加简单。 通

过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。

2 获取jQuery

官网下载地址:Download jQuery | jQuery

2.1jQuery库分开发版和发布版

名称

大小

说 明

jquery-3.版本号.js(开发版)

286KB

完整无压缩版本,主要用于测试、学习和开发

jquery-3.版本号.min.js(发布版)

94.8KB

经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目

对于每一个同一版本号的 jQuery,其库又分为两个。一个是未压缩版,可查看源码,

开发时使用;一个是压缩版,将注释、空格均做了删除,将变量字符数减少,产品上线时使

2.2 jQuery的引入

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

2.3 jQuery 的快速入门

  1. 使用 jQuery,首先要将 jQuery 库引入。使用如下语句:

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

  1. $(document),将 DOM 对象 document 转换为 jQuery 对象。$(document).ready()函数是当DOM 对象加载完毕后,马上执行的函数。
  2. $(document).ready()与$()、jQuery()、window.jQuery()是等价的,所以$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

代码示例

2.4 jQuery基本语法

使用jQuery弹出提示框

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

$(document).ready()

$(document).ready()与window.onload类似,但也有区别

3 DOM对象和jQuery对象

3.1DOM对象转换jQuery对象:

使用$(DOM 对象) 方式,可以 DOM 对象转换为 jQuery 对象, 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法,操作 DOM 对象。一般情况下,在命名 jQuery 对象时,为了与 DOM 对象进行区分,习惯性的以$ 开头,这不是必须的。例:

3.2 jQuery对象转为DOM对象

jQuery 对象本身为数组对象,该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM

对象。所以有两种方式可以获取到 DOM 对象:get(0) 方式与下标[0]

4 jQuery选择器

4.1 jQuery基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

标签选择器

$(document).ready(function(){
  $("dt").click(function(){
    $("dd").css("display","block"); 
  });
  $("h1").css("color","blue");
})

类选择器

类选择器根据给定的class匹配元素

$(".price").css({"background":"#efefef","padding":"5px"});
//这里注意一下  加{}可以按照对象的形式  进行设置多个css属性

ID选择器

ID选择器根据给定的id匹配元素

$("#author").css("color","#083499");

并集选择器

并集选择器用来合并元素集合

$(".intro,dt,dd").css("color","#ff0000");

全局选择器

全局选择器可以获取所有元素

$("*").css("font-weight","bold");

4.2 jQuery层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

后代选择器

后代选择器用来获取元素的后代元素

$(".textRight p").css("color","red");

子选择器

子选择器用来获取元素的子元素

$(".textRight>p").css("color","red");

相邻选择器

相邻选择器用来选取紧邻目标元素的下一个元素

$("h1+p").css(text-decoration","underline");

同辈选择器

同辈选择器用来选取目标元素之后的所有同辈元素

$("h1~p").css("text-decoration","underline");

4.3 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");

属性选择器可以指定属性值以指定值开头的元素

a标签href属性值以www开头

$("#news a[href^='www']").css("background","#c9cbcb");

a标签href属性值以html结尾

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

5 过滤选择器

主要分类

  • 基本过滤选择器
  • 可见性过滤选择器
  • 表单对象过滤选择器
  • 内容过滤选择器、子元素过滤选择器……

5.1 基本过滤选择器

5.2可见性过滤选择器

6 总结

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值