概述
Jquery是一个轻量级的js库,它将js的功能进行了封装(所有的都是函数),它在封装的基础上做了进一步的兼容(兼容性好)
特点
链式调用(里面所有的方法返回的都是一个jQuery对象)
丰富的选择器和筛选器
良好的动画兼容(动画库很强大,借助了animated.js)(主要css3的动画)
简单入门
核心对象jquery(是一个函数)简写为js
dom对象转为jQuery对象将dom对象传入jjQuery的函数
将jquery对象转为dom对象 使用下标获取对应的dom元素
//核心对象(都是函数)
console.log(jQuery);
console.log($);
console.log(jQuery('div'));
console.log(jQuery('div')[0]);
//将dom对象转化为Jq对象
let dom = document.querySelector('div')
console.log($(dom));
//所有的选择器都可以使用
//新增相关选择器(odd even first last eq)
//新增的选择器
// console.log($('li:eq(1)'));//eq 传入的是下标,获取的第二个
// console.log($("li:odd"));//根据下标 获取下标为偶数的
// console.log($('li:even'));//根据下标 获取下标为偶数的
// console.log($('li:first'));//获取第一个
// console.log('li:last');//获取最后一个
//隔行变色功能实现
//隔行变色
let odd = $('li:odd')
let even = $('li:even')
for (var i = 0; i < odd.length; i++) {
odd[i].style.backgroundColor = 'red'
}
for (var i = 0; i < even.length; i++) {
even[i].style.backgroundColor = 'yellow'
}
