JQuery

1.JavaScript和JQuery实现功能的方法对比

以下要实现点击“隐藏”按钮,隐藏盒子的效果:

            点击按钮后:            

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现点击隐藏按钮之后,盒子隐藏</title>
    <style>
        div{
            width:200px;
            height: 200px;
            background-color: #2aabd2;
            margin: 20px 10px;
        }
    </style>
    
    <!--JQuery实现该功能的方法-->
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function (e){   //此处为匿名函数
                $('div').hide();
            });
        })

    </script>


</head>
<body>
  <div id="box"></div>
  <button id="btn" οnclick="yincang()">隐藏</button>
</body>
</html>
JavaScript实现的方法:

    <!--原生的js的写法-->
    <script type="text/javascript">
        function yincang(){
//            document.getElementById("box").style.display="none";    //不显示,也不占位置
            document.getElementById("box").style.visibility="hidden";   //不显示,但是占位置
        }

        //下面的代码相当于是document.getElementById("box").style.display="none";  的变形
        window.onload=function(){
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");
            btn.onclick=function(){
                box.style.display="none";
            }
        }

    </script>
上述为三种不同的js实现方式,

1)

document.getElementById("box").style.display="none"; 

2)

document.getElementById("box").style.visibility="hidden";

3)

window.onload=function(){
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");
            btn.onclick=function(){
                box.style.display="none";
            }
        }

其中1)和3)实现的效果是一样的,2)实现的效果稍有不同。


2.JQuery基本:


                               (该图片来自传智视频截图)

3.通过JQuery实现:CSS属性获取、单属性修改、多属性修改

注意:遇到复合属性,需要按照驼峰命名法来书写。例如:background-color,则要写成backgroundColor。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery练习2</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:10px 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
//        以下实现CSS的单属性访问、单属性修改、多属性修改
        $(function(){
            $('button').click(function(e){
//               alert($('div').css('width'));       //获取盒子的宽度
//                $('div').css('width','400px');         //单属性修改,盒子的宽度改为400px
//                $('div').css('background','#eeff22');    //单属性修改,背景色改为#eeff22
                $('div').css({width:'500px',height:'300px'});          //多属性修改,记住不要忘了加{}CSS()里面
            });
        })
    </script>
</head>
<body>
  <div></div>
  <button>获取</button>
</body>
</html>

运行效果:

按钮点击之前:


按钮点击之后:

1)

2)

$('div').css('width','400px');          执行结果:

3)

$('div').css('background','#eeff22');   执行结果:      


4)

$('div').css({width:'500px',height:'300px'});     执行结果:



4.根据索引检索:

$(function(){
    //gt表示大于,此处用于检索出索引值大于1li
    $('ul li:gt(1)').css('backgroundColor','#0033ff');     //注意测出的'backgroundColor'是不能省略''})
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
</ul>
运行效果:(索引值大于1的所有的li的背景色都被设置为#0033ff)

5.筛选选择器:

//          点击哪个ul,哪个就会更改背景色
        $(function(){
            $('ul').click(function(e){
                $(this).css('background','yellow');
            });
        })
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
</ul>
<ul>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
</ul>
<ul>父级ul
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
</ul>
运行效果:



当修改JQuery代码,将this修改为'ul',则点击某一个ul,所有的ul的背景色都会变,如:


运行效果:


再在上面的基础上做以下调整,如:


运行效果:(后面的这个ul里面添加了文字,就可以看出来li是被选中的,ul没有;和第一个形成对比)


继续修改,给children里面添加上对应类名,则只能修改该类名的子类。如下:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
    <li>ceshi</li>
</ul>
<ul>
    <li class="current">这是一个li,这个是带有current类的,子代选择器</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
</ul>
<ul>父级ul
    <li>这是一个li</li>
    <li class="current">这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
</ul>
  $(function(){
            $('ul').click(function(e){
//                $(this).css('background','yellow');  //点击哪个ul,哪个就会更改背景色
//                $('ul').css('background','yellow');    //选中其中的某一个ul点击,所有的ul均更改背景色
//                $(this).children().css('background','yellow');    //选中当前的ul,它的子类也就是li的背景色会发生变化
                $(this).children('.current').css('background','yellow');    //只有类名为currentli才可以被选中
            });
        })
运行效果:(只有类名为current的li背景色更改)




6.       图片截自传智视频

 ( 小括号not'小阔号')



7.在JQuery中,只要是动画,就会存在排队机制。所以我们就要去考虑如何清空排队的问题。

水平菜单案例以及清空排队:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现下拉菜单</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .all{
            width: 560px;
            height: 30px;
            margin:100px auto;
            background-color: #8c8c8c;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .all li{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-right: 10px;
            background-color: #9d9d9d;
            float: left;
            _display:inline;           /*解决IE6双边距的问题*/
            position: relative;       /*子绝父相*/

        }
        /*解决IE6的问题*/
        .all ul{
            position: absolute;
            top: 30px;
            left: 0px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $('.all>li').mouseover(function(e){        //注意此处是mouseover,不是哦那mouseover
//                $(this).children().show();      //显示
                $(this).children().stop().slideDown();    //让它在鼠标放在上面的时候自动滑下来
            })
//            鼠标离开后隐藏显示
            $('.all>li').mouseout(function(e){
//                $(this).children().hide();       //隐藏
                $(this).children().stop().slideUp();      //鼠标离开后,向上卷上去
            })
        })
    </script>
</head>
<body>
<ul class="all">
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
</body>
</html>
运行效果:




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值