jQuery

Posted 2021-12-20 zhouyongv5

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

jQuery事件

1. 注册示例

form 表单的 action：URL
    1.全路径：ip+port+....
    2./index：当前打开页面ip+port
    3.不写：当前代开页面的url

<!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="text" id="i2" name="password">
        <span class="errors"></span>
    </label></p>
    <input type="submit" value="注册" id="d1">
</form>
<script>
    var $b1Ele = $(‘#d1‘);    // 获取按钮标签
    // 给按钮标签绑定点击事件
    // 原生js  b1ELe.onclick = function()
    $b1Ele.on(‘click‘,function () 
        var $username = $(‘#i1‘);    // 获取到用户输入的内容
        var $password = $(‘#i2‘);
        // 判断上面标签的value是否为空
        if ($username.val().length==0) 
            $(‘.errors‘).first().text(‘用户名不能为空‘)    // 找到username对于的span标签添加提示信息
        
        if ($password.val().length==0)
            $(‘.errors‘).last().text(‘密码不能为空‘)
        
        return false  // 取消标签自带的提交事件，但都不为空是也不能提交
    )

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

2. jQuery属性操作

<!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">淡定！！！</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>

HTML文档

// 动态页面添加的数值，页面刷新就没了
$(‘#d1‘).attr(‘id‘);  // 查值
$(‘#d1‘).attr(‘username‘,‘Tom‘);  // 赋单值
$(‘#d1‘).attr(‘password‘:‘123‘,‘hobby‘:‘study‘);  // 赋多值
$(‘#d1‘).removeAttr(‘username‘);  // 删除值

$(‘#i1‘).attr(‘checked‘);  // 获取标签属性值，在html文档中设置了返回‘checked‘，否则undefined
$(‘#i2‘).prop(‘checked‘);  // 动态获取属性值，页面只要选上返回true，否则false

3.文档处理

<!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>

<span></span>
<div>div
    <span>div的span</span>
    <span></span>
    <p>p
        <a href="">p a</a>
    </p>
    <span>div span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>

HTML文档

添加标签

var pEle = document.createElement(‘p‘);
pEle.innerText = ‘超越前人!‘
var $divEle = $(‘div‘);
$divEle.append(pEle);  // div添加：尾部添加 ！！！js原生标签才能在页面显示(js的appendChild)
$(pEle).appendTo($divEle);  // 添加到标签尾部


var pEle = document.createElement(‘p‘);
pEle.innerText = ‘谦虚！‘；
var $divEle = $(‘div‘);
$divEle.prepend(pEle);  // div标签：头部添加

var pEle = document.createElement(‘p‘);
pEle.innerText = ‘莫浮躁！‘；
var $divEle = $(‘div‘);
$divEle.before(pEle);  //div标签：前面位置

替换标签

var pEle = document.createElement(‘p‘);
eEle.innerText = ‘坚持到底！‘;
var $divEle = $(‘div‘);
$divEle.replaceWith(pEle);  // 替换标签（标签+文本）

$(‘p‘).data(‘username‘,‘Tom‘);  // 标签存储键值对
$(‘p‘).data(‘username‘);  // 获取
$(‘p‘).removeData(‘username‘);  // 删除
$(‘p‘).data(‘username‘);  // undefined：不存在，不会报错

4. 克隆事件

<!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: magenta;
        
    </style>
</head>
<body>
<button>button</button>

<script>
    // $(‘button‘).click(function () ) 另一种绑定方式
    $(‘button‘).on(‘click‘,function () 
        // console.log(this)  this指代的是当前被操作对象(并且是原生的js对象)
        $(this).clone(true).insertAfter(this);  // 克隆标签:默认（不加true）情况下只克隆标签的文本和样式不克隆事件
    )
</script>

</body>
</html>

5.悬浮事件

<!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>
<script>
    $(‘p‘).hover(
        function () 
            alert(‘漫花庄园的花开了！‘)  // 悬浮p上显示该弹出框
        ,
        function () 
            alert(‘欢迎下次再来！‘)   // 离开p上显示该弹出框
        
    )
</script>
</body>
</html>

6.取消标签自带事件

取消标签自带的事件有两种方式：

  $(‘input‘).click(function (e) 
        alert(123);
        // 方式1. return false
        // 方式2. e.preventDefault();
  )

取消input的submit自带的提交事件

<!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="">
    <input type="submit">
</form>
<script>
    $(‘input‘).click(function () 
        alert(123);
        return false
    )
    // $(‘input‘).click(function (e) 
    //     alert(123);
    //     e.preventDefault();
    // )
</script>
</body>
</html>

7. input框实时获取用户输入

<!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>
<input type="text">
<script>
    $(‘input‘).on(‘input‘,function () 
        console.log(this.value)
    )
</script>
</body>
</html>

8. 事件冒泡

事件会一层层往上一级汇报

如何阻止事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
！！！注意需要加上形参e

<!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>
<div>架子
    <p>架子上的篮子
        <span>篮子里的草莓！！ˋ( ° ▽、° ) </span>
    </p>
</div>
<script>
    $(‘div‘).click(function () 
        alert(‘架子：新鲜的草莓，过时不候(＾Ｕ＾)ノ~ＹＯ‘);
    );
    $(‘p‘).click(function (a) 
        alert(‘篮子：(*^_^*)‘);
        a.stopPropagation()  // 中断向上一级传递：终止冒泡事件
    );
    $(‘span‘).click(function () 
        alert(‘草莓:ˋ( ° ▽、° ) ‘);
    );
</script>
</body>
</html>

<!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>
<input type="text">
<script>
    $(‘input‘).on(‘input‘,function () 
        console.log(this.value)
    )
</script>
</body>
</html>

9. 事件委托

将触发的事件委托给内部某个标签去执行
无论该标签是初始化就有还是后期动态添加都可以执行

<button>点我有惊喜??</button>

<script>
    // $(‘button‘).click(function()   // console后添加该标签不能执行
    //     alert(123)
    // );
    // 事件委托
    $(‘body‘).on(‘click‘,function () 
        alert(123)
    )

10. jQuery动态效果

<!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>
<img width="400px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559667761691&di=cb9cc17011c3cea3dff7a46f3921ab21&imgtype=0&src=http%3A%2F%2Fcdn.lizhi.fm%2Fradio_cover%2F2014%2F07%2F15%2F13007232489558148.jpg" alt="">
<script>
    $(‘img‘).hide(1000);  //以左上角为基点隐藏
    $(‘img‘).show(2000);  // 以左上角为基点展示
    $(‘img‘).slideDown(1000);  //以上边框为基准展示
    $(‘img‘).slideUp(1000);  //以上边框为基准隐藏
    $(‘img‘).fadeIn(1000);  //渐淡显示
    $(‘img‘).fadeOut(1000);  //渐淡隐藏
    $(‘img‘).fadeTo(1000,0.4);  //渐淡至0.4
</script>
</body>
</html>

11. 标签存储数据

　　在console中，可以将标签当做临时小仓库，可以让任何标签帮忙存储数据，只要不刷新页面，数据就一直存在

　　关于文档加载三种方式:

//第一种(了解):
　　$(document).ready(function()
　　　　// 在这里写你的JS代码...
　　)

//第二种(了解):
　　$(function()
　　　　// 你在这里写你的代码
　　)

//第三种:
　　直接在body内部最下方书写代码

11. 标签存储数据

　　在console中，可以将标签当做临时小仓库，可以让任何标签帮忙存储数据，只要不刷新页面，数据就一直存在

12. each循环

// 循环打印标签
$(‘div‘).each(function()
    console.log(this)  // this指代的是当前被操作对象(并且是原生的js对象)
)

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段