day46:jQuery

1.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对象

2.选择器

2.1 id选择器

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

2.2 类选择器

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

2.3 元素选择器

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

2.4 组合选择器

$('#d1,.c2')

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

// css代码:
#d1,.c2{
    background-color: red;
    height: 100px;
     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对象

2.5 后代选择器

// 格式：$("form input")

2.6 属性选择器

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

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

2.7 表单选择器

// $(":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');

2.8 筛选器方法

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

2.8.1 parent()

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

2.8.2 children()

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

2.8.3 next()

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

2.8.4 prev()

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

2.8.5 siblings()

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

2.8.6 find() 找后代

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

2.8.7 first()和last() 和eq(索引值)

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

3.文本操作

在jQuery中使用text()和html()进行文本操作, 和js中的innerText和innerHTML是等同的

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

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

4.class类值操作

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

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

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

5.css样式操作

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

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

6.值操作

<!--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代码
// 1.普通文本输入框：
    // 获取输入框中的值
        $(':text').val();
    // 设置输入框中的值
        $(':text').val('xxx');

// 2. radio 单选框
    // 获取值：
        $(':radio:checked').val();
    // 设置值：
        $(':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.循环标签数组
                var s = $(':checkbox:checked');
                $.each(s,function(k,v){
                    console.log(k,v);// k是索引值，v是dom标签对象
                })
    // B.设置值
         $(':checkbox').val(['1', '3']);// 纯数字和字符串数字都能够识别
        $(':checkbox').val([2,3]);

// 4.select 单选下拉框
      // 获取值
         $('#s1').val();
      // 设置值
          $('#s1').val(['2']);

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

7.注意点：button按钮提交form表单数据

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

8.jquery选择器补充

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

<!-- 在html代码中 可以对这些标签的默认状态进行设置 -->
<input type="text" id="username" disabled> <!-- input框不可操作 -->
<input type="radio" class="a1" name="sex" value="1" checked>男 <!-- 默认选中男 -->
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1" checked>抽烟 <!-- 默认选中抽烟 -->
<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" selected>上海</option>  <!-- 默认选中上海 -->
    <option value="3">深圳</option>
</select>
<!-- 总结 -->
<!-- 1.enabled和disabled可以应用在input输入框中,radio单选框和checkbox多选框中，select下拉框中
     2.checked只能应用在radio单选框和checkbox多选框中
     3.selected只能应用在select下拉框中-->

9.模态对话框示例

<!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; /* z轴数值为9 用来确保是覆盖别人还是被别人覆盖 */
        }
        
        /* 点击登录时，会出现一个登录页面的太狂，这部分是设置登录弹框的样式 */
        .mode{
            position: fixed;
            height: 400px;
            width: 300px;
            background-color: #ffffff;
            z-index: 10; /* z轴数值为10，而shadow阴影的z轴数值为9 所以当登录弹框会浮在阴影上面 */
            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>
    // 当点击登录按钮时
    /* 1.去除shadow的hide效果，使shadow使用本来定义好的css样式(灰色阴影效果) */
    /* 2.去除mode的hide效果，让登录弹框显示出来 */
    $('#btn').click(function (){
          $('.shadow,.mode').removeClass('hide');
    })
    
    // 当点击取消按钮时
    /* 1.给shadow添加hide效果 让shadow没有任何样式 所以css阴影效果自然也没有了 */
    /* 2.给mode添加hide效果 当点击取消按钮时 登录弹框消失 */
    $('#cancel').click(function (){
          $('.shadow,.mode').addClass('hide');
    })


</script>
</html>

10.创建标签

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

11.文档操作

// 往标签内部的后面添加元素
// 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方法
    var a = $('<a>',{href:"",text:'xxx'});
    $('div').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'));

12.清空标签

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

13.删除标签

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

14.克隆

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

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

15.模板字符串

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

16.事件绑定

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

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

17.事件冒泡

什么是事件冒泡？当父级或者祖先辈标签和子标签绑定了相同的事件时，比如点击事件，那么当点击子标签时，会一层层触发父级标签的点击事件

<!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;  // 阻止事件冒泡：方式1
        // e.stopPropagation() // 阻止时间冒泡：方式2
    })
</script>
</html>

18.事件委托

什么是事件委托？事件委托是通过事件冒泡的原理，利用父级去触发子级的事件

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

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

19.属性操作

prop方法:针对的是checked,selected,enabled,disabled

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

attr方法:获取值,修改值

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

20.逻辑运算符

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

21.jQuery中简单动画效果

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

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

22.常用事件

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

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

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

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

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

23.页面载入

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

day46:jQuery

目录

1.jQuery初识

2.选择器

2.1 id选择器

2.2 类选择器

2.3 元素选择器

2.4 组合选择器

2.5 后代选择器

2.6 属性选择器

2.7 表单选择器

2.8 筛选器方法

2.8.1 parent()

2.8.2 children()

2.8.3 next()

2.8.4 prev()

2.8.5 siblings()

2.8.6 find() 找后代

2.8.7 first()和last() 和eq(索引值)

3.文本操作

4.class类值操作

5.css样式操作

6.值操作

7.注意点：button按钮提交form表单数据

8.jquery选择器补充

9.模态对话框示例

10.创建标签

11.文档操作

12.清空标签

13.删除标签

14.克隆

15.模板字符串

16.事件绑定

17.事件冒泡

18.事件委托

19.属性操作

prop方法:针对的是checked,selected,enabled,disabled

attr方法:获取值,修改值

20.逻辑运算符

21.jQuery中简单动画效果

22.常用事件

23.页面载入