自学内容网 自学内容网
自学内容网 > 正文

jQuery基础

🕗 发布于 2024-10-10 20:11 jquery  javascript  html5  

1、目标

了解jQuery介绍

掌握调用jQuery的方式

掌握jQuery选择器的使用方式

了解jQuery和原生javascript在使用上的区别

2、jQuery

1、jQuery简介

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

2、jQuery的作用

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

3、jQuery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

4、jQuery库文件

jQuery库分开发版和发布版

名称

大小

说 明

jquery-3.版本号.js（开发版）

约286KB

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

jquery-3.版本号.min.js（发布版）

约94.8KB

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

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

5、jQuery基本语法

使用jQuery弹出提示框

<script>
    //为页面加载事件绑定方法
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

$(document).ready()

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


 

window.onload

$(document).ready()

执行时机


 

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行


 

网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

编写个数

同一页面不能同时编写多个

同一页面能同时编写多个

简化写法

无

$(function(){

//执行代码

}) ;

6、jQuery选择器

jQuery语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作

基础语法：

$(selector).action()

jQuery基本选择器

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

名称

语法构成

描述

示例

标签选择器

element

根据给定的标签名匹配元素

$("h2" )选取所有h2元素

类选择器

.class

根据给定的class匹配元素

$(" .title")选取所有class为title的元素

ID选择器

#id

根据给定的id匹配元素

$(" #title")选取id为title的元素

并集选择器

selector1,selector2,...,selectorN

将每一个选择器匹配的元素合并后一起返回

$("div,p,.title" )选取所有div、p和拥有class为title的元素

全局选择器

*

匹配所有元素

$("*" )选取所有元素

标签选择器

标签选择器根据给定的标签名匹配元素

$(document).ready(function(){
  //设置标签dd中的内容显示出来
    $("dt").click(function(){
        $("dd").css("display","block"); 
    });
      //设置h1标签中的字体颜色
    $("h1").css("color","blue");
})
类选择器

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

//设置class为price元素的背景颜色和内边距
$(".price").css({"background":"#efefef","padding":"5px"});
ID选择器

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

//设置id为author的元素的字体颜色
$("#author").css("color","#083499");

并集选择器

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

$(".intro,dt,dd").css("color","#ff0000");
全局选择器

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

//设置所有元素的字体加粗显示
$("*").css("font-weight","bold");

实例代码

$(document).ready(function(){
    $("dt").click(function(){
        $("dd").css("display","block");
    });
    $("h1").css("color","blue")
    //设置class为price元素的背景颜色和内边距，类选择器
    $(".price").css({"background":"#efefef","padding":"5px"})
    //设置id为author的元素的字体颜色，id选择器
    $("#author").css({"color":"#083499"})
    //并集选择器
    $(".intro,dt,dd").css("color","#ff0000")
    //全局选择
    $("*").css({"font-weight":"bold"})
})

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
</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 src="js/jquery-3.7.1.js"></script>
<script src="js/book.js"></script>
</body>
</html>

jQuery层次选择器

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

名称

语法构成

描述

示例

后代选择器

ancestor descendant

选取ancestor元素里的所有descendant（后代）元素

$("#menu span" )选取#menu下的<span>元素

子选择器

parent>child

选取parent元素下的child（子）元素

$(" #menu>span" )选取#menu的子元素<span>

相邻元素选择器

prev+next

选取紧邻prev元素之后的next元素

$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>

同辈元素选择器

prev~sibings

选取prev元素之后的所有siblings元素

$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

后代选择器

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

//设置class为textRight元素中的所有<p>
$(".textRight p").css("color","red");
子选择器

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

$(".textRight>p").css("color","red");
相邻选择器

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

 $("h1+p").css("text-decoration","underline")
同辈选择器

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

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

jQuery属性选择器

属性选择器通过HTML元素的属性来选择元素

语法构成

描述

示例

[attribute^=value]

选取给定属性是以某些特定值开始的元素

$(" [href^='en']" )选取href属性值以en开头的元素

[attribute$=value]

选取给定属性是以某些特定值结尾的元素

$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素

[attribute*=value]

选取给定属性是以包含某些值的元素

$(" [href* ='txt']" )选取href属性值中含有txt的元素

根据属性名获取元素

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

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

属性选择器可以指定属性值包含指定值的元素

a标签href属性值包含“k2”的元素

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

过滤选择器

主要分类

基本过滤选择器

可见性过滤选择器

表单对象过滤选择器

内容过滤选择器、子元素过滤选择器

语法

描述

示例

:first

选取第一个元素

$(" li:first" )选取所有<li>元素中的第一个<li>元素

:last

选取最后一个元素

$(" li:last" )选取所有<li>元素中的最后一个<li>元素

:not(selector)

选取去除所有与给定选择器匹配的元素

$(" li:not(.three)" )选取class不是three的元素

:even

选取索引是偶数的所有元素（index从0开始）

$(" li:even" )选取索引是偶数的所有<li>元素

:odd

选取索引是奇数的所有元素（index从0开始）

$(" li:odd" )选取索引是奇数的所有<li>元素

语法

描述

示例

:eq(index)

选取索引等于index的元素（index从0开始）

$("li:eq(1)" )选取索引等于1的<li>元素

:gt(index)

选取索引大于index的元素（index从0开始）

$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index)

选取索引小于index的元素（index从0开始）

$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

:header

选取所有标题元素，如h1~h6

$(":header" )选取网页中所有标题元素

:focus

选取当前获取焦点的元素

$(":focus" )选取当前获取焦点的元素

:animated

选择所有动画

$(":animated" )选取当前所有动画元素

可见性过滤选择器

通过元素显示状态来选取元素

语法

描述

示例

:visible

选取所有可见的元素

$(":visible" )选取所有可见的元素

:hidden

选取所有隐藏的元素

$(":hidden" ) 选取所有隐藏的元素

$("p:hidden").show();
$("p:visible").hide();

jQuery选择器注意事项

特殊符号转义

<div id="id#a">aa</div>

<div id="id[2]">cc</div>

获取两个元素的选择器

$("#id\\#a");

$("#id\\[2\\]");

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

选取class为test的元素内部的隐藏元素
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
选取隐藏的class为test的元素
var $t_b = $(".test:hidden");  //不带空格的jQuery选择器

练习

练习一、制作图书简介页面

需求说明

使用基本选择器和层级选择器获取并设置页面元素

“自营图书几十万……”一行字体颜色为红色

京东价“￥24.10”字体为24px、红色加粗显示

“[定价：￥35.00]”字体颜色为#cccccc，价格中有中划线

<dl>标签中的字体颜色均为红色

单击“以下促销….”显示隐藏的内容，此部分字体颜色均为红色

“加购价”、“满减”、“105-5”、“200-16”字体颜色为白色，背景颜色为红色，上下内边距为1px，左右内边距为5px，外右边距为5px

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
</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 src="./js/jquery-3.7.1.js"></script>
<script src="js/book.js"></script>
</body>
</html>

js

$(document).ready(function(){
    $("dt").click(function(){
        $("dd").css("display","block");
    });
    $(".intro").css("color","red")
    $("#jdPrice>span").css({"font-size":"24px","color":"red","font-weight":"bold"})
    $("#jdPrice>p").css({"color":"#cccccc","text-decoration":"line-through"})
    $("dl").css("color","red")
    $("dd span,#ticket span").css({"color":"white","background":"red","padding":"1px 5px","margin":"0px 5px"})
})

练习二、使用jQuery美化英雄联盟简介页

需求说明

单击<p>元素后，设置class为txt_box的元素内class 为current的元素的背景颜色为#6FF，<p>的子元素<span>的背景颜色为#F9F，紧邻<h1>后的<p>元素的背景颜色为#FF6，“即时对战”文本颜色为#FFF，背景颜色为#F00

js

$(document).ready(function(){
    $('p').click(function(){
        $('.txt_box>.current').css("background","#6FF")
    })
    $('p span').css("background","#f9f")
    $('h1+p').css("background","#FF6")
    $('#content span>span').css({"color":"#FFF","background":"#F00"})
})

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>使用jQuery美化英雄联盟简介页 </title>
</head>
<body>
 <h1>英雄联盟</h1> 
<p>    《英雄联盟》，简称LOL。</p>
<p id="content">
    由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其
    <span>主创团队由实力强劲的
        <strong>魔兽争霸</strong>
        系列游戏多人<span>即时对战</span>自定义地图开发团队
    </span>...
    <a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
    <li class="current">开发团队</li>
    <li>游戏周边</li>
    <li>游戏介绍</li>
    <li>配置需求</li>
    <li>游戏背景</li>
</ul>

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

 <script src="js/index.js" type="text/javascript">

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

练习三、制作非缘勿扰页面特效

训练要点

使用属性选择器选取元素

使用css( )方法或addClass( )方法为元素添加样式

需求说明

单击标题“非缘勿扰”，<dd>元素中有id属性的<span>的文本（主演、导演、标签、剧情）颜色值为#FF0099，字体加粗显示

单击文本“导演”，文字“赖水清”为加粗

单击文本“标签”，它之后的“苏有朋”和“2013”的背景颜色为#E0F8EA，字体颜色为#10 A14B，并且文字与背景颜色上下边缘间距为2px，左右边缘边距为8px

单击图片“收藏”，弹出对话框，显示信息为“您已收藏成功！”

html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
    <title>制作非缘勿扰页面特效 </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class='main' >
     <div class='left'>
        <img src="images/pic.gif" />
            <br/><br/>
            <img src="images/col.gif" alt="收藏本片"/>
        </div>
        <div class='right'>
        <dl>
            <dt>非缘勿扰</dt>
            <dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
<dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
<dd><span id='label'>标签：</span><span>苏有朋</span>  国产电视剧   <span>2013</span>  连续剧 </dd>
<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></dd>
            </dl>
            <img src="images/btn.gif"/>
        </div>
     </div>
 <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
 <script src="./js/index.js"></script>
</body>
</html>

js

$(document).ready(function(){
    $('.right dl dt').click(function(){
        $('.right dl dd span[id]').css({"color":"#FF0099" , "font-weight":"bold"})
    })
    $("span[id='director']").click(function(){
        $("span[title = '导演']").css("font-weight","bold")
    })
    $("span[id='label']").click(function(){
        $("#label~span").css({"background":"#E0F8EA","color":"#10A14B","padding":"2px 8px"})
    })
    $("img[src='images/col.gif']").click(function(){
       alert('您已收藏成功')
    })
})

练习四、制作隔行变色的商品列表

需求说明使用基本过滤选择器，实现隔行变色的表格（不包括表头），偶数行背景色为#eff7d1，奇数行背景色为#f7e195

js

$(document).ready(function(){
    $('tr:even').css('background','#eff7d1')
    $('tr:odd').css('background','#f7e195')
})

css

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>隔行变色的商品列表</title>
 <link rel="stylesheet" href="css/product.css">
 </head>
 <body>
<div class="contain">
<table border="0" width="100%" cellspacing="0">
<tr class="t-head">
<th width="50%">商品</th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th>操作</th>
</tr>
<tr>
<td>
<img src="images/f1.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤波点印花毛衣</a>
</td>
<td>180.0</td>
<td>3</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f2.jpg" width="50" height="50"/>
<a href="">预售太平洋女装连衣裙</a>
</td>
<td>765.0</td>
<td>4</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f3.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤红色小外套</a>
</td>
<td>456.0</td>
<td>2</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f4.jpg" width="50" height="50"/>
<a href="">漫巴森秋装新款套头衫</a>
</td>
<td>140.0</td>
<td>1</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
</table>
</div>
 </body>
 <script src="js/jquery-1.12.4.js"></script>
 <script src="./js/product.js"></script>
 <script>

 </script>
</html>

练习五、制作全网热播视频页面

需求说明使用选择器:not( ) 设置图片与右侧内容间距10px使用选择器:last设置右侧列表背景颜色为#f0f0f0使用层次选择器、:first、:not( )设置前三个视频名称前的数字1、2、3背景颜色为#f0a30f，后面的数字背景颜色为#a4a3a33、5、6、7后的箭头向上，4、8、9、10后的箭头向下鼠标移至右侧列表上时，显示对应的隐藏内容“加入看单”，鼠标离开后隐藏内容

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全网热播视频</title>
    <link rel="stylesheet" href="css/play.css">
</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 src="js/jquery-1.12.4.js"></script>
<script src="js/play.js"></script>
</body>
</html>

js

$(document).ready(function(){
    $("ul>li:not(:last)").css({"margin-right":"10px"})
    $("ul>li:last").css({"background":"#f0f0f0"})
    $("ul>li:not(:last) span").css({"background":"#f0a30f"})
    $("ol li:first span").css({"background":"#f0a30f"})
    $("ol li:not(:first) span").css({"background":"#a4a3a3"})
    $("ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
        "background-image": "url(images/orange.jpg)",
        "background-repeat": "no-repeat",
        "background-position": "right -2px"
    })
    $("ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
        "background-image": "url(images/green.jpg)",
        "background-repeat": "no-repeat",
        "background-position": "right -2px"
    })
    $("ol li").hover(function(){
        $('ol li p').show()
    })
    $("ol li").mouseout(function () {
        $("ol li p").hide();
    });
})

原文地址：https://blog.csdn.net/weixin_65279640/article/details/142781727

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024