目录
1.1 使用步骤
下载
jQueryhttps://jquery.com/与bootstrap导入相似,不同这是js导入
<script src="jquey路径"></script>
1.2 选择器
$('选择器')
$('p').css('backgroundColor','pink')
//4.dom对象转jQ对象
let li=document.querySelector('li')
let $li2=$(li)
$li2.css('backgroundColor','skyblue')
1.3 事件绑定
$('li').click(function(){
console.log('click')
console.log(this)
let $this=$(this)
$this.css('backgroundColor','pink')
})
1.4 链式编程
通过点的方式把多个操作(方法)连续的写下去,形成和链子一样的结构
取值时不能链式编程
$('.text')
.focus(function(){
console.log('获得焦点')
})
.blur(function(){
console.log('失去焦点')
})
.change(function(){
console.log('内容改变')
})
1.5 过滤方法
//第一个li
$('li')
.first()
.css('backgroundColor','yellowgreen')
//最后一个li
$('li')
.last()
.css('backgroundColor','pink')
//索引为1即第2个li
$('li')
.eq(1)
.css('backgroundColor','skyblue')
1.51 样式操纵
设置的是行内样式,单位省了默认px
$('.box').css({
backgroundColor:'skyblue',
border:'10px solid yellowgreen',
width:100,
height:100
})
1.52 属性操纵
//1.赋值
$('a').attr('href','http://www.itheima.com/')
$('img').attr('src','http://www.itheima.com/images/logo.png')
$('img').attr('info','黑马程序员')
//2.取值
let href=$('a').attr('href')
console.log('href:',href)
let info=$('img').attr('info')
console.log('info:',info)
//3.删除
$('a').removeAttr('href')
$('img').removeAttr('src')
1.53 操纵value
//赋值
$('.text').val('黑马程序员!')
//取值
$('.text').blur(function(){
let value=$(this).val()
console.log('value:',value)
})
查找方法:$('元素').children() 该元素的子元素
$('元素').parent() 该元素的父元素
$('元素').siblings('元素1') 元素的兄弟元素1
.addClass('') .removeClass('')
.hasClass('') .toggleClass('')
on方法绑定事件
$('元素').on('blur',function(){
console.log("失去焦点")
})
.off移除全部绑定的事件 .one只触发一次
.trigger() //可触发所有事件
$(window).click(function(){}) //window不加引号
.serialize() //获取表单的name属性
1.54 获取位置
$('选择器').offset() 参照html标签
$('选择器').position() 参照离他最近有定位的祖先元素
$('选择器').scrollTop()
$('选择器').scrollLeft()
.innerWidth内容宽度+padding .innerHeight
outerWidth内容宽度+padding+border outerHeight
1.55 动画
$('选择器').hide(事件) 隐藏
$('选择器').show(事件) 显示
.fadeIn(时间) 淡入 .fadeOut(时间) 淡出
.fadeTaggle(时间) 淡入淡出
.slideDown(时间) 展开
.slideUp(时间) 收起
.stop() 停止当前动画 先添加先播放
1.56 自定义动画
$('选择器').animate({width:100px})
非数值类不支持自定义动画
1.57 插入节点
$('父元素选择器').append(参数) //父元素结尾
$('父元素选择器').prepend(参数) //父元素开头
$('兄弟元素选择器').before(参数) //兄弟元素前面
$('兄弟元素选择器').after(参数) //兄弟元素后面
1.58 阻止冒泡
$('.box').click(function(e){
e.stopPropagation()
})
阻止默认行为
e.preventDefault()
2.1 slick轮播、懒加载插件
下载插件->导入jQuery,再导入插件,导入css->根据文档使用
slick文件导入在jQuery文件之后
3.1 jQuery插件机制
jQuery.fn.extend({
sayHello(){
console.log('吃了没!')
}
})
let $box=$('.box')
$box.sayHello
//修改背景色插件
jQuery.fn.extend({
setBgColor(color){
this.css('backgroundColor','yellowgreen')
}
})
$('.box').setBgColor('orange')
//$.each()
//$.map()