jQuery

·  阅读 248

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(){
    
})
复制代码
  1. 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() 是通过 调用的,说明 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 原型上的方法。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改