jQuery的主要使用方法

一、在html中添加jquery，可以使用cdn加载jquery

　　1、网址：https://www.bootcdn.cn/jquery/

　　2、推荐使用3.4左右版本的，建议使用min.js后缀的，min后缀是压缩过的，体积比较小

//注册窗口注册是如果输入内容为空则提示内容为空
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <p><label for="i1">username:
        <input type="text" id="i1" name="username">
        <span class="errors"></span>
    </label></p>
    <p><label for="i2">password
        <input type="password" id="i2" name="password">
        <span class="errors"></span>
    </label></p>
    <input type="submit" value="注册" id="d1">
</form>
<script>
    // 获取按钮标签
    var $b1Ele=$("#d1");
    // 给按钮标签绑定事件
    $b1Ele.click(function () {
        var $userName=$('#i1');
        var $passWord=$('#i2');
    //判断用户输入框是否为空
        if ($userName.val().length==0){
            $('.errors').first().text('用户不能为空')
        }
        if ($passWord.val().length==0){
            $('.errors').last().text('棉麻不能为空')
        }
        // 点击注册按钮不提交信息刷新页面
        return false;
    })
</script>
</body>
</html>

//设置属性，根据.attr(‘属性名’)获取对应的值，当输入一个值的时候是获取对应的值，两个值的是都是添加值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20岁超过30岁，40岁，50岁</p>
<p>衣锦还乡</p>
<p>技多不压身</p>
</body>
</html>

$('#d1');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]
$("#d1").attr('id');
"d1"
$("#d1").attr('username','yzn');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]0: p#d1length: 1__proto__: Object(0)
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
//移除设置好的设置好的标签

$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]

删除已经添加好的标签

$('#d1').removeAttr('test');

使用prop4获取类似于checked的标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20岁超越30岁，40岁，50岁的人</p>
<p>衣锦还乡</p>
<p>技多不压身</p>
<input type="checkbox" name="hobby" id="i1" checked>读书
<input type="checkbox" name="hobby" id="i2">写字
<input type="checkbox" name="hobby" id="i3">吹牛逼
</body>
</html>
//根据返回值获取checked的标签属性，返回true或false

添加新的标签，插入数据

var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$divEle.append(pEel);

//在div标签里面最底部添加一个p标签

添加新的标签

var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$(pEel).appendTo($divEle);

添加标签到指定div标签内部头

var pEle=document.createElement('p');
undefined
pEle.innerText='谦虚';
"谦虚"
var $divEle=$('div');
undefined
$divEle.prepend(pEle);

新建标签放在指定标签的前面：before

var pEel=document.createElement('p');
undefined
pEel.innerText='淡定，切勿浮躁！！！';
"淡定，切勿浮躁！！！"
var $divEle=$('div');
undefined
$divEle.before(pEel);

新建标签替换创建好的标签

var pEel=document.createElement('p');
undefined
pEel.innerText='坚持就是胜利，坚持就是胜利';
"坚持就是胜利，坚持就是胜利"
var $divEle=$('div');
undefined
$divEle.replaceWith(pEel);

克隆新的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button{
            background-color: pink;
        }
    </style>
</head>
<body>
<button>出笼报道，天下无敌</button>
<script>
    $('button').on('click',function () {
        $(this).clone(true).insertAfter(this);
    })
</script>
</body>
</html>

鼠标悬停触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>欢迎光临</p>
<script>
    $('p').hover(
        function () {
            alert('how much?')
        },
        function () {
            alert('欢迎下次还来')
        }
    )
</script>
</body>
</html>

获取用户在input框中输入的实时内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户输入的信息</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
    $('input').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>

取消标签自带的事件（input点击按钮会出现页面刷新）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取消标签自带的事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<from action="">
    <input type="submit">
</from>
<script>
    $('input').click(function (e) {
        alert(123);
        // 阻止默认事件的发生
        e.preventDefault()
    })

</script>
</body>
</html>

事件冒泡（鼠标点击在设置好的标签内容上触发绑定事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间冒泡</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div下的p
        <span>div下的p下的span</span>
    </p>
</div>
<script>
    $('div').click(function () {
        alert('div')
    });
    $('p').click(function (a) {
        alert('p')
        a.stopPropagation()
    });
    $('span').click(function (e) {
        alert('span');
    });
</script>
</body>
</html>

事件冒泡（点击按钮，触发对应事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>我是金牌技师，很搞定为你服务</button>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
</body>
</html>

设置图片前台展示动态效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片动态效果</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://hbimg.b0.upaiyun.com/828e72e2855b51a005732f4e007c58c92417a61e1bcb1-61VzNc_fw658" alt="">
</body>
</html>

//图片虚化收缩左上角
 $('img').hide(3000);
//图片虚化从左上角展示出来
 $('img').show(3000);
//=========================
//图片收缩到左上角

　　$('img').slideDown(5000)

　//图片从左上角展示出来
　　$('img').slideUp(5000)

　　//图片原地渐变显示出来

　　$('img').fadeIn(5000)

　　//图片原地渐变隐藏
　　$('img').fadeOut(5000)

　　//图片原地变淡，
　　$('img').fadeTo(5000,0.4)

eachx循环

标签可以当做数据存储库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p></p>
</body>
</html>

//往p标签中添加数据
$('p').data('username','json');
//查看数据，一个值是查看数据，两个值是新增数据
$('p').data('username');

在html代码中查看不到新增的数据的

Bootstrap：是一个前端框架

　　使用前提：到如bootstrap需要先导入jquery，对jquery有依赖

jQuery的主要使用方法

猜你喜欢