zoukankan html css js c++ java

06-js-jQuery

"""
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法
"""

一、jquery初识

"""
$就是jquery对象
$("div").css("color","red");
等价于
jQuery("div").css("color","red");//选择器 操作
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1" class="c1  xx  oo"></div>
</body>


<script>
    var d1 = $('#d1'); // jquery对象   jQuery.fn.init [div#d1]
    var d = document.getElementById('d1');  // 原生dom对象  <div id='d1'></div>
    // jquery对象和dom对象之前不能调用互相的方法

    // jquery对象和dom对象可以互相转换
    d1[0] //-- dom对象
    $(d) //-- jquery对象
</script>
</html>

二、选择器

"""
基本选择器：
$("*") $("#id") $(".class") $("element") $(".class,p,div")

层级选择器
$(".outer div") $(".outer>div")  $(".outer+div")  $(".outer~div")

基本筛选器
$("li:first")  $("li:eq(2)") $("li:even") $("li:gt(1)")

属性选择器
$('[id="div1"]')  $('["alex="sb"][id]')

表单选择器
$("[type='text]")------>$(":text") 只适用于input标签 : $("input:checked")
"""

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="jquery-3.4.1.js"></script>

<div>hello</div>

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">

<script>
    <!--$就是jquery对象-->
    // $("div").css("color","red");
    // jQuery("div").css("color","red");//选择器 操作

    // 基本选择器
    $("*").css("color","red");
    $("#p1").css("color","red");
    $(".outer").css("color","red");
    $(".inner,p,div").css("color","red");

    // 层级选择器
    //后代选择器
    // $(".outer p").css("color","red");
    //子代选择器 子代就是kxq inner p 是outer的孙子了
    // $(".outer>p").css("color","red");
    //毗邻 下面一个标签紧挨着的
    // $(".outer+p").css("color","red");
    //也是兄弟标签 兄弟不用紧挨着了
    // $(".outer~p").css("color","red");

    // 基本筛选器 li是多个 筛选出来一个
    //第一个
    // $("li:first").css("color","red");
    //随意选择第几个
    // $("li:eq(1)").css("color","red");
    //奇偶
    // $("li:odd").css("color","red");
    //大于某个索引以后的全部变化 gt 2 从第三个以后都变红 不包括第三个
    // $("li:gt(2)").css("color","red");
    // 之前
    // $("li:lt(2)").css("color","red");

    // 属性选择器
    // $("[kxq='sb'][id='p1']").css("color","red");
    //
    //表单选择器
    // $("[type='text']").css("width","200px");
    // $(":text").css("width","400px");

</script>

</body>
</html>

总体

<!--html代码-->

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div>hello</div>
<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">

<!--jquery代码-->
$("*").css("color","red");
$("#p1").css("color","red");
$(".outer").css("color","red");
$(".inner,p,div").css("color","red");

基本选择器

<!--html代码-->
<div>hello</div>

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">

<!--jquery代码-->

<!--后代选择器-->
$(".outer p").css("color","red");
<!--子代选择器 子代就是kxq inner p 是outer的孙子了-->
$(".outer>p").css("color","red");
<!--毗邻 下面一个标签紧挨着的-->
$(".outer+p").css("color","red");
<!--也是兄弟标签 兄弟不用紧挨着了-->
$(".outer~p").css("color","red");

层级选择器

<!--html代码-->
<div>hello</div>

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">


<!--jquery代码-->
<!--基本筛选器 li是多个 筛选出来一个-->
<!--第一个-->
$("li:first").css("color","red");
<!--随意选择第几个-->
$("li:eq(1)").css("color","red");
<!--奇偶-->
$("li:odd").css("color","red");
<!--大于某个索引以后的全部变化 gt 2 从第三个以后都变红 不包括第三个-->
$("li:gt(2)").css("color","red");
<!--之前-->
$("li:lt(2)").css("color","red");

基本筛选器

<!--html代码-->
<!--html代码-->
<div>hello</div>

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">


<!--jquery代码-->
<!--属性选择器-->
$("[kxq='sb'][id='p1']").css("color","red");

属性选择器

<!--html代码-->
<div>hello</div>

<a href="">click</a>
<p id="p1" kxq="sb">ppp</p>
<p id="p2" kxq="bb">ppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>siblings
    <p>kxq</p>
</div>
<!--<p>xialv</p>-->

<div class="outer2">outer1</div>
<p>xialv</p>

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

<input type="text">
<input type="checkbox">
<input type="submit">


<!--jquery代码-->
<!--表单选择器-->
$("[type='text']").css("width","200px");
$(":text").css("width","400px");

表单选择器

表单对象属性选择器
:checked  找到被选中的input标签和option标签
:selected  找被选中的select标签中的option标签
:disabled  不可操作的标签 
:enabled   可操作的标签

html代码
<input type="text" id="username" disabled>
<input type="radio" class="a1" name="sex" value="1" disabled>男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽烟
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头

属性选择器补充

三、过滤筛选器和查找筛选器的方法

1、过滤筛选器

# $("li").eq(2)

2、查找筛选器

<ul>

    <li>谢一峰</li>
    <li class="c1">王子宇</li>
    <li>孙波</li>
    <li class="c2">石淦</li>
    <li>
        <span>白雪冰</span>
    </li>
    <li>方伯仁</li>

</ul>

2.1、parent()

"""
var c = $('.c1');
c.parent();
c.parents();  直系的祖先辈
c.parentsUntil('body');  往上找,直到找到body标签为止,不包含body标签
"""

2.2、children()

"""
var u = $('ul');
u.children();  找到所有儿子标签
u.children('.c1'); 找到符合.c1选择器的儿子标签
"""

2.3、next()

"""
var c = $('.c1');
c.next();
nextAll();  下面所有兄弟
c.nextUntil('.c2');  下面到某个兄弟为止,不包含那个兄弟
"""

2.4、prev()

"""
var c = $('.c1');
c.prev();
c.prevAll(); 上面所有兄弟,注意顺序都是反的
c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟,注意顺序都是反的
"""

2.5、siblings()

"""
c.siblings();  找到不包含自己的所有兄弟
c.siblings('.c1');  筛选兄弟中有class类值为c1的标签
"""

2.6、find()

"""
$('li').find('span'); 等同于css的 li span后代选择器
$('li span')
"""

2.7、first() 和 last() 和 eq(索引值)

"""
$('li').first();  找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个
$('li').eq(0);  按照索引取对应的那个标签,索引从0开始
$('li').eq(-1);  最后一个
$('li')[ 索引 ] -- 原生dom对象
"""

四、文本操作

# text()和html()  等同于innerText和innerHTML

"""
设置文本
    $('#xiaolin').text('小林望明月');
    $('#xiaolin').text('<a href="">小林望明月</a>');
    $('#xiaolin').html('<a href="">小林望明月</a>');
获取文本
    $('#xiaolin').text();
    $('#xiaolin').html();
"""

五、class类值操作

"""
添加类值
$('.c1').addClass('c2');
删除类值
$('.c1').removeClass('c2');
切换：有就删除，没有就添加
$('.c1').toggleClass('c2');
"""

六、css样式操作

"""
<div class="c1">

</div>

$('.c1').css({'background-color':'pink','width':'300px'});
"""

七、值操作

示例：

示例:
html代码:

    <input type="text" id="username">
    <input type="radio" class="a1" name="sex" value="1">男
    <input type="radio" class="a1" name="sex" value="2">女
    <input type="checkbox" class="a2" name="hobby" value="1">抽烟
    <input type="checkbox" class="a2" name="hobby" value="2">喝酒
    <input type="checkbox" class="a2" name="hobby" value="3">烫头
    <select name="city" id="s1">
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
    </select>
    <select name="lover" id="s2" multiple>
     <option value="1">波多</option>
     <option value="2">苍井</option>
     <option value="3">小泽</option>
    </select>

jquery代码:
普通文本输入框：
    获取值：
        $(':text').val();

    设置值：
        $(':text').val('xxx');

radio
    获取值：
        $(':radio:checked').val();
    设置值：
        $(':radio').val(['2']);   将input,type='radio'的标签默认选中
checkbox
    获取值
        var s = $(':checkbox:checked');
        for (var i=0;i<s.length;i++){
            console.log(s.eq(i).val());
        }
        补充$.each循环
            循环普通数组                               
                var a = [11,22,33];
                $.each(a,function(k,v){
                    console.log(k,v);
                })  
            循环标签数组
                var s = $(':checkbox:checked');
                $.each(s,function(k,v){
                    console.log(k,v);
                })   
      设置值
        $(':checkbox').val(['1', '3']);
        $(':checkbox').val([2,3]);                               
                                      
单选下拉框
      获取值
         $('#s1').val();                                 
      设置值
          $('#s1').val(['2']);                                
                                      
多选下拉框                                      
      获取值
         $('#s2').val();
      设置值
         $('#s2').val(['1','2']);

八、form表单

<body>


<form action="">

    <input type="text" name="username">
<!--    <input type="button" value="xx">-->
    <input type="submit">
    <button>确认</button>
<!--    <button type="submit">确认</button> 默认是submit-->
<!--    <button type="button">确认</button>-->
</form>
放到form表单外面，是没有提交数据的效果的
   <input type="submit">
    <button>确认</button>

</body>

九、操作

1、创建标签

"""
js
    var a = document.createElement('a');
    
jquery:
    $('<a>',{
            text:'这还是个链接',
            href:'http://www.baidu.com',
            class:'link',
            id:'baidu',
            name:'baidu'
    })
"""

2、文档操作

"""
往标签内部的后面添加元素
append方法
示例：
    var a = $('<a>',{href:"",text:'百度'});
    $('div').append(a);
    var s = '<a href="">xx</a>';
    $('div').append(s);
appendTo
    a.appendTo($('div'));


往标签内部的前面添加元素
prepend方法
示例
    var a = $('<a>',{href:"",text:'xxx'});
    $('div').prepend(a)
prependTo方法
a.prependTo($('div'));

往标签外部的后面添加
after方法
示例
    $('div').after('<a href="">xxxxx</a>');
insertAfter方法
a.insertAfter($('div'));
往标签外部的前面添加
before方法
示例
    $('div').before('<a href="">xxxxx</a>');
a.insertBefore($('div'));    
"""

3、清空标签

"""
empty方法
    $('div').text('');
    $('div').html('');
    $('div').empty();
"""

4、删除标签

"""
$('div').remove();
"""

5、克隆

"""
<div class="c1">
    <button class="btn">屠龙宝刀，点击就送！</button>
</div>

js代码
    $('.btn').click(function (){
        // var btn = $(this).clone(); // 不克隆绑定的事件
        var btn = $(this).clone(true); //克隆连带事件
        $('.c1').append(btn);
    })
"""

6、模板字符串

"""
var a = '大海啊';
# 例如动态插入记录(标签) 值就可以这样写
var ss = `${a},全是水`;
和python的f字符串一样
    name = 'xx'
    s = f'{name}你好呀'
    print(s)
"""

7、事件绑定

"""
方式1
点击事件
$('#btn').click(function (){
    $('.shadow,.mode').removeClass('hide');
})
方式2
$('.c1').on('click',function (){
          $(this).addClass('c2');
})
"""

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: yellow;
        }
    </style>
</head>
<body>


<div class="c1"></div>


</body>
<script src='jquery.js'></script>
<script>

    // xx.onclick = function(){
    //     this
    // }
    // //方式1
    // $('.c1').click(function (){
    //     // this//dom对象
    //     $(this).addClass('c2');
    //
    // }) ;
    // 方式2
    $('.c1').on('click',function (){
          $(this).addClass('c2');
    })



</script>
</html>

示例

8、事件冒泡（事件传播）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: green;
            height: 100px;
            width: 300px;
        }
        .c2{
            background-color: red;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>


<div class="c1">
    <div class="c2">

    </div>
</div>




</body>
<script src='jquery.js'></script>
<script>
    //事件冒泡：当父级或者祖先辈标签和子标签绑定了相同的事件时，比如点击事件，那么当点击子标签时，会一层层触发父级标签的点击事件
    $('.c1').click(function (){
        alert('这是父标签');
    });
    $('.c2').click(function (e){
        alert('这是子标签');
        return false;  // 阻止了事件冒泡
       
        // e.stopPropagation()    了解 
    })


</script>
</html>

View Code

9、事件委托

"""
<div class="c1">
    <button class="btn">屠龙宝刀，点击就送！</button>
</div>
js代码部分
    $('.c1').on('click','.btn',function (){
        var btn = $(this).clone();

        $('.c1').append(btn);
        
    })
"""

10、属性操作

# prop方法
# 针对的是checkedselectedenableddisabled
"""
$('#sex').prop('checked',true); //设置选中
$('#sex').prop('checked',false); // 取消选中

$('#uname').prop('disabled',true); //设置不可编辑
$('#uname').prop('disabled',false); //设置可以编辑
"""
# attr方法
"""
$('#d1').attr('id')  // 获取属性对应的值
$('#d1').attr({'xx1':'oo1','xx2':'oo2'}); // 设置属性
"""

11、逻辑运算符

"""
and  &&
or   ||
    示例：
    if(a=1 || b=2){}
not  !
var a = true;
!a -- false
"""

12、常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #ff6700;
            height: 200px;
            width: 200px;
        }
        .c2{
            background-image: url("meinv.png");
            background-size: 100%;
            height: 350px;
            width: 400px;
            display: none;
        }
    </style>
</head>
<body>


<input type="text" id="username">

<!--<div class="c1">-->

<!--</div>-->


<div class="c2"></div>
</body>
<script src='jquery.js'></script>
<script>
    // 失去光标时触发的事件
    // $('#username').blur(function (){
    //     $(this).css({'background-color':'yellow'});
    // });
    // // 获取光标时触发的事件
    // $('#username').focus(function (){
    //     $(this).css({'background-color':'blue'});
    // });

    //change事件，域内容发生变化时触发的事件  ,如果是给input标签绑定的change事件，
    // 那么只有input标签中的内容发生变化，并且失去光标时才会触发
    // $('#username').change(function (){
    //     console.log($(this).val());
    // });

    // 鼠标进入时触发的事件
    // $('.c1').mouseenter(function (){
    //     $(this).css({'background-color':'red'})
    // })
    // // 鼠标离开时触发的事件
    // $('.c1').mouseleave(function (){
    //     $(this).css({'background-color':'yellow'})
    // })

    // // 鼠标悬浮事件
    // $('.c1').hover(
    //     // 鼠标进入时触发事件
    //     function (){
    //        $(this).css({'background-color':'red'})
    //     },
    //     // 鼠标离开时触发事件
    //     function (){
    //        $(this).css({'background-color':'yellow'})
    //     }
    // ) ;

    // input事件：实时捕获输入内容的事件
     // $('#username').on('input',function (){
     //     console.log($(this).val());
     // })


</script>
</html>

View Code

13、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;  /* 固定定位，基于窗口的位置移动 */
            top:0;
            left:0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 9;
        }
        .mode{
            position: fixed;
            height: 400px;
            width: 300px;
            background-color: #ffffff;
            z-index: 10;
            top:50% ;
            left:50% ;
            margin-top: -200px;
            margin-left: -150px;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>


<h1>性感荷官、在线发牌</h1>

<div>
    还有一些广告词
</div>
<button id="btn">登录</button>
  <div class="mode hide">
    <h1>请登录会员</h1>
    <p>
        用户名：<input type="text">
        密码：<input type="password">
    </p>
    <p>
        <button id="confirm">确认</button>
        <button id="cancel">取消</button>
    </p>
</div>

<div class="shadow hide"></div>





</body>
<script src='jquery.js'></script>
<script>
    $('#btn').click(function (){
          $('.shadow,.mode').removeClass('hide');
    })
    $('#cancel').click(function (){
          $('.shadow,.mode').addClass('hide');
    })


</script>
</html>

模态对话框

14、左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: #396bb3;
            width: 30%;
            height: 500px;
        }
        .content{
            float: left;
            background-color: gray;
            width: 70%;
            height: 500px;
        }

        .title{
            background-color: aquamarine;
            line-height: 40px;
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>



<div class="outer">
    <!--左侧-->
    <div class="menu">
        <!--那一部分-->
        <div class="item">
            <!--哪一部分的内容-->
            <!--用this 找到点击的是哪个-->
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

        <div class="item">
            <!--哪一部分的内容-->
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class="item">
            <!--哪一部分的内容-->
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <!--右侧-->
    <div class="content"></div>
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    function show(self){
        //找到 点击菜单二的下一个 con hide属性 移除hide属性
        $(self).next().removeClass("hide");
        // 隐藏一 三
        $(self).parent().siblings().children(".con").addClass("hide");
    }
</script>

</body>
</html>

View Code

15、正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--js jquery对象转换-->
<!--var $variable = jQuery 对象-->
<!--var variable = DOM 对象-->

<!--$variable[0]:jquery对象转化为dom对象-->
<!--("#msg").html(); $("#msg")[0].innerHTML-->

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>

<hr>
    <table border="1px">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>

<script src="jquery-3.4.1.js"></script>

<script>
    <!--全选-->
    function selectAll() {
        $(":checkbox").each(function () {
            $(this).prop("checked",true)
        })
    }

    //取消
    function cancel() {
        $(":checkbox").each(function () {
            $(this).prop("checked",false)
        })
    }

    function reverse() {
        console.log($(this).prop("checked"));
        $(":checkbox").each(function () {
            if($(this).prop("checked")){
                $(this).prop("checked",false)
            }
            else{
                $(this).prop("checked",true)
            }
        })
    }

</script>


</body>
</html>

View Code

16、二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="provinces">
    <option value="">请选择省份</option>
</select>

<select id="citys">
    <option value="">请选择城市</option>
</select>

<script>
    data={"河北省":["石家庄","廊坊"],"吉林":["长春","四平"],"陕西":["西安","延安"]};
    console.log(data);
    console.log(typeof data);

    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys");

    for (var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.append(ele);
    }
    
    pro_ele.onchange=function () {
        //从0开始 第一个是请选择省份
        //用户选择标签的索引
        console.log(this.selectedIndex); // 1
        // console.log(this.options);
        console.log(this.options[this.selectedIndex]);

        var citys=data[this.options[this.selectedIndex].innerHTML];
        console.log(citys);

        //保留一个，因为每点击一次会把内容加到数组
        city_ele.options.length=1;
        for (var i=0;i<citys.length;i++)
        {
            var ele=document.createElement("option");
            ele.innerHTML=citys[i];//长春：四平加进去了
            city_ele.append(ele);
        }
    }
</script>

</body>
</html>

View Code

17、滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1,.div2{
            width: 100%;
            height: 800px;
        }
        .div1{
            background-color: antiquewhite;
        }
        .div2{
            background-color: rebeccapurple;
        }
        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 90px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50;
        }

        .hide{
            display: none;
        }

    </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>

<div class="returnTop hide" onclick="returnTop()">返回顶部</div>

<script src="jquery-3.4.1.js"></script>
<!--绑定滚动事件 滑轮在滑动时要知道滑轮的距离-->
<script>
    window.onscroll=function(){
        if ($(window).scrollTop()>500)
        {
            $(".returnTop").removeClass("hide")
        }
        else
        {
            $(".returnTop").addClass("hide")
        }
        console.log($(window).scrollTop());
    };
    function returnTop() {
        $(window).scrollTop(0)
    }
    // $(".window").click(function () {
    //     $(window).scrollTop(0)
    // })
</script>

</body>
</html>

View Code

18、动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.js"></script>
    <title>Title</title>
</head>
<body>

<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>

<script>
    function f1() {
        //回调函数 show完成后 执行function函数
        $("div").show(1000,function () {
            alert("show");
        })
    }
    function f2() {
        $("div").hide(1000)
    }
    function f3() {
        $("div").toggle(1000)
    }
</script>

</body>
</html>

动画效果1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        <!--加载-->
        $(document).ready(function () {
            $("#slideDown").click(function () {
                $("#content").slideDown(1000);
            });
            $("#slideUp").click(function () {
                $("#content").slideUp(1000);
            });
            $("#slideToggle").click(function () {
                $("#content").slideToggle(1000);
            })
        })
    </script>

    <style>
        #content{
            text-align: center;
            background-color: lightblue;
            border: solid 1px red;
            /*display: none;*/
            padding: 50px;
        }
    </style>

</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">hello world</div>

</body>
</html>

动画效果2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script>

        $(document).ready(function () {
            $("#in").click(function(){
                $("#id1").fadeIn(1000);
            });
            $("#out").click(function(){
                $("#id1").fadeOut(1000);
            });
            $("#toggle").click(function(){
                $("#id1").fadeToggle(1000);
            });
            $("#fadeto").click(function(){
                $("#id1").fadeTo(1000,0.4);
            })
        })

    </script>

</head>
<body>

<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>

<div id="id1" style="display: none; 80px;height:80px;background-color: blueviolet"></div>

</body>
</html>

动画效果3

查看全文

相关阅读:
奇异值分解（SVD）与在降维中的应用
 拉格朗日乘子法&KKT条件
 有监督学习、无监督学习、半监督学习
 LSTM学习—Long Short Term Memory networks
Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7+TensorFlow1.2.0环境搭建
 激活函数
 C基础学习笔记
 Hive
Fragment跳转至Activity片段随笔
 冒泡排序和选择排序

原文地址：https://www.cnblogs.com/kongxiangqun/p/13624469.html

最新文章
spring装配bean
IOC容器的实现
 访问权限控制
 JAR文件
 java集合框架
 内部类
 泛型类
 线程
 异常处理
 复用类