Jquery（1）

Jquery（1）

jquery概述

jquery是一个前端的js库，他封装了一些原生操作的方法以及解决一些原生的兼容。jquery是一个轻量级的js库，他具备强大的方法封装（dom操作 动画）以及链式调用等等优势。

jquery库入门

jquery官网地址

jquery的中文网

1.导入（head）

<!-- 导入jquery文件 -->
<script src="./js/jquer.min.js"></script>

2.使用（直接使用）

// jQuery //他是核心的对象 里面的方法都是通过他来调用的
console.log(jQuery('body')); //通过jquery对象来调用获取方法
// 使用$来替代jQuery
console.log($('body'));

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对于元素本身没有的属性 不会显式添加）

//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的删除 对于没有的添加

显示内容操作

//相当于innerText 获取显示的文本
console.log($('div').eq(0).text()); //不传参就是获取 传参就是设置
$('div').eq(0).text('我是改了的内容'); //不传参就是获取 传参就是设置
//相当于innerHTML 获取显示的html内容
console.log($('div').eq(1).html()); //不传参就是获取 传参就是设置
$('div').eq(1).html('<b>hi</b>'); //不传参就是获取 传参就是设置
//获取input框的value属性
console.log($('input').val());//不传参就是获取 传参就是设置
$('input').val('hello world')//不传参就是获取 传参就是设置

样式操作 使用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 在什么之后 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')