python基础-第十二篇-12.1jQuery基础与实例

Posted 2020-08-04 财经知识狂魔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python基础-第十二篇-12.1jQuery基础与实例相关的知识，希望对你有一定的参考价值。

一、查找元素

1、选择器

　　基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

　　层级选择器

$(".outer div") 后代
$(".outer>div") 子代
$(".outer+div") .outer后面的兄弟div（后面一个）
$(".outer~div") .outer后面的所有的兄弟div

　　基本筛选器

$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)")

　　属性选择器

$("[id=\'div1\']")
$("[alex=\'sb\'][id]")

　　表单选择器

$("[type=\'text\']") 简写成$("：text")--只适用于input标签

2、筛选器

　　过滤筛选器

$("li").eq(2)
$("li").first()
$("ul li").hasclass("test") 检测li中是否含有某个特定类，有的话返回true

　　查找筛选器

$("div").children(".test") 找儿子
$("div").find(".test") 子子孙孙
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() 找祖先元素集合 $(".test").parentUntil()
$("div").siblings（）同辈（不包括自己）

二、操作元素

1、属性操作

$("p").text() $("p").html() $(":checkbox").val() 修改--在括号里添值$("#qq2").text("hello")
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked","true")
$(".test").addClass("hide")

2、css操作

（样式） css（“{color:"red",background:"blue"}”）
(位置） offset（） position（） scrollTop（） scrollLeft（）
（尺寸） innerHeight（）不包含边框 outerHeight（）包含边框，两个都包含padding

3、文档处理

　　内部插入

$("#id").append("<b>hello</b>") 在id标签内添加hello内容
$("p").appendto("div") 把p标签添加到div标签内
prepend（） prependto（）

　　外部插入

before() insertBefore()
after() insertAfter()
replaceWith()
remove() 移除标签
empty() 清空内容，标签保留
clone 克隆（用于批量处理）

4、事件

$(document).ready(function(){})======$(function(){}) 最好加上这句，所有文档执行完，但是图片没加载
$("p").click(function(){}) 内部是调用了jQuery的bind方法--事先绑定
$("p").bind("click",function(){}) 事先绑定
$("ul").delegate("li","click",function(){}) 事件委托（事中绑定）

<body>
    <ul>
        <li>11</li>
        <li>33</li>
        <li>66</li>
        <li>46</li>
    </ul>
    <input type="text"/>
    <input id="li" type="button" value="添加"/>
    <script src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $("ul").delegate("li","click",function(){
            console.log(this);
        })
        $("#li").click(function(){
            var txt = $(this).prev().val();
            $("ul").append("<li>"+txt+"</li>");
        })
    </script>
</body>

三、jQuery常见实例

拖动面板

<body>
     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
         <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
         <div style="height: 300px;">
            内容
        </div>
     </div>



    <script src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $("#title").mouseover(function(){
            $(this).css("cursor","move");
        }).mousedown(function(e){
            var _event = e||window.event;
            var old_x = _event.clientX;
            var old_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).mousemove(function(e){
                var _new_event = e||window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = new_x - old_x + parent_left;
                var y = new_y - old_y + parent_top;

                $(this).parent().css({"left":x+"px","top":y+"px"});
            }).mouseup(function(){
                $(this).unbind("mousemove");
            })
        })
    </script>
</body>

clone内容添加与删除

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .inline {
             display: inline-block;
         }
     </style>
 </head>
 <body>
 <div class="container">
     <div class="section">
         <div class="button inline">
             <a id="origin">
                 <button>+</button>
             </a>
             <div class="input inline">
                 <input type="checkbox">
                 <input type="text" value="IP">
             </div>
         </div>
    </div>
 </div>


    <script src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#origin").click(function(){
                var origin = $(this).parent().parent().clone();
                origin.find("a").removeAttr("id").attr("onclick","myremove(this);").children().text("-");
                $(".container").append(origin);
            })
        })
        function myremove(self){
            console.log("123");
            $(self).parent().parent().remove();
        }
    </script>
</body>

滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #flipshow,#content,#fliphide,#toggle{
            padding: 5px;
            text-align: center;
            background-color: blueviolet;
            border:solid 1px red;

        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="toggle">toggle</div>
    <div id="content">helloworld</div>

    <script src="jquery-1.8.2.js"></script>
    <script>
        $(document).ready(function(){
              $("#flipshow").click(function(){
                 $("#content").slideDown(1000);
              });
              $("#fliphide").click(function(){
                 $("#content").slideUp(1000);
              });
              $("#toggle").click(function(){
                 $("#content").slideToggle(1000);
              })
          });
    </script>
</body>
</html>

返回顶部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divH {
            height: 1800px;
        }
        .divT {
            width: 50px;
            height: 50px;
            font-size: 23px;
            background-color: #2F4F4F;
            color: white;
            position: fixed;
            right: 18px;
            bottom: 18px;
        }
        .divT:hover{
            cursor: pointer;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="divH"></div>
    <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

    <script src="jquery-1.8.2.js"></script>
    <script>
        window.onscroll = function(){
            var current = $(window).scrollTop();
            if(current>180){
                $(".divT").removeClass("hide");
            }else{
                $(".divT").addClass("hide");
            }
        }
        function ReturnTop(){
            $(window).scrollTop(0);
        }
    </script>
</body>

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
      <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
      <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>

    <script src="jquery-1.8.2.js"></script>
    <script>
        $(document).ready(function(){
            $("#in").click(function(){
               $("#id1").fadeIn(1000);
               $("#id2").fadeIn(1000);
               $("#id3").fadeIn(1000);

            });
            $("#out").click(function(){
               $("#id1").fadeOut(1000);
               $("#id2").fadeOut(1000);
               $("#id3").fadeOut(1000);

            });
            $("#toggle").click(function(){
               $("#id1").fadeToggle(1000);
               $("#id2").fadeToggle(1000);
               $("#id3").fadeToggle(1000);

            });
            $("#fadeto").click(function(){
               $("#id1").fadeTo(1000,0.4);
               $("#id2").fadeTo(1000,0.5);
               $("#id3").fadeTo(1000,0);
            });
        });
    </script>
</body>
</html>

显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--1 隐藏与显示-->
    <!--2 淡入淡出-->
    <!--3 滑动-->
    <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->

    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <script src="jquery-1.8.2.js"></script>
    <script>

        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show(1000);
            });

        //用于切换被选元素的 hide() 与 show() 方法。
            $("#toggle").click(function(){
                $("p").toggle(2000);
            });
        });

    </script>
</body>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          .menu{
              height: 600px;
              width: 30%;
              background-color: #2F4F4F;
              float: left;
          }
         .title{
             line-height: 50px;
             color: #ddd;
         }
         .title:hover{
             cursor: pointer;
             color: lightcyan;
             font-size: 18px;
         }
         .hide{
             display: none;
         }
    </style>
</head>

<body>
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="Show(this);">菜单一</div>
                <div class="con">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单二</div>
                <div class="con hide">
                    <div>222</div>
                    <div>222</div>
                    <div>222</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单三</div>
                <div class="con hide">
                    <div>333</div>
                    <div>333</div>
                    <div>333</div>
                </div>
            </div>
        </div>
    </div>

    <script src="jquery-1.8.2.js"></script>
    <script>
        function Show(self){
         $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
        }
    </script>
</body>
</html>

Tab菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            border: 1px solid #ccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
            color: white;
        }
        .menu li:hover {
            cursor: pointer;
        }
        .menu a{
            padding: 11px;
        }
        .content{
            border: 1px solid #ccc;
            height: 300px;
            font-size: 30px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: #0099dd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>
              <li xxx="c2" onclick="Tab(this);">菜单二</li>
              <li xxx="c3" onclick="Tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
    </div>

    <script src="jquery-1.8.2.js"></script>
    <script>
        function Tab(self) {
            $(self).addClass("current").siblings().removeClass("current");
            var x = "#" + $(self).attr("xxx");
            $(x).removeClass("hide").siblings().addClass("hide");
        }
    </script>
</body>
</html>

滚动菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;
        }
        li {
            list-style-type: none;
        }
        .pg-body .menu .active{
            background-color: #425a66;
            color: white;
        }
        .pg-body .fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .content{
            position: absolute;
            left: 385px;
            right: 200px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
        }
    </style>

</head>
<body>
    <div class="pg-header">
        <div class="w"></div>
    </div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li menu="funcOne">第一章</li>
                <li menu="funcTwo">第二章</li>
                <li menu="funcStree">第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item" con="funcOne">床前明月管</div>
            <div class="item" con="funcTwo">疑是地上霜</div>
            <div class="item" con="funcStree" style="height: 100px">我是郭德纲</div>
        </div>
    </div>

    <script src="../../jquery-1.12.4.js"></script>
    <script>
        window.onscroll = function () {
            var onTop = $(window).scrollTop();
            if (onTop >= 48){
                $("#menu").addClass("fixed");
            }else {
                $("#menu").removeClass("fixed");
            }

            var flag = false;
            $(".item").each(function () {
                var topH = $(this).offset().top;
                var HH = $(this).height() + topH;
                var wH = $(window).height();

                if ((wH + onTop) == HH){
                    $("ul .active").removeClass("active");
                    $("li:last").addClass("active");
                    flag = true;
                    return
                }
                if (flag){
                    return
                }

                var menuCon = $(this).attr("con");
                if ((topH < onTop) && (onTop < HH)){
                    $("ul [menu=\'" + menuCon +"\']").addClass("active");
                }else {
                    $("ul [menu=\'" + menuCon +"\']").removeClass("active");
                }
            })
        }
    </script>
</body>
</html>

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>购物商城</title>

    <style>
            *{
                margin: 0;
                padding: 0;
            }
            .outer{
                position:relative;
                width:350px;
                height:350px;
                border:1px solid black;
            }
            .outer .small-box{
                position: relative;
                z-index: 1;
            }
            .outer .small-box .mark{
                position: absolute;
                display: block;
                width: 350px;
                height: 350px;
                background-color: #fff;
                filter: alpha(opacity=0);
                opacity: 0;
                z-index: 10;
            }
            .outer .small-box .float-box{
                display: none;
                width: 175px;
                height: 175px;
                position: absolute;
                background: #DAEEFC;
                filter: alpha(opacity=40);
                opacity: 0.4;
            }
            .outer .big-box{
                position: absolute;
                top: 0;
                left: 351px;
                width: 350px;
                height: 350px;
                overflow: hidden;
                border: 1px solid transparent;
                z-index: 1;
            }
            .outer .big-box img{
                position: absolute;
                z-index: 5
            }
    </style>
</head>
<body>

    <div  class="outer">
        <div  class="small-box">
            <div  class="mark"></div>
            <div  class="float-box" ></div>
            <img width="350" height="350" src="../../css/1.jpg">
        </div>
        <div class="big-box">
            <img width="900px" height="900px" src="../../css/1.jpg" >
        </div>
    </div>


<script src="../../jquery-1.12.4.js"></script>

<script>
   $(function(){
        $(".mark").mouseover(function () {
            $(".float-box").css("display","block");
            $(".big-box").css("display","block");
        });

        $(".mark").mouseout(function () {
            $(".float-box").css("display","none");
            $(".big-box").css("display","none");
        });



        $(".mark").mousemove(function (e) {

            var _event = e || window.event;  //兼容多个浏览器的event参数模式

            var float_box_width  = $(".float-box")[0].offsetWidth;
            var float_box_height = $(".float-box")[0].offsetHeight;//175,175


            var float_box_width_half  =  float_box_width / 2;
            var float_box_height_half =  float_box_height/ 2;//87.5,87.5


            var small_box_width  =  $(".outer")[0].offsetWidth;
            var small_box_height =  $(".outer")[0].offsetHeight;//360,360


            var mouse_left = _event.clientX   - float_box_width_half;
            var mouse_top = _event.clientY  - float_box_height_half;


            if (mouse_left < 0) {
                mouse_left = 0;
            } else if (mouse_left > small_box_width - float_box_width) {
                mouse_left = small_box_width - float_box_width;
            }
            if (mouse_top < 0) {
                mouse_top = 0;
            } else if (mouse_top > small_box_height - float_box_height) {
                mouse_top = small_box_height - float_box_height;
            }

            $(".float-box").css("left",mouse_left + "px");
            $(".float-box").css("top",mouse_top + "px");
            
            
            var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width);
            var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height);
            console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,float_box_width)
            console.log(percentX,percentY)
            $(".big-box img").css("left",-percentX * mouse_left + "px");
            $(".big-box img").css("top",-percentY * mouse_top + "px")

        })
   })

</script>
</body>
</html>

商城商品放大镜

View Code

商城菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .hide{
            display:none;
        }
        .header-nav {
            height: 39px;
            background: #c9033b;
        }
        .header-nav .bg{
            background: #c9033b;
        }
        .header-nav .nav-allgoods .menuEvent {
            display: block;
            height: 39px;
            line-height: 39px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-family: 微软雅黑;
            color: #fff;
            width: 100px;
        }
        .header-nav .nav-allgoods .menuEvent .catName {
            height: 39px;
            line-height: 39px;
            font-size: 15px;
        }
        .header-nav .nav-allmenu a {
            display: inline-block;
            height: 39px;
            vertical-align: top;
            padding: 0 15px;
            text-decoration: none;
            color: #fff;
            float: left;
        }
        .header-menu a{
            color:#656565;
        }
        .header-menu .menu-catagory{
            position: absolute;
            background-color: #fff;
            border-left:1px solid #fff;
            height: 316px;
            width: 230px;
             z-index: 4;
             float: left;
        }
        .header-menu .menu-catagory .catagory {
            border-left:4px solid #fff;
            height: 104px;
            border-bottom: solid 1px #eaeaea;
        }
        .header-menu .menu-catagory .catagory:hover {
            height: 102px;
            border-left:4px solid #c9033b;
            border-bottom: solid 1px #bcbcbc;
            border-top: solid 1px #bcbcbc;
        }
        .header-menu .menu-content .item{
            margin-left:230px;
            position:absolute;
            background-color:white;
            height:314px;
            width:500px;
            z-index:4;
            float:left;
            border: solid 1px #bcbcbc;
            border-left:0;
            box-shadow: 1px 1px 5px #999;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    <div class="header-nav">
        <div class="container narrow bg">
            <div class="nav-allgoods left">
                <a id="all_menu_catagory" href="#" class="menuEvent">
                    <b class="catName">全部商品分类</b>>
                    <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="header-menu">
        <div class="container narrow hide">
            <div id="nav_all_menu" class="menu-catagory">
                <div class="catagory" float-content="one">
                    <div class="title">家电</div>
                    <div class="body">
                        <a href="#">空调</a>
                    </div>
                </div>
                <div class="catagory" float-content="two">
                    <div class="title">床上用品</div>
                    <div class="body">
                        <a href="http://www.baidu.com">床单</a>
                    </div>
                </div>
                <div class="catagory" float-content="three">
                    <div class="title">水果</div>
                    <div class="body">
                        <a href="#">橘子</a>
                    </div>
                </div>
            </div>

            <div id="nav_all_content" class="menu-content">
                <div class="item hide" float-id="one">

                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#">菜板</a> </span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="碗">碗</a> </span>

                        </dd>
                    </dl>

                </div>
                <div class="item hide" float-id="two">
                    <dl>
                        <dt><a href="#" class="red">床上用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="">枕头</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">床上用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">夏凉被</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">床上用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">嘿嘿嘿</a> </span>

                        </dd>
                    </dl>
                </div>
                <div class="item hide" float-id="three">
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">微波炉</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="http://www.meilele.com/category-jiaofa" target="_blank" title="角阀">金菜刀</a> </span>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../jquery-1.12.4.js"></script>
<script>
    $(function () {
        Change("#all_menu_catagory","#nav_all_menu","#nav_all_content")
    });

    function Change(menuF,menuS,menuT) {
        $(menuF).bind({
            "mouseover":function () {
            $(menuS).parent().removeClass("hide");
        },"mouseout":function () {
            $(menuS).parent().addClass("hide");
        }
        });

        $(menuS).children().bind({
            "mouseover":function () {
                $(menuS).parent().removeClass("hide图解Python 第十二篇：Django 基础
 Python 第十二篇：HTML基础
 Python之路，第十二篇：Python入门与基础12
 python进阶
 python学习[第十二篇] 数据类型之 集合
 Python第十二篇Dom