java day35——JQuery、bootstrap

最新推荐文章于 2021-02-25 06:16:44 发布

chronos+

最新推荐文章于 2021-02-25 06:16:44 发布

阅读量144

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_40905010/article/details/108190190

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

web/day05-day05bootstrap

JQuery基础
JQuery选择器
文本内容设置
属性设置
补充
案例
bootstrap

JQuery基础

使用

jQuery -> 函数 $ -> jQuery

<script src="js/jquery-1.11.0.min.js"></script>
<script>
    $(function () {
        $("#div1").text("新的内容");
    })
</script>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>

页面加载函数

  <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        // JS页面加载函数, 只允许一个, 多个的话会被覆盖
        onload = function() {
            alert("老张");
        }
        onload = function() {
            alert("老王");
        }
        // JQ页面加载函数, 允许有多个, 按照从上往下顺序执行
        $(function() {
            alert("老李");
        });
        $(function() {
            alert("老赵");
        });
    </script>
弹窗：老李
	 老赵
	 老王

与JS区别

JS对象不能使用JQ的函数, JQ对象也不能使用JS的函数/属性
需要将两者进行转换

  <script>
        $(function() {
            // 通过JS给div1设置内容
            var div1 = document.getElementById("div1");
            div1.innerText = "JS设置的新内容";

            // 通过JQ给div2设置内容
            // JQ使用选择器来取代 getElementxxx
            $("#div2").text("JQ设置的新内容");

            // 结论: JS对象不能使用JQ的函数, JQ对象也不能使用JS的函数/属性
            // JS对象, 能不能使用 JQ 的函数 text()
            // JS -> JQ  掌握
            $(div1).text("JQ给div1设置的新内容");
            // JQ对象, 能不能使用 JS 的属性 innerText
            // JQ -> JS  了解
            $("#div2").get(0).innerText = "JS给div2设置的新内容";

        });
    </script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>

JQuery选择器

基本选择器
层级选择器
基本过滤选择器
属性选择器
表单选择器

文本内容设置

innerHTML
innerText -> text()
value

<script>
    $(function() {
        // 获得p标签中的标签内容
        var str = $("#p1").html();
        console.log(str);
        // 设置p标签内容 innerHTML
        $("#p1").html('<font color="red">JQ的html方法添加的标签内容</font>');

        // 获得div标签中的文本内容 innerText
        var strDiv = $("#div1").text();
        console.log(strDiv);
        $("#div1").text('<font color="red">JQ的text方法添加的文本内容</font>');

        // 输入框中的内容, value
        var val = $("input").val();
        console.log(val);
        $("input").val("JQ设置input的内容");
    });

</script>
<body>
    <p id="p1"><u>段落</u></p>
    <div id="div1"><u>div</u></div>
    <input type="text" value="input内容"/>
</body>

属性设置

attr(“属性名”) --> 获得属性对应的值
attr(“属性名”, “值”) --> 设置属性对应的值
– attribute 自定义属性, html不支持的属性 color

prop(“属性名”) --> 获得属性对应的值
prop(“属性名”, “值”) --> 设置属性的值
– property 固有属性, html本身支持的属性 href src checked

addClass(className) --> 添加完的class可以直接使用样式表
removeClass(className)

在这里插入代码片

补充

循环

<script>
        $(function() {
            var arr = ["杭州","宁波",'温州','湖州','台州'];
            // jquery数组.each(callback)
            /*$("div").each(function(i) {
                console.log(i); // 循环的下标
                console.log(this); // 每一个元素 this 属于JS对象
            });*/
            // JQ的全局函数
            $.each(arr, function(i, n) {
                console.log(i); // 循环的下标
                console.log(n); // 取出来的每一个元素
            })
        })
</script>
<body>
    <div>1</div>
    <div>2</div>

文档处理

append()
prepend()
before()
after()

<script>
        $(function (){
            var $op = $("<option>芒果</option>");
            // 将芒果加到梨后面
            // $("select").append($op);
            // 将芒果加到苹果前面
            // $("select").prepend($op);

            // 将芒果加到柿子后面
            // $("option:eq(1)").after($op);
            // $("option:eq(1)").before($op);
            // $op.insertBefore($("option:eq(1)"));
            // 清除所有子元素  innerHTML = "";
            $("select").empty();
        })
    </script>
</head>
<body>
    <select>
        <option>苹果</option>
        <option>柿子</option>
        <option>梨</option>
    </select>

显示效果

show() hide() toggle()
slideDown() slideUp() slideToggle()
fadeIn() fadeOut() fadeToggle()

案例

使用JQuery定时弹广告

全选全不选

表格隔行换色

下拉列表左右选择

注册表单校验

省市二级联动

bootstrap

chronos+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java day35——JQuery、bootstrap

这里写目录标题JQuery基础使用页面加载函数与JS区别JQuery选择器文本内容设置属性设置补充循环文档处理显示效果案例使用JQuery定时弹广告全选全不选表格隔行换色下拉列表左右选择注册表单校验省市二级联动bootstrapJQuery基础使用jQuery -> 函数 $ -> jQuery<script src="js/jquery-1.11.0.min.js"></script><script> $(function () {
复制链接

扫一扫