day46:jQuery

目录

1.jQuery初识

2.选择器

3.文本操作

4.class类值操作

5.css样式操作

6.值操作

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

8.jquery选择器补充

9.模态对话框示例

10.创建标签

11.文档操作

12.清空标签

13.删除标签

14.克隆

15.模板字符串

16.事件绑定

17.事件冒泡

18.事件委托

19.属性操作

20.逻辑运算符

21.jQuery中简单动画效果

22.常用事件

23.页面载入

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'})   ;
            });
        })