2019-08-15 jQuery--第二天

作者: 棘菀 | 来源:发表于2019-08-15 17:33 被阅读0次

2019-08-15 jQuery--第二天
2019-08-15
jQuery--选择器
jQuery--基础
jQuery--代理
Jenkins2 学习系列10 -- 多分支pipeline构建
vue
jQuery--事件处理
jQuery--事件处理
[补]Lan的ScalersTalk第四轮新概念朗读持续力训练D

图片.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--第二天
---学习视频是黑马程序员pink老师的教学视频 3.2 jQuery样式操作 3.2.3 案例：tab栏切换...
2019-08-15
2019-08-15
jQuery--选择器
jQuery--选择器一、JavaScript中选择元素 • document.getElementById()...
jQuery--基础
一、jQuery简介 jQuery 就是 JavaScript 的一个库，把我们常用的一些功能进行了封装，方便地处...
jQuery--代理
Jenkins2 学习系列10 -- 多分支pipeline构建
Updated: 2019-08-15 如果希望通过Webhook触发multibranch pipeline项目...
vue
1，jQuery与vue区别 jQuery--指令式编程 vue--声明式编程 vue更加高效，流行 2，let与...
jQuery--事件处理
一、事件模型 1.浏览器事件模型 ①DOM0级事件模型：只支持一个DOM事件处理函数• • input.onc...
jQuery--事件处理
jQuery--事件处理一、事件模型 1.浏览器事件模型①DOM0级事件模型：只支持一个DOM事件处理函数• ...
[补]Lan的ScalersTalk第四轮新概念朗读持续力训练D
练习材料： [Day 1784 2019-08-15] Lesson 33-1 Education 教育 Educ...