五、 jQuery 基础

落败.

已于 2024-01-25 23:23:08 修改

阅读量142

点赞数

分类专栏： jQuery 文章标签： jquery 前端 javascript java

于 2023-08-01 11:12:52 首次发布

本文链接：https://blog.csdn.net/m0_72166275/article/details/132038038

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

五、jQuery 基础

5.1 初始 jQuery

使用 JavaScript 可以实现网页与用户之间的交互，但 JavaScript 自身仍存在许多弊端。
因此出现很多对 JavaScript 的封装库，如 Prototype、Dojo、ExtJS、jQuery等。

5.1.1 jQuery 简介

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。
jQuery 支持目前的主流的浏览器
- Chrome、Edge、Firefox、IE9+、Safari 和 Opera。

注意: jQuery 并不是代替 JavaScript、jQuery 的内部仍然是调用 JavaScript 实现的。编写 jQuery 的代码、扩展插件等仍然需要 JavaScript 的技术。

5.1.2 编写 jQuery 程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function (){
        console.log("Hello,jQuery");
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mU7Z30f3-1690859361345)(E:/%E4%B8%BB%E9%A2%98/%E8%90%BD%E8%B4%A5/%E5%AD%A6%E4%B9%A0/Typora%E6%80%BB%E7%BB%93/S2/JavaScript/img/jQuery/image-20230418215218032.png)]

ready() 方法用于当前页面加载完成后执行，ready() 方法类似于 JavaScript 中的 window.onload 事件除法时执行的方法。
二者的区别：
- window.onload 事件绑定的方法必须等待网页中所有内容(包括图片、视频等) 加载完毕后执行。
- ready() 方法在网页中所有的 DOM 文档结构绘制完毕后执行，无须等待与 DOM 元素关联的内容 (包括图片、视频等) 全部加载完成。
- window.onload 事件不能同时编写多个，如果有多个只会执行最后一个。
- ready() 方法可以同时编写多个，将自上而下全部进行执行。

5.1.3 jQuery 语法结构

jQuery 的语句主要包括三大部分：$()、document 和 ready()
这三大部分在 jQuery 中分别被称为工厂函数、选择器和方法
语法结构如下

$(selector).action();

工厂函数 $()
- 美元符号等价于 jQuery，即 $()=jQuery()
- $() 的作用是将 DOM 对象转化为 jQuery 对象，只有将 DOM 对象转为 jQuery 对象后，才能使用 jQuery 方法
- 当 $() 的参数是 DOM 对象时，该对象无须使用双引号包括起来
选择器 selector
- jQuery 支持 CSS 1.0 到 CSS 3.0 规则中几乎所有的选择器，如标签选择器、类选择器、ID 选择器和后代选择器
- 使用 jQuery 选择器和 $() 工厂函数可以非常方便地获取需要操作的 DOM 元素
- 语法格式如下

$(selector)

ID 选择器、标签选择器、类选择器的用法如下所示

$("#userName");			//获取 DOM 为 id 为 userName 的元素
$("div");				//获取 DOM 中所有的 div 元素
$(".content");			//获取 DOM 中 class 为 content 的元素

方法 action()
- jQuery 中提供了一系列方法，在方法中，一类重要的方法就是事件处理方法
- 主要是用来绑定 DOM 元素的事件和事件处理方法
- 许多基础事件、如鼠标事件、键盘事件和表单事件等、都可以通过事件方法进行绑定
- 对应的在 jQuery 中则写作 click()、mouseover() 和 mouseout() 等

jQuery 中常用的方法

方法名	描述
jQuery对象.addClass([样式名])	向被选元素添加一个或多个类样式，样式名可以是一个，也可以多个多个样式名需要用空格隔开
jQuery对象.css(“属性”,“属性值”);	为匹配的元素添加一个 CSS 样式
jQuery对象.css(“属性1”:“属性值1”,“属性2”:“属性值2”,…);	为匹配的元素同时这是多个 CSS 属性
jQuery对象.children();	查找匹配的元素的所有直接的子元素
jQuery对象.siblings();	查找除匹配的元素的所有兄弟元素
jQuery对象.next();	返回匹配元素的下一个同辈元素
jQuery对象.show();	显示匹配对象元素
jQuery对象.hide());	隐藏匹配对象元素

5.1.4 jQuery 程序的代码风格

“$” 的使用
- 在 jQuery 程序中，使用最多的时美元符号 “$”
- 无论是页面元素的选择器，还是功能函数的前缀，都必须使用该符号
- 它是 jQuery 程序的标志，即 $ 等同于 jQuery
链式操作
- jQuery 代码中采用了一种链式编程模式
- 它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便于将返回结果应用于该对象的下一次操作
- 代码示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>你是人间的四月天</title>
    <link rel="stylesheet" href="css/april.css">
</head>
    <style>
    body,h1,h2,p,div{margin: 0; padding: 0;}
body{font-size: 14px; line-height: 28px; font-family: "΢���ź�";}
#book{
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    padding-top: 10px;
    }
img{float: left; margin-right: 10px;}
h1{font-size: 32px; line-height: 45px;}
.intro{clear: both; display: none;}
h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
.intro p{text-indent: 2em;}
.title{
    font-size: 24px;
    color: #0000ff;
}

    </style>
<body>
<div id="book">
    <img src="images/book.gif" /><h1>你是人间的四月天</h1>
    <p>
        笑响亮了四面风<br/>
        轻灵在春的光艳中交舞看变<br/>
        你是一月早天的云烟<br/>
        黄昏吹着风的软<br/>
        ....<br/>
        <a href="#" class="whole">查看全部</a><br/>
    </p>
    <div class="intro">
        <h2>内容简介</h2>
        <p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
        </p><p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”
    </p><p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
        她，就是那个万千宠爱于一身的一代才女——林徽因。
    </p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" >
    $(document).ready(function (){
        alert("ni");
        $("#book h1").click(function(){
            $(this).addClass("title").next().css("color","green");
        })

        $(".whole").click(function(){
            $(".intro").show();
        })
    })

</script>
</body>
</html>

由上面可以看出，在设置完 “class” 属性后，紧接着又在后面设置了下一个元素的字体颜色
这就是 jQuery 强大的连缀模式

隐式迭代
- 当获取多个元素时，设置元素字体时，不需要遍历所有元素，就可以直接设置元素的样式
- 这就是隐式迭代，在 jQuery 中获取一个集合后会默认遍历内部的所有元素

5.2 jQuery 选择器

在 jQuery 中想要对元素进行操作，第一步需要使用选择器获取页面元素，jQuery 选择器完全继承了 CSS 选择器的风格。
jQuery 提供给的选择器如下：
- 基础选择器
- 层次选择器
- 过滤选择器
- 表单选择器。

5.2.1 基础选择器

基础选择器是 jQuery 中最常用、最简单的选择器。
通过元素的 ID、标签名称、class 名称等标识来查找元素。

类型	语法	描述	返回值	示例
id 选择器	#id	根据指定的 id 匹配元素	单个元素	$(“#content”)选取 id 为 content的元素
类选择器	.class	根据指定的 class 名称匹配元素	元素集合	$(“.content”)选取 class 名称为 content 的元素
标签选择器	element	根据指定的标签名称匹配元素	元素集合	$(“p”) 选取所有的 p 标签元素
全局选择器	*	匹配所有元素	元素集合	$(“*”) 选取所有的元素
并集选择器	selector1, selector2, …,	将每个选择器匹配到的元素合并后一起返回	元素集合	$(“div,p,#content”) 选取所有的 div、p 和 id 为 content 的元素

5.2.2 层次选择器

jQuery 层次选择器用于处理元素之间的层次关系，如子元素、后代元素、兄弟元素和相邻元素。

类型	语法	描述	返回值
子选择器	parent>child	选择 parent 元素下所有的 child 子元素	元素集合
后代选择器	root siblings	匹配 root 元素里所有的 siblings 后代元素	元素集合
兄弟元素选择器	prev~siblings	匹配 prev 元素之后的所有兄弟元素	元素集合
相邻元素选择器	prev+next	匹配紧邻 prev 元素后的 next 元素	元素集合

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<section id="book">
    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>
<script type="text/javascript">
    $(document).ready(function (){
        $("h1+p,dt,dd").css("color","red");
        $("#jdPrice span:eq(0)").css("color","red")
        $("#jdPrice p").css("color","#d0d0ce")
        $("#ticket span").css("background","#fc0213")

        $("dl dt").click(function (){
            $("dd").css({"display":"block"});
        })
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zSfZlXEp-1690859361346)(E:/%E4%B8%BB%E9%A2%98/%E8%90%BD%E8%B4%A5/%E5%AD%A6%E4%B9%A0/Typora%E6%80%BB%E7%BB%93/S2/JavaScript/img/jQuery/image-20230418221642027.png)]

5.2.3 过滤选择器

语法	描述	返回值
:first	获取第一个元素	单个元素
:last	获取最后一个元素	单个元素
:not(selector)	去除所有与给定选择器匹配的元素	元素集合
:even	选取索引值为偶数的元素，索引 0 开始	元素集合
:odd	选取索引值为奇数的元素，索引 0 开始	元素集合
:eq(index)	选取一个给定索引值的元素，索引 0 开始	单个元素
:gt(index)	选取所有大于给定索引值的元素，索引 0 开始	元素集合
:lt(index)	选取所有小于给定索引值的元素，索引 0 开始	元素集合
:header	选取所有标题元素，如 h1~h6	元素集合
:focus	选取当前获取焦点的元素	元素集合
:animated	选取所有动画元素	元素集合

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全网热播视频</title>
    <link rel="stylesheet" href="css/play.css">
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
</head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>
<script type="text/javascript">
    $(document).ready(function (){
        $("ul>li:not(:last)").css("margin","10px");
        $("ul>li>span").css("background","#f1a20d")
        $("ol").css("background","#f0f0f0");
        $("ol li span:first").css("background","#ffa328");
        $("ol li span:not(:first)").css("background","#a2a2a2");
        $("ol>li:lt(5)").css("background","url(images/orange.jpg) right -4px no-repeat");
        $("ol>li:first").next().css("background","url(images/green.jpg) right -4px no-repeat");
        $("ol>li:gt(4)").css("background","url(images/green.jpg) right -4px no-repeat");
        $("ol>li").mouseover(function (){
            $(this).find(":hidden").show();
        }).mouseout(function (){
            $("ol>li>p:visible").hide();
        })

    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S7RarFdW-1690859361347)(E:/%E4%B8%BB%E9%A2%98/%E8%90%BD%E8%B4%A5/%E5%AD%A6%E4%B9%A0/Typora%E6%80%BB%E7%BB%93/S2/JavaScript/img/jQuery/image-20230418222452256.png)]

5.2.4 jQuery 属性过滤选择器

在 HTML 文档中，元素通常包含多个属性，除直接使用 id 和 class 属性作为选择器外，还可以根据各种属性获取相应的元素。

语法	描述	返回值
[ attribute ]	选取包含指定属性的元素	元素集合
[ attribute=value ]	选取指定属性为 value 的元素	元素集合
[ attribute!=value ]	选取指定属性不等于 value 的元素	元素集合
[ attribute^=value ]	选取指定属性以 value 开始的元素	元素集合
[ attribute$=value ]	选取指定属性以 value 结束的元素	元素集合
[ attribute*=value ]	选取指定属性包含 value 的元素	元素集合

5.3 DOM 对象和 jQuery 对象

5.3.1 jQuery 对象与 DOM 对象的相互转换

DOM 对象：通过 DOM 的方法获取的元素节点就是 DOM 对象及 DOM元素

jQuery 对象：通过 jQuery 包装 DOM 对象后产生的对象

DOM 对象和 jQuery 对象都由一些特有的方法

DOM 对象无法调用 jQuery 对象的方法

jQuery 对象也无法调用 DOM 对象的方法

这就需要用到对象的相互转换了

1、将 jQuery 对象转为 DOM 对象

jQuery 对象类似于一个数组的对象，可以通过 [index] 的方法得到相应的 DOM 对象
格式如下

var $txtName=$("#txtName");		//jQuery 对象
var txtName=$txtName[0];		//DOM 对象

jQuery 对象转换成 DOM 对象在实际开发中并不多见
除非希望使用 DOM 对象特有的成员

2、DOM 对象转换成 jQuery 对象

将 DOM 对象使用函数 $() 包装起来，就可以获得一个 jQuery 对象
格式如下

var txtName=document.getElementById("txtName");		//DOM 对象
var $txtName=$(txtName);		//jQuery 对象

[index] 的方法得到相应的 DOM 对象

格式如下

var $txtName=$("#txtName");		//jQuery 对象
var txtName=$txtName[0];		//DOM 对象

jQuery 对象转换成 DOM 对象在实际开发中并不多见
除非希望使用 DOM 对象特有的成员

2、DOM 对象转换成 jQuery 对象

将 DOM 对象使用函数 $() 包装起来，就可以获得一个 jQuery 对象
格式如下

var txtName=document.getElementById("txtName");		//DOM 对象
var $txtName=$(txtName);		//jQuery 对象

落败.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
五、 jQuery 基础

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。jQuery 支持目前的主流的浏览器Chrome、Edge、Firefox、IE9+、Safari 和 Opera。注意: jQuery 并不是代替 JavaScript、jQuery 的内部仍然是调用 JavaScript 实现的。编写 jQuery 的代码、扩展插件等仍然需要 JavaScript 的技术。
复制链接

扫一扫