jquery
da28 jquery
概述
jquery是一个轻量级的js库，它对原生的js进行了封装，将对应的dom操作及对应的动画等做了一系列的方法进行了封装，里面所有的内容都是方法。他的核心是链式调用及对应的jq对象的扩展
优点
-
丰富的选择器及筛选器（帮助获取dom）
-
良好的动画兼容（采用也是css3的动画）
-
优秀的链式调用写法（里面的每个方法返回的都是对应的jq对象）
入门
引入
基础使用
// jq对象
// $ 获取jq对象
// 使用jquery 获取jq对象
console.log(jQuery());
console.log($());
// 获取dom元素
// 原生
let btn=document.querySelector('#app')
console.log(btn);
// jq
console.log($('#app'));
// jq是不能使用dom里面的函数 dom也不可以调用jq对象的内容
// jq 对象转为对应的dom对象 通过下标来获取里面的dom元素
let toDom = $('#app')[0]
console.log(toDom);
// dom对象转为jq对象
// 将dom对象传入jq方法就会产生jq对象
let toJq = $(btn)
console.log(toJq);
选择器
-
支持原生css中的所有选择器
-
内置对应的选择器
-
first 第一个
-
last 最后一个
-
eq 下标位
-
odd 基数下标位
-
even 偶数下标位
// 使用jq来获取对应的元素
$('#app')// 获取id为app的jq对象
$('.cont[name=hello]')// 获取class为cont里面name属性为hello的jq对象
$('li')// 获取所有的li
$('li:first-child()')// 获取第一个li
$('li:last-child()')// 最后一个
$('li:first')// 内置first（last）选择器
$('li:eq(0)')// 下标为0的li
$('li:eq(1),li:eq(3)')// 支持多个选择器
$('li:odd')// 基数下标位
$('li:even')// 偶数下标位
筛选器
针对于对应的jq对象来进行筛选对应的内容
筛选相关方法
位置筛选
first 第一个
last 最后一个
eq 下标位
关系筛选
-
父子关系
parent 父元素
children 子元素
find 查找 根据选择器查找
-
兄弟关系
prev 上一个
next 下一个
siblings 所有同辈
prevAll 上面所有
nextAll 下面所有
// 获取对应的li
console.log( $('li'));
// 获取第一个li
console.log( $('li').first());
// 获取最后一个li
console.log( $('li').last());
// 获取下标为2的
console.log($('li').eq(2));
// 通过父子关系来获取
// 通过第一个li获取里面的b标签
console.log($('li').eq(0).children($('b')));// 可传可不传 不传获取全部 传参就会进行选择器匹配
// console.log($('li').eq(0).children());
console.log($('li').parent());// 获取所有的父元素
console.log($('li').parent($('ul')));
// 兄弟关系
// 上一个
console.log($('li').eq(2).prev());
// 下一个
console.log($('li').eq(2).next());
// 上面的所有
console.log($('li:eq(2)').prevAll());
// 下面的所有
console.log($('li:eq(2)').nextAll());
// 拿到所有的同辈元素
console.log($('li:eq(2)').siblings());
属性操作
-
prop 获取对应本身就有的属性 （a标签本身就有href属性 img本身就有src 如果不是本身有的将不会显示）（底层实现是对象的键赋值）
-
attr 获取和设置所有的属性(底层实现为setAttribute getAttribute)
// 进行属性操作 prop attr 传两个参就是设置 传一个参就是获取(参数满了就是设置 参数没满就是获取)
let inp=$('input')
console.log(inp.prop('value'));
console.log(inp.prop('hello'));// 获取不到 undefined
// prop 进行对应的设置
// 针对已经存在的
inp.prop('class','inp')
inp.prop('hello','hi')// 本身不存在的无法设置到对应的元素上 但是他会设置到本身的对象上
// attr 内部采用了setAttribute getAttribute
console.log(inp.attr('hello'));
inp.attr('hello','3 43hi')
删除的操作
removeProp(删除对应的prop的属性)
removeAttr（removeAttribute）
// removeProp
// 删除prop添加的属性 本身存在的属性 或 prop添加的属性
// delete element[key]
// inp.removeProp('value') // 无法删除
inp.removeProp('hello')
// removeAttr 内部采用的是removeAttribute
inp.removeAttr('hello')
class属性的操作
addClass 添加
removeClass 删除
toggleClass 切换
let box = $('.box')
box.addClass('cont')// 添加
box.removeClass('cont')// 删除
box.toggleClass('cont')// 切换 没有就加 有就删除
box.toggleClass('cont')// 切换 没有就加 有就删除
// 原生实现
// function addClass(element,className){
// // 判断element的className是否为空
// if(!element.className){
// // 直接设置
// element.className = className
// }else{
// // 读取对应的className
// classNames=element.className.split(' ')
// classNames.push(className)
// element.className = classNames.join(' ')
// }
// }
// addClass($('.box')[0],'hello')
样式的操作
使用style方法 传一个参就是获取 传两个参就是设置
// 使用css来获取字体颜色 里面使用了getComputedStyle 方法 element.currentStyle
console.log($('.box').css('color'));
// 设置样式 传入两个参数 内部采用的是style赋值
$('.box').css('backgroundColor','red')
显示内容的操作
html （底层实现使用了innerHTML）
text（底层实现使用了innerText）
val 获取设置value
不传参就是获取 传一个参就是设置
节点操作
增删改查
-
append
-
before
-
after
-
insertBefore
-
insertAfter
-
replaceAll
-
replaceWith
-
remove
-
clone
-
empty
// 获取div 给div添加一个a标签
// 创建元素 创建jq对象
let element=$('<a href="http://www.baidu.com">去百度</a>')
// 添加给对应的div 底层实现是appengChild
$('div').append(element)
// 添加到元素之前 只能添加一遍 parint.insertBefore // 父元素body
$('div').before(element)// 将element放到div之前
// $('div').insertBefore()// 将div放到element之前
// 添加到元素之后
$('div').after(element)
// 克隆
let copy=element.clone(true,true)
// 替换 前面替换后面
copy.replaceAll( $('div'))
// replaceWith 用传入的内容来替换调用的内容 p标签被识别了
copy.replaceWith('<p>替换的内容</p>')
// 删除 可传入选择器 删除element中的某一个内容
element.remove()
// 清空 保留原本的标签 里面的内容被删除
element.empty()
尺寸
// width height 获取不包含边框和填充 不含边框
let box=$('div')
console.log(box.width(),box.height());
// innerWidth innerHeiht 包含填充 不含边框
console.log(box.innerWidth(),box.innerHeight());
// outerWidth
console.log(box.outerWidth(),box.outerHeight());// 可以传参数 表示是否包含magin
位置
position
offset
console.log(inner.position());
// 相对于页面的位置
console.log(inner.offset());
jq的动画
animate 方法
fadeIn 方法
// 通过回调函数来解决 淡入淡出改变的是透明度
$('div').fadeIn(2000,function(){
console.log(this);// 元素对象 div
$(this).fadeOut(2000)
})
$('div').fadeTo(2000,1)// 到达某个透明度
// 传入目标对象(只支持传入number类型的值 如果传入的是颜色需要使用Color这个类) 时间 回调
$('div').animate({
left:20,
top:50,
backgroundColor:'red'
},2000,()=>{
console.log(111);
})
// 切换
$('div').toggle(2000)
$('div').slideDown(3000,()=>{
$('div').slideUp(3000,()=>{
$('div').slideToggle(3000,()=>{
})
})
for (let i = 0; i < $('button').length; i++) {
$('button')[i].onclick = function () {
switch (i) {
case 0:
$.get('https://jsonplaceholder.typicode.com/todos', (data, status, xhr) => {
console.log(data, status, xhr);
})
break;
case 1:
$.get('https://jsonplaceholder.typicode.com/post', (data, status, xhr) => {
console.log(data, status, xhr);
})
break;
case 2:
$.ajax('https://jsonplaceholder.typicode.com/post',
{
data:{},
method:'get',
success(data){console.log(data);}
})
break;
}
}
}
浙公网安备 33010602011771号