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属性
返回顶部
自定义登录校验