2019-08-15 jQuery--第二天

2019-08-15 本文已影响0人棘菀

图片.png

---学习视频是黑马程序员pink老师的教学视频

3.2 jQuery样式操作

3.2.3 案例：tab栏切换案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
            * {
                list-style: none;
            }

            .tab_list {
                display: block;
                overflow: hidden;
                border: #C81623 solid 1px;
            }

            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }

            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }

            .item {
                padding: 40px 80px;
                background-color: #bbb;
                display: none;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $("li").click(function() {
                    $(this).addClass("current").siblings().removeClass("current")
                    var index = $(this).index()
                    console.log(index)
                    $(".item").eq(index).css("display", "block").addClass("item_info").siblings().css("display", "none")
                })
            })
        </script>
    </body>
</html>

丑不重要起码说明是我自己做的 o_o

3.2.4 jQuery类操作和className的区别

原生js中 className会覆盖元素原先的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

3.3 jQuery效果

3.3.1 常见效果

显示隐藏
show()
hide()
toggle()

滑动
sideDown()
sideUp()
slideToggle()

淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo

自定义动画
animate()

3.3.2 显示隐藏效果

1.显示语法规范
show([speed,[easing],[fn]])

2.显示语法参数

（1）参数都可以省略
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
(3) easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“inear”
（4）fn：回调函数，在动画完成是执行的函数每个元素执行一次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
            *{
                list-style: none;
            }
            
            #myDiv{
                width: 100px;
                height: 100px;
                background: #1abd2a;
                margin: 16px;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <button type="button">显示</button>
        <button type="button">隐藏</button>
        <button type="button">切换</button>
        <div id="myDiv">
            
        </div>
        <script type="text/javascript">
            $(function(){
                $("button").eq(0).click(function(){
                    $("div").show(function(){
                        $("div").css("background","blue")
                    })
                })
                $("button").eq(1).click(function(){
                    $("div").hide()
                })
                $("button").eq(2).click(function(){
                    $("div").toggle()
                })
            })
        </script>
    </body>
</html>

3.2.3 jQuery滑动效果

下滑效果语法规范

slideDown([speed,[easing],[fn]])

参数
（1）参数都可以省略
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）
(3) easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“inear”
（4）fn：回调函数，在动画完成是执行的函数每个元素执行一次

切换事件

hover([over],out)

1 over:鼠标移到元素上要触发的函数（相当于mouseenter）
2 out：鼠标移除元素触发（相当于mouseleave）

事件切换 hover 就是鼠标经过和离开的复合写法
事件切换 hover 如果只写一个函数那么鼠标经过和离开都会触发这个函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
            *{
                list-style: none;
            }
            div{
                width: 150px;
                height: 300px;
                background-color: pink;
                display: none;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <button type="button">下拉滑动</button>
        <button type="button">上拉滑动</button>
        <button type="button">切换滑动</button>
        <div id="">
            
        </div>
        <script type="text/javascript">
            /* 方法一 */
            /* $("button").eq(0).click(function(){
                //下滑
                $("div").slideDown()
            })
            $("button").eq(1).click(function(){
                //下滑
                $("div").slideUp()
            })
            $("button").eq(2).click(function(){
                //下滑
                $("div").slideToggle()
            }) */
            /* 方法二 */
            /* $(function(){
                $("button").hover(function(){
                    $("div").slideDown()
                },function(){
                    $("div").slideUp()
                })
            }) */
            /* 方法三 */
            $(function(){
                $("button").hover(function(){
                    $("div").slideToggle()
                })
            })
        
        </script>
    </body>
</html>

3.3.4 动画队列及其停止方法

1 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行

2 停止排队

stop()
（1）stop()方法用于停止动画或效果.
（2）注意：stop（）写到动画或者效果的前面，相当于停止结束上一次的动画

3.3.5 淡入淡出方法

1 fadeIn () 淡入
2 fadeOut () 淡出
3 fadeToggle () 切换
4 fadeTo () 给透明度

3.3.6 自定义动画 animate

1.语法
anmiate(params,[speed],[fn])

2.参数
（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用加引号，如果是复合属性则需要采用驼峰命名法如： borderLeft
其余参数可省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
            *{
                list-style: none;
            }
            div{
                width: 150px;
                height: 300px;
                background-color: pink;
                position: absolute;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <button type="button">动起来</button>
        <div id="">
            
        </div>
        <script type="text/javascript">
            /* 方法一 */
            /* $("button").eq(0).click(function(){
                //下滑
                $("div").slideDown()
            })
            $("button").eq(1).click(function(){
                //下滑
                $("div").slideUp()
            })
            $("button").eq(2).click(function(){
                //下滑
                $("div").slideToggle()
            }) */
            /* 方法二 */
            /* $(function(){
                $("button").hover(function(){
                    $("div").slideDown()
                },function(){
                    $("div").slideUp()
                })
            }) */
            /* 方法三 */
            /* $(function(){
                $("button").hover(function(){
                    $("div").slideToggle()
                })
            }) */
            /* 清除动画排队 */
            /* $(function(){
                $("button").hover(function(){
                    //stop()方法必须放在动画前面
                    $("div").stop().slideToggle()
                })
            }) */
            /* 淡入淡出效果 */
            /* $(function(){
                $("button").eq(0).click(function(){
                    
                    $("div").fadeIn()
                })
                $("button").eq(1).click(function(){
                    
                    $("div").fadeOut()
                })
                $("button").eq(2).click(function(){
                    
                    $("div").fadeToggle()
                })
                $("button").eq(3).click(function(){
                    
                    $("div").fadeTo(100,0.5)
                })
            }) */
            
            $(function(){
                $("button").click(function(){
                    $("div").animate({
                        left:500,
                        top:300
                    },500)
                })
            })
            
            
            
            
            
            
            
        </script>
    </body>
</html>

图片.png

1、陈述问题（白帽子）
2、提出解决问题的方案（绿帽子）
3、评估该方案的优点（黄帽子）
4、列举该方案的缺点（黑帽子）
5、对该方案进行直觉判断（红帽子）
6、总结陈述，做出决策（蓝帽子）

3.4 jQuery 属性操作

3.4.1设置或获取元素固有属性值prop（）

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type

获取属性语法
prop("属性")
设置属性语法
prop("属性","属性值")

3.4.2 设置或获取元素自定义属性值 attr()

元素的自定义属性我们通过attr（）

attr("属性") //类似原生 getAttribute()

attr("属性","属性值") //类似原生：setAttrbute()

3.4.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除

3.5 jQuery内容文本值

3.5.1 获取元素内容

1.普通元素内容html() (相当于原生innerHTML)
html() //获取元素内容
html("设置元素的内容")

2.普通元素文本内容text() (相当于原生的innerText)

3.6 jQuery元素操作

主要是遍历创建添加删除元素操作

3.6.1遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历

语法一：

$("div").each(function(index,domEle){xxx;})

1 each()方法遍历匹配每一个的元素，主要用DOM处理 each每一个
2 里面的回调函数有两个参数：index是每个元素的索引号，demEle是每个DOM对象，不是jQuery对象
3所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

语法二：
$.each(object , function (index,element){ xxx; }))

1 $.each()的方法可以用于遍历任意对象，主要用于数据处理，比如数组，对象
2 里面有两个参数： index是索引号 element遍历内容

2019-08-15 jQuery--第二天

3.2 jQuery样式操作

3.2.3 案例：tab栏切换案例

丑不重要起码说明是我自己做的 o_o

3.2.4 jQuery类操作和className的区别

3.3 jQuery效果

3.3.1 常见效果

3.3.2 显示隐藏效果

3.2.3 jQuery滑动效果

切换事件

3.3.4 动画队列及其停止方法

3.3.5 淡入淡出方法

3.3.6 自定义动画 animate

3.4 jQuery 属性操作

3.4.1设置或获取元素固有属性值prop（）

3.4.2 设置或获取元素自定义属性值 attr()

3.4.3 数据缓存 data()

3.5 jQuery内容文本值

3.5.1 获取元素内容

3.6 jQuery元素操作

3.6.1遍历元素

不想学了...

猜你喜欢

热点阅读

2019-08-15 jQuery--第二天

3.2 jQuery样式操作

3.2.3 案例：tab栏切换案例

丑不重要 起码说明是我自己做的 o_o

3.2.4 jQuery类操作和className的区别

3.3 jQuery效果

3.3.1 常见效果

3.3.2 显示隐藏效果

3.2.3 jQuery滑动效果

切换事件

3.3.4 动画队列及其停止方法

3.3.5 淡入淡出方法

3.3.6 自定义动画 animate

3.4 jQuery 属性操作

3.4.1设置或获取元素固有属性值prop（）

3.4.2 设置或获取元素自定义属性值 attr()

3.4.3 数据缓存 data()

3.5 jQuery内容文本值

3.5.1 获取元素内容

3.6 jQuery元素操作

3.6.1遍历元素

不想学了...

猜你喜欢

热点阅读

丑不重要起码说明是我自己做的 o_o