day46:jQuery

/* 在body部分建立一个id为d1的h1标签 */
var d1 = $('#d1'); // 所得到的d1是一个jQuery对象  → d1:jQuery.fn.init?[h1#d1]
var d = document.getElementById('d1');  所得到的d是一个原生dom对象  → d1:<h1 id='d1'></h1>
/* 注意：jquery对象和dom对象之前不能调用互相的方法 */

 jquery对象和dom对象可以互相转换 */
d1[0]  jQuery对象转化成dom对象
$(d)  dom对象转化成jQuery对象

$('#d1')  对比js：document.getElementById('d1')

$('.c1')  对比js:document.getElementByClassName('c1')

$('span')  对比js：document.getElementByTagName('span')

$('#d1,.c2')

 html代码
<div id="d1">
    这是d1
</div>
<div class="c2">
    这是c2
 </div>

 css代码:
#d1,.c2{
    background-color: red;
    height: 100px;
    width: 100px;
    border-bottom: 1px solid black;
    }
    
 jquery代码:
// 注意：只有jQuery对象才有.css属性,DOM对象没有.css属性
$('#d1,.c2').css('background-color','green');  将id为d1和class为c2的标签的背景颜色都设置为绿色
$('#d1,.c2')[1];    索引为1的dom对象
$('#d1,.c2').eq(1);  索引为1的jQuery对象

 格式：$("form input")

 html代码:
<div class="c1" xx="oo">
    这是c1
</div>
<input type="text" name="username">
    
[xx]{
    color:purple;
    }

 input标签:  type='xx'   [type='text']即可找到对应的input标签
$('[xx]').css('color','green');
$('[type="text"]').css('color','red');

 $(":input") 找到所有input标签 $(":text") 找到所有input标签，且type=text的标签 $(":password") 找到所有input且type=password的标签 $(":radio") 找到所有input且type=radio的标签 $(":checkbox") 找到所有input且type=checkbox的标签

html代码:
<form action="">
    <input type="text" id="username">
    <input type="text" id="username2">
    <input type="password" id="pwd">
    <input type="submit">
</form>

 jQuery代码:找到所有的type=text的input标签
$(':text');

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

var c = $('.c1');  找到c1类所对应的标签对象
c.parent();  找自己的父亲标签 只找一代
c.parents();  找自己的祖先辈标签 会找到所有代
c.parentsUntil('body');   往上找父级标签,直到找到body标签为止,不包含body标签

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

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

);
c.prev();  找到上面的那个兄弟标签
c.prevAll();  找到上面所有兄弟（注意顺序都是反的）顺序:4-3-2-1
c.prevUntil('.c1');  找到上面到某个兄弟为止,不包含那个兄弟（注意顺序都是反的）

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

$('li').find('span');  找li标签里面的span标签->等同于css的li span后代选择器
$('li span')  和$('li').find('span')等同效果

$('li').first();   找所有li标签中的第一个
$('li').last();  找所有li标签中的最后一个
$('li').eq(0);   按照索引取对应的那个标签,索引从0开始
$('li').eq(-1);   最后一个
$('li')[ 索引 ]  通过中括号索引取值获取的是原生dom对象，而用eq(索引值)获取的是jQuery对象

 设置文本
$('#xiaolin').text('小林望明月');  仅仅只能设置文本
$('#xiaolin').text('<a href="">小林望明月</a>');  text不能设置带链接的
$('#xiaolin').html('<a href="">小林望明月</a>');  这种带链接的要用html

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

 添加类值
$('.c1').addClass('c2');  等同于js中的add方法

 删除类值
$('.c1').removeClass('c2');  等同于js中的remove方法

 切换：有就删除，没有就添加
$('.c1').toggleClass('c2');  等同于js中的toggle方法

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

 给类对应的标签设置样式
$('.c1').css({'background-color':'pink','width':'300px'});

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

 jquery代码 1.普通文本输入框：
     获取输入框中的值
        $(':text').val();
     设置输入框中的值
        $(':text').val('xxx');

 2. radio 单选框
     获取值：
        $(':radio:checked' 设置值：
        $(':radio').val(['2']);  将input中type='radio'的标签默认选中
        
 3.checkbox 多选框
     A.通过循环获取多选框中的每个值
         循环方式1
        var s = $(':checkbox:checked');
        for (var i=0;i<s.length;i++){
            console.log(s.eq(i).val());
        }
         补充$.each循环（循环方式2）
             1.循环普通数组
                var a = [11,22,33];
                $.each(a,function(k,v){
                    console.log(k,v);  k是索引值，v是数组的值
                })
             2.循环标签数组
                );
                $.each(s,v); k是索引值，v是dom标签对象
                })
     B.设置值
         $(':checkbox').val(['1','3']); 纯数字和字符串数字都能够识别
        $(':checkbox').val([2,3]);

 4.select 单选下拉框
       获取值
         $('#s1').val();
       设置值
          $('#s1').val(['2'5.select-multiple 多选下拉框
       获取值
         $('#s2' 设置值
         $('#s2').val(['1','2']);

bodyform action=""="submit"button>确认>
    
    <button type="submit">确认</button> （不写type默认是submit）1.在form表单里面，且type类型是submit 有提交数据的效果 -->
    
    <button type="button">确认</button>2.虽然在form表单里面，但是type类型为button 所以没有提交数据的效果 form3.如果放到form表单外面，就算type是submit类型，也是没有提交数据的效果的-->
    >

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

 在html代码中 可以对这些标签的默认状态进行设置 ="username" disabled>  input框不可操作 ="1" checked>男  默认选中男 >抽烟  默认选中抽烟 ="2" selected>   默认选中上海  总结  1.enabled和disabled可以应用在input输入框中,radio单选框和checkbox多选框中，select下拉框中
     2.checked只能应用在radio单选框和checkbox多选框中
     3.selected只能应用在select下拉框中-->

<!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"title>Titlestyle>
        /* 点击登录时，除了登录框部分，其他部分为阴影区域，这部分是设置阴影区域的样式 */
        .shadow{
            position: fixed;   固定定位，基于窗口的位置移动 
            top0;
            left
            right 0
            bottom
            background-color rgba(0,0.3)
            z-index 9;  z轴数值为9 用来确保是覆盖别人还是被别人覆盖 */
        }
        
         点击登录时，会出现一个登录页面的太狂，这部分是设置登录弹框的样式 
        .mode
            height 400px
            width 300px #ffffff 10 z轴数值为10，而shadow阴影的z轴数值为9 所以当登录弹框会浮在阴影上面 50% 
            margin-top -200px
            margin-left -150px;

        }
        .hide
            display none;
        }
    >

h1>性感荷官、在线发牌div>还有一些广告词button id="btn">登录div ="mode hide" 默认登录弹框是隐藏的 >请登录会员p
        用户名：="text"
        密码：="password"="confirm"="cancel">取消="shadow hide"></ 默认阴影效果是隐藏的 -->

script src='jquery.js'script>
    // 当点击登录按钮时
     1.去除shadow的hide效果，使shadow使用本来定义好的css样式(灰色阴影效果) */
     2.去除mode的hide效果，让登录弹框显示出来 
    $('#btn).click(function (){
          $(.shadow,.mode).removeClass(hide);
    })
    
     当点击取消按钮时
     1.给shadow添加hide效果 让shadow没有任何样式 所以css阴影效果自然也没有了  2.给mode添加hide效果 当点击取消按钮时 登录弹框消失 #cancel).addClass();
    })


html>

var a = document.createElement('a');  创建一个a标签的dom对象
    
 使用jQuery创建a标签对象，并且为a标签对象添加属性和值
$('<a>',{
    text:'这还是个链接''link''baidu'
})

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


 往标签内部的前面添加元素 1.prepend方法
    ).prepend(a)
 2.prependTo方法
    a.prependTo($('div'));

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

 清除div中所有内容，只剩下一个没有任何内容的div标签 这三个用哪个都行 没什么区别 
$('div').text(''); 
$('div').html('');
$('div').empty();

 清除所有内容，包括标签自己本身
$('div').remove();

 html代码
<div class="c1">
    <button class="btn">点击我!有超多惊喜</button>
</div>

 js代码
    $('.btn').click( (){
         var btn = $(this).clone(); // 不克隆绑定的事件
         通俗说：就是点击第一个按钮可以克隆，点击克隆生成的按钮不可以克隆
        
        var btn = $(this).clone(true); 克隆连带事件
        $('.c1').append(btn);
         通俗说：无论点击哪个按钮，都可以克隆。因为克隆的按钮也连带克隆事件
    })

 jQuery中的模板字符串其实就和python中的占位符一个道理 
var a = '大海啊';
var ss = `${a},全是水`;  输出：大海啊，全是水 和python的f字符串一样
    name = 'xx'
    s = f'{name}你好呀'
    print(s) */

 方式1
$('#btn').click( (){
    $('.shadow,.mode').removeClass('hide');
})

 方式2
$('.c1').on('click', (){
    $(this).addClass('c2');
})

>
        .c1 green 100px
        .c2 red 50px.c1 (){
        alert(这是父标签);
    });
    $(.c2 (e){
        alert(这是子标签);
        return false;   阻止事件冒泡：方式1
         e.stopPropagation() // 阻止时间冒泡：方式2
    })
>

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

 js代码部分
    $('.c1').on('click','.btn',1)">this).clone();  这里的this指代的还是btn对象，并不是.c1类对象
        $('.c1').append(btn);    
    })

$('#sex').prop('checked',1)">设置选中
$('#sex').prop('checked',1)">false);  取消选中
$('#sex').prop('checked');  查看当前状态是否为选中状态,选中为true，未选中为false
$('#uname').prop('disabled',1)">设置不可编辑
$('#uname').prop('disabled',1)">设置可以编辑

$('#d1').attr('id')   获取属性对应的值
$('#d1').attr({'class':'c1','name':'mike'});  设置属性

and  &&  逻辑与
or   ||  逻辑或 
not  !   逻辑非

 css代码
.c2{
    background-image: url("meinv.png");
    background-size: 100%;
    height: 350px;
    width: 400px;
    display: none;
}
html
<div class="c2"></div>

 js代码
$('.c2').show(1000);
$('.c2').hide(1000);
$('.c2').slideDown(1000);
$('.c2').slideUp(3000);

 #ff6700 200px
            background-image url("meinv.png")
            background-size 100% 350px 1.失去光标时触发的事件：blur
        $(#username).blur( (){
            $(this).css({background-coloryellow});
        });
    
     2.获取光标时触发的事件：focus
).focus(blue});
        });

     3.域内容发生变化时触发的事件：change 
     ---> 如果是给input标签绑定的change事件，
            那么只有input标签中的内容发生变化，并且失去光标时才会触发 
     $().change( (){
        $(green});
     });

     4.鼠标进入(触碰)时触发的事件：mouseenter
     $().mouseenter( (){
         $(red})
     })
    
     5.鼠标离开时触发的事件：mouseleave
).mouseleave(})
     })

      6.鼠标悬浮事件：hover
    $().hover(
          鼠标进入时触发事件
         })
         }, 鼠标离开时触发事件
         })
         }
     ) ;

     7.实时捕获输入内容的事件：input
).on(input (){
          console.log($().val());
    })
>

 页面加载事件，等页面上所有的标签和一些静态文件(图片、视频、外部js文件，外部css文件等等)全部加载完才自动触发的事件
        window.onload =  (){
        $('#d1').click( (){
            $('#d1').css({'background-color':'green'})   ;
            })
        }
          window.onload 存在覆盖现象，后设置的会把前面设置的覆盖掉
        
 jquery的页面载入,等html文件中的代码加载完成之后触发,不存在覆盖现象
        $(document).ready( (){
            $('#d1').click( (){
                $('#d1').css({'background-color':'green'})   ;
            });
        })