jQuery简介、语法属性及常用选择器

引言：

本文主要分享了有关jQuery的相关知识，包括：jQuery的作用、优势、jQuery的安装、基础语法、常用的选择器（基本选择器、层次选择器、属性选择器、过滤选择器）、动态的效果展示以及若干案例；

@[toc]

1. jQuery简介

jQuery于2006年创建的，是一个快速、简洁的JavaScript代码库，封装了JavaScript中常用的功能代码；它的设计思想是WRITE LESS,DO MORE，轻量级的JS库(压缩后只有21k) ，兼容CSS3和各种浏览器，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。并且它的文档说明很全，各种应用也说得很详细，同时还有许多成熟的插件可供选择；

1.1 jQuery的作用

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

可以与AJAX完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

1.3 jQuery的安装

从jQuery官网中下载，放入服务器的js文件夹下，在页面中直接引用；

有两个版本：

Production version- ：约91KB，经过工具压缩版本，主要用于发布的产品和项目；

Development version- ：约268KB，完整的无压缩版本，主要用于测试、学习和开发；

jQuery下载地址：https://jquery.com/download/

1.4 在页面中引入jQuery

jQuery库是一个JavaScript文件，因此使用HTML的

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

2. jQuery基础语法

$(匿名函数)：是jQuery函数的简写，表示页面加载完毕后执行，比onload事件执行的早，可以写多个；

$(selector).action()；

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

css("属性","属性值")：为元素设置CSS样式

addClass()：为元素添加类样式

next()：获得元素其后紧邻的同辈元素

2.1 弹出提示框问题

2.1.1 JS实现弹出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现跳转</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
/* js效果1 */
    function aaa(){
   
   
        alert("对话框");
    }
    window.onload = aaa;
</script>
<!--  js效果1  -->
<!-- <body onload = "aaa()"> -->
<body>
    <p>这是一个纯粹的HTML页面</p>
    <p>先加载页面，在弹出对话框</p>
    <p>网页加载之后，jQuery才有效</p>
</body>
</html>

2.1.2 jQuery跳转

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery跳转</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
/* $相当于jQuery */
    $(document).ready(function(){
   
   
        alert("对话框");
    });
</script>
<body>
    <p>这是一个纯粹的HTML页面</p>
    <p>先加载页面，在弹出对话框</p>
    <p>网页加载之后，jQuery才有效</p>
</body>
</html>

jQuery弹出对话框

2.2 图片边框问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>给图片加边框</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
    $(document).ready(function(){
   
   
        //使用JS核心API获取元素节点对象1
        var img = document.getElementById("img1");
        img.border = "5cm solid red";

         //在onload时加线2
        $("#img1").css("border-bottom","0.3cm groove red");

        //在点击之后加线
        $("#img1").click(function(){
   
   
            $(this).css("border-bottom","0.3cm groove black");
        });    
    });
</script>
<body>
    <p>这是一个纯粹的HTML页面</p>
    <img id = "img1" src="img/111.jpg" width = "100px" height = "100px">
</body>
</html>

2.3 添加类样式（事件）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加类样式</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
    $(document).ready(function(){
   
   
/*         //只改变div2的样式（使用id选择器）
        $("#div2").click(function(){
            $(this).addClass("myClass2");
        }); */

        //点击那个div改变那个（使用标签选择器）
        $("div").click(function(){
   
   
            $(this).addClass("myClass2");
        });
    });
</script>
<style>
    .myClass1{
   
   
        top:10px;
        left:20px;
        width:200px;
        height: 100px;
        margin-top:50px;
        background-color: #ccc;
    }

    .myClass2{
   
   
        top:30px;
        left:50px;
        width:400px;
        height: 200px;
        margin-top:100px;
        background-color: red;
    }
</style>
<body>
    <p>这是一个纯粹的HTML页面</p>
    <div id = "div1" class = "myClass1" >
        改变div样式
    </div>

    <div id = "div2" class = "myClass1" >
        点击后改变div样式
    </div>
</body>
</html>

添加类样式

2.4 综合改变样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery语法综合改变样式</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
    $(document).ready(function(){
   
   
        $("p").click(function(){
   
   
            $("ul").css("display","block");
            $("li:first").click(function(){
   
   
/*                 //通过jQuery对象的add方法改变样式
                $(this).addClass("myClass"); */


                var {
   
   mathJaxContainer[0]}("li:first");//得到jQuery选择器
                var obj = $obj.get(0);//将jquery对象转为js对象
                obj.className = "myClass";//获取名字
            });
        });
    });
</script>
<style>
    .myClass{
   
   
        background-color: blue;
        font-size: 30px;
        font-style: "黑体";
        color:white;
        font-weight: bold;
    }
</style>
<body>
    <p>新手指南</p>
    <div >
        <ul style = "display:none">
            <li>会员注册</li>
            <li>会员注册</li>
            <li>会员注册</li>
            <li>会员注册</li>
        </ul>
    </div>
</body>
</html>

点击新手指南，展示4个li标签，点击第一个标签改变字体的样式；

3. jQuery常用选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素；

3.1 基本选择器

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

标签选择器：根据给定的标签名匹配元素，$("h3")获取并设置所有的h3标签；

类选择器：根据给定的class匹配元素，$(".title")获取并设置所有class为title的元素；

ID选择器：根据给定的id匹配元素，$("#box")获取并设置id为box的元素；

并集选择器：用来合并元素集合，$("h2,dt,.title")获取并设置所有h2 、dt 标签、class为title的元素；

交集选择器：对元素集合根据class或id再筛，$("h2.title")获取并设置所有class为title的h2标签的元素；

全局选择器：获取所有元素，$("*")，改变所有元素的属性；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
    $(document).ready(function(){
   
   
        //并集选择器
        $("p,#div2").css("background-color","#ccc");
        //交集选择器
        $("h2.my").css("background-color","green");

    });
</script>
<style>
    .my{
   
   
        color:red;
    }
</style>
<body>
    <p>这是一个纯粹的HTML页面</p>
    <div id = "div1">
        <h1>一级标题</h1>
        <h2 class = "my">二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </div>

    <div id = "div2">
        <span>这是span标签<strong>加粗</strong></span>
        <p>这是p标签</p>
    </div>
</body>
</html>

在这里插入图片描述

3.2 层次选择器

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

后代选择器：用来获取元素的后代元素，$("#menu span").css("background-color","#09F")，获取并设置#menu下的span标签的元素背景颜色；

子选择器：用来获取元素的子元素、$("#menu>span")，获取并设置#menu下的子元素span标签的属性；

相邻选择器：用来选取紧邻目标元素的下一个元素，$("h2+dl")，获取并设置紧接在h2标签元素后的dl标签元素的属性；

同辈选择器：用来选取目标元素之后的所有同辈元素，$("h2~dl")，获取并设置h2标签元素之后的所有同辈元素dl标签的属性；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<script>
    $(document).ready(function(){
   
   
        //后代选择器
        //$("body h2").css("background-color","blue");//body里所有的h2属性
        //子选择器
        //$("#div1>h2").css("background-color","blue");//div1里面的h2
        //紧邻选择器
        //$("h1+h2").css("background-color","yellow");//靠近他的变色
        //同辈选择器
        $("h1~h2").css("background-color","yellow");//获取h1之后的所有h2的元素
    });
</script>
<body>
    <p>这是一个纯粹的HTML页面</p>
    <div id = "div1">
        <h1>一级标题</h1>
        <h2 class = "my">二级标题</h2>
        <h2>二级标题</h2>
        <h4>四级标题</h4>
        <h5 class = "my">五级标题</h5>
    </div>

    <div id = "div2">
        <span>这是span标签<strong>加粗</strong></span>
        <div>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <span>这是span标签</span>
        </div>
        <p>这是p标签</p>
    </div>
</body>
</html>

3.2.1 后代选择器

后辈选择器

3.2.2 子选择器

子选择器

3.2.3 紧邻选择器

紧邻选择器

3.2.4 同辈选择器

同辈选择器

3.3 属性选择器

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

根据属性名获取元素：根据是否包含某属性来选取元素，$("h2[title]")，改变含有title属性的h2标签的属性；

根据属性值获取元素：根据属性的值来选取元素，$("[class=value]")，改变class属性的值为value的元素的属性；
多属性条件选择：支持多属性条件复合查找元素
$("li[class][title=value]")
选取包含class属性，且title属性的值中含有value的li标签元素的属性；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<script>
    $(document).ready(function(){
   
   
        //变蓝 ,把div2下的h2 改变
        $("[href='#1']").click(function(){
   
   
            $("#div2  h2").css("background-color","blue");
        });
        //变绿 ,把div1紧邻的div改变
        $("[href='#2']").click(function(){
   
   
            $("#div1+div").css("background-color","green");
        });
        //变红 ,把div2下的span改变
        $("[href='#3']").click(function(){
   
   
            $("#div2 span").css("background-color","red");
        });

        $(":focus").click(function(){
   
   
            var str = $(this).val();
            alert(str);
        });
      });
</script>
<style>
    .my{
   
   
        color:green;
    }
</style>
<body>
    <p>这是一个纯粹的HTML页面</p>
      <a href="#1">变蓝</a><br/>
      <a href="#2">变绿</a><br/>
      <a href="#3">变红</a><br/>
    <div id = "div1">
        <h1>一级标题</h1>
        <h2 class = "my">二级标题</h2>
        <h2>二级标题</h2>
        <h4>四级标题</h4>
        <h5 class = "my">五级标题</h5>
    </div>
    <div id = "div2">
        <span>这是span标签<strong>加粗</strong></span>
        <div>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <span>这是span标签</span>
        </div>
        <p>这是p标签</p>
    </div>

    <div>
        基本过滤选择器
        <input type="text" name="xx" value="focus"/>
        <input type="text" name="xx" value="focus"/>
        <input type="text" name="xx" value="focus"/>
    </div>
</body>
</html>

在这里插入图片描述

3.4 过滤选择器

过滤选择器通过特定的过滤规则来筛选元素

语法特点：

使用“:”，例使用$(“li:first”)来选取第一个li元素

:first 、选取第一个元素，$("li:first")；

:last 、选取最后一个元素，$("li:last")；

:even、选取索引为偶数的li标签元素，$("li:even")；

:odd、选取索引为奇数的元素，$(“li:odd”)；

:eq(index)、选取索引值等于index的元素，$("li:eq(index)")；

:gt(index)、选取索引值大于1的元素，$("li:gt(1)")；

:lt(index)、选取索引值小于1的元素，$("li:lt(1)")；

:not(selector)、选取去除所有与给定选择器匹配的元素，$("li:not(.three)")，选取class不是three的元素；

:header、选取所有标题元素，$(":header")；

:focus、选取获得焦点的元素，$(":focus")；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
    body{
   
   
        background-color: gray;
    }
</style>
<script>
    $(document).ready(function(){
   
   
        $("li:first").css("background-color","red");
        $("li:eq(2)").css("color","blue");
        $("li:last").css("color","white");
        $(":header").css("background-color","white")
    });
</script>
<body>
    <p>这是一个 纯粹的html页面 </p>
    <div >
        <ul>
            <li>第一个li标签</li>
            <li>第二个li标签</li>
            <li>第三个li标签</li>
            <li>第四个li标签</li>
            <li>第五个li标签</li>
            <h4>这是一个h4标签</h4>
            <h3>这是一个h3标签</h3>
            <h5>这是一个h5标签</h5>
        </ul>
    </div>
</body>
</html>

过滤选择器

3.5 可见性过滤选择器

:visible，选取所有可见元素，$(" p:hidden").show(); 获取隐藏的p标签元素，使其显示；

:hidden，选取所有隐藏元素，$(" p:visible").hide(); 获取显示的p标签，使其隐藏；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
    body{
   
   
        background-color: gray;
    }
</style>
<script>
    $(document).ready(function(){
   
   
        $("[href = '#1']").click(function(){
   
   
            $("h1:visible").hide(5000);
        });

        $("[href = '#2']").click(function(){
   
   
            $("h1:hidden").show(5000);
        });
    });
</script>
<body>
    <p>这是一个 纯粹的html页面 </p>
    <a href = "#1">隐藏</a>
    <a href = "#2">显示</a>
    <h1>这是一个h1标签</h1>
</body>
</html>

3.6 选择器总结

基本选择器：

标签选择器、类选择器、ID选择器

并集选择器、交集选择器、全局选择器

层次选择器：

后代选择器、子选择器

相邻选择器、同辈选择器

属性选择器：

属性名过滤、属性值过滤、多属性条件过滤

基本过滤选择器：

:first 、:last 、:even、:odd

:eq(index)、:gt(index)、:lt(index)

:not(selector)、:header、:focus

可见性过滤选择器：

：visible

：hidden

4. jQuery动态效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态效果</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
    body{
   
   
        background-color: gray;
    }
</style>
<script>
    $(document).ready(function(){
   
   
        $("[href = '#1']").click(function(){
   
   
            $("img").fadeOut(5000);
        });

        $("[href = '#2']").click(function(){
   
   
            $("img").fadeIn(5000);
        });

        $("[href = '#3']").click(function(){
   
   
            $("img").slideUp(5000);
        });

        $("[href = '#4']").click(function(){
   
   
            $("img").slideDown(5000);
        });
    });
</script>
<body>
    <p>这是一个 纯粹的html页面 </p>
    <a href = "#1">淡入</a>
    <a href = "#2">淡出</a>
    <a href = "#3">收起</a>
    <a href = "#4">落下</a>
    <img src="img/demo_09.jpg" width = "800" height="500">
</body>
</html>

动态效果

jQuery简介、语法属性及常用选择器

jQuery简介、语法属性及常用选择器

1. jQuery简介

1.1 jQuery的作用

1.2 jQuery的优势

1.3 jQuery的安装

1.4 在页面中引入jQuery

2. jQuery基础语法

2.1 弹出提示框问题

2.1.1 JS实现弹出

2.1.2 jQuery跳转

2.2 图片边框问题

2.3 添加类样式（事件）

2.4 综合改变样式

3. jQuery常用选择器

3.1 基本选择器

3.2 层次选择器

3.2.1 后代选择器

3.2.2 子选择器

3.2.3 紧邻选择器

3.2.4 同辈选择器

3.3 属性选择器

3.4 过滤选择器

3.5 可见性过滤选择器

3.6 选择器总结

4. jQuery动态效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

jQuery简介、语法属性及常用选择器

jQuery简介、语法属性及常用选择器

1. jQuery简介

1.1 jQuery的作用

1.2 jQuery的优势

1.3 jQuery的安装

1.4 在页面中引入jQuery

2. jQuery基础语法

2.1 弹出提示框问题

2.1.1 JS实现弹出

2.1.2 jQuery跳转

2.2 图片边框问题

2.3 添加类样式（事件）

2.4 综合改变样式

3. jQuery常用选择器

3.1 基本选择器

3.2 层次选择器

3.2.1 后代选择器

3.2.2 子选择器

3.2.3 紧邻选择器

3.2.4 同辈选择器

3.3 属性选择器

3.4 过滤选择器

3.5 可见性过滤选择器

3.6 选择器总结

4. jQuery动态效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景