JQuery- JQuery学习

 

jQuery与JavaScript加载页面的区别

1.JavaScript传统的方式页面加载会存在覆盖问题,加载比jQuery慢(整个页面加载完毕<包含里面的其他内容,比如图片>)

2.jQuery的加载比JavaScript加载要快!(当整个dom数结构绘制完毕就会加载)

3.jQuery不存在覆盖问题,加载的时候是顺序执行

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ与JavaScript加载页面的区别</title>
        <script type="text/" src="../../js/-1.8.3.min.js" ></script>
        <script>
            window.onload = function(){
                alert("张三");
            }
            
            //传统的方式页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕<包含里面的其他内容,比如图片>)
            window.onload = function(){
                alert("老宋");
            }
            
            //JQ的加载比JS加载要快!(当整个dom数结构绘制完毕就会加载)
            (document).ready(function(){
                alert("李四");
            });
            
            //JQ不存在覆盖问题,加载的时候是顺序执行
            $(document).ready(function(){
                alert("王五");
            });
            
            //简写方式
            $(function(){
                alert("赵六");
            });
            
        </script>
    </head>
    <body>
    </body>
</html>
复制代码

 jQuery的获取

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的获取</title>
        <script type="text/" src="../../js/-1.8.3.min.js" ></script>
        <script>
            $(function(){
                //1.js的获取
                /*document.getElementById("btn").onclick=function(){
                    location.href="惊喜.html";
                }*/
                
                
                //2.jq的获取======>$("#btn")
                $("#btn").click(function(){
                    location.href="惊喜.html";
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜!" id="btn"/>
    </body>
</html>
复制代码

DOM对象与jque对象的转换

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM对象与JQ对象的转换</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
        <script>
            function write1(){
                //1.JS的DOM操作
                //DOM对象无法操作JQ对象的属性和方法
                //document.getElementById("span1").innerHTML="萌萌哒";
                var spanEle = document.getElementById("span1");
                
                //将DOM对象转换成JQ对象
                $(spanEle).html("思密达");
                
            }
            
            
            $(function(){
                $("#btn").click(function(){
                    
                    //jQuery对象无法操作,JS技巧里面的修行
                    //$("#span1").innerHTML = "呵呵哒";
                    $("#span1").html("呵呵哒");
                    
                    //jq对象向DOM对象转换方式一
                    $("#span1").get(0).innerHTML="美美哒!";
                    
                    //jq对象向DOM对象转换方式一
                    $("#span1")[0].innerHTML="棒棒哒";
                    
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="write1()"/>
        <input type="button" value="JQ写入" id="btn" /><br />
        班长:<span id="span1">你好帅!</span>
        
    </body>
</html>
复制代码

 使用jQuery完成首页定时弹出广告图片

实现步骤

第一步:引入jQuery相关的文件

第二步:书写页面加载函数

第三步:在页面加载函数中,获取显示广告图片的元素

第四步:设置定时操作(显示广告图片的函数)

第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())

第六步:清除显示广告图片的定时操作

第七步:设置定时操作(隐藏广告图片的函数)

第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())

第九步:清除隐藏广告图片的定时操作

代码实现

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                //1.书写显示广告的定时操作
                time=setInterval("showAd()",3000);
            });
            //2.书写显示广告图片的函数
            function showAd(){
                //3.获取广告图片
                //$("#img2").show(1000);
                $("#img2").slideDown(1000);
                //4.清除显示图片的定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time=setInterval("hiddenAd()",3000);
            }
            function hiddenAd(){
                //6.获取图片广告图片,并让其隐藏
                //$("#img2").hide();
                $("#img2").slideUp(1000);
                //7.清除隐藏图片的定时操作
                clearInterval(time);
            }
            
        </script>
    </head>
    <body>
        <div id="father" style="height: 500px;width: 500px;">
            <img src="../img/1.jpg" width="100%" style="display: none" id="img2" />
            <!--<input type="button" value="下一张" " />-->
            <img src="../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>
复制代码

 toggle()的使用

切换元素的可见状态

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见.

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle的使用</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 350;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#img1").toggle();
                });
            });
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="显示/隐藏" id="btn" /><br />
            <img src="../img/飞机05.gif" width="100%" height="100%" id="img1" />
        </div>
    </body>
</html>
复制代码

 使用jQuery完成表格隔行变色

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行变色</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            //1.页面加载
            $(function(){
                //2.获取tbody下面的偶数行并设置背景颜色
                $("tbody>tr:even").css("background-color","yellow");
                //3.获取tbody下面的齐数行并设置背景颜色
                $("tbody tr:odd").css("background-color","pink");
            });
        </script>
        
    </head>
    <body >
        <table border="1" width="500" height="50" align="center" id="tb1">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
复制代码

 使用jQuery实现全选和全不选

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全选和全不选</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                
                $("#select").click(function(){
                    //获取下面所有的复选框并将其选中状态,设置跟编码的eagel
                    //attr 方法与jQuery的版本有关,在1.8.3及其以下有效
                    //$("tbody input").attr("checked",this.checked);
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>
    </head>
    <body >
        <table border="1" width="500" height="50" align="center" id="tb1">
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox"  id="select"/></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"/ class="selectOne"></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectOne" /></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectOne" /></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="selectOne" /></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
复制代码

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市二级联动</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                
                //2.创建二维数组用于存储省份和城市
                var cities = new Array(3);
                cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1]=new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
                
                $("#province").change(function(){
                    //alert("aa");
                    //1.获取用户选择的省份
                    var val = this.value;
                    //alert(val);
                    //3.遍历二维数组中的省份
                    $.each(cities, function(i, n){
                        //alert(i+":"+n);
                        //4.判断用户选择的省份和遍历省份
                        if(val==i){
                            //5.遍历该省份的所有城市
                            $.each(cities[i],function(j, m){
                                //alert(m);
                                //6.创建城市文本节点
                                var textNode = document.createTextNode(m);
                                //7.创建option元素节点
                                var opEle = document.createElement("option");
                                //8.将城市文本节点添加到option元素节点中去
                                $(opEle).append(textNode);
                                //9.将option元素节点追加到第二个下拉列包啊
                                $(opEle).appendTo($("#city"));
                            })
                        }
                    })
                    
                    
                    });
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <select id="province">
                        <option>--请选择--</option>
                        <option value="0">湖北</option>
                        <option value="1">湖南</option>
                        <option value="2">河北</option>
                        <option value="3">河南</option>
                    </select>
                    <select id="city"></select>
                </td>
            </tr>
        </table>
    </body>
</html>
复制代码

 

 

 

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
博客
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论