jQuery_day01

其他 2020-04-20 18:17:47 阅读次数: 0

一.jQuery介绍

简介:

  • jQuery 是一个 JavaScript 库
  • jQuery 极大简化了 JavaScript 编程
  • jQuery 凭借着简洁的语法和跨平台的兼容性，极大的简化了 js 开发人员查 找元素、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。 

功能:

1. HTML 元素选取

2. HTML 元素操作

3. CSS 操作

4. HTML 事件函数

5. JavaScript 特效和动画

6. HTML DOM 遍历和修改

7. AJAX

8. Utilities 

引入方式:

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

二.语法

//语法一:最完整的
$(document).ready(
    //我们的操作
)
//语法二:在语法一的基础上省略了document对象
$().ready(
    //我们的操作
)
//语法三:最简洁的写法
$(
    //我们的操作
)

快速入门:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用jQuery之前,一定不要忘记导入js库-->
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            alert("hello jQuery");
        });
    </script>
</head>
<body>

</body>
</html>

事件:

      点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        //jQuery的方式
        $(function () {
            $("#btn").click(function () {
               alert("wtc");
            });
        })

        /*js的方式
        /*window.οnlοad=function(){
            document.getElementById("btn").οnclick=function () {
                alert("yyy");
            }
        }*/

    </script>
</head>
<body>
    <button id="btn">jq点我</button>
</body>
</html>

jq的获取:

        三个简单实用的用于 DOM 操作的 jQuery 方法

                text() - 设置或返回所选元素的文本内容

                html() - 设置或返回所选元素的内容（包括 HTML 标记）

                val() - 设置或返回表单字段的值 

       1.获取页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                alert("JQ的方式获取文本:"+$("#test").text());
            });
            $("#btn2").click(function () {
                alert("JQ的方式获取HTML:"+$("#test").html());
            })
        })
    </script>
</head>
<body>
     <p id="test">这是段落中的<b>粗体</b>文字</p>
     <button id="btn1">显示文本</button>
     <button id="btn2">显示HTML</button>
</body>
</html>

       2.获取表单的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
           $("button").click(function () {
               alert($("#test").val());
           })
        });
    </script>
</head>
<body>
     <p>姓名:<input type="text"id="test"value="米老鼠"></p>
     <button>显示值</button>
</body>
</html>

       3.获取属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        //使用attr()获取指定属性的值
        $(function () {
            $("button").click(function () {
                alert($("#baidu").attr("href"));
            })
        })
    </script>
</head>
<body>
    <p>
        <a href="https://www.bidu,com"id="baidu">百度一下</a>
    </p>
    <button>显示href值</button>
</body>
</html>

jq选择器:

       1.基本选择器


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01.基本选择器</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function() {
            // 选择 id 为 one 的元素
            $("#btn1").click(function() {
                $("#one").css("background-color","pink");
            });

            // 选择 class 为 mini 的所有元素
            $("#btn2").click(function() {
                $(".mini").css("background-color","black");
            });
            // 选择所有的div元素
            $("#btn3").click(function() {
                $("div").css("background-color","red");
            });

            // 选择所有元素
            $("#btn4").click(function() {
                $("*").css("background-color","green");
            });

            // 选择所有的span元素和id为two的元素
            $("#btn5").click(function() {
                $("span,#two").css("background-color","yellow");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn1" value="选择 id 为 one 的元素" />
<input type="button" id="btn2" value="选择 class 为 mini 的所有元素" />
<input type="button" id="btn3" value="选择所有的div元素" />
<input type="button" id="btn4" value="选择所有元素" />
<input type="button" id="btn5" value="选择所有的span元素和id为two的元素" />
<hr/>
<div id="one" class="one">
    【id】为[one]，【class】为[one]的div
    <div class="mini">
        【class】为[mini]
    </div>
</div>
<div id="two">
    【id】为[two]
    <div class="mini">
        【class】为[mini]
    </div>
    <div class="mini">
        【class】为[mini]
    </div>
</div>
<div id="three">
    【id】为[three]
    <div class="mini">
        【class】为[mini]
    </div>
    <div class="mini">
        【class】为[mini]
    </div>
    <div class="mini">
        【class】为[mini]
    </div>
</div>
<span id="four">
        </span>
</body>
</html>

       2.层级选择器


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02.层级选择器</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        //选择body中的所有的div元素
        $(function () {
            $("#btn1").dblclick(function () {
                 $("body div").css("background-color","red");
            });
            //选择body中子元素为div的元素
            $("#btn2").dblclick(function () {
                $("body>div").css("background-color","blue");
            });
            //选择id为two的元素的下一个div元素
            $("#btn3").dblclick(function () {
                $("#two+div").css("background","pink");
            });
            //选择id为one的所有div兄弟元素(同级元素)
            $("#btn4").dblclick(function () {
                $("#one").siblings("div").css("background-color","yellow");
            })
        });



    </script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素" />
<input type="button" id="btn2" value="选择body中子元素为div的元素" />
<input type="button" id="btn3" value="选择id为two的元素的下一个div元素" />
<input type="button" id="btn4" value="选择id为one的所有div兄弟元素" />
<hr/>
<div id="one">
    <div class="mini">
        111
    </div>
</div>
<div id="two">
    <div class="mini">
        222
    </div>
    <div class="mini">
        333
    </div>
</div>
<div id="three">
    <div class="mini">
        444
    </div>
    <div class="mini">
        555
    </div>
    <div class="mini">
        666
    </div>
</div>
<span id="four">
        </span>
</body>
</html>

       3.过滤选择器


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03.基本过滤选择器</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // body中的第一个div元素
             $("#btn1").click(function () {
                 $("div:first").css("background-color","pink");
             });
            // body中的最后一个div元素
             $("#btn2").click(function () {
                 $("div:last").css("background-color","yellow");
             });
            // 选择body中索引为奇数的div
             $("#btn3").click(function () {
                 $("div:odd").css("background-color","red");
             });
            // 选择body中索引为偶数的div
            $("#btn4").click(function () {
                $("div:even").css("background-color","blue");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素" />
<input type="button" id="btn2" value="body中的最后一个div元素" />
<input type="button" id="btn3" value="选择body中索引为奇数的div" />
<input type="button" id="btn4" value="选择body中索引为偶数的div" />
<hr/>
<div id="one">
    <div class="mini">
        111
    </div>
</div>
<div id="two">
    <div class="mini">
        222
    </div>
    <div class="mini">
        333
    </div>
</div>
<div id="three">
    <div class="mini">
        444
    </div>
    <div class="mini">
        555
    </div>
    <div class="mini">
        666
    </div>
</div>
<span id="four">
        </span>
</body>
</html>

       4.属性选择器


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04.属性选择器</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function() {
            // 选择有id属性的div中最后一个
            $("#btn1").click(function() {
                $("div[id]:last").css("background-color","pink");
            });
            // 选择有id属性的值为two的div
            $("#btn2").click(function() {
                $("div[id=two]").css("background-color","blue");
            });
        });


    </script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为two的div" />
<hr/>
<div id="one">
    <div class="mini">
        111
    </div>
</div>
<div id="two">
    <div class="mini">
        222
    </div>
    <div class="mini">
        333
    </div>
</div>
<div id="three">
    <div class="mini">
        444
    </div>
    <div class="mini">
        555
    </div>
    <div class="mini">
        666
    </div>
</div>
<span id="four">
        </span>
</body>
</html>

       5.表单选择器


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05.表单选择器</title>
    <script type="text/javascript"src="../js/jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // 选择所有input元素
            $("#btn1").click(function() {
                /* $("input").css("background-color","#ccff00"); */
                // 选择所有form表单下的input元素
                $("form :input").css("background-color","pink");
            });
            // 选择文本框
            $("#btn2").click(function() {
                $(":password").css("background-color","blue");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
    <input type="text" /><br />
    <input type="checkbox" /><br />
    <input type="radio" /><br />
    <input type="image" src="../imgs/4.jpeg" width="260px" height="300px" /><br />
    <input type="file" /><br />
    <input type="submit" value="提交" />
    <input type="reset" /><br />
    <input type="password" /><br />
    <input type="button" value="注册" /><br />
    选项框：
    <select>
        <option/>
    </select><br />
    <textarea></textarea><br />
    <button>按钮</button>
</form>
</body>
</html>
yyy苏苏
发布了75 篇原创文章 · 获赞 164 · 访问量 11万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_41679818/article/details/100041940
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022