JavaScript0413笔记

最新推荐文章于 2019-04-13 16:42:28 发布

Sect Arms灬逍

最新推荐文章于 2019-04-13 16:42:28 发布

阅读量152

点赞数

文章标签：作业

常用事件方法
1.元素选择器：基于元素名=名称选取元素
2.id选择器通过html元素的id属性选取指定的元素
3.类选择器通过指定的class查找元素
4.css选择器用于改变html元素的css属性
其他选择器选取所有元素
选取ul下的li元素
我们可以通过jq选择器可以选择html的所有元素。

获取内容
text（）设置或返回元素的文本内容。
html（）获取元素的所有内容包括元素标签。
val（）获取表单的值只能获取（input）。

jq的基础动画
实现基础菜单

1.jqury动画效果，隐藏和显示。

两个方法hide（），show（）。
两个按钮
通过使用hide（）或show（）方法来隐藏或显示html
speed规定隐藏和显示的速度，取值为‘show’，‘fast’，毫秒，
callback参数，是隐藏或显示完成后

toggle（）方法
切换hide（）和show（）方法

$(selector).hide(speed.callback)
$(selector).show(speed.callback)

$("#button3").click(function(){
$("p").toggle(1000.function(){
$("p").css({color:"yellow"})
})

})

slide,点击滑动显示或者隐藏面板
两个方法slidedown（），slideup（），slidetoggle（）

第三个动画效果

通过animate():使用相对值

<script>
 $(document).click(funcction(){
	$("#button").click(function(){
	$("div").animate({left:"200px",opacity:'0.5',height:'+=16px',width:'+=16px'

})
})

})

</script>

1.用于创建自定义的动画
语法：$(selector),animate({params},speed,callback)
必须使用params参数定义形成动画的CSS属性
可选参数和上面的几个方面相同
eg：

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

<script>
$(document).ready(function(){
	$("#button").click(function(){
	$("div").animate({
		left:"200px",opacity:"0.5",height:'+=16px',width:'+=16px'},1000,function(){
		alert("动漫执行完成")

	})

	})

})
</script>

<script>
 $(document).ready(function(){
  $("#button").click(function(){
	var div-$("div")
	div.animation({height:"160px",opacity:0.5},1000)
	div.animation({fontSize:"2em"},100)
	div.animation({width:"160px",opacity:0.5},1000)
	div.animation({height:"100px",opacity:0.9},1000)
	div.animation({fontSize:"10px"},100)

})

})

</script>

使用队列功能，如果在彼此之后编写多个animate()调用jquery，Jquery会创建包含这些方法的调用的内部队列然后逐一运行这些

停止动画stop用于在动画完成前对他进行停止。
暂停动画，那么效果$(’’),暂停队列中的一个动画，如果队列中有多个动画，那么暂停该动画然后系统会执行后面的动画，stop是这样。
然后系统会执行后面的动画。

<script>
  $(document).ready(function(){
   $("#button").click(function(){
	var div = $("div")
	div.animate({height:"160px",opacity:0.5},5000)
	})
	$("#button1").click(function(){
		$("#button").click(function(){
		  $("div").stop()
			})
		})
	})
</script> 
</head>
<body>
<input type="button" value="开始动画" id="button">
<input type="button" value="暂停动画" id="button1">
<div style="background-color:red;height: 100px;width: 100px;position:absolute">world</div>

二级菜单的实现

jquery-----链（chaining）
通过jquery 可以把方法，链接到一起。chaining允许我们在一条语句中运行多个jquery方法。
(在相同的元素上)

$("#p1").css({"‘color’:red"}).slipeUp(1500).slipeDown(1500).animate({backgroundcolor:"blue},1000)
意思：#p1 元素首先会红，然后向上以1.5秒的移动的速度移动，然后向下以1.5秒的速度移动。
。获取一个p标签通过CSS将颜色改成，向上滑动。background-color，blue给他一个速度。
意思就是#P1首先会变红，向上移1.5秒的速度，移动然后向下移1.5s的速度移动最后，将背景颜色变为蓝色。如果不用链，写法，在animate
链式的有点。浏览器不用多次去查找相同的元素

$("#p1").css({'color:red'})
$("#p1").slideUp(1500)
$("#p1").css({'color:red'})
$("#p1").animate({"backgroundColor":blue},1000)

Chaining 的优点
浏览去不多多次查找相同的元素
作业用jq改CSS二级菜单样式。

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javscript">
   $(function(){
       hide();  /*DOM元素加载完就执行隐藏函数*/
    });
   function hide(){
           $(".t2").css("display","none");   /*隐藏函数，就是将二级菜单隐藏*/
   }
   /*以下是第二部分*/
   $(".t1  li").mouseenter(
      function(){
        $(this).find(".t2").css("display","block");  /*鼠标移动到.t1 li上就执行显示函数*/
    }
  );
   $(".t1 li").mouseleave(
    function(){
        hide();   /*鼠标离开后又隐藏*/
     }
 );
 /*第二部分结束*/
</script>

在这里插入图片描述

html
<ul class="t1 fl" >
    <li>一级标题
        <ul class="t2">
            <li>二级标题</li>
            <li>二级标题</li>
            <li>二级标题</li>
        </ul>
    </li>
    <li>一级标题
        <ul class="t2">
            <li>二级标题</li>
            <li>二级标题</li>
            <li>二级标题</li>
        </ul></li>
    <li>一级标题
        <ul class="t2">
            <li>二级标题</li>
            <li>二级标题</li>
            <li>二级标题</li>
        </ul></li>
</ul>

css

    *{
       padding:0;
       margin:0;
    } 
     ul.t1{
        width:300px;
        height:30px;
    }
    li{
      list-style:none;
      line-height:30px;
      text-align:center;
      color:white;   
    }
    }
    .fl > li{
         float:left;
    }
    .t1 > li{
        width:30%;
        margin-left:2%;
        background:black;    
    }
    .t1 > li:hover{
       background: #891298;
   }
    .t2 > li{
       background:#50a3a2;
    }
   .t2 > li:hover{
       opacity: 0.9;
   }

Sect Arms灬逍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript0413笔记

常用事件方法1.元素选择器：基于元素名=名称选取元素2.id选择器通过html元素的id属性选取指定的元素3.类选择器通过指定的class查找元素4.css选择器用于改变html元素的css属性其他选择器选取所有元素选取ul下的li元素我们可以通过jq选择器可以选择html的所有元素。获取内容text（）设置或返回元素的文本内容。html（）获取元素的所有内容包括元素标签。...
复制链接

扫一扫