jQuery && BootStrap

最新推荐文章于 2024-05-21 09:34:48 发布

小钟不想敲代码

最新推荐文章于 2024-05-21 09:34:48 发布

阅读量867

点赞数 1

文章标签： jquery bootstrap javascript

本文链接：https://blog.csdn.net/weixin_46370595/article/details/129371587

版权

1、jQuery的使用方式

1、下载jQuery库文件
网址
2、将下载好的js文件放到项目中，并引入到需要的HTML文件中
3、使用jQuery
注意：jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        //就绪函数：当页面加载完成以后，自动执行的函数
        $(function(){
            var demo = document.getElementById("test");
            console.log(demo.innerText);
        });
    </script>
</head>
<body>
    <div id="test">
        这是DIV
    </div>
</body>
</html>

DOM对象与jQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery方法获取的对象。

jQuery对象和DOM对象可以进行相互转换，但是切记两种对象的属性和函数不能彼此混搭使用

DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);

jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        //就绪函数：当页面加载完成以后，自动执行的函数
        $(function(){
            var demo1 = document.getElementById("test");
            console.log(demo1.innerText);

            //使用jQuery来获取id为test的标签的内容
            //使用js方式获取的对象叫做js对象，使用jQuery获取的对象叫做jQuery对象
            var demo2 = $("#test");
            console.log(demo2.text());

            //将JS对象转换成jQuery对象
            console.log($(demo1).text());

            //将jQuery对象转换成JS对象
            console.log(demo2[0].innerText);
        });
    </script>
</head>
<body>
    <div id="test">
        这是DIV
    </div>
</body>
</html>

2、jQuery选择器

1、基本选择器

使用最多的选择器分别是：标签选择器，ID选择器，类选择器，全局选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            //获取id为test的标签，将其文本颜色改为红色
            //$("#test").css("color","red");

            //获取class为test的标签，将其文本颜色改为红色
            //$(".test").css("color","red");

            //获取所有的div标签，将其文本颜色改为红色
            //$("div").css("color","red");

            //获取所有的标签，将其文本颜色改为红色
            $("*").css("color","red");
        });
    </script>
</head>
<body>
    <div>第一个DIV</div>
    <div id="test">第二个DIV</div>
    <div>第三个DIV</div>
    <div class="test">第四个DIV</div>
    <p class="test">第一个P</p>
</body>
</html>

2、层次选择器
根据元素与元素之间的关系来查找元素分别是：后代选择器，子元素选择器>，同辈元素选择器~，同辈相邻元素选择器+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            //获取id为out的标签里面的span标签，将其背景颜色改为红色
            //$("#out span").css("background-color","red");

            //获取id为out的标签里面的span子标签，将其背景颜色改为红色
            //$("#out>span").css("background-color","red");

            //获取id为out的标签的后面的同级span标签，将其背景颜色改为红色
            //$("#out~span").css("background-color","red");

            //获取id为out的标签的后面的同级且相邻span标签，将其背景颜色改为红色
            $("#out+span").css("background-color","red");
        });
    </script>
</head>
<body>
    <span>这是out前面的span</span>
    <div id="out">
        <span>这是out里面的span</span>
        <p>
            <span>这是out里面的p里面的span</span>
        </p>
    </div>
    <span>这是out后面的span</span>
    <span>这是out后面的span再后面的span</span>
    <p>这是out后面的后面的的P</p>
</body>
</html>

3、jQuery属性操作

prop()

prop(“属性名”);获取指定属性的值。

prop(“属性名”,”属性值”);设置指定属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#all").click(function(){
                var checkedValue = $(this).prop("checked");
                $("[name=hobby]").prop("checked",checkedValue);
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" id="all">全选<br>
    <input type="checkbox" name="hobby">篮球<br>
    <input type="checkbox" name="hobby">足球<br>
    <input type="checkbox" name="hobby">排球<br>
    <input type="checkbox" name="hobby">乒乓球<br>
</body>
</html>

4、jQuery样式操作

1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#css").click(function(){
                $("#test").css({"width":"200px","height":"200px","background-color":"yellow"});
            });
        });
    </script>
</head>
<body>
    <div id="test"></div>
    <input type="button" value="css" id="css">
</body>
</html>

5、jQuery内容操作

html();设置或返回所选元素的内容（包括 HTML 标记），相当于JS的innerHTML

text();设置或返回所选元素的文本内容，相当于JS的innerText

val();设置或返回表单域的值，相当于JS的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#html").click(function(){
                console.log($("#test").html());
                $("#test").html("<a href='http://www.taobao.com'>淘宝</a>");
            });

            $("#text").click(function(){
                console.log($("#test").text());
                $("#test").text("<a href='http://www.taobao.com'>淘宝</a>");
            });

            $("#val").click(function(){
                console.log($("#username").val());
                console.log($("#username").val("mary"));
            });
        });
    </script>
</head>
<body>
    <div id="test">
        <h1>这是DIV</h1>
    </div>
    <input type="text" id="username" value="陈微"><br>
    <input type="button" value="html" id="html">
    <input type="button" value="text" id="text">
    <input type="button" value="val" id="val">
</body>
</html>

6、jQuery文档操作

$();创建标签

append();在指定的标签中后置添加

prepend();在指定的标签中前置添加

after();在指定标签的后面添加

before();在指定标签的前面添加

remove();移除指定标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //创建一个能够跳转到B站的超链接
                var newEle = $("<a href='http://www.bilibili.com'>B站</a>");
                //将新建的标签放到id为test的标签中的最后
                //$("#test").append(newEle);

                //将新建的标签放到id为test的标签中的最前面
                //$("#test").prepend(newEle);

                //将新建的标签放到id为test的标签的后面
                //$("#test").after(newEle);

                //将新建的标签放到id为test的标签的前面
                //$("#test").before(newEle);

                //将id为test的标签删除掉
                $("#test").remove();
            });
        });
    </script>
</head>
<body>
    <div id="test" style="background-color: red;">
        <h1>这是DIV</h1>
    </div>
    <input type="button" value="测试" id="btn">
</body>
</html>

7、jQuery动画

显示与隐藏

show(time,function);显示

hide(time,function);隐藏

toggle(time,function);在显示与隐藏之间相互切换

time：显示与隐藏的时间，单位是毫秒

function：回调函数。显示与隐藏完毕之后自动调用的函数。

两个参数都是可选参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script>
        $(function(){
            $("#show").click(function(){
                $("#img").show(1000,function(){
                    alert("显示出来了");
                });
            });

            $("#hide").click(function(){
                $("#img").hide(1000,function(){
                    alert("隐藏起来了");
                });
            });

            $("#toggle").click(function(){
                $("#img").toggle(1000,function(){
                    alert("切换了");
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="show" id="show">
    <input type="button" value="hide" id="hide">
    <input type="button" value="toggle" id="toggle"><br>
    <img src="img/gouza.png" width="300" id="img">
</body>
</html>

8、bootstrap使用方式

在HTML文件中引入对应的bootstrap文件（注意，bootstrap.js是基于jQuery的，所以要先引入jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <link href="bootstrap-3.4.1-dist/css/bootstrap-theme.css" rel="stylesheet">
    <link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <h1>你好，世界！</h1>
</body>
</html>