jQuery
BOM与DOM
截止目前为止，我们虽然已经学会了js语法，但是你会发现跟浏览器和html文件还是一点
关系都没有
BOM
浏览器对象模型 Browser Object Model
js代码操作浏览器
DOM
文档对象模型 Document Object Model
js代码操作标签
BOM操作
window对象：指代的就是浏览器窗口
innerHeight 浏览器窗口的高度
innerWidth 浏览器窗口的宽度
open
close
window子对象
navigator.appName
navigator.appversion
navigator.userAgent 标识当前是否是一个浏览器
navigator.platform
防爬措施
1检验当前请求发起者是否是一个浏览器
history对象
history.back( )
history.forward( )
location对象
location.href 获取当前页面url
location.href = url 跳转到指定的url
location.reload 刷新页面
弹出框
警告框
alter
确认框
confirm
提示框
prompt
计时器相关
过一段时间之后触发
setTimeout( func,3000)
每隔一段时间触发一次
setInterval( func,3000)
DOM操作
查找标签
直接查找：
id查找
类查找
标签查找
当你用变量名指代标签对象的时候，一般情况下都推荐你写成xxxEle
间接查找
parentElement
children
firstElementchild
nextElementSibling
节点操作
createElement 创建标签
setAttribute 设置自定属性
getAttribute
removeAttribute
appendChild 标签尾部追加元素
removeChild
insertBefore
innertext和innerHTML
innertext 获取标签内部的所有的文本
innerHTML 内部文本和标签
获取值操作
value
获取文件数据
files[0]
class、css操作
classList 标签类属性
classList.add
classList.remove
classList.contains 验证
classList.toggle 有则删无则添加
DOM操作标签的样式统一先用style起头
事件
到达某个事先设定的条件，自动触发的动作
绑定事件的两种方式
<button onclick = 'func1( )'>点击</button>
<button id='d1'>点击</button>
function func1( ){
alter(123)
}
let btnEle = document.getElementById('d1')
btn.onclick = function( ){
alter(123)
}
script标签既可以放在head内，也可以放在body内
通常情况下都是放在body内最底部
原生js事件绑定
jQuery(封装了js的前端框架(模块))很容易与我们所学的DOM混淆
jQuery内部封装了原生的js代码(还额外添加了很多功能)
能够让你通过书写更少的代码，完成js操作
类似与Python里面的模块，在前端不叫模块，叫类库
兼容多个浏览器，在使用jQuery的时候不需要考虑兼容问题
jQuery的宗旨
让你用更少的代码完成更多的事情
针对导入问题
1文件下载到本地，如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
2直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN：内容分发网络
<script src:'https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js'>
jQuery基本语法
jQuery( 选择器 ).action( )
秉持着jQuery的宗旨 jQuery简写成 $
查找标签
基本选择器
id选择器
class选择器
标签选择器
一定要区分开
jQuery对象如何转成标签对象
组合选择器/分组与嵌套
后代
儿子
毗邻
弟弟
基本刷选器
first
last
eq 索引
even 偶数
odd 基数
gt 大于
lt 小于
not 移除满足条件
has 选取出包含
属性刷选器
[ 属性 ]
表单刷选器
[ :属性 ]
checked 将checked和selected都拿到
selected 只拿到selected
刷选器方法
next 下一个
nextall
nextUntil
prev 上一个
parent 第一级父标签
children 儿子
siblings 同级别所有
$( 'div p' )
$( 'div' ).find( 'p' ) 从某个区域内刷选出
first
last
not
操作标签
操作类
addClass
removeClass
hasClasstoggleClass
css
jQuery的链式操作，用jQuery可以做到一行代码操作很多标签
jQuery对象调用jQuery方法之后返回的还是jQuery对象也就可以继续调用
class Myclass( object ):
def func1( self ):
print( 'func1' )
return self
def func2( self ):
print( 'func1' )
return self
obj = Myclass( )
obj.func1( ).func2( )
位置操作
offset
position
scorellTop
scorellLeft
尺寸
height 文本
width
innerHeight 文本+padding
innerWidth
outerHeight 文本+padding+border
outWidth
文本操作
js jQuery
innertext text
innerhtml html
获取值操作
js jQuery
value val
files[ 索引值 ]
属性操作
js jQuery
setAttribute attr
getAttribute attr
removeAttribute removeAttr
在变量存储对象的时候，js中推荐使用
xxxEle 标签对象
jQuery中推荐使用
$xxxEle jQuery对象
对于标签上有的能够看到属性和定义的属性用attr
对于返回布尔值比如CheckBox、radio、option是否被选中用prop
文档处理
js jQuery
createElement( 'p' ) $( '<p>' )
appendchild append 内部尾部追加
prepend 内部头部
after
before
remove
empty
事件
$( '#d1' ).click( function( ){
alter( 123 )
})
第二种功能更加强大，还支持事件委托
$( '#d1' ).on( 'click',function( ) {
alter( 123 )
})
克隆事件
自定义模态框本质就是给标签移除或者添加上hide属性
返回顶部
自定义登录校验
