JAVA WEB DAY 07_ jQuery 基础

最新推荐文章于 2022-11-22 17:02:51 发布

NTT0101

最新推荐文章于 2022-11-22 17:02:51 发布

阅读量306

点赞数

分类专栏： Java Web 文章标签： jquery

本文链接：https://blog.csdn.net/NTT0101/article/details/108694701

版权

文章目录

jQuery 基础

jQuery 基础

目标

能够使用 jQuery 的基本选择器
能够使用 jQuery 的层级选择器
能够使用 jQuery 的绑定与解绑方法
能够使用 jQuery 对象的遍历方法
能够使用 jQuery 全局的遍历方法
能够使用 jQuery 的 DOM 操作的方法
能够完成隔行换色
能够完成案例：抽奖程序

01_jQuery 概述和导入-[★★★]

jQuery 是什么: JS 框架：对 JS 代码进行封装，提高开发效率，降低开发难道

jQuery 的导入格式：
<script src='JS库文件地址'></script>

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>

    <!-- 引入JQ库文件
         注意事项：如果script是用来引入另一个JS文件，则该script标签体不能再编写JS代码
    -->
    <script src="js/jquery-3.3.1.min.js"></script>

    <!--测试JQ库文件是否引入成功-->
    <script>
        // JS写法：当网页加载完毕时执行
        /*window.onload = function () {

        };*/
        // JQ写法：当网页加载完毕时执行
        $(function () {
    
            alert("进来啦吗");
        });
    </script>
</head>
<body>

</body>
</html>

02_ jQuery 对象与 JS 对象的转换-[★★★★]

JS 对象与 jQuery 对象相互转换的语法

JS对象与jQuery对象相互转换的语法	转换语法
将JS对象转换为 jQuery对象	$(JS对象)
将jQuery对象转换为 JS对象	jq对象[索引] jq对象本质就是数组

需求：页面上有一个文本框，文本框中有值：阿里巴巴。
1.分别通过js对象和jQuery对象得到值，并且使用alert()方法显示出来。
2.混合使用是错误的，没有输出效果。
3.对象转换以后使用各自的方法得到值。
示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JQ对象和JS对象的转换</title>

    <!--导入JQ库文件-->
    <script src="js/jquery-3.3.1.min.js"></script>

    <!--
    需求：页面上有一个文本框，文本框中有值：阿里巴巴。
    1) 分别通过js对象和jQuery对象得到值，并且使用alert()方法显示出来。
    2) 混合使用是错误的，没有输出效果。
    3) 对象转换以后使用各自的方法得到值。
    -->
    <script>
        // 1) 分别通过js对象和jQuery对象得到值，并且使用alert()方法显示出来。
        /*document.getElementById("one").onclick = function () {

        }*/

        // 当网页加载完毕执行
        $(function () {
    
            // 监听第1个按钮点击
            $("#one").click(function () {
    
                // 根据id获取文本输入框元素对象
                // jsObj：是JS对象
                var jsObj = document.getElementById("user");
                // 获得文本输入框的值
                // alert(jsObj.value);

                // 将JS对象转换为JQ对象
                var jqObj = $(jsObj);
                alert(jqObj.val());
            });

            // 监听第2个按钮点击
            $("#two").click(function () {
    
                // 根据id获取文本输入框元素对象
                // jqObj：是JQ对象
                var jqObj = $("#user");
                // 调用JQ对象的方法获得文本输入框的值
                // alert(jqObj.val());

                // 将JQ对象转换为JS对象
                // JQ对象本质就是数组
                var jsObj = jqObj[0];
                alert(jsObj.value);
            });
        });
    </script>

</head>
<body>
    <input id="user" type="text" value="阿里巴巴">
    <input type="button" value="JS得到值" id="one">
    <input type="button" value="JQ得到值" id="two">
</body>
</html>

03_ jQuery 之基本选择器-[★★★★]

基本选择器

基本选择器	语法
ID 选择器	$("#ID")
类选择器	$(".类名")
标签选择器	$(“标签名”)

示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>

<h1>有一种奇迹叫坚持</h1>
<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<div id="mover">
    div 动画
</div>

<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>

</body>

<script type="text/javascript">
    // 1) 改变 id 为one的元素的背景色为红色
    $("#b1").click(function () {
    
        $("#one").css("background-color","red");
    });
    // 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
    $("#b2").click(function () {
    
        $("div").css("background-color","red");
    });
    // 3) 改变 class 为 mini 的所有元素的背景色为 红色
    $("#b3").click(function () {
    
        $(".mini").css("background-color","red");
    });
</script>

</html>

04_ jQuery 之层级选择器-[★★★★]

层级选择器

层级选择器	说明	语法
获得A元素内部的所有的B元素	B元素是A元素的子孙元素都可以	$(“A B”)
获得A元素下面的所有B子元素	B元素必须是A元素的子元素	$(“A > B”)
获得A元素同级，下一个B元素	A与B是同级的兄弟元素如果A是老二，B是老三	$(“A + B”)

示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
</head>

<body>
    <input type="button" value="改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
    <input type="button" value="改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
    <input type="button" value="改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/>
    <h1>有一种奇迹叫坚持</h1>
    <div id="one">
        id为one
    </div>

    <div id="two" class="mini">
        id为two class是 mini
        <div class="mini">class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini">class是 mini</div>
        <div class="mini">class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini01">class是 mini01</div>
        <div class="mini">class是 mini</div>
    </div>

<span class="spanone">span</span>
</body>

<script type="text/javascript">
    //1) 改变 <body> 内所有 <div> 的背景色为红色
    $("#b1").click(function () {
    
        $("body div").css("background-color","red");
    });

    //2) 改变 <body> 内子 <div> 的背景色为 红色
    $("#b2").click(function () {
    
        $("body > div").css("background-color","red");
    });

    //3) 改变 id为two的下一个div兄弟元素的背景色为红色
    $("#b3").click(function () {
    
        $("#two + div").css("background-color","red");
    });

</script>
</html>

05_ jQuery 之属性选择器-[★★★★]

属性选择器

属性选择器	语法
获得有属性名的元素	标签名[属性名]
获得属性名等于指定值元素	标签名[属性名=属性值]
获得属性名不等于指定值元素	标签名[属性名!=属性值]
复合属性选择器，多个属性同时过滤	标签名[属性1][属性2]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        div, span {
    
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
    
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
    
            display: none;
        }
    </style>
</head>

<body>

<input type="button" value="含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value="属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value="属性title值包含best的div元素背景色为红色" id="b4"/>
<hr/>

<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini"

最低0.47元/天解锁文章

NTT0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB DAY 07_ jQuery 基础

文章目录jQuery 基础目标01_jQuery 概述和导入-[★★★]02_ jQuery 对象与 JS 对象的转换-[★★★★]03_ jQuery 之基本选择器-[★★★★]04_ jQuery 之层级选择器-[★★★★]05_ jQuery 之属性选择器-[★★★★]06_ jQuery 之基本过滤选择器-[★★★★]07_ jQuery 之表单属性选择器-[★★★★]08_ jQuery 常用事件概述-[★★★]09_ jQuery 常用事件示例-[★★★★]10_事件切换函数与示例-[★★★★]
复制链接

扫一扫

专栏目录