jQuery

最新推荐文章于 2021-09-28 20:19:49 发布

Statikk_Shiv

最新推荐文章于 2021-09-28 20:19:49 发布

阅读量759

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_22242915/article/details/79203289

版权

本文详细介绍了jQuery与JavaScript的页面加载差异，重点讲解了jQuery中的选择器，包括基本选择器、层级选择器、过滤选择器等，并展示了如何进行DOM与jQuery对象之间的转换。此外，还探讨了jQuery中的toggle()方法、定时弹出广告的实现以及表单选择器的使用。同时，文中还涵盖了如何进行表格隔行换色和复选框的全选、全不选操作。

摘要由CSDN通过智能技术生成

jQuery和js页面加载区别

jquery-1.8.3.min是jquery-1.8.3的压缩版，代码都在一行上，开发时候用这个。

<head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script>
            window.onload=function(){
    
                alert("第一个window.onload");
            }
            //传统的页面加载方式会存在覆盖问题，第二个会覆盖第一个
            //加载比jQuery慢，整个页面加载完毕，包括里面的其他内容，比如图片等信息
            window.onload=function(){
    
                alert("第二个window.onload");
            }
            //jQuery比js加载要快（当整个DOM树结构绘制完毕就会加载）
            jQuery(document).ready(function(){
    
                alert("第一个jQuery加载");
            });

            //jQuery不存在覆盖问题，而且是顺序加载
            $(document).ready(function(){
    
                alert("第二个jQuery加载");
            });

            $(function{
    
                alert("第三个jQuery加载");
            });
        </script>
    </head>
    <body>

    </body>

Dom与jQuery对象之间的转换

jQuery对象无法操作js里面的属性和方法
比如document.getElementById(“span1”).innerHTML=”HELLO!!”
用jQuery就获取不到js属性$(“#span1”).innerHTML=”jQuery!” （错误的）
jQuery把js的属性方法都封装起来了，应该调用适当的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dom与jQuery对象之间的转换</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script>
            function write1(){
    
//              JS的DOM操作
                document.getElementById("span1").innerHTML="HELLO!!";

                var spanEle=document.getElementById("span1");

                //将DOM对象转换成jQuery对象
                $(spanEle).html("DOM对象转换成jQuery对象")
            }
            $(function(){
    
                $("#btn").click(function(){
    
                    //jQuery对象无法操作js里面的属性和方法
                    //$("#span1").innerHTML="jQuery!"
                    $("#span1").html("jQuery!!");

                    //方式1：jQuery对象向DOM对象转换
                    $("#span1").get(0).innerHTML="get(0)";

                    //方式2：jQuery对象向DOM对象转换
                    $("#span1")[0].innerHTML="[0]";
                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="write1()"/>
        <input type="button" value="JQ写入" id="btn"/><br />
        你好&nbsp;&nbsp;<span id="span1">hello world!</span>
    </body>
</html>

jQuery定时弹出广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                border: 0px solid red;
                width: 1300px;
                height: 2170px;
                margin: auto;
            }
            /*#logo{
                border: 0px solid black;
                width: 1300px;
                height: 50px;
            }*/
            .top{
                border: 0px solid blue;
                width: 431px;
                height: 50px;
                float: left;
            }
            #top{
                padding-top: 12px;
                height: 38px;
            }
            #menu{
                border: 0px solid red;
                width: 1300px;
                height: 50px;
                background-color: black;
                margin-bottom: 10px;
            }
            ul li{
                display: inline;
                color: white;
            }
            #clear{
                clear: both;
            }

            #product{
                border: 0px solid red;
                width: 1300px;
                height: 558px;
            }
            #product_top{
                border: 0px solid blue;
                width: 100%;
                height: 45px;
                padding-top: 8px;
            }
            #product_bottom{
                border: 0px solid green;
                width: 100%;
                height: 500px;
            }
            #product_bottom_left{
                border: 0px solid red;
                width: 200px;
                height: 500px;
                float: left;
            }
            #product_bottom_right{
                border: 0px solid blue;
                width: 1094px;
                height: 500px;
                float: left;
            }
            #big{
                border: 0px solid red;
                width: 544px;
                height: 248px;
                float: left;
            }
            .small{
                border: 0px solid blue;
                width: 180px;
                height: 248px;
                float: left;
                /*让里面的内容居中*/
                text-align: center;
            }

            #bottom{
                text-align: center;
            }

            a{
                text-decoration: none;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
    
                //1.书写显示广告图片的定时操作
                time = setInterval("showAd()",3000);
            });

            //2.书写显示广告图片的函数
            function showAd(){
    
                //3.获取广告图片，并让其显示
                //$("#img2").show(1000);
                //$("#img2").slideDown(5000);
                $("#img2").fadeIn(4000);
                //4.清除显示图片定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time = setInterval("hiddenAd()",3000);
            }

            function hiddenAd(){
    
                //6.获取广告图片，并让其隐藏
                //$("#img2").hide();
                //$("#img2").slideUp(5000);
                $("#img2").fadeOut(6000);
                //7.清除隐藏图片的定时操作
                clearInterval(time);
            }
        </script>
    </head>
    <body onload="init()">
        <div id="father">
            <!--定时弹出广告图片位置-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>

            <!--1.logo部分-->
            <div id="logo">
                <div class="top">
                    <img src="../img/logo2.png" height="46px"/>
                </div>
                <div class="top">
                    <img src="../img/header.png" height="46px" />
                </div>
                <div class="top" id="top">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <div id="clear">

            </div>
            <!--2.导航栏部分-->
            <div id="menu">
                <ul>
                    <a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>奢侈品</li></a>
                </ul>
            </div>
            <!--3.轮播图部分-->
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img1"/>
            </div>
            <!--4.最新商品-->
            <div id="product">
                <div id="product_top">
                    &nbsp;&nbsp;&nbsp;
                    <span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg" />
                </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <

最低0.47元/天解锁文章

Statikk_Shiv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery和js页面加载区别 jquery-1.8.3.min是jquery-1.8.3的压缩版，代码都在一行上，开发时候用这个。<head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../js/jquery-1.8.3.j
复制链接

扫一扫

专栏目录