jQuery的事件、选择器，常用元素

一、jq的选择器

获取dom方法

$('选择器') jq的选择器

eq(index):找到索引对应的元素

gt(index):找到大于索引对应的元素

lt(index):找到小于索引对应的元素

find('选择器')：找到对应的后代元素

filter('选择器'):把符合条件的元素过滤出来

二、jq常用元素

next()获取下一个兄弟元素

nextAll获取所有的兄弟元素

prev()获取上一个哥哥元素

prevAll()获取所有的哥哥元素

parent()获取父级元素

parents()获取所有的祖先元素

siblings() //获取所有的兄弟姐妹元素

三、jq的css

console.log($('#box').css('width')) // 获取css样式

$('#box').css('width',100) // 设置css样式

$('#box').css({width:100,height:100})//设置多个css样式
//------------------------------------

$('#box').addClass('active')//添加class名

$('#box').removeClass('active')//移除class名 +console.log($ ('#box').hasClass('active')) // 检测当前class名在元素中有没有，如果有，就是true，如果没有，那就返回false

$('#box').toggleClass('s') // 他会自动检测当前元素有没有这个class名，如果有那就给他删掉，如果没有，就给他新增

js盒子模型

$('#box').offset() // 获取距离body的左上偏移量

$('#box').position() // 获取相对于父级参照物的偏移量

$('#box').innerHeight() // 等于clientHeight

$('#box').outerHeight(true) // 如果是参数第false，等于offsetHeight，如果参数是true，那就加上margin

$('#box').scrollTop() // 等于scrollTop

四、jq的事件

$('#box').on('eventType',fn) // 增加事件

$('#box').on('click',fn)

$('#box').click(fn)

$('#box').off('click',fn) // 移除事件

杂记foreach循环

let ary = ['a','b','c','d'];

ary.forEach(function(item,index){console.log(item,index)})//item值，index索引

杂记each

$('ul li').each(function(index,item){
和原生的forEach不一样的地方是数组的每一项和索引是倒过来的
index是数组的每一项的索引
item是数组的每一项
console.log(index,item)})

let obj = {
name:1,
age:2
}

    $.each(obj,function(index,item){
        // 如果遍历对象的话，那index是每一项的属性名，item数每一项的属性值
        console.log(index,item)
    })

$('ul li').click(function(){ // 给每一个li增加点击事件 console.log($ (this).index())
// index获取当前jq实例在兄弟姐妹里的索引
})

jQuery的事件、选择器，常用元素

一 、jq的选择器

二、jq常用元素

三、jq的css

四、jq的事件

一、jq的选择器