jQuery

目录

1.1 使用步骤

1.2 选择器

1.3 事件绑定

1.4 链式编程

1.5 过滤方法

1.51 样式操纵

1.52 属性操纵

1.53 操纵value

1.54 获取位置

1.55 动画

1.56 自定义动画

1.57 插入节点

1.58 阻止冒泡

2.1 slick轮播、懒加载插件

3.1 jQuery插件机制

---

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文件之后

jQuery插件库-收集最全最新最好的jQuery插件本站致力于收集jQuery插件和提供各种jQuery特效的详细使用方法,在线预览，jQuery插件下载及教程http://www.jq22.com/

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()