web实训知识点——0409

最新推荐文章于 2021-07-09 10:22:49 发布

oqqYaZi1234

最新推荐文章于 2021-07-09 10:22:49 发布

阅读量157

点赞数

分类专栏： web实训知识点0409 文章标签： web实训知识点0409

本文链接：https://blog.csdn.net/oqqYaZi1234/article/details/89290165

版权

web实训知识点0409 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

总结Jquery选择器：

1.元素选择器：基于元素名=名称选取元素
eg:$(“p”)------所有标签为p的元素
我想获取标签为p的元素的第一个，或者第三个
2.id选择器：通过HTML元素的id属性选取指定的元素
eg:

$(#“nav”)
3.类选择器：通过指定的class查找元素
eg：

$(.“name”)
4.继承选择器
5.CSS选择器：用于改变HTML元素的CSS属性
eg:

$(“P”).css({‘background-color’:‘red’})

一、动画隐藏和显示

方法：hide（）和show（）
toggle（）表示切换hide和show的状态

$(document).ready(function(){
        $("#button1").click(function(){
           $ ( "p").hide(500,function(){
               alert("隐藏完成")
           })
        })
        $("#button2").click(function(){
            $( "p").show(200,function(){
                alert("显示成功")
            })
        })
        $("#button3").click(function(){
                $("p").toggle(1000,function(){
                    $("p").css({color:"yellow"})
                })
            })
        })

eg：

默认情况下html有一个静态的位置，且是不可移动的，如果需要改变，那么需将元素position属性设置为absolute、relative、fixed

通过animate，把

$(document).ready(function(){

$("#button").click(function(){

$("div").animate({

    left:"200px",opacity:"0.5",height:'160px',width:'160px'},1000,function(){

    alert("动漫执行完成")

})

})})

二.jQuery的动画效果（滑动）
有两个方法：#slide和#panel

<style>
      #slide,#panel{
          padding: 5px;
          text-align: center;
          background-color: #33b5e5;
          border: solid 1px red;
      }
      #panel{
          display: none;
          padding: 40px;
      }
  </style>
    <script>
    $(document).ready(function(){
       $("#slide").click(function(){
       $("#panel").slideToggle()
    })
    })
    </script>
</head>
<body>
<div id = "slide"> 点我滑动或者隐藏</div>
<div id = "panel"> hello</div>
</body>