jQuery

目录

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery对象和Dom对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。jQuery对象是包装 DOM对象后产生的， jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法

// jQuery对象如何变成标签对象
$('#d1')[0]
<div id=​"d1">​…​</div>​
document.getElementById('d1')
<div id=​"d1">​…​</div>​

// 标签对象如何转jQuery对象
$(document.getElementById('d1'))
w.fn.init [div#d1]

下载链接：jQuery官网
中文文档：jQuery AP中文文档

jQuery查找标签

基本选择器

"""html
<body>
    <div id="d1">div
        <span>div>span</span>
        <p>div>p
            <span>div>p>span</span>
        </p>
    </div>
    <p class="c1">p</p>
    <span>span</span>
</body>
"""

// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)

// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)

// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

组合选择器/层级选择器

"""html
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
    <span>div>span</span>
    <p id="d2">div>p
        <span>div>p>span</span>
    </p>
    <span>div>span</span>
</div>
<div class="c1"></div>
<span>span</span>
<span>span</span>
</body>
"""

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]

$('div.c1') // 找到有c1 class类的div标签
S.fn.init [div.c1, prevObject: S.fn.init(1)]

$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]

$('*') // 所有元素选择器
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]

$('#d1,.c1,p')  // 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]

$('div span')  // 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

$('div>span')  // 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

$('div+span')  // 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]

$('div~span')  // 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器：

"""html
<body>
<ul>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li class="c1">107</li>
    <li>108</li>
    <li id="d1">109</li>
    <li>110</li>
</ul>

<div>div
    <p></p>
    <span></span>
</div>
<div>div
    <a href=""></a>
</div>
</body>
"""
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]

$('ul li:first')  // :first 第一个
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:last')  // :last 最后一个
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:eq(2)') // :eq(index) 等于索引的那个元素
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:even')  // :even 匹配所有索引值为偶数的元素，从 0 开始计数
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:odd')  // :odd 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:gt(2)')  // :gt(index) 匹配所有大于给定索引值的元素
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:lt(2)')  // :lt(index) 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:not("#d1")')  // :not(元素选择器) 移除所有满足not条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]

$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")')  // :has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

"""html
<body>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="egon"></p>
</body>
"""
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]

$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]

$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

"""html
<body>
<form action="">
    <p>username:<input type="text"></p>
    <p>password<input type="password"></p>
    <input type="checkbox" value="111">111
    <input type="checkbox" value="111" checked>222
    <input type="checkbox" value="111">333 
    <select name="" id="">
        <option value="">111</option>
        <option value="">222</option>
        <option value="" selected>333</option>
    </select>
    <input type="button" value="按钮">
</form>
</body>
"""

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  // 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$(':password')  // 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]


:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected

"""特殊情况"""
$(':checked')  // 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)

$(':selected')  // 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]

$('input:checked')  // 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

"""html
<body>
    <span id="d1">span</span>
    <span>span</span>
    <div id="d2">
        <span>div>span</span>
        <p>div>p
            <span id="d3">div>p>span</span>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    <span class="c1">span</span>
</body>
"""
//同级别下一个元素(next(), nextAll(), nextUntil())
$('#d1').next()
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextUntil('.c1')  // 不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)


//上一个元素(prev(), prevAll(), prevUntil())
$('.c1').prev()
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)

$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]

$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]


//父亲元素(parent(), parents(), parentsUntil())
$('#d3').parent()  // 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]

$('#d3').parents() // 查找当前元素的所有的父辈元素
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]

$('#d3').parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]

//儿子和兄弟元素
$('#d2').children()  // 儿子

$('#d2').siblings()  // 兄弟们 同级别上下所有


//find() 搜索所有与指定表达式匹配的元素
$('div p')
# 等价
$('div').find('p')  // find从某个区域内筛选出想要的标签 


"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
//.first() 获取匹配的第一个元素
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)


$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
//.last() 获取匹配的最后一个元素
$('div span').last()
w.fn.init [span, prevObject: w.fn.init(3)]

$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
//.not() 从匹配元素的集合中删除与指定表达式匹配的元素
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

//.has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
//.eq() 索引值等于指定值的元素

jQuery操作标签

样式操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

$("p").css("color", "red"); //将所有p标签的字体设置为红色

//注意
$('p').first().css('color','red').next().css('color','green')
// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

$(window).scrollTop()  # 括号内不加参数就是获取
1733
$(window).scrollTop(0)  # 加了参数就是设置
n.fn.init [Window]

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()


$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').outerHeight()  # 文本+padding+border
26

文本操作

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

"""html
<body>
<div>
    <p>
        有些话听听就过去了，不要在意，都是成年人!
    </p>
</div>
</body>
"""

$('div').text()
"
有些话听听就过去了，不要在意，都是成年人!
"

$('div').html()
"
<p>
  有些话听听就过去了，不要在意，都是成年人!
</p>
"

$('div').text('你们都是我的大宝贝')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').html('你个臭妹妹')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').text('<h1>你们都是我的大宝贝</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').html('<h1>你个臭妹妹</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

"""html
<body>
<p id="d1" username="jason"></p>

<input type="checkbox" value="111" name="hobby" id="d2">
<input type="checkbox" value="222" name="hobby" checked id="d3">
<input type="checkbox" value="333" name="hobby" id="d4">
</body>
"""

let $pEle = $('p')
$pEle.attr('id')
"d1"

$pEle.attr('class')
undefined //没有undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]

$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性
"""

$('#d2').prop('checked')
false

$('#d2').prop('checked')
true

$('#d3').prop('checked',true)
w.fn.init [input#d3]

$('#d3').prop('checked',false)
w.fn.init [input#d3]

文档处理

// 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

// 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

// 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

// 替换
replaceWith()
replaceAll()

// 克隆
clone()

"""html
<body>
    <div id="d1">div
        <p id="d2">div>p</p>
        <span>div>span</span>
        <p>div>p</p>
    </div>
</body>
"""
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle)  # 内部尾部追加
$pEle.appendTo($('#d1'))

$('#d1').prepend($pEle)  # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]

$('#d2').after($pEle)  # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))

$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove()  # 将标签从DOM树中删除
w.fn.init [div#d1]

$('#d1').empty()  # 清空标签内部所有的内容
w.fn.init [div#d1]

jQuery事件

绑定事件

<body>
<button id="d1">吻我</button>
<button id="d2">亲我</button>

<script>

$('#d1').click(function () {   // 第一种
     alert('别说话 吻我')
});

$('#d2').on('click',function () {    // 第二种(功能更加强大 还支持事件委托)
     alert('借我钱买草莓 后面还你')
})

</script>
</body>

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

"""
案例一：克隆事件
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="d1">屠龙宝刀，点击就送</button>
 
<script>
$('#d1').on('click',function () {
    // console.log(this)  // this指代是当前被操作的标签对象
    // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
    $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

})
</script>
</body>
</html>


"""
案例二：模态框
"""
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="弹" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">爱好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#i0").click(function () {
    var coverEle = $(".cover")[0];  // 需要手动转
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
})

var cButton = $("#i3")[0];
cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
}
</script>
</body>
</html>


"""
案例三：左侧菜单
"""
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="items">
                <div class="item">111</div>
                <div class="item">222</div>
                <div class="item">333</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="items hide">
                <div class="item">111</div>
                <div class="item">222</div>
                <div class="item">333</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="items hide">
                <div class="item">111</div>
                <div class="item">222</div>
                <div class="item">333</div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");

    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>


"""
案例四：返回顶部
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;
 
            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<a href="#d1" class="hide">回到顶部</a>
 
<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

"""
案例五：自定义登录校验
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>
</body>
</html>

"""
扩展
"""
## input监控
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>k</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
 
<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>




## hover事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
</head>
<body>
<p id="d1">到家啊就是度假酒店</p>
 
<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })
 
    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>
</body>
</html>




## 键盘按键事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>
</body>
</html>

阻止后续事件执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        return false; // 第一种方式
        //e.preventDefault(); // 第二种方式
    });
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        return false;   
        // e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

页面加载

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})

# 第二种
$(function(){
  // js代码
})

# 第三种
"""直接写在body内部最下方

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

扩展

## each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""


## data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"


$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
posted @ 2020-05-19 15:32  风亦缘^_^  阅读(207)  评论(0)  编辑  收藏  举报