JQ的学习

编程语言 2018-08-08 17:42:11 阅读次数: 0

Jquery的简单入门

所有的jquery代码写在页面加载函数

$(function(){
    Jquery代码
});

JQ加载比JS快，JS会发生覆盖而JQ不会发生覆盖

<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery入门</title>
        <script src="../../js/jquery-1.8.3.js"></script>
        <script>
            //整个文档加载完毕后执行
            /*function init(){
                alert("张三");
            }*/

            /*window.onload= function(){
                alert("张三");
            }

            //整个文档加载完毕后(包括图片)执行
            window.onload= function(){
                alert("老王");
            }

            //dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
            jQuery(document).ready(function(){
                alert("李四");
            });

            //jquery的简写方法(页面加载)
            $(function(){
                alert("王五");
            });
            */

            function init(){
                document.getElementById("a1").onclick= function(){
                    location.href="";
                }
            }

            $(function(){
                document.getElementById("a1").onclick= function(){
                    location.href="";
                }
            });

            $(function(){
                document.getElementById("a2").onclick= function(){
                    location.href="";
                }
            });

        </script>

    </head>
    <body onload="init()">
        <a href="#" id="a1">ss</a>
        <a href="#" id="a2"></a>
    </body>
</html>

 获取元素

JS:document.getElementById();
JQ:$(“#id”);

 Jquery对象与DOM对象转换

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            function JSWrite(){
                //document.getElementById("span1").innerHTML="美美哒！";
                var spanEle = document.getElementById("span1");
                $(spanEle).html("美美哒！");
            }

            $(function(){
                /*document.getElementById("btn1").onclick = function(){
                    document.getElementById("span1").innerHTML="帅帅哒！";
                }*/
                $("#btn1").click(function(){
                    //JQ对象转换成DOM对象的第一种方式
                    //$("#span1")[0].innerHTML="呵呵哒！";
                    //JQ对象转换成DOM对象的第二种方式
                    $("#span1").get(0).innerHTML="呵呵哒！";
                });

            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="JSWrite()"/>
        <input type="button" value="JQ写入" id="btn1"/><br /><br />
        <span id="span1">sssss</span>
    </body>
</html>

注意：
JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。

 Jquery的效果

  • show（）：显示
  • hide（）：隐藏
  • fadeIn、fadeOut：滑动
  • slideUp、slideDown：淡入淡出
  • toggle（）：显示/隐藏

JQ完成首页的定时广告弹出

1.实现步骤

第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作

2.代码实现

<script type="text/javascript">
    var time;
    $(function(){
        time=setInterval("showAd()",3000);
    });

    function showAd(){
        //$("#img1").show();
        //$("#img1").slideDown(3000);
        $("#img1").fadeIn(3000);
        clearInterval(time);
        time = setInterval("hideAd()",5000);
    }

    function hideAd(){
        //$("#img1").hide();
        //$("#img1").slideUp(3000);
        $("#img1").slideUp(3000);
        clearInterval(time);
    }

</script>

3.Toggle的使用

<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(){
                    $("#img1").toggle();
                });
            });

        </script>
    </head>
    <body>
        <input type="button" value="显示/隐藏" id="btn1"/><br />
        <img src="../img/registImg.jpg" id="img1" />
    </body>
</html>

jquery的选择器

1. 基本选择器

id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</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(){
                $("#btn1").click(function(){
                    $("#one").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $(".mini").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","pink");
                });
                $("#btn5").click(function(){
                    $("#two .mini").css("background-color","pink");
                });
            });
        </script>       
    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

2. 层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $("body>div").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("#two+div").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    $("#one~div").css("background-color","pink");
                });
            });

        </script>


    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

3. 基本过滤选择器

 $ ('li').first() 等价于：$(“li:first”)

 基本
:first 
:last 
:not 
:even 
:odd 
:eq 
:gt 
:lt 
:header 
:animated 

内容
:contains 
:empty 
:has 
:parent 

可见性
:hidden 
:visible 

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</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(){
                $("#btn1").click(function(){
                    $("div:first").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $("div:last").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("div:odd").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    $("div:even").css("background-color","pink");
                });
            });
        </script>

    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一个div元素"/>
        <input type="button" id="btn2" value="body中的最后一个div元素"/>
        <input type="button" id="btn3" value="选择body中的奇数的div"/>
        <input type="button" id="btn4" value="选择body中的偶数的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

4. 属性选择器

属性
[attribute] 
[attribute=value] 
[attribute!=value] 
[attribute^=value] 
[attribute$=value] 
[attribute*=value] 
[attrSel1][attrSel2][attrSelN]

<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</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(){
                $("#btn1").click(function(){
                    $("div[id]").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $("div[id='two']").css("background-color","pink");
                });
            });

        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择有id属性的div"/>
        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

5. 表单选择器

表单
:input 
:text 
:password 
:radio 
:checkbox 
:submit 
:image 
:reset 
:button 
:file 
:hidden 

表单对象属性
:enabled 
:disabled 
:checked 
:selected 

<html>
    <head>
        <meta charset="UTF-8">
        <title>表单选择器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择所有input元素" />
        <input type="button" id="btn2" value="选择文本框" />
        <br/>
        <form>
            <input type="text" /><br />
            <input type="checkbox" /><br />
            <input type="radio" /><br />
            <input type="image" /><br />
            <input type="file" /><br />
            <input type="submit" />
            <input type="reset" /><br />
            <input type="password" /><br />
            <input type="button" /><br />
            <select><option/></select><br />
            <textarea></textarea><br />
            <button></button>
        </form>
    </body>
</html>

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

1..技术分析

需要使用jquery的选择器(基本选择器、基本过滤选择器)
还需要使用jquery的CSS的方法(css(name,value))

如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作

2.步骤分析

第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

3.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script>
    $(function(){
        $("tbody tr:even").addClass("even");
        $("tbody tr:odd").addClass("odd");
    });
</script>

JQ完成全选和全不选

1.技术分析

需要使用jquery的选择器(id选择器、类选择器)

需要使用jquery的属性操作方法 prop()

2.步骤分析

第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

3.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        //找到下面所有的复选框并设置属性checked()
        /*if($("#select")[0].checked==true){
            $(".selectOne").attr("checked",true)
        }*/
        $("#select").click(function(){
            $(".selectOne").attr("checked",this.checked);
        });
    });
</script>

注意：
1. attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

2.在jquery中如何调用方法？

元素.方法（）

猜你喜欢

转载自blog.csdn.net/qq_39794062/article/details/81433586
jq
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022