JQuery基础用法

最新推荐文章于 2023-03-27 17:50:03 发布

Yeauty

最新推荐文章于 2023-03-27 17:50:03 发布

阅读量437

点赞数

文章标签： JQuery

本文链接：https://blog.csdn.net/Yeauty/article/details/53340407

版权

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

1.2 技术分析

【什么是JQuery】

【JQuery的作用是什么】

它封装了很多效果，事件，能够大大的提高我们的开发效率

将我们的页面和Js分离出来

【JQuery的入门】

    <script>            
            window.onload = function(){
                alert("window.onload 结束");
            }

            window.onload = function(){
                 alert("window onload 2  结束啦")
            }
            //jQuery的写法
            jQuery(document).ready(function(){
                alert("jquery ready 结束");   
            });

            jQuery(document).ready(function(){
                alert("jqeuery ready 结束啦");
            });

            //我们发现ready时间可以被多次调用，并且不会像window.onload时间一样被覆盖，执行顺序是按定义顺序执行

            // jQuery  = $
            $(document).ready(function(){
                alert("jqeuery ready 结束啦啦啦");
            });

            //更加简洁的写法
            $(function(){
                alert("jquery 终极简洁版");
            });
        </script>

【JQ和JS之间的转换】

JS对象只能调用JS的属性和方法

JQ对象只能调用JQ的属性和方法

        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            //1. 给按钮注册事件， onclick 事件
            //2. 实现事件对应的函数
            function change(){
                //找到span 元素
                var span = document.getElementById("span");
//              span.innerHTML="我被JS按钮修改了内容";

                $(span).html("我调用了JQ的方法");
            }

            $(function(){
                //1.需要找到要绑定事件的元素
                $("#jq_btn").click(function(){
                    //2. 找到我们要操作的元素
                    //$("#span").html("我被JQ按钮修改啦");
                    $("#span")[0].innerHTML="我调用的是JS属性";
                    $("#span").get(0).innerHTML="我通过get(0)调用的是JS属性";

                });
            });

        </script>

【JQ中根据ID查找元素】

$("#ID")    JQuery中的ID选择器

【JQ中的动画效果】

show : 控制元素显示
hide : 隐藏元素
toggle : 开关效果，循环调用
slideDown : 向下滑动
slideUp : 向上滑动
slideToggle : 开关上下滑动
animate : 自定义动画
stop : 停止动画
delay : 延迟执行

1.3 步骤分析：

注册一个JQ中ready 事件
3秒之后显示广告， show(3000);
显示5秒钟
隐藏广告

代码实现

/*
             1. 确定事件 : onload
             2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)
             3. 广告显示三秒钟
             4. 隐藏广告
             * */
            $(function(){
                function showAD(){
                    $("#ad").show();
                    setTimeout(hideAD,3000);
                }
                function hideAD(){
                    $("#ad").hide();
                }
                setTimeout(showAD,1000);
            });

JQuery中的选择器

选择器的目的是让我们能够更加精确的找到页面中的元素

基本选择器

ID选择器
```
$("#id")
```
类选择器
```
$(".className")
```
元素选择器
```
$("元素的名称")
```
通配符选择器
```
$("*")
```
选择器,选择器
```
$("#id,.className")
```

基本选择器的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //ID选择器
                $("#btn_id").click(function(){
                    $("#one").css("backgroundColor","#bbffaa");
                });
                //元素选择器
                $("#btn_element").click(function(){
                    $("div").css("backgroundColor","#bbffaa");
                });
                //类选择器
                $("#btn_mini").click(function(){
                    $(".mini").css("backgroundColor","#bbffaa");
                });
                //通配符选择器
                $("#btn_all").click(function(){
                    $("*").css("backgroundColor","#bbffaa");
                });
                //多选择器
                $("#btn_selector").click(function(){
                    $(".mini,span").css("backgroundColor","#bbffaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选择ID为one的元素" id="btn_id" />
        <input type="button" value="选择所有div元素" id="btn_element" />
        <input type="button" value="选择所有mini类的元素" id="btn_mini" />
        <input type="button" value="通配符选择器" id="btn_all" />
        <input type="button" value="多选择器" id="btn_selector" />

        <hr />
        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>
    </body>
</html>

JQ中的层级选择器

Ancestor descendant后代选择器
parent > child子元素选择器
prev + next 兄弟元素选择器
prev + siblings 所有兄弟选择器

JQ中层级选择器案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //ancestor descendant 后代选择器
                $("#btn1").click(function(){
                    $("body div").css("backgroundColor","#bbffaa");
                });
                //parent > child 父子选择器
                $("#btn2").click(function(){
                    $("body > div").css("backgroundColor","#bbffaa");
                });
                //prev + next 父子选择器
                $("#btn3").click(function(){
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev + next 兄弟选择器
                $("#btn3").click(function(){
                    $("#two + div").css("backgroundColor","#bbffaa");
                });
                //prev ~ next 同辈选择器
                $("#btn4").click(function(){
                    $("#one ~ div").css("backgroundColor","#bbffaa");
                });


            });
        </script>
    </head>
    <body>
        <input type="button" value="选择body中所有的后代div" id="btn1" />
        <input type="button" value="选择body中所有的子div" id="btn2" />
        <input type="button" value="选择id为two的下一个元素" id="btn3" />
        <input type="button" value="选择id为one的所有同辈" id="btn4" />


        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的基本过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的基本过滤器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //找到第一个mini div
                $("#btn1").click(function(){
                    $("div .mini:first").css("backgroundColor","#bbffaa");
                });
                //找到最后一个mini div
                $("#btn2").click(function(){
                    $("div .mini:last").css("backgroundColor","#bbffaa");
                });

                //过滤基数/偶数div
                $("#btn3").click(function(){
                    $("body div:odd").css("backgroundColor","#FFFFEE");
                    $("body div:even").css("backgroundColor","#bbffaa");
                });
                //找出所有的div 剔除id为two
                $("#btn4").click(function(){
                    $("body div:not(#two)").css("backgroundColor","#FFFFEE");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="找出第一个mini div" id="btn1" />
        <input type="button" value="找出最后一个mini div" id="btn2" />
        <input type="button" value="过滤基数/偶数div" id="btn3" />
        <input type="button" value="找过所有div 剔除Id为two" id="btn4" />




        <hr />

        <div id="one">
            <div class="mini">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的属性选择器</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //选择有title属性的div
                $("#btn1").click(function(){
                    $("div[title]").css("backgroundColor","#bbffaa");
                });
                //选择有title='bbb'属性的div
                $("#btn2").click(function(){
                    $("div[title='bbb']").css("backgroundColor","#bbffaa");
                });

            });
        </script>
    </head>
    <body>
        <input type="button" value="选择有title属性的div" id="btn1" />
        <input type="button" value="选择有title='bbb'属性的div" id="btn2" />


        <hr />

        <div id="one">
            <div class="mini" title="aaa">
                1-111
            </div>
        </div>
        <div id="two">
            <div class="mini" title="bbb">
                2-111
            </div>
            <div class="mini">
                2-222
            </div>
        </div>
        <div id="three">
            <div class="mini">
                3-111
            </div>
            <div class="mini">
                3-222
            </div>
            <div class="mini">
                3-333
            </div>
        </div>
        <span id="four">
            span
        </span>

    </body>
</html>

JQ中的表单过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $(":text").css("background-color","#E9FBEB")
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="筛选出所有的input" />
        <hr />
        <form>
          <input type="text" />
          <input type="checkbox" />
          <input type="radio" />
          <input type="image" />
          <input type="file" />
          <input type="submit" />
          <input type="reset" />
          <input type="password" />
          <input type="button" />
          <select><option/></select>
          <textarea></textarea>
          <button></button>
        </form>
    </body>
</html>

使用JQ完成表格的隔行换色

需求分析:

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析:

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>商品分类</title>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            function init(){
                /*
                    var table = document.getElementById("id_table");
                    var rows = table.tBodies[0].rows;
                    //遍历表格
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if(i%2 == 0){
                            row.style.background="red";
                        }else{
                            row.style.background = "yellow";
                        }
                    }
                */
            }

            $(function(){
                //1.找到要筛选出来的行
                $("tbody > tr:even").css("background-color","red");
                $("tbody > tr:odd").css("background-color","yellow");

            });
        </script>
    </head>
    <body onload="init()">
        <table border="1" width="600px" style="margin: 0 auto;" id="id_table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>分类ID</td>
                    <td>分类名称</td>
                    <td>分类商品</td>
                    <td>分类描述</td>
                    <td>
                        操作
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>1</td>
                    <td>手机数码</td>
                    <td>肾7,肾8,肾9,锤子</td>
                    <td>这里面都是肾,购买需谨慎</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>2</td>
                    <td>冰箱彩电</td>
                    <td>海尔,TCL,康佳</td>
                    <td>支持国货,从你我做起</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>3</td>
                    <td>鞋靴箱包</td>
                    <td>耐克,阿迪,乔丹</td>
                    <td>买鞋还是耐克的好啊!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>4</td>
                    <td>香烟酒水</td>
                    <td>黄鹤楼,芙蓉王,红塔山</td>
                    <td>饭后一根烟,肾做活神仙!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>5</td>
                    <td>黑马超市</td>
                    <td>JAVA,PHP,JAVAEE</td>
                    <td>黑马在线教育产品,棒棒哒!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

使用JQuery完成表单的全选全不选功能

需求分析

在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,

技术分析:

通过JQ来修改页面元素的属性, 演示代码如下

$(function(){
    $("#bt1").click(function(){
        // 获得属性的值
        // alert($("#img1").attr("src"));
        // 修改属性的值:
        $("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
    });
});

代码实现:

$(function(){
                /*
                 1. 确定事件 onclick
                 2. 要操作的元素: 顶部全选按钮
                 3. 实现点击事件
                    * 获取当前选中的状态
                    * 使用过滤器,过滤出所有的checkbox
                    * 改变他们的状态
                 */
                $("#ckall").click(function(){
//                  var checked = $("#ckall").prop("checked");
                    var checked = this.checked;
//                  alert(checked);
                    $("tbody input[type='checkbox']").prop("checked",checked);
                })
            });

使用JQ完成省市联动效果

需求分析:

在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

JQuery中的遍历:

一种方法:

JQ的对象.each(function(i,n){

});

第二种方法:

$.each(数组,function(i,n){

});

如何使用JQ来添加元素

JQuery的DOM操作
    JQ中添加元素:
        append(); 添加字节点
        appendTo(); 将自己添加到

步骤分析:

定义一个二维数组,用来保存城市的信息
确定事件 onchange事件
找到要操作的select
获取选中的城市
动态添加option节点到城市select中

代码实现:

var provinces = [
                ["武汉市","黄石市","随州市","荆门市"],
                ["长沙市","株洲市","邵阳市"],
                ["广州市","深圳市","东莞市","惠州市"]
            ];

$(function(){
    $("#selectProvince").change(function(){
    //alert(this.value);
    var cities = provinces[this.value];
    //                  $("#selectCity").empty();
    $("#selectCity")[0].options.length = 0;
    $(cities).each(function(i,n){
      $("#selectCity").append("<option>"+n+"</option>")
      });
    });
});

使用JQ完成下拉列表左右选择

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

技术分析

JQuery中的选择器使用,还有文档的增删

步骤分析

引入jquery文件
页面加载完成的事件
在链接上添加一个事件
使用append()函数将选中的option 添加子节点

代码实现

            $(function(){
                $("#clickOne").click(function(){
//                  var value = $("#selectLeft>option:selected").val();
                    $("#selectRight").append($("#selectLeft>option:selected"));
//                  $("#selectLeft>option:selected").appendTo("#selectRight");
                });

                $("#clickAll").click(function(){
                    $("#selectRight").append($("#selectLeft>option"));
                });
            });

Yeauty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础用法

1. 使用JQuery完成页面定时弹出广告1.1 需求分析：当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告1.2 技术分析【什么是JQuery】【JQuery的作用是什么】它封装了很多效果，事件，能够大大的提高我们的开发效率将我们的页面和Js分离出来【JQuery的入门】 <script> window.onload = fun
复制链接

扫一扫