jQuery

jQuery选择器 用来获取元素或元素集合

基本选择器

• id选择器 #ID
• class选择器 .className
• 标签名选择器 p ul li div

let id = $('#id/.claddName/p....')

层级选择器 根据HTML层级关心获取元素

• 后代选择器 #ID div 获取后代所有的div
• 子级选择器 #ID >div 获取所有的子级
• 兄弟选择器 #ID + div 获取【紧邻】的下一个兄弟 div
• 获取所有的弟弟 #ID ~

过滤选择器

• :first 获取第一个
• :last获取最后一个
• :odd 获取索引为基数
• :even 获取索引为偶数的
• :not(xxx) 除了xxx的都获取
• :eq(index) 获取索引为 index 的
• :gt(index)获取比指定索引大的
• :lt(index)获取比指定索引小的

jQuery 对象

• 我们通过$() 方法 获取jQuery对象
• 都是jQuery的一个实例
• JQ对象是一个类数组对象
• 索引表示获取的元素对象 length 表长度
• 不管能不能获取到 都会返回一个对象 判断是否获取到元素 看length length 为0 表没有获取到

原生JS对象与JQ对象的转换

• 原生转JQ对象 把原生对象作为一个参数传递给(原生)
• JQ转原生 JQ对象里面的索引对应的都是原生对象 使用[索引] 或get(索引)

JQ常用的方法

• JQ方法只能JQ对象或JQ调用 原生的方法 只能用原生对象调用

let $tabBox = $('.tabBox');
console.log($tabBox);
// 1. height() 不传参时时获取元素对象的高度，传参是设置高度
console.log($tabBox.height());

// 2. width() 不传参获取元素对象的宽度、传参是设置宽度
console.log($tabBox.width());

// 3. offset() 获取当前元素距离 body 顶部和左侧的距离，返回一个对象
console.log($tabBox.offset());

// 4. scrollTop() / scrollLeft() 获取纵向/横向滚动条卷曲的距离
$(document.body).scrollTop(100); // 传参设置，不传参获取

// 5. innerHeight() / innerWidth() 获取当前元素的 clientHeight/clientWidth
console.log($tabBox.innerHeight());
console.log($tabBox.innerWidth());

// 6. outerWidth()/outerHeight() 获取/设置当前元素的包含边框的高度，等价于 offsetWidth/offsetHeight.
console.log($tabBox.outerHeight());
console.log($tabBox.outerWidth());
console.log($tabBox.outerWidth(true)); // 传递参数true表示获取时需要加上 margin 值

// 7. hasClass() 当前元素是否有某个类名
console.log($tabBox.hasClass('tabBox')); // true

// 8. addClass()  为当前 jQ 元素追加类名
$tabBox.addClass('classByJQ');

// 9. removeClass() 从当前 jQ 对象中移除类名
setTimeout(() => $tabBox.removeClass('classByJQ'), 2000);

// 10. append() 向元素末尾添加一个元素，容器.append(元素)
$('#contextFilter').append('<p>这是一个追加的元素</p>');

// 11. 元素.remove() 把元素移除
// $('#fields').remove();

// 12. next 获取下一个弟弟; nextAll 获取所有的弟弟
console.log($('.tabBox').next());
console.log($('.tabBox').nextAll());

// 13. prev 上一个哥哥; prevAll 所有的哥哥
console.log($('#contextFilter').prev());
console.log($('#contextFilter').prevAll());

// 14. children(selector) 把元素下满足 selector 的元素获取到
console.log($('ul.header').children('.active'));

// 15. siblings(selector) 获取当前元素的所有兄弟元素
console.log($('ul.header').siblings());

// 16. css('width') 获取宽度； css('width', '200px') 设置宽度；css({width: '200px', height: '200px', color: 'red'); // 批量设置

console.log($('ul').css('width'));
$('ul').css('width', '300px');
$('ul').css({height: '100px', color: 'red'});

// 17. text() 不传递是获取元素的 innerText，传参是设置元素的 innerText
console.log($('.header li.active').text())
$('.header li.active').text('哈哈哈哈哈')

// 17. html() 不传递是获取元素的 innerHTML，传参是设置元素的 innerHTML
console.log($('.header li.active').HTML())
$('.header li.active').HTML('<i>hajhahahh</i>')

JQ事件绑

事件绑定

1. 将原生的事件名 去掉on 如onclick转成click

$('li.active').click(function(){
    
})

2. on()方法 语法为JQ对象.on(事件名[不带 on],事件函数) 事件触发执行时 执行事件函数

事件触发

• tigger()方法 事件触发
• 用代码触发事件

移除事件 off(事件名)

##JQ动画效果

• show() / hide() 显示或者隐藏；参数是动画持续时间

$('#btn').click(function(){
    $('.animate').show(300);
})

• slideUp() / slideDown() 滑动收起，下滑展开
• fadeIn() / fadeOut() 淡入/淡出
• animate() $(selector).animate(styles,speed,easing,callback)

$('#btn').click(function () {
  $('.animate').animate({height: '300px'}, 300);
});

• stop() 方法，在动画开始前调用一次，可以清除上一次动画，不论到没到终点，都会停掉

$('#btn').click(function () {
  $('.animate').animate({height: '300px'}, 300);
  setTimeout(() => {
    $('.animate').stop(); // 在 100ms 时停止元素对象的动画，此时元素的高度不是 300px
  }, 100)
});

• finish() 结束本次动画，忽略动画规定的时间，一下子到达动画终点

$('#btn').click(function () {
 $('.animate').animate({height: '300px'}, 300);
 setTimeout(() => {
   $('.animate').finish(); // 在 100ms 时完成动画，此时元素高度是 300px
 }, 100)
});

JQ中的Ajax

$.ajax({
 url: 'data/product.json', // 接口地址
 method: 'GET', // http method
 dataType: 'json', // 数据类型为 JSON
 async: false, // 异步与否，默认异步
 cache: false, // 是否设置缓存 true 表示缓存，falas 表示不缓存；一般设为 false
 success: function (result) { // 如果请求成功执行的操作
   console.log(result);
 },
 error: function (err) { // 如果失败，需要进行的操作
   console.log(err);
 }
});

• 调用的，说明 ajax 方法是定义在 jQuery 自身上

JQ中的each方法 用来进行遍历

• 数组 $.each([1,2,3],(index,item)=>{ 回调函数 })
• 对象 $.each({name:"zhangsan",age:12,sex:boy},(key,value)=>{ 原理就是 for in 循环})
• 类数组集合

$('.tabBox li').each(function(index,item){
    $(this).click(function(){
        每一个遍历的 li 都绑定一个点击事件
    })
})

• 隐式调用

$('.tabBox li').click(function (index, item) {
  // 获取的 jq 集合中有三个，jq 会判断，如果是一个元素对象就处理这个元素对象，如果是一个集合例如我们此处相当于给三个 li，会默认把集合进行 each 遍历，把每一项都绑定了 click 事件，在这个回调函数中 this 仍然指向点击的元素（原生对象），如果想调用 jq 上的方法，需要用$(this)才行
  $(this).css({
    background: 'red'
  })
})

链式调用 $(this).addClass('active').siblings().removeClass('active');

原理是因为在其方法内部 return this，而 this 是 jq 的实例，所以可以继续调用 jq 原型上的方法。