web实训——0409

最新推荐文章于 2019-05-14 20:42:44 发布

也平凡

最新推荐文章于 2019-05-14 20:42:44 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/tyc5201314like/article/details/89284537

版权

Jquery的使用

加入Jquery库文档就绪(需要写一个函数$（document），ready（function（{}））)
相当于$function（）{}）
css添加样式：
eg：$（“p”）.css('background-color':‘red’)。------只有一个属性的时候
（'background-color':'red','','',)。------有多个属性的时候

常用的Jquery事件方法：

1.$(document).ready(function(){})
$(document).ready():该方法允许我们在文档加载完成后执行函数
2.click（function（）{}）：当按钮点击事件被触法时会调用一个函数（也就是执行一个方法）

总结Jquery选择器：

1.元素选择器：基于元素名=名称选取元素
eg:$("p")------所有标签为p的元素
我想获取标签为p的元素的第一个，或者第三个
2.id选择器：通过HTML元素的id属性选取指定的元素
eg:<div id=""></div>
$(#"nav")
3.类选择器：通过指定的class查找元素
eg：<div class="name"></div>
$(."name")
4.继承选择器
5.CSS选择器：用于改变HTML元素的CSS属性
eg: <P></p>
$("P").css({'background-color':'red'})

其他选择器
1$('*') :选取所有元素
2$("ul") :选取ul下的li元素
eg:

 <ul>   
 <li></li>     <li></li>    <li></li>        
 </ul>

$("ul li"):选取ul下的所有的元素
$("ul li：first"):选取ul下的第一个的元素
我们可以通过Jquery选择器选择所有的html元素（

Jquery获取元素的内容和属性（DOM-文档对象模型操作）

1.获取内容：text（).html（）.val（）

<div id="text">我叫张三</div>
<input type="button" value="按钮" id="button">
<script>   
 var nutton $("button")   
 button.click(function(){        alert("div的内容和为:"+$("#test").text()  
  })
</script>    
html():设置或返回所有元素的内容
<div id="test">我叫张三
<p>123</p>
<p>1111111111111111</p>
</div>
<input type="button" value="按钮显示 div的内容" id=button1">
<input type="button" value="按钮html的内容" id=button2">
<script>   
 var button1=$("#button1")   
 button1.click(function(){      
  alert("div的内容和为:"+$("#test").text())      
  })  
  $("#button2").click(function(){       
 alert("html的内容和为:"+$("#test").html())     
   })
</script>

$("#test").text()结果为：

text():设置或返回元素的文本内容
html():设置或返回所有元素的内容
val():设置或返回表单字段的值0

Jquery的基础动画操作

1.Jquery动画效果隐藏和显示

两个方法：hidden（），show（）
语法：
$（selector）.hide(speed.callback)
$（selector）.hide(speed.callback)
speed规定隐藏和显示的速度，取值为“show”，“fast”，毫秒，
callback参数，是隐藏和显示完成后
两个按钮：通过使用hide（）或show()方法来隐藏或显示html
例子：

<p>Jquery动画效果,隐藏和显示。</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
<input type="button" value="按钮" id="button3">
<script>      
  $(document).ready(function(){            
$("#button1").click(function(){               
 $("p").hide(1000)               
 alert("恭喜你，隐藏完成")            })           
 $("#button2").click(function(){              
  $("p").show(2000,function(){           
     alert("恭喜你，显示完成")         
   })     
   })              
  $("#button3").click(function(){            
    $("p").toggle(1000,function(){           
     $("p").css({color:"yellow"})
})              
  })       
 })    </script>

2.Jquery动画效果滑动

两个方法：
slidedown（），slideup（），slidetoggle（）
例子：

<div id="slide">点击我，滑动显示或者隐藏面板</div>
<div id="panel"> Hello Jquery! !</div> 
<style>       
 #slide,#panel{           
 padding: 5px;           
 text-align: center;           
 background-color: #02a1d9;           
 border: solid 1px #ff8cb9;        }       
 #panel{          
 display: none;            
 padding: 40px;        }   
 </style>    
<script>        
$(document).ready(function(){           
 $("#slide").click(function(){                
$("#panel").slideToggle()           
 })        
})   
 </script>

3.animate（）方法用于创建自定义的动画
语法：
$(selector).animate({params},speed,callback)必须的params参数定义形成动画的css属性。

可选参数和上面的几个方法相同。
eg：
通过animate（）方法操作属性
代码如下：

<button>开始动画</button>
<p>默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需将元素的position属性设置为，absolute，relative，fixed</p>
<div style="background-color:red;
height:100px;
width: 100px;
position: absolute">
</div>
<script>        
$(document).ready(function() {            
$("button").click(function () {                
$("div").animate({left: "200px"}, 1000, function () {                    
$("div").css({background: "yellow"})                
})            
})        
})    
</script>    })        })    </script>

通过animate（）操作多个属性

代码如下：

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

是否可以用animate（）方法来操作所有的css属性？？？
几乎可以，但需要记住，当使用animate（）方法的时候，必须使用camel标记法书写所有的属性名。
eg：css：background-color 在animate中：backgroundColor
animate（）：使用相对值

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

通过animate（），使用队列功能
如果你在彼此之后编写多个animate（）调用。Jquery会创建包含这些方法调用的“内部”队列，然后逐一运行这些animate调用
例子：

<input type="button" value="开始动画" id="button">
<div style="background-color:red;
height:100px;
width: 100px;
position: absolute">Hello world
</div>
<script>        
$(document).ready(function() {            
$("#button").click(function () {               
var div=$("div")                
div.animate({height:"160px",opacity:0.5},1000)                
div.animate({fontSize:"2em"},100)                
div.animate({width:"160px",opacity:0.9},1000)                
div.animate({height:"100px",opacity:0.5},1000)                
div.animate({width:"100px",opacity:0.9},1000)                
div.animate({fontSize:"10px"},100)            })        
})    
</script>

Jquery 停止动画： stop（）

stop（）：用于在动画完成前对它进行停止。暂停队列中的一个动画，如果对列中有多个动画，那么暂停该动画，
然后系统会执行后面的动画
代码如下：

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

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

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

意思：#p1元素首先会变红，然后向上以1.5秒的速度移动，然后向下以1.5秒的速度移动。最后将背景颜色变为蓝色。
如果我们不用链，那么我们的写法：

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

Chaining的优点：
浏览器不用多次去查找相同的元素

作业：用Jquery写二级菜单：

代码：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.8.3.min.js"></script>

    <style>

 

    .two_bar {

    display:none;

        margin:0 auto;

    }

    li {

    list-style:none;

    }

    .two_bar li,.one_bar {

    display:block;

    text-align:center;

    font-size:16px;

    background-color: #9e3927;

    color: #3ae9ff;

    border-bottom:1px solid #ffffff;

    border-radius:10px;

    line-height:38px;

    overflow:hidden;

    height:38px;

    width:258px;

    }

    a:link,a:visited,a:hover,a:active {

    text-decoration:none;

    }

</style>

    <script>

        $(document).ready(function(){

            $(".one_bar").click(function(){

                $(this).next().slideToggle();

                $(this).parent().siblings().children("ul").slideUp();

            });

        });

    </script>

</head>

<body>

<div class="top_bar">

    <ul>

        <li>

            <a href="###" class="one_bar">首页</a>

            <ul class="two_bar">

                <li>娱乐</li>

                <li>游戏</li>

                <li>运动</li>

            </ul>

        </li>

        <li>

            <a href="###" class="one_bar">导航</a>

        </li>

        <li>

            <a href="###" class="one_bar">关注</a>

        </li>

        <li>

            <a href="###" class="one_bar">榜单</a>

        </li>

    </ul>

</div>

</body>

</html>