html_day5 jq运用

1.jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

Jquery它是一个库(框架)，必须先引入。
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段（去掉格式更小）

$(function(){
    Jquery代码
});
<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("老王");
            }[传统的JavaScript页面加载函数是最后一个生效，它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】]
            
            //dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
            jQuery(document).ready(function(){
                alert("李四");
            });[jQuery的页面加载函数可以存在多个(不会发生覆盖)，它会按照顺序进行执行。(dom数加载完成)]
            
            //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>

2.获取元素

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

3.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>

4.Jquery的效果

图片.png

5.弹出广告

<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>

6.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/registImg.jpg)
    </body>
</html>

7.jquery的选择器

query的选择器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>

层级选择器

图片.png

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>

基本过滤选择器
$('li').first() 等价于：$(“li:first”)

图片.png

<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>

属性选择器

图片.png

<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>

表单选择器

图片.png

<script>
            $(function(){
                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });
            });
        </script>

8.jq隔行换色

<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>

9.JQ完成全选和全不选

jquery的属性操作方法 prop()
<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>
attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)

最后编辑于：2017.12.10 05:18:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,711评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,932评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,770评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,799评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,697评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,069评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,535评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,200评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,353评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,290评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,331评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,020评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,610评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,694评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,927评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,330评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,904评论 2赞 341

html_day5 jq运用

推荐阅读更多精彩内容