4. jQuery
前端之jQuery
"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端叫 “类库”
jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
"""
# jQuery在使用之前 一定要确保已经导入了
导入
# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置——编辑——file and code template
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""优点是不用下载文件，节省空间，缺点是必须有网络"""
# jQuery基本语法
jQuery(选择器).action()
jQuery可以简写成$
jQuery() === $()
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
查找标签——基本选择器
// 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)]
"""标签对象与jQuery对象之间的转换(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0] // $('#d1')返回的是一个jQuery对象，本质上是一个数组，对其进行索引取值就得到了标签对象
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]
组合选择器/分组与嵌套
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('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)]
基本筛选器
$('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') # 大儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li: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') # 奇数索引
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)') # 大于索引
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)') # 小于索引
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")') # 移除满足条件的标签
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")') # 选取出div标签里面包含一个或多个p标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]
属性选择器
$('[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)]
表单筛选器
$('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') # 在使用checked的时候自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
$('#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)
$('.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)]
$('#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').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() # 儿子
$('#d2').siblings() # 同级别上下所有
$('div p')
# 等价
$('div').find('p') # find从某个区域内筛选出想要的标签
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('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)]
$('div span').last()
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]
操作标签
# js与jQuery的操作类对比"""js版本 jQuery版本classList.add() addClass()classList.remove() removeClass()classList.contains() hasClass()classList.toggle() toggleClass()"""# css操作<p>111</p><p>222</p>"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""$('p').first().css('color','red').next().css('color','green')# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法class MyClass(object): def func1(self): print('func1') return self def func2(self): print('func2') return selfobj = MyClass()obj.func1().func2()# 位置操作offset() # 相对于浏览器窗口position() # 相对于父标签$(window).scrollTop() # 括号内不加参数就是获取 1733$(window).scrollTop(500) # 加了参数就是设置 n.fn.init [Window]scrollLeft()scrollRight()scrollBottom()# 尺寸$('p').height() # 文本的高度（详见盒子模型）20$('p').width() # 文本的宽度1670$('p').innerHeight() # 文本+padding26$('p').innerWidth()1674$('p').outerHeight() # 文本+padding+border26$('p').outerWidth()1674# 文本操作"""操作标签内部文本的比较js jQueryinnerText text() 括号内不加参数就是获取加了就是设置innerHTML html()$('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)]"""# 获取值操作"""js jQuery.value .val()"""$('#d1').val()"sasdasdsadsadad"$('#d1').val('520快乐') # 括号内不加参数就是查看加了就是设置$('#d2').val()"C:\fakepath\01_测试路由.png"$('#d2')[0].files[0] # 牢记两个对象之间的转换File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}# 属性操作"""js中 jQuerysetAttribute() attr(name,value)getAttribute() attr(name)removeAttribute() removeAttr(name)在用变量存储对象的时候 js中推荐使用 XXXEle 标签对象jQuery中推荐使用 $XXXEle jQuery对象"""let $pEle = $('p')undefined$pEle.attr('id')"d1"$pEle.attr('class')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""" $('#d3').attr('checked')"checked"$('#d2').attr('checked')undefined$('#d2').attr('checked')undefined$('#d4').attr('checked')undefined$('#d3').attr('checked')"checked"$('#d3').attr('checked','checked') # 无效w.fn.init [input#d3]# 实际上我们检验checked的时候是希望能够返回直观的能够判断的结果，最好是true和false，这样可以使用结果进行一些判断和操作，座椅一般使用prop更好 $('#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] # 文档处理"""js jQuerycreateElement('p') $('<p>')appendChild() append()"""let $pEle = $('<p>')$pEle.text('你好啊 草莓要不要来几个?')$pEle.attr('id','d1') $('#d1').append($pEle) # 内部尾部追加$pEle.appendTo($('#d1')) # 就是顺序不一样，效果是一样的 $('#d1').prepend($pEle) # 内部头部追加$pEle.prependTo($('#d1')) $('#d2').after($pEle) # 放在某个标签后面$pEle.insertAfter($('#d1')) $('#d1').before($pEle) # 放在某个标签前面$pEle.insertBefore($('#d2'))$('#d1').remove() # 将标签从DOM树中删除w.fn.init [div#d1] $('#d1').empty() # 清空标签内部所有的内容w.fn.init [div#d1]
事件
// 第一种 $('#d1').click(function () { alert('别说话 吻我') }); // 第二种(功能更加强大 还支持事件委托) $('#d2').on('click',function () { alert('借我钱买草莓 后面还你') })
-
克隆事件
<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> -
自定义模态框
"""模态框内部本质就是给标签移除或者添加上hide属性""" -
左侧菜单
<script> $('.title').click(function () { // 先给所有的items加hide $('.items').addClass('hide') // 然后将被点击标签内部的hide移除 $(this).children().removeClass('hide') })</script><!--尝试用一行代码搞定上面的操作--> -
返回顶部
<script> $(window).scroll(function () { if($(window).scrollTop() > 300){ $('#d1').removeClass('hide') }else{ $('#d1').addClass('hide') } })</script> -
自定义登陆校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息<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> -
input实时监控
<input type="text" id="d1"><script> $('#d1').on('input',function () { console.log(this.value) })</script> -
hover事件
<script> // $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开 // alert(123) // }) $('#d1').hover( function () { alert('我来了') // 悬浮 }, function () { alert('我溜了') // 移开 } )</script> -
键盘按键按下事件
<script> $(window).keydown(function (event) { console.log(event.keyCode) if (event.keyCode === 16){ alert('你按了shift键') } })</script>
阻止后续事件执行
<script> $('#d2').click(function (e) { $('#d1').text('宝贝 你能看到我吗?') // 阻止标签后续事件的执行 方式1 // return false // 阻止标签后续事件的执行 方式2 // e.preventDefault() })</script>
阻止事件冒泡
<script> $('#d1').click(function () { alert('div') }) $('#d2').click(function () { alert('p') }) $('#d3').click(function (e) { alert('span') // 阻止事件冒泡的方式1 // return false // 阻止事件冒泡的方式2 // e.stopPropagation() })</script>
事件委托
<button>是兄弟，就来砍我!!!</button><script> // 给页面上所有的button标签绑定点击事件 // $('button').click(function () { // 无法影响到动态创建的标签 // alert(123) // }) // 事件委托 $('body').on('click','button',function () { alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的 })</script>
页面加载
# 等待页面加载完毕再执行代码window.onload = function(){ // js代码}"""jQuery中等待页面加载完毕"""# 第一种$(document).ready(function(){ // js代码})# 第二种$(function(){ // js代码})# 第三种"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000)w.fn.init [div#d1]$('#d1').show(5000)w.fn.init [div#d1]$('#d1').slideUp(5000)w.fn.init [div#d1]$('#d1').slideDown(5000)w.fn.init [div#d1]$('#d1').fadeOut(5000)w.fn.init [div#d1]$('#d1').fadeIn(5000)w.fn.init [div#d1]$('#d1').fadeTo(5000,0.4)w.fn.init [div#d1]
补充
# 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 0VM181:1 1VM181:1 2VM181:1 3VM181:1 4VM181:1 5VM181:1 6VM181:1 7VM181:1 8VM181: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 111VM484:1 1 222VM484: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').last().data('info')"回来吧，我原谅你了!" $('div').first().data('xxx')undefined$('div').first().removeData('info')w.fn.init [div#d1, prevObject: w.fn.init(10)] $('div').first().data('info')undefined$('div').last().data('info')"回来吧，我原谅你了!"
前端框架Bootstrap
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：https://v3.bootcss.com/
登录网站的时候有中文文档介绍，可以自己学习
注意：bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
布局容器
<div class="container"> 左右两侧有留白</div><div class="container-fluid"> 左右两侧没有留白</div># 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
栅格系统
<div class="row"></div>写一个row就是将所在的区域划分成12份<div class="col-md-6 "> 获取你所要的份数# 在使用bootstrap的时候 脑子里面一定要做12的加减法
栅格参数
.col-xs- .col-sm- .col-md- .col-lg-# 针对不同的显示器 bootstrap会自动选择对应的参数# 如果你想要兼容所有的显示器 你就全部加上即可# 在一行如何移动位置<div class="col-md-8 c1 col-md-offset-2"></div>
排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
表格
<table class="table table-hover table-striped table-bordered"> <tr class="success"> <td>1</td> <td>jason</td> <td>123</td> <td>study</td></tr><tr class="active">...</tr><tr class="success">...</tr><tr class="warning">...</tr><tr class="danger">...</tr><tr class="info">...</tr>
表单
<div class="container"> <div class="col-md-8 col-md-offset-2"> <h2 class="text-center">登陆页面</h2> <form action=""> <p>username:<input type="text" class="form-control"></p> <p>password:<input type="text" class="form-control"></p> <p> <select name="" id="" class="form-control"> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> </p> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> <input type="submit"> </form> </div></div># 针对表单标签 加样式就用form-control class="form-control""""<input type="checkbox">222<input type="radio">333checkbox和radio我们一般不会给它加form-control，直接使用原生的即可"""# 针对报错信息 可以加has-error（input的父标签加）<p class="has-error"> username: <input type="text" class="form-control"></p>
按钮
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a><button class="btn btn-danger">按我</button><button class="btn btn-default">按我</button><button class="btn btn-success">按我</button><button class="btn btn-info">按我</button><button class="btn btn-warning">按我</button><button class="btn btn-warning btn-lg">按我</button><button class="btn btn-warning btn-sm">按我</button><button class="btn btn-warning btn-xs">按我</button><input type="submit" class="btn btn-primary btn-block"> 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
图表
<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2> <style> span { color: greenyellow; } </style># 扩展
导航条
<nav class="navbar navbar-inverse"><nav class="navbar navbar-default">
分页器
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul></nav>
弹框
https://lipis.github.io/bootstrap-sweetalert/ swal('你还好吗?')undefinedswal('你还好吗?')undefinedswal('你还好吗?','我不好，想你了!')undefinedswal('你还好吗?','我不好，想你了!','success')undefinedswal('你还好吗?','我不好，想你了!','warning')undefinedswal('你还好吗?','我不好，想你了!','error')undefinedswal('你还好吗?','我不好，想你了!','info')undefined# 我们在后面的课程中 还会涉及到该部分内容
浙公网安备 33010602011771号