html_day5 jq运用

作者: 路人爱早茶 | 来源:发表于2017-08-31 19:01 被阅读0次

html_day5 jq运用
前端小白进入公司最近遇到的坑
jq初始,选择器,事件,内容操作,样式操作
web前端案例-开发饿了么LBS移动地图点餐系统
web前端基础小案例：制作百度换肤效果
JQ原理
JQ处理单选框radio（获取值改变值修改样式）
仿写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()来替代(在各个版本都适用)

html_day5 jq运用
1.jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器...
前端小白进入公司最近遇到的坑
我作为一个只学过html5,css3,javascript,运用Photoshop,webstrom切图实现,jQ...
jq初始,选择器,事件,内容操作,样式操作
jq初始 jq选择器 jq事件 jq内容操作 jq样式操作
web前端案例-开发饿了么LBS移动地图点餐系统
知识点：：html/css，标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、...
web前端基础小案例：制作百度换肤效果
知识点：html加css，标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、逻...
JQ原理
jq的基本结构 jq入口函数分析常用的jq方法 JQ 工具方法
JQ处理单选框radio（获取值改变值修改样式）
1、JQ获取radio的值//HTML //JQ 2、JQ获取radio的选中状态 3、JQ改变radio的选中状...
仿写JQ方法
原生js仿写jq 仿写jq的click方法仿写jq的on事件仿写jq的eq方法仿写jq的 css方法仿写j...
前端
1.JQ动画 2.JQ循环
非常有用二
1.jQuery 插件库[http://www.jq22.com/jq4-jq1] Look for less ,...