Jquery概述

元素的操作

增（创建元素 添加元素）

创建元素

// 创建元素
// document.createElement('div')
// $ Jquery
let $div = $('<div></div>') //创建元素节点

添加的方法 （父子节点）

//添加操作 添加操作不能添加重复的元素
$('body').append($div) //在body里面内容后面添加div
$div.appendTo($('body')) //把div这个元素添加到body里面（后面位置）
//往前添加
let $a = $('<a></a>')
$a.attr('href','http://www.baidu.com') //设置href属性
$('body').prepend($a) //body的最前面部分添加a标签
$a.prependTo($('body')) //将a标签在body的里面（前面位置）

插入的方法（兄弟节点）

//after 在什么之后 before 在什么之前 (兄弟节点的添加)
let $b = $('<b></b>')
$('div').eq(0).after($b) //在div的后面进行添加
$b.insertAfter($('div').eq(0)) //将b标签插入到div的后面
let $p = $('<p></p>')
$('div').eq(0).before($p) //在div的前面进行添加
$p.insertBefore($("div").eq(0)) //将p标签插入到div的前面

改 （修改）

//替换 replace
let $h = $('<h1>hello</h1>')
$('div').replaceWith($h) //将div替换成h标签 （div会被删除）
$('<a></a>').replaceAll($('div')) //将a标签替换进div标签（div会被删除）

删 （删除）

//删除 remove
// $('ul').remove() //会将对应的所有内容包括自身全部删除（事件也会被删除）
//将li里面匹配对于的.save内容进行删除
$('li[class=save]').remove()
// $('li').remove('.save')
//删除方法 将里面的所有的元素全部删除
// $('li').empty() //将里面的节点全部清空

克隆

// 克隆 clone 是否克隆所有的属性  是否克隆事件 默认为false （不克隆） 
$('body').append($('li').eq(0).clone())

关于元素的大小获取

//width方法 height方法 不包含padding以及margin
console.log($('div').width());//500
console.log($('div').height());
//innerWidth  innerHeight 包含padding 不包含margin 也不包含border
console.log($('div').innerWidth());//700
console.log($('div').innerHeight());
//outerWidth outerHeight 包含padding以及border 不包含margin值
console.log($('div').outerWidth());//720
console.log($('div').outerHeight());
//outerWidth这个里面有个参数 是否包含margin 如果为true 他就包含margin值 默认为false
console.log($('div').outerWidth(true));//820
console.log($('div').outerHeight(true));

元素的位置获取

//offset 基于body偏移的位置 返回的是一个对象
console.log($('div').offset());//返回的是对象 这个对象里面left top属性
console.log($('div').offset().left); //返回的是离body左边的距离
console.log($('div').offset().top); //返回的是离body左边的距离
//position 定位  返回基于父元素定位的位置 返回的是对象
console.log($('div').position()); //返回定位
console.log($('div').position().left); //返回定位
console.log($('div').position().top); //返回定位
//滚动栏位置获取
$(window).on('scroll',function(){
    console.log($(window).scrollLeft());//滚动栏离左边的距离
    console.log($(window).scrollTop());//滚动栏离上面的距离
})

事件（观察者）

on 绑定事件

// 事件类型 事件处理
$('button').on('click',function(e){
    console.log(this);//执行button
    console.log(e); //相当于window的event对象
    console.log('点击了');
})
// 我们可以在事件发布的时候携带数据
$('button').on('click',{name:'jack'},function(e){
    //获取这个携带的对象
    console.log(e.data);//调用的时候
})
// 事件委托机制
$('div').on('click',function(e){
    console.log(this);//指向div
    console.log(e.target);
})
//也可以传递参数 利用事件委托机制 只有在button情况下才进行触发(button是一个选择器 在选择器匹配的时候才进行触发)
$('div').on('click','button',{name:'tom'},function(e){
    console.log(this); //this指向button
    console.log(e.data);
    console.log(e.target);
})

off 取消事件

//取消事件
$('div').off()

one 只触发一次

//执行一次的事件 事件名 事件的处理函数
$('button').one('click',function(){
    console.log('点击了')
})

trigger 自动执行事件

//自动执行事件
$('button').trigger('click')