一、什么是jQuery
一个js库,兼容性好,扩张性强的链式调用语言。链式调用的基础是基于所有的方法返回的都是一个jquery对象
二、入门
核心对象 jquery 也可以省略为 $ (别名)
引入js文件,或者是引用地址(我自己下载js文件)
三、基本语法
选择器
eq获取对应下标元素
odd获取奇数下标元素
even获取偶数下标元素
last获取最后一个元素
first获取第一个元素
$('li:eq(0)')
$('li:odd')
$('li:even')
$('li:last')
$('li:first')
筛选器
名称与选择器相同,带两个参数
//筛选器用于筛选获取的元素的 所有的筛选器都可以传参 除了eq其他传入的参数都是选择器
//它会找到对应的匹配的选择器的元素
console.log('筛选器');
console.log($('li').eq(0)); //获取下标为0的
console.log($('li').first()); //获取第一个
console.log($('li').last()); //获取最后一个
console.log($('li').eq(0).next()); //获取下标为0的下一个
console.log($('li').eq(1).prev()); //获取下标为1的上一个
console.log($('li').eq(2).nextAll()); //获取下标为2的下面的所有同辈元素
console.log($('li').eq(2).prevAll()); //获取下标为2的上面的所有同辈元素
console.log($('li:eq(0)').children()); //获取下标为0的li的所有的子元素
console.log($('li:eq(0)').parent()); //获取下标为0的li的父元素
console.log($('li:eq(0)').siblings()); //获取所有的兄弟元素
console.log($('li').find('a')); //在li里面查找对应的a标签
属性操作
prop只能修改自带的属性 删除removeProp
attr只能修改自带的属性 删除removeAttr
<div id="box" name="box"> </div>
<script>
$('div').prop('id','box')
console.log($('div').prop('id','box'));
$('div').attr('name','box')
console.log($('div').attr('name','box'));
</script>
class属性的增删改查
addClass添加class removeClass删除 hasClass查询(返回Boolean)
$('div').addClass('world')
$('div').removeClass('hello')
$('div').hasClass('hello')
属性显示的方法
$('div').html('<b>hello</b>')
$('div').text('<b>hello</b>')
$('input').val('你好')
console.log($('input').val);
样式操作
一个参数是获取,两个是设置
$('div').css('backgroundColor','red')
JQuery的dom操作
//创建元素
let $div = $('<div>我是添加的div</div>')
console.log($div);
//添加元素
// 父子添加
// $('#box').add($div)
//原生实现 appendChild 追加到最后
$('#box').append($div) //添加子元素 在box里面添加div
$div.appendTo( $('#box')) //添加子元素 将div添加到box里面
$('#box').prepend($('<a>我是a</a>')) //插入之前 在box里面的开始位置插入a
$('<a>我是a</a>').prependTo($('#box')) //将a标签插入到box里面的开始位置
// 兄弟添加
$('<b>我是你后面的兄弟<b>').insertAfter($('#box')) //将b标签插入到box的后面
$('<b>我是你前面的兄弟<b>') .insertBefore($('#box')) //将b标签插入到box的前面
$('#box').after($('<h3>我是after添加元素</h3>')) //在box后面添加h3
$('#box').before($('<h3>我是before添加元素</h3>')) //在box前面添加h3
//删除
// remove 删除所有包括自己 传入对应的选择器 表示删除这个匹配的
// $('#box').remove()
// 清空
// $('#box').empty()
//克隆 clone 是否克隆所有的事件 是否深度
console.log($('#box').clone(true,true)[0]);
//替换 replace
// $('<b>我是b标签</b>').replaceAll($('#box')) //将前面的内容替换后面的内容
$('#box').replaceWith($('<b>我是b标签</b>')) //用后面的内容替换前面的内容
元素的位置及尺寸获取
尺寸
console.log($('div').innerHeight()); //包含padding 不包含border
console.log($('div').innerWidth());
console.log($('div').outerHeight()); //包含padding 包含border
console.log($('div').outerWidth());
console.log($('div').width()); //直接读width和height 样式读取
console.log($('div').height());
位置
//获取位置 offset position 返回是一个对象 left 和 top
console.log($('span').offset()); //基于页面的
console.log($('span').position()); //基于父元素 offsetParent
事件处理
实例: 隔行变色
<style>
li{
list-style: none;
width: 30px;
height: 30px;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="./jquery.min.js"></script>
<script>
let oddBox = $('li:odd');
console.log(oddBox);
for (var v of oddBox) {
v.style.backgroundColor = 'red'
console.log(v);
}
let evenBox = $('li:even');
for (var v of evenBox) {
v.style.backgroundColor ='blue'
}
</script>
toggle切换
//传时间 回调函数 同时变化宽高和透明度
$('div').hide(2000,()=>{
$('div').show(2000)
})
$('div').toggle(2000) //如果显示就隐藏 hide 隐藏就显示show