文章目录
jQuery下载针对导入问题jQuery基本语法查找标签基本选择器组合选择器/分组与嵌套基本筛选器属性选择器form表单筛选器筛选器方法
操作标签操作类css操作位置操作尺寸文本操作获取值操作属性操作文档处理
jQuery事件jQUery绑定事件的方式克隆事件自定义模态框左侧菜单返回顶部自定义登录校验input框实时监控hover事件键盘按键按下事件阻止后续事件执行阻止事件冒泡事件委托页面加载动画效果
补充
jQuery
"""
jQuery内部封装了原生的js代码，还添加了很多的功能
能够通过书写更少的代码，完成js操作
类似于Python里的模块，在前端模块不叫模块，叫”类库“
兼容多个浏览器，使用jQuery就不需要考虑兼容问题
jQuery的宗旨：
write less do more
让你用更少的代码完成更多的事情
python中导入模块需要消耗资源，
jQuery在使用的时候也需要导入，但是它的文件特别的小，基本不影响速度
"""
菜鸟教程
jQuery API中文文档
BootCDN
jQuery下载
官网下载地址
打开压缩过的链接直接 Ctrl+C复制，新建一个JS文件直接Ctrl+V进去就可以 jQuery在使用前一定要确保已经导入了
针对导入问题
文件下载到了本地，如何解决多个文件反复书写引入语句的代码
可以借助Pycharm自动初始化代码功能，完成自动添加
2. 如果不下载jQuery文件，可以直接引用jQuery提供的CDN服务（基于网络直接请求加载)
CDN:内容分发网络CDN有免费的有收费的前端免费的CDN网站: BootCDN 直接复制即可，但是要保证计算机有网络，才可以使用。
jQuery基本语法
#jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨，jQuery简写成$
jQuery() 等价于 $()
#jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
let pELe=document.getElementById('p1')
pELe.style.color='red'
'red'
#jQuery操作标签
$('p').css('color','blue')
查找标签
基本选择器
//id选择器
$('#d1')
S.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)
//class选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]0: p.c1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
//标签选择器
$('span')
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]0: span1: span2: spanlength: 3prevObject: S.fn.init [document][[Prototype]]: Object(0)
//jQuery对象如何变成标签对象
$('#d1')[0]
document.getElementById('d1')
//标签对象如何变jQuery对象呢
$(document.getElementById('d1'))
S.fn.init [div#d1]
$(document.getElementById('d1'))[0] //又转成了标签对象
组合选择器/分组与嵌套
$('div')
S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]
$('div.c1')
S.fn.init [div.c1, prevObject: S.fn.init(1)]0: div.c1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('div#d1')
S.fn.init [div#d1, prevObject: S.fn.init(1)]0: div#d1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('*')
S.fn.init(18) [html, head, meta, title, script, style, body, span, span, div#d1, span, p, span, span, div.c1, span, span, script, prevObject: S.fn.init(1)]
$('#d1,.c1,p')
S.fn.init(3) [div#d1, p, div.c1, prevObject: S.fn.init(1)]
$('div span') #后代
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
$('div>span')#儿子
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]0: span1: spanlength: 2prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('div+span')#第一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('div~span') #兄弟
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
基本筛选器
$('ul li') #ul下所有li
S.fn.init(10) [li, li, li, li, li, li, li.c1, li, li, li#d1, prevObject: S.fn.init(1)]
$('ul li:first') #大儿子
S.fn.init [li, prevObject: S.fn.init(1)]0: lilength: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('ul li:last')#小儿子
S.fn.init [li#d1, prevObject: S.fn.init(1)]0: li#d1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('ul li:eq(2)')#索引为2的
S.fn.init [document][[Prototype]]: Object(0)
$('ul li:even') #偶数
S.fn.init(5) [li, li, li, li.c1, li, prevObject: S.fn.init(1)]0: li1: li2: li3: li.c14: lilength: 5prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('ul li:odd')#奇数
S.fn.init(5) [li, li, li, li, li#d1, prevObject: S.fn.init(1)]0: li1: li2: li3: li4: li#d1length: 5prevObject: S.fn.init [document][[Prototype]]: Object(0)
$('ul li:gt(2)')#索引大于2的
S.fn.init(7) [li, li, li, li.c1, li, li, li#d1, prevObject: S.fn.init(1)]
$('ul li:lt(2)')#索引小于2的
S.fn.init(2) [li, li, prevObject: S.fn.init(1)]
$('ul li:not("#d1")')#ul下所有li，除了id为d1的
S.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: S.fn.init(1)]
$('div:has("p")')#选取出包含一个或多个标签在内的标签，简单将就是div里面有p的div
S.fn.init [div, prevObject: S.fn.init(1)]
属性选择器
$('[username]')
$('[username="lisi"]')
$('p[username]')
$('[type]')
$('[type="text"]')
form表单筛选器
$('input[type="text"]')
S.fn.init [input, prevObject: S.fn.init(1)]
$('input[type="password"]')
S.fn.init [input, prevObject: S.fn.init(1)]
$(':password') #等价于上面第二个
S.fn.init [input, prevObject: S.fn.init(1)]
$(':text') ##等价于上面第一个
S.fn.init [input, prevObject: S.fn.init(1)]
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
表单的对象属性
:enabled
:disabled
:checked
:selected
$(':checked') #它会将checked 和selected都拿到
S.fn.init(2) [input, option, prevObject: S.fn.init(1)]0: input1: optionlength: 2prevObject: S.fn.init [document][[Prototype]]: Object(0)
$(':checked')[0]
$(':checked')[1]
slot
$(':selected') #它不会，只拿selected
S.fn.init [option, prevObject: S.fn.init(1)]
$(':selected')[0]
slot
$('input:selected') #自己加一个限制条件
S.fn.init [prevObject: S.fn.init(1)]
筛选器方法
$('#d1').next() #同级别下一个
$('#d1').nextAll()
$('#d1').nextUntil('.c1') #下面所有直到.c1,不包括.c1
$('.c1').prev() #上一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')
$('#d3').parent()#第一级父标签
$('#d3').parent().parent()
$('#d3').parent().parent()
$('#d3').parent().parent().parent()
$('#d3').parent().parent().parent().parent()
$('#d3').parent().parent().parent().parent().parent()
$('#d3').parents() #所有父标签
$('#d3').parentsUntil('body')
$('#d2').children()#儿子
S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]
$('#d2').siblings()#同级别上下所有
$('div p')等价于 $('div').find('p')
#find从某个区域内部筛选出想要的标签
#等价
$('div span:first')
$('div span').first()
$('div span:last')
$('div span').last()
$('div span:not(""#d3")')
$('div span').not('#d3')
操作标签
操作类
#操作类
"""
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
"""
css操作
#css操作
111
222
'''一行代码将第一个p标签变成红色，第二个p标签变成蓝色'''
$('p').first().css('color','red').next().css('color','blue')
#jQuery链式操作，使用jQuery可以做到一行代码操作很多标签
#jQuery对象调用jQuery方法之后返回的还是一个jQUery对象，也就可以继续调用
位置操作
#位置操作
offset()
$('p').offset()
{top: 100, left: 100}
position()
$('p').position()
{top: 100, left: 100}
scrollTop()
$(window).scrollTop() #括号内不加参数就是不获取
$(window).scrollTop(500)#加了参数就是设置
scrollLeft()
尺寸
#尺寸
$('p').height #文本
20.8
$('p').width()
866
$('p').innerheight() #文本+padding
$('p').innerwidth()
$('p').outheight() #文本+padding+boder
$('p').outwidth()
文本操作
"""
操作标签内部文本
js版本 jQuery版本
innerText text() 括号内不加参数就是获取，加了参数就是设置
innerHTML html() 括号内不加参数就是获取，加了参数就是设置
"""
$('div').text()
'\n 独步江湖，东方不败\n '
$('div').html()
'\n
独步江湖，东方不败
\n '$('div').text('人生苦短，我学Python')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('人生路，冷冷的夜光')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').text('
人生苦短，我学Python
')S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('
人生苦短，我学Python
')S.fn.init [div, prevObject: S.fn.init(1)]
获取值操作
"""
js jQuery
.value .val()
"""
$('#d1').val()
'vfdghjmhnbv'
$('#d1').val('520') #括号内不加参数是获取，加了参数是设置
S.fn.init [input#d1]
$('#d2')[0].files[0] #两个对象之间的转换
$(':checkbox').val(666)#所有的value值都改变成666
属性操作
"""
js jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候，js推荐使用xxxEle （标签对象）
在jQuery中推荐使用$xxxELe （jQuery对象）
"""
let $pEle = $('p')
$pEle.attr('id')
$pEle.attr('class')
$pEle.attr('class','c1')
$pEle.attr('id','666')
$pEle.attr('password','456666')
$pEle.removeAttr('password','456666')
"""对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox,radio,option是否被选中用prop"""
$('#i2').prop('checked')
true
$('#i3').prop('checked',true)
S.fn.init [input#i3]
文档处理
"""
js jQuery
createElement('p') $('
')
appendChild() append()
"""
let $pELe = $('
')
$pELe.text('你好')
$pELe.attr('id','d6')
$('#d1').append($pELe)#和下面等价 ,内部尾部追加
$('#d1').append($pELe[0])
$pELe.appendTo($('#d1'))
$('#d1').prepend($pELe) #内部头部追加
$pELe.prependTo($('#d1'))
$('#d2').after($pELe) #放在某个标签后面
S.fn.init {}[[Prototype]]: Object(0)
$pELe.insertAfter($('#d2'))
$('#d1').before($pELe)#放在某个标签前面
$pEle.insertBefore($('#d1'))
$('#d1').remove()#将标签从DOM树中删除
$('#d1').empty()#清空标签内部所有的内容
，
jQuery事件
jQUery绑定事件的方式
克隆事件
自定义模态框
/*模态框内部本质就是给标签移除或添加hide属性*/
左侧菜单
返回顶部
自定义登录校验
/*获取用户的密码和用户名的时候，如果用户没有填写，应该给用户提示*/
username:
password:
input框实时监控
hover事件
然后呢
键盘按键按下事件
阻止后续事件执行
阻止事件冒泡
p
span
事件委托
页面加载
/*等待页面加载完毕再执行代码*/
"""js中等待加载完毕执行代码"""
window.onload=function(){
//js代码
}
"""
jQuery中等待页面加载完毕"""
#第一种
$(document).ready(function(){
//js代码
})
#第二种
$(function(){
//js代码
})
#第三种
直接写在body内部最下方
动画效果
alt="" width="500px" height="500px">
补充
#each()
#第一种方式
$('div').each(function(index){console.log(index)})
VM196:1 0
VM196:1 1
VM196:1 2
VM196:1 3
VM196:1 4
VM196:1 5
VM196:1 6
VM196:1 7
VM196:1 8
$('div').each(function(index,obj{console.log(index,obj)})
VM262:1 0
VM262:1 1
VM262:1 2
VM262:1 3
VM262:1 4
VM262:1 5
VM262:1 6
VM262:1 7
VM262:1 8
S.fn.init(9) [div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
#第二种方式
$.each([111,222,333,444],function(index,obj){console.log(index,obj)})
VM529:1 0 111
VM529:1 1 222
VM529:1 2 333
VM529:1 3 444
(4) [111, 222, 333, 444]
""" 有了each后就不用写for循环，更方便"""
#data()
""" 能够让标签帮我们存储数据，并且用户肉眼看不见 """
$('div').data('info','回来吧，我原谅你了!')
S.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').first().data('info')
'回来吧，我原谅你了!'
$('div').last().data('info')
'回来吧，我原谅你了!'
$('div').first().removeData('info')
S.fn.init [div#d1, prevObject: S.fn.init(10)]
$('div').first().data('info')
undefined
推荐链接
您阅读本篇文章共花了：
发表评论