java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)

1.JQuery:

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计 的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

 

 

2..JQuery的声明:

 

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <!-- jQuery的文件引入,一定要在jQuery代码之前 -->
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            // 第一种声明jQuery的方式
            /*$(function(){// jQuery只要定义,就在页面加载完毕后自动触发

            });*/

            // 第二种声明jQuery的方式
            /*$(document).ready(function(){
                alert("我是jQuery");
            });*/


            // 在html中,使用类样式  .
            // 使用id样式 #
            // 标签样式 直接标签名
            // 在jQuery中,同样遵循这个原则
            $(function(){// 一旦不写定义jQuery,就无法编写jQuery代码
                // 既可以写jQuery代码也可以写js代码
                // 但是jQuery代码坚决不能写在$(function(){})的外面
                var x = document.getElementById("div1");
                // 使用jQuery通过id选择器选中div标签
                var div1 = $("#div1");// 得到Object对象,这个对象称之为jQuery对象
                alert(div1);
                alert(x);


                var div2 = $("div");
                alert(div2);

                var div3 = $(".div2");
                alert(div3);

            });

    

        </script>
        
    </head>
    
        <body>
            <div class="div2" id="div1" style="width:100px; height:100px; background: red;"></div>
            <div class="div2" id="div2" style="width:100px; height:100px; background: red;"></div>
            <div class="div2" id="div3" style="width:100px; height:100px; background: red;"></div>
        </body>
</html>

3.JS和JQ对象的区别,prop,attr,addClass,offset

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <style type="text/css">
            .test {
                background: red;
                color:red;
            }
            .test2{
                color:green;
            }
        </style>
        <!-- jQuery的文件引入,一定要在jQuery代码之前 -->
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            // JS中获取的对象永远是一个DOM对象,俗称js对象
            // 但是jQuery获取的是一个jQuery的对象,Object对象
            // attr和prop很重要
            $(document).ready(function(){
                var x = $("h1");
                
                var x = $("h1");// 获取到所有的h1标签,返回的Object对象,并不是数组
                $("h1").each(function(index){
                    alert(index);// 就是选中标签下标
                    alert($(this).text());// 循环中的每一个h1标签对象
                });
                alert(x.length);
                for(var i = 0; i < x.length; i++) {
                    var y = x.get(i);// heading对象(拿到每一个h1标签对象,一个整体------>转换为Document对象,会成为一个js对象)
                    alert(y.innerHTML);
                    alert(x.index());// 永远是0?
                }

                alert($("h1").index($("#hh2")));// index返回的是一个整数类型,返回的是某个元素的下标

                 attr
                alert($("#ins").prop("name"));// attr在1.6之前很常用,虽然这个函数没有被废弃,但是在1.6版本以后就被prop所代替了
                 attr和prop不但可以获取值,也可以赋值
                alert($("input").attr("id","12"));
                alert($("#12"));

                $("input").removeAttr("id");// 引出attr

                 addClass:添加样式,类样式
                $("span").addClass("test");
                $("span").removeClass("test");// 移除样式
                $("span").addClass("test2");

                alert($("#hh2").css("color"));// css函数获取某个标签的样式的值

                alert($("#hh2").offset().left);// 偏移量,说白了坐标

            });

        </script>
        
    </head>
    
        <body>
            <input type="button" name="我是" value="测试" />
            <h1 id="hh" name="hh1">h11</h1>
            <h1 id="hh2" style="color:red;">h12</h1>
            <h1>h13</h1>
            <h1>h14</h1>


            <span>您的用户名格式错误</span>
            <span>您的密码格式错误</span>
        </body>
</html>

4.绑定事件,trigger

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <style type="text/css">
            .test {
                background: red;
                color:red;
            }
            .test2{
                color:green;
            }
        </style>
        <!-- jQuery的文件引入,一定要在jQuery代码之前 -->
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                // 相当于给input框绑定上onclick事件
                // 第一种写法
                /*$("input").click(function(){
                    alert(1111);
                });*/
                // 第二种写法
                $("ul").on("click","li",function(){// 使用on的时候(如果有选择器的话),必须要存在上下级的关系
                    // 选中ul给ul绑定点击事件,这个事件作用于li标签--->直接把事件绑定到了li身上
                    console.log($(this).text());
                });



                $("#ins1").click(function(){
                    alert(22222);
                });

                // 会和你伴随一生
                $("#ins1").trigger("click");// 自动触发事件,首先找到id为ins1的input对象,然后触发这个绑定click

                



            });

        </script>
        
    </head>
    
        <body>
            <input id="ins1" type="button" value="测试" />
            <input type="button" value="测试" />
            <span id="span1">我是span</span>
            
            <ul>
                <li>我是li</li>
                <li>我是li2</li>
            </ul>
        </body>
</html>

5.dblclick,change事件

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <style type="text/css">
            .test {
                background: red;
                color:red;
            }
            .test2{
                color:green;
            }
        </style>
        <!-- jQuery的文件引入,一定要在jQuery代码之前 -->
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript">

            $(function(){
                // 所有的jQuery代码都要写在这里
                //在js中所有的事件都需要有一个on前缀
                //但是在jQuery中,不需要这个on前缀
                $("input").dblclick(function(){// 双击
                    alert("我是dblclick");//double click
                });
                // 在js中有onsubmit事件---->submit

                // 当发生改变的时候会调用的函数change
                $("#ins1").change(function(){
                    alert("我是change");
                });

            });


        </script>
        
    </head>
    
        <body>
            <input type="button" value="测试" /><br />
            用户名<input type="text" id="ins1" />
        </body>
</html>

6.显示隐藏页面效果,hide,show,toggle;slideUp,slideDown,slideToggle

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <style type="text/css">
            .test {
                background: red;
                color:red;
            }
            .test2{
                color:green;
            }
        </style>
        <!-- jQuery的文件引入,一定要在jQuery代码之前 -->
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript">

            $(function(){
                // 所有的jQuery代码都要写在这里
                // 在js中有隐藏和显示,在jQuery中自带隐藏函数
                // 里面的参数:隐藏或显示需要的毫秒数,如果不填默认为0
                $("#hide").click(function(){
                    $("div").hide(1000);// 把一个元素隐藏
                });
                $("#show").click(function(){
                    $("div").show(1000);// 把一个元素显示
                });
                $("#show_or_hide").click(function(){
                    $("div").toggle(1000);// 自动显示隐藏
                });
                $("#slide_up").click(function(){
                    $("div").slideUp();
                });
                $("#slide_down").click(function(){
                    $("div").slideDown();
                });

                $("#slide_toggle").click(function(){
                    $("div").slideToggle();
                });

            });


        </script>
        
    </head>
    
        <body>
            <div style="height: 200px; width: 200px; background: red;"></div>
            <input id="hide" type="button" value="隐藏" />
            <input id="show" type="button" value="显示" />
            <input id="show_or_hide" type="button" value="显示/隐藏" />
            <input id="slide_up" type="button" value="隐藏" />
            <input id="slide_down" type="button" value="显示" />
            <input id="slide_toggle" type="button" value="显示/隐藏" />
        </body>
</html>

7.id选择器,标签选择器,类选择器

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script>
            // id选择器,标签选择器,类选择器
            // 复杂的选择器:
            $(function(){
                var test = $("form>input").val();//"form>input"获取form表单下的第一个直接子元素
                alert(test);
                alert($("label+input").val());// label+input:加号代表是相邻的兄弟元素
                var ins = $("label~input");// label~input:~代表所有的兄弟元素
                for(var i =0;i < ins.length; i++){
                    alert(ins.get(i).value);
                }
                alert($("li:first").text());//:first 选择出第一个元素

                alert($("input:not(#test2)").val());// :not 排除某个元素(可以使用选择器进行选择)

                $("tr:even").css("background-color","red");// :even 选中所有下标为偶数的元素,实际上选中的为奇数行
                $("tr:odd").css("background-color","yellow");// :odd 选中所有下标为奇数的元素,实际上是选中的偶数行

                 eq:eqauls相等
                 gt:great than 大于
                 lt:less than 小于
                $("tr:lt(0)").css("background-color","black");// 最小要大于0

                $("tr:last").css("background-color","blue");// 选中最后一个元素

                $("td:empty").css("background-color", "pink");// 选择文本为空的元素

                $("td:contains(22)").css("background-color", "grey");// 选中所有文本带22的元素

                $("tr:has(td)").css("background-color", "purple");// 选中包含某个元素的所有元素(选中所有包含td的tr元素)

                $("td:parent").css("background-color","red");// 选中某个标签的直接父级标签

                alert($("tr:hidden").text());// 选中隐藏的元素

                alert($("tr:visible").text());// 选中所有可见的元素

                $("input[name='test2']").prop("checked", true);// 选中所有name为test2的input标签

                alert($("tr td:first-child").text());// 选中第一个子元素
                alert($("tr td:last-child").text());// 选中最后一个子元素


            });
        </script>
        
    </head>
    
        
        <body>
                <form>
                <input type="" value="ins1" name="ins1" />
                <input type="" value="ins2" name="ins2" />
                <select>
                    <option>我是select</option>
                    <input type="" value="ins3" name="ins3" />
                </select>
            </form> 


                <form>
                 <label>Name:</label>
                 <input name="name" value="1" />
                  <fieldset>
                      <label>Newsletter:</label>
                      <input name="newsletter" value="2" />
                 </fieldset>
                 <input name="none" value="3" />
            </form> 

             <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul> 

             <form>
                <input id="test2" type="" name="ins1" value="1">
                <input class="test1" type="" name="ins2" value="2">
            </form> 
            <table border="1">
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr style="display: none;">
                        <td>11</td>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>111</td>
                        <td>222</td>
                    </tr>
                </tbody>
            </table>

             <form>
                <input type="checkbox" name="test1" /><input type="checkbox" name="test1" /><input type="checkbox" name="test1" />保密
                <input type="checkbox" name="test1" />未知
                <input type="checkbox" name="test2" />呵呵
            </form> 
                



        </body>
    

</html>

8.表单内标签的获取

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script>
        
            $(function(){
                // 在jQuery中,只要是表单中的标签,所有都为input
                $(":input").val();// :input 获取所有的input,包括button,select,textarea,input
                $(":text").val();// :text 选中所有type="text"的input
                $(":enabled").val();// DIY选择出自然顺序一个能够输入的input框
                
            });
        </script>
        
    </head>
    
        
        <body>
            <h1>登录功能</h1>
            <form>
                用户名:<input type="text" name="uname" disabled="disabled" /><br />
                密码:<input type="password" name="uname" /> <br />
                    <input type="submit" value="提交" />

            </form>
        </body>
    

</html>

 9.三张图片的放大与缩小:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" content="text/html">
        <title></title>
        <style type="text/css">
            .img_class {
                width: 400px;
                height: 400px;
            }
        </style>
        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            // 第一步:给图片绑定点击事件
            // 第二步:获取到图片的src值,并且赋值给需要方法的img标签
            // 第三步:把隐藏div需要显示出来
            // 第四步:点击关闭按钮的时候,重新隐藏div
            $(".img_class").click(function(){
                var srcValue = $(this).attr("src");
                $("#show_img").attr("src", srcValue);
                var setValue = $("#tbl").offset();// 获取偏移量,说白了也就是坐标(只有left和top)
                $("#show_div").attr({"left":setValue.left, "top":setValue.top});
                $("#show_div").show(1000);
            });

            $("#close_img").click(function(){
                $("#show_div").hide(1000);
            });
        });
        
        </script>
    </head>
    <body>
        <div id="show_div" style="position: absolute; display: none;">
            <input id="close_img" type="button" name="" value="关闭"><br />
            <img id="show_img" style="width: 800px;height: 700px;" src="">
        </div>
        <table id="tbl">
            <tr>
                <td><img class="img_class" src="img/1.jpg"></td>
                <td><img class="img_class" src="img/2.jpg"></td>
                <td><img class="img_class" src="img/3.jpg"></td>
            </tr>
        </table>
    </body>
</html>

10.Other:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <style type="text/css">/* 就近原则 */
            .odd {/* 偶数行样式 */
                background-color: red;
            }
            .even {/* 奇数行 */
                background-color: blue;
            }
            .selected {
                background-color: black;
                color:white;
            }
            .cars {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script>
            $(function(){
                // 隔行变色:odd
                // :odd 偶数行和:even 奇数行
    /*            $("tr:odd").css("background-color", "red");
                $("tr:even").css("background-color","blue");*/
                // 需求:高亮显示
                $("tbody tr:contains('信阳')").addClass("selected");
                // 需求:标题不能改变颜色
                $("tbody tr:odd").addClass("odd");// 添加的是一个行内样式
                $("tbody tr:even").addClass("even");

                $("#show_hide").click(function(){
                    $(".cars").toggle();
                });

                
            });
            

        </script>
        
    </head>
    
        
        <body>
            <table border="1">
                
                <tbody>
                    <tr id="show_hide">
                        <td><b>汽车</b></td>
                        
                    </tr>
                    <tr class="cars">
                        <td>G151</td>
                        
                    </tr>
                    <tr class="cars">
                        <td>G152</td>
                        
                    </tr>
                    <tr class="cars">
                        <td>G153</td>
                        
                    </tr>
                </tbody>
            </table>
        </body>
</html>

 

posted @ 2017-07-13 09:54  咫尺天涯是路人丶  阅读(419)  评论(0编辑  收藏  举报