jQuery基础介绍二
-
jQuery练习题
js
$(‘#i1’)
r.fn.init [div#i1.container]$(‘h2’)
r.fn.init [h2, prevObject: r.fn.init(1)]$(‘input’)
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]$(‘.c1’)
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]$(‘.btn-default’)
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]$(‘.c1,h2’)
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]$(‘.c1,#p3’)
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]$(‘.c1,.btn’)
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]$(‘form’).find(‘input’)
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]$(‘label input’)
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]$(‘label+input’)
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]$(‘#p2~li’)
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]$(‘#f1 input:first’)
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]$(‘#my-checkbox input:last’)
r.fn.init [input, prevObject: r.fn.init(1)]$(‘#my-checkbox input[checked!=”checked”]’)
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]proto: Object(0)$(‘label:has(“input”)’)
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)] -
操作标签
操作类
“””
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
“””css操作
111
222
“””一行代码将第一个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 selfdef func2(self): print('func2') return self
obj = MyClass()
obj.func1().func2()位置操作
offset() # 相对于浏览器窗口
position() # 相对于父标签scrollTop() # 需要了解
$(window).scrollTop()
0
$(window).scrollTop() #页面滚动的位置
969
$(window).scrollTop() # 括号内不加参数就是获取
1733
$(window).scrollTop(0) # 加了参数就是设置
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft()尺寸
$(‘p’).height() # 文本
20
$(‘p’).width()
1670
$(‘p’).innerHeight() # 文本+padding
26
$(‘p’).innerWidth()
1674
$(‘p’).outerHeight() # 文本+padding+border
26
$(‘p’).outerWidth()
1674文本操作
“””
操作标签内部文本
js jQuery
innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()$(‘div’).text()
“有些话听听就过去了,不要在意,都是成年人!
“
$(‘div’).html()
“有些话听听就过去了,不要在意,都是成年人!
“
$(‘div’).text(‘你们都是我的大宝贝’)
w.fn.init [div, prevObject: w.fn.init(1)]
$(‘div’).html(‘你个臭妹妹’)
w.fn.init [div, prevObject: w.fn.init(1)]
$(‘div’).text(‘你们都是我的大宝贝
‘)
w.fn.init [div, prevObject: w.fn.init(1)]
$(‘div’).html(‘你个臭妹妹
‘)
w.fn.init [div, prevObject: w.fn.init(1)]
“””获取值操作
“””
js jQuery
.value .val()
“””
$(‘#d1’).val()
“sasdasdsadsadad”
$(‘#d1’).val(‘520快乐’) # 括号内不加参数就是获取加了就是设置w.fn.init [input#d1]
$(‘#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中 jQuery
setAttribute() 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]$(‘#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 jQuery
createElement(‘p’) $(‘‘)
appendChild() append()“””
let $pEle = $(‘‘)
$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]
事件
// 第一种
$(‘#d1’).click(function () {
alert(‘别说话 吻我’)
});
// 第二种(功能更加强大 还支持事件委托)
$(‘#d2’).on(‘click’,function () {
alert(‘借我钱买草莓 后面还你’)
})
-
克隆事件
-
自定义模态框
“””
模态框内部本质就是给标签移除或者添加上hide属性
“”” -
左侧菜单
.left { float: left; background-color: rgba(169, 169, 169, 1); width: 20%; height: 100%; position: fixed }
.title { font-size: 36px; color: rgba(255, 255, 255, 1); text-align: center }
.items { border: 1px solid rgba(0, 0, 0, 1) }
.hide { display: none }
-
返回顶部
-
自定义登陆校验
在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
username:
password:
-
input实时监控
-
hover事件
-
键盘按键按下事件
阻止后续事件执行
html
阻止事件冒泡
html
事件委托
html
页面加载
等待页面加载完毕再执行代码
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 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
VM243:1 1
VM243:1 2
VM243:1 3
VM243:1 4
VM243:1 5
VM243:1 6
VM243:1 7
VM243:1 8
VM243:1 9
第二种方式
$.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’).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’)
“回来吧,我原谅你了!”