2019-08-15 jQuery--第二天

图片.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遍历内容

不想学了...

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 221,695评论 6赞 515
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,569评论 3赞 399
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 168,130评论 0赞 360
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,648评论 1赞 297
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,655评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,268评论 1赞 309
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,835评论 3赞 421
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,740评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,286评论 1赞 318
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,375评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,505评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,185评论 5赞 350
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,873评论 3赞 333
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,357评论 0赞 24
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,466评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,921评论 3赞 376
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,515评论 2赞 359