jquery

jquery

DOM操作

jquery有丰富的选择器及相关筛选器（便利了dom操作）

选择器

//使用选择器来获取对应的内容 使用$(写选择器)
//$获取的是数组还是元素
console.log($("#box")); //id为box的元素
console.log($(".inner")); //class为inner的元素
console.log($('li')); //获取标签名为li的元素
console.log($('ul>li')); //使用组合选择器来获取li元素
console.log($('li[name=jack]')); //使用属性名+选择器名获取元素 获取name为jack的li元素

特殊选择器

//特殊选择器
console.log($('li:first')); //获取第一个li
console.log($('li:last')); //获取最后一个li
console.log($('li:eq(2)')); //获取第三个li 下标为2的li元素
console.log($('li:odd')); //获取奇数位（下标为奇数）
console.log($('li:even')); //获取偶数位 （下标为偶数）

筛选器（对于已经选中的元素进行筛选）

获取第一个内容

console.log($('li').first())

获取最后一个内容

console.log($('li').last());

获取上一个内容 里面可传入参数为选择器名称

console.log($('li:eq(2)').prev());
console.log($('li:eq(2)').prev('.active')); //如果上一个不能被这个选择器选择的话 返回内容为空

获取下一个内容 里面可传入参数为选择器名称

console.log($('li:eq(2)').next());
console.log($('li:eq(2)').next('.foot'));//如果下一个不能被这个选择器选择的话 返回内容为空

获取上面的所有内容

console.log($('li:eq(2)').prevAll()); //获取1 2俩个li
console.log($('li:eq(2)').prevAll('.active')); //获取第一个

获取下面的所有的内容

console.log($('li:eq(2)').nextAll());//获取 4 5 俩个li
console.log($('li:eq(2)').nextAll('.foot')); //获取最后一个

获取父元素 里面可传入参数为选择器名称

console.log($('li').parent());
console.log($('li').parent('ul'));

获取所有的父元素

console.log($('li').parents()); //找到html元素停止
console.log($('li').parents('ul'));

获取所有子元素 (第一级的子元素)

console.log($('ul').children());
console.log($('ul').children('.active'));

获取兄弟元素 (找到所有的兄弟) 里面可传入参数为选择器名称

console.log($('li:eq(2)').siblings());
console.log($('li:eq(2)').siblings('.foot'));

查找元素

console.log($('ul').find('li')); //在ul里面查找li
console.log($('ul').find('a')); //在ul查找a

通过索引筛选

console.log($('li').eq(1)); //相当于 $('li:eq(1)')

属性操作

prop传一个参数为获取 俩个参数为设置

//prop传一个参数为获取 俩个参数为设置
console.log($('div').prop('id')); //返回第一个id属性值
$('div').prop('class','inner') //设置class 属性 值为inner
$('div').prop('name','jack') //对于本身没有属性 不会显式添加 但是可以用
console.log($('div').prop('name'));
//关于prop attr的删除
$('div').removeProp('name') //隐式删除 删除prop自己添加的 以及自带
// $('div').removeProp('age') //隐式删除
console.log($('div').prop('name'));

attr传一个参数为获取 俩个参数为设置

//attr 读取显式添加的内容
console.log($('div').attr('name'));
console.log($('div').attr('class'));
//设置的时候也会显示添加
$('div').attr('age',18)
$('div').removeAttr('class') //显示的删除

class操作相关方法

//class属性操作的其他方法 
$('div').addClass('tom') //添加class属性值
$('div').removeClass('inner') //删除class属性
console.log($('div').hasClass('inner') );//判断存在对于的class名字
$('div').toggleClass() //切换class 对于已经有class的删除 对于没有的添加

显示内容操作

text 相当于innerText 获取显示的文本

console.log($('div').eq(0).text()); //不传参就是获取 传参就是设置
$('div').eq(0).text('我是改了的内容'); //不传参就是获取 传参就是设置

html 相当于innerHTML 获取显示的html内容

console.log($('div').eq(1).html()); //不传参就是获取 传参就是设置
$('div').eq(1).html('<b>hi</b>'); //不传参就是获取 传参就是设置

val 获取input框的value属性

console.log($('input').val());//不传参就是获取 传参就是设置
$('input').val('hello world')//不传参就是获取 传参就是设置

样式操作 使用css方法

css 传一个参数为获取 传俩个参数为设置 相当于getComputerStrle

console.log($('div').css('width'));
console.log($('div').css('backgroundColor','red')); //里面的样式名采用驼峰命名法

元素的操作

增 （创建元素 添加元素）

创建元素

// 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 在什么之后

let $b = $('<b></b>')
$('div').eq(0).after($b) //在div的后面进行添加
$b.insertAfter($('div').eq(0)) //将b标签插入到div的后面

before 在什么之前

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

empty 将里面的所有的元素全部删除

 $('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 outerHeight里面有个参数 是否包含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')