前端学习笔记---jQuery框架
jQurey
jQurey内部封装了原生的js代码，能够让我们通过更简单方法来实现js操作，在前端
模块并不称为模块，而是被称为: 类库
jQuery宗旨
write less to more
jQuery使用
下载在本地
1.复制到一个js文件中
2.在html文件中导入该js文件
不在本地
直接引用jQuery提供的CDN服务，基于网络直接请求加载
CDN：内容分发网络
有免费的 bootcdn
导入:
缺点: 计算机必须有网络
jQuery 基本语法
jQuery(选择器).action()
jQuery简写 $
jQuery() == $()
jQuery选择器
拿到的是jQuery对象, 转化为标签对象:$('#id')[0],标签对象转换为jQuery对象:$(标签对象)
基本选择器
1.id选择器
$('#id')
2.class选择器
$('.class')
3.标签选择器
$('div')
组合选择器/分组与嵌套
1.通用
$('*')
2.并列
$('#d1,.c1,p')
3.后代
$('div p')
4.儿子
$('div>p')
5.毗邻
$('div+p')
6.弟弟
$('div~p')
基本筛选器
1.拿到ul里第一个li
$('ul li:first')
2.拿到最后一个
$('ul li:last')
3.索引
$('ul li:eq(2)')
4.拿到索引大于某值的
$('ul li:gt(2)')
5.拿到索引小于某值的
$('ul li:lt(2)')
6.排除某标签
$('ul li:not("#id")')
7.内部含有某条件的标签
$('ul li:has("p")')
属性选择器
$('[username]')
$('[username=''cc'']')
$('p[username=''cc'']')
表单筛选器
$(':text')
$(':checked')
筛选器方法
.next() 拿到标签的下一个
.nextAll() 拿到下面全部
.nextUntil('') 拿到下一个，直到括号内为止
.prev() 拿到标签上一个
.prevAll()
.prevUntil('')
.parent() 拿到父标签
.parents() 拿到全部父标签
.parentsUnitl('') 拿父标签到什么为止
.children() 后代
.siblings() 兄弟 //同级别上下所有
.find('') 在区域内筛选标签
jQuery标签操作
样式类操作
js版本:
classList.add()
classList.contains()
classList.remove()
classList.toggle()
jQuery版本:
addClass() # 添加类
removeClass() # 移除类
hasClass() # 存在某类
toggleClass() # 存在删除 不存在添加
jQuery 链式操作 jQuery对象返还的还是该对象
$('p').first().css('color','red').next().css('color','blue')
位置操作:
offset() # 拿到当前标签对窗口的位置
position() # 当前标签对父标签的位置
scrollTop() # 不加参数获取滚动条距离顶部的距离 加参数可以跳转
scrollLeft() #
尺寸:
height() # 文本高度
width() # 文本宽度
innerWidth() # 文本和padding
outHeight() # 文本+padding+border
文本 标签操作:
text() 不加参数是获取 加了是赋值
html()
如何获取用户输入数据：
.val() 不加获取 加了赋值
获取文件:
$('')[0].files[0] # 转为原生js对象
属性操作:
.attr(name,value)
.attr(name)
removeAttr(name)
ps:
$XXXEle 命名变量
选择按钮返回:
.prop()
创建标签:
$pEle = $(’
‘) 创建一个p标签
添加标签:
$('div').append($pEle) 添加到内部尾部
$('div').prepend($pEle) 添加到内部前面
$('div').after($pEle) 在div后面
$('div').before($pEle) 在div前面
.remove() 删除标签
.empty() 清空标签内部的全部内容
jQuery事件
绑定事件:
第一种:
$('#d1').click(
function(){
alert('别点啦')
}
)
第二种: 功能强大
$('#d2').on('click',function(){
alert('求你了,别点了')
}
)
克隆事件:
.clone 默认只克隆html和css
.clone(True) 克隆事件
自定义模态框：
本质就是移除或者添加hide类
let $coverEle = $('.cover')
let $modalEle = $('.modal')
$('#d1').on('click', function () {
$coverEle.removeClass('hide')
$modalEle.removeClass('hide')
})
$('#d2').on('click',function (){
$coverEle.addClass('hide')
$modalEle.addClass('hide')
})
菜单栏:
本质也是添加移除hide类
返回顶部:
$(window).scroll(function (){
if($(window).scrollTop()>300){
$('.back').removeClass('hide')
}else{
$('.back').addClass('hide')
}
}) //.back 得到a标签
校验(提示密码不能为空):
let username = $('#i1')
let password = $('#i2')
$('#d1').click(function () {
let name = username.val()
let pass = password.val()
if (!name) {
username.next().removeClass('hide')
}
if (!pass) {
password.next().removeClass('hide')
}
})
$('input').focus(function (){
$('input').next().addClass('hide')
})
input框实时检验
.input()事件
username.on('input',function (){
console.log(username.val())
})
当input框内val变化 就会触发该事件
hover事件(悬浮事件) 进入标签 移出标签 都会触发一次
内部放入一个函数 则两个事件是一个内容
可以放两个函数 进入和移出各触发一次
键盘按下事件:
$(window).on('keydown',function(event){
console.log(event.keyCode)
})
阻止后续事件执行
$('#d2').click(function (e) {
$('#d1').text('点我干嘛')
e.preventDefault()
// return false
// 阻止后续事件发生
// 方式1： return false 常用
// 方式2： 参数e e.preventDefault()
})
阻止事件冒泡
嵌套标签的事件同时发生(事件冒泡)解决方法
p
span
$('#d1').click(function (){
alert('div')
})
$('#d2').click(function (){
alert('p')
})
$('#d3').click(function (e){
alert('span')
//方式1:
// return false 常用
//方式2:
e.stopPropagation()
})
事件委托
为后续动态添加标签添加初始的事件
$('body').on('click','button',function (){
alert(123)
})
将body内全部的的click事件委托给button按钮
在指定范围内将事件委托给指定的标签
页面加载
页面上上到下加载 所有script一般放在下面
window.onload = function(){
//js代码
}
jQuery 中等待页面加载方式
方式1
$(document).ready(function(){
//js代码
})
方式2
$(function(){
//js代码
})
方式3
写在body最下方
动画效果
$('#id').hide(3000) // 3s内隐藏 不是消失
$('#id').show(3000) // 3s内展示
$('#id').slideUp(3000) // 3s内向上卷起来隐藏
$('#id').slideDown(3000) // 3s内向下卷起来隐藏
$('#id').fadeIn(3000) // 3s内显现
$('#id').fadeOut(3000) // 3s内透明
$('#id').fadeTo(3000,0.4) // 3s内变为0.4的 透明度
补充
each() 方法
用法1:
$('div').each(function (index) {
// index拿到索引
})
$('div').each(function (index, object) {
// index拿到索引
// object拿到对象 相当于for循环得到全部对象
})
用法2:
$.each([1,2,3],function(index,ob)){
//循环赋值 0 1 1 2 2 3
}
data() 方法
// 可以让标签来临时存储数据 并且用户眼睛看不见 自定义属性
$('div').data('info','i love you')
给全部div 加一个 （键为: info 值:i love you） 但是在标签内看不到该键值对
$('div').first().data('info') 取值
删除:
$('div').first().removeData('info')
浙公网安备 33010602011771号