jQuery快速入门
一. 什么是jQuery?
jQuery内部封装了原生jS, jQuery类似于python里面的模块, 在前端jQuery是一个提供了额外功能的框架又或者说类库.
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
二. jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
三. jQuery内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点)下载链接：jQuery官网
中文文档：jQuery AP中文文档
四. jQuery版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
补充: 维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
五. jQuery的2种导入方式
jQuery在使用的时候也需要导入, 但是它的文件非常的小(几十KB) 基本不影响网络速度. 压缩过的大概80KB左右, 未压缩的大概240KB左右
# 1. 将文件下载到本地直接导入(压缩: jquery-3.5.1.min . 未压缩: jquery-3.5.1)
好处: 没有网也可以正常使用
坏处: 需要重复书写，文件路径还要固定
pycharm自定义代码模块功能 自动添加固定的代码: settings->editor->file and code template
# 2. CDN服务
CDN的概念: 内容分发网络
参考网站: bootcdn. 前端相关的应用程序都有免费的cdn服务(提示: CDN有免费的也有收费的)
好处: 无需下载对应的文件，直接走网络请求使用
坏处: 必须要有网络
引入: bootcdn网址: 点我有你好看
六. jQuery基础语法
提示: jQuery在使用之前 一定要确保已经导入了
jQuery(selector).action()
秉持着jQuery的宗旨 jQuery简写成 $
简写: $(selector).action()
# jQuery与js代码对比
// 例子: 将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')七. jQuery对象与标签对象之间的转换
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
$('div')[0] jq对象转标签对象
$(divEle) 标签对象转jq对象
总结
# jq功能: jQuery内部封装了原生的js代码(还额外添加了很多的功能), 能够让你通过书写更少的代码 完成js操作. 类jQuery似于python里面的模块 在前端模块不叫模块 叫 “类库”
# jq宗旨: write less do more
# jq版本: 1xx, 2xx, 3xx 其中2xx,3xx不兼容IE678, 这里我们使用jQuery的时候就不需要考虑浏览器兼容问题. 因为IE678基本上被淘汰了.
# jq2种导入模式:
1. 将jq文件下载本地
2. 直接引用提供jq的CDN服务. 例如: 免费的bootcdn
补充: 借助pycharm提供的js文件模板实现每次创建文件默认帮我们导入jq.
# jq基本语法:
jQuery(选择器).action()
简写: $(选择器).action()
# jq对象与标签对象之间的转换:
$('div')[0] jq对象转标签对象
$(divEle) 标签对象转jq对象九. 查找标签
1. 基本选择器
Title
div
div>span
div>p
div>p>span
p
span
2. 组合选择器/分组与嵌套
Title
span
span
div
div>span
div>p
div>p>span
div>span
div
span
span
3. 基本筛选器
Title
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
div
div>p
div>span
div
div>a
4. 属性选择器
Title
5. 表单筛选器
Title
6. 筛选器方法
Title
span
span
div>span
div>p
div>p>span
div>span
span
span
span
7. 总结
# 基本选择器:
id选择器: $('#d1')
类选择器: $('.c1')
元素/标签选择器: $('div')
通配符选择器: $('*')
# 组合选择器, 分组与嵌套:
组合选择器:
后代选择器: $('div span')
子代选择器: $('div>span')
毗邻选择器: $('div+span')
弟弟选择器: $('div~span')
分组与嵌套:
分组: $('div,span')
嵌套: $('#d1,span')
# 基本筛选器:
第一个: $('ul li:first')
最后一个: $('ul li:last')
索引为偶数: $('ul li:even')
索引为奇数: $('ul li:odd')
等于索引值: $('ul li:eq(0)')
大于索引值: $('ul li:gt(2)')
小于索引值: $('ul li:lt(2)')
排除满足条件, 要剩下所有: $('ul li:not("#d1")')
选取包含一个或多个在内的: $('div:has("p")')
# 属性选择器:
$('[username]')
$('[username="egon"]')
$('input[username="egon"]')
# 表单选择器:
表单属性:
$('[type=text]')
替代: $(':text')
:text :password
:date
:file
:hidden
:radio :checkbox
:button :submit :reset
表单对象属性:
:enabled
:disabled
:checked 特殊对待: input:checked
:selected
# 筛选器方法:
同级别上一个: .prev()
同级别上所有: .prevAll()
同级别上所有直到什么停止(不包含指定的): .prevUntil(停止条件)
同级别下一个: .next()
同级别下所有: .nextAll()
同级别下所有直到什么停止(不包含指定的): .nextUntil(停止条件)
父标签: .parent() 最高可以获取抽象层docuemnt
父标签所有: .parents() 获取的所有父标签中最高只能获取到html
父标签所有直到什么停止(不包含指定的): .parentsUntil(停止条件)
儿子们: .children()
同级别上下所有: .siblings()
等价方法:
$('div span') <==> $('div').find('span')
$('ul li:first') <==> $('ul li').find()
$('ul li:last') <==> $('ul li').last()
$('ul li:not("#d1")') <==> $('ul li').not('#d1')十. jQuery练习题
jQuery选择器筛选器练习
#
姓名
爱好
操作
1
Jason
学习
2
Oscar
大饼
3
Egon
吹牛逼
jQuery学习指南
我来老男孩之后...
练习题：
- 找到本页面中id是
i1的标签
- 找到本页面中所有的
h2标签
- 找到本页面中所有的
input标签
- 找到本页面所有样式类中有
c1的标签
- 找到本页面所有样式类中有
btn-default的标签
- 找到本页面所有样式类中有
c1的标签和所有h2标签
- 找到本页面所有样式类中有
c1的标签和id是p3的标签
- 找到本页面所有样式类中有
c1的标签和所有样式类中有btn的标签
- 找到本页面中
form标签中的所有input标签
- 找到本页面中被包裹在
label标签内的input标签
- 找到本页面中紧挨在
label标签后面的input标签
- 找到本页面中id为
p2的标签后面所有和它同级的li标签
- 找到id值为
f1的标签内部的第一个input标签
- 找到id值为
my-checkbox的标签内部最后一个input标签
- 找到id值为
my-checkbox的标签内部没有被选中的那个input标签
- 找到所有含有
input标签的label标签
写很少的代码，做很多的事。
所以说
学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。
十一. 操作标签
1. CSS 类操作
Title
2. CSS 样式操作
Title
111
222
333
3. 位置操作
Title
ppp
4. 尺寸
Title
111
5. 文本操作
Title
有些话听听就过去了，不要在意，都是成年人!
6. 值操作
Title
111
222
333
7. 属性操作
Title
8. 文档操作
Title
div
div>p
div>span
div>p
9. 总结
# CSS 类操作:
js中:
.classList.add()
.classList.remove()
.classList.contains()
.classList.toggle()
jq中:
jq对象.addClass(className)
jq对象.removeClass(className)
jq对象.hasClass(className)
jq对象.toggleClass(className)
# CSS 样式操作:
js中:
.style.fontSize = '18px'
.style.color = 'red'
jq中: 只要返回的是jq对象就可以连续的操作对象中含有的所有方法
jq对象.css('fontSize', '18px').next().css('color', 'red')
# 位置操作:
jq对象.offset() 元素左上角到浏览器位置
jq对象.position() 元素中心到父元素位置
$(window).scrollTop() .scrollTop(0) 无值获取, 有值设置
$(window).scrollLeft() .scrollLeft(0)
# 尺寸:
content
jq对象.height()
jq对象.width()
content+padding
jq对象.innerHeight()
jq对象.innerWidth()
content+padding+border
jq对象.outerHeight()
jq对象.outerWidth()
# 文本操作:
js中:
.innerText .innerText='文本'
.innerHTML .innerHTML='文本+标签'
jq中:
jq对象.text() jq对象.text(文本) 不加获取, 加则设置
jq对象.html() jq对象.html(文本+标签)
# 值操作:
js中:
非文件 .value .value=''
文件: .files .files[0] 文件的.value获取本地上传路径
jq中:
非文件: jq对象.val() jq对象.val('') 不加获取, 加则设置
文件: $(':file')[0].files[0] jq中没有获取文件对象操作, 只能先拿到jq对象再转成js对象, 再进行获取文件对象操作
# 属性操作:
js中:
.getAttribute(attrName, attrValue)
.setAttribute(attrName)
.removeAttribute(attrName)
jq中:
获取属性: jq对象.attr(attrName)
设置属性: jq对象.attr(attrName, attrValue)
获取操作是否选中的布尔值: jq对象.prop(attrName) 专门针对用户是否选中, 返回布尔值的操作(selected, checked)
设置布尔值进而让操作选中: jq对象.prop(attrName, boolValue)
# 文档操作:
js中:
.appendChild()
.removeChild()
.replaceChild()
.insertBefore()
jq中:
内部尾部: jq对象.append($Ele) $Ele.appendTo(jq对象)
内部头部: jq对象.prepend($Ele) $Ele.prependTo(jq对象)
同级别后: jq对象.after($Ele) $Ele.inertAfter(jq对象)
同级别前: jq对象.before($Ele) $Ele.insetBefore(jq对象)
直接删除: jq对象.remove()
内部清空: jq对象.empty() 等同于 .html('')十二. 事件
1. jQuery绑定事件2种的方式
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})2. 克隆事件
Title
3. 自定义模态框
模态框内部本质就是给标签移除或者添加上hide属性
Title
4. 左侧菜单
Title
5. 返回顶部
Title
回到顶部
6. 自定义登陆校验
在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
Title
username:
password:
7. input实时监控
Title
8. hover事件
Title
父爱武林风福啊玩你额官方!
9. 键盘按键按下事件
Title
10. 阻止后续事件执行2种方式
Title
11. 阻止事件冒泡的2种方式
Title
box1
box2
12. 利用jq开始事件的第二种on的方式开启事件委托
Title
13. 总结
# 开启事件的2种方式:
$('#d1').click(function () {})
$('#d1').on('click', function() {}) 功能更加强大 还支持事件委托
# 克隆事件
this代指的是被操作的标签对象
.clone() 不指定. 只复制源对象html和css, 不复制事件
.clone(true) 指定. 既可以复制源对象对象html和css, 还可以复制源对象绑定的事件
# 模态框:
利用click点击事件来为标签对象增添或删除类属性.
# 左侧菜单栏:
利用click点击事件来为菜单栏中的子标签动态的增添或删除类属性.
# 返回顶部:
在window对象基础之上利用提供的scroll事件, 以及位置操作$(window).scrollTop()的取值, 在一定的滚动条时显示, 返回顶部的区域.
# 自定义登录效验:
利用提交触发点击click事件, 获取input框中的值是否为空, 如果为空则在后面将提示内容显示. 同时, 再利用focus获取其焦点事件, 当获取焦点时, 后面的提示内容要清空.
# input框时时监控:
利用input事件可以时时获取value值
# hover事件:
绑定一个函数: 鼠标悬浮+鼠标移开
绑定二个函数: 第一个函数表示鼠标悬浮, 第二个函数标识鼠标移开
# 键盘按下事件:
利用keydown事件, 在函数中定义event参数, 通过event.keyCode动态的获取用户键盘输入内容与ASCII对于的十进制数字
# 阻止后续事件执行2种方式:
第一种: return false
第二中: 设置参数event, 再return event.preventDefault()
# 阻止事件冒泡的2种方式:
第一种: return false
第二种: 设置参数event, 再return event.stopPropagation()
# 利用jq开始事件的第二种on的方式开启事件委托:
作用: 开启事件委托可以对动态添加的标签起作用
$('开启事件委托的区域').on('事件', '需要委托的事件', function() {})