jQuery基本知识

write less do more

核心：操作dom（通过面向对象）

1.jq是一种链式操作 。

$可以拿到dom元素

$(document).ready(function() {
   页面加载好执行 
})
//等同于

$(function() {

页面加载好执行

})

$(document).ready(function() { $('hidden').hide(300).show(1000) // 300ms后隐藏 1000ms后显示 })
//等同

$(document).ready(function() {
    $('div').toggle(1000).toggle(1000)
})

原理：
 function $(id) {
        return document.getElementById(id)
    }
    $(id)

一种炫酷效果 下拉

$(document).ready(function() {
   $('hidden').slideUp(300).delay(1000延迟).slideDown(1000) // 300ms后上拉 1000ms后下降
})

$(document).ready(function() {
   $('hidden').slideToggle(300) 300ms后上拉 1000ms后下降
})

一种效果 渐隐渐显

 $(document).ready(function() {
        $('div').fadeToggle(1000).delay(1000).fadeToggle(1000) 
    })

//等同
 $(document).ready(function() {
        $('div').fadeOut(1000).delay(1000).fadeIn(1000)
    })

增加css样式

$('div').css({
        color: 'red'
    })

绑定事件

 $('div').on('click', () => {
        console.log('click')
    })   //尽量不用箭头函数 箭头函数会影响this指向问题

改变元素内容（$(可以用css 选择器)）

 $('p').on('mouseenter', () => {
        $('.div2').html('hello word <b>boy</b>>')
    })

    $('p').on('mouseenter', () => {
        $('.div2 h1').html('hello word <b>boy</b>>')
    }) //$(can use element choies)

一、获取元素自定义的属性 data-name(其他属性也行)

下面是获得自定义属性 data-name

用于实现 2. DRY （dont repeat youself）

//原声
获取属性 .getAttribute("属性")
//jQuery
获取属性 .attr("属性")

1.2动态获取被点击的button值  //绑定事件回调函数不要用this

   $('.button').on('click', function (e) {
        log($(this))
        log(e.target)
    })
然后获取元素身上自定义属性

$('.button').on('click', function (e) {
       let nextE = $(this)).attr('data-name')
//$('nextE') 就选到对应的元素  就可以做你想做的事情 
})

重点

一个独立标签a内部四个标签     要控制另外一个标签b内部对应的四个

a标签内部设置自定义属性内容等于b标签id

点击a拿到自定义属性 操控id

 

---

 

上面没有真实操作dom，而是dom结构基础上增加 删除css样式

dom操作是 增删改查

_DOM操作

1.获取元素(节点关系)

$('p').first()  获取相同元素的第一个

$('p').next() 当前元素的下一个元素

$('p').prev() 当前元素上一个

$('p').last()  获取相同元素的最后一个

$('p').eq(0)  获取相同元素的指定下标那一个

$('p').parent()  获取元素的父节点

$('li').eq(1).siblings()  获取元素兄弟元素

$('p').find('name') find() 方法返回被选元素的后代元素

$("p").filter(".intro")   // 返回带有类名 "intro" 的所有 <p> 元素  filter() 方法返回符合一定条件的元素
//filter()查找的是某个元素的自身,而不是内部的元素

2.dom操作

//删除元素

$('name').remove()  删除这个节点

//冒泡
  $(function() {
        $('li').on('click', function(e) {
            log('click') // 因为外部有三层级的li标签 ，所以会显示三次点击
            $(this).siblings().remove()
        })
    })
</script

//阻止冒泡  完美解决
  $(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
            log('click') // 因为外部有三层级的li标签 ，所以会显示三次点击
            $(this).siblings().remove()
        })
    })

//删除class

 $(this).removeClass('u2-l1')  //本身是class 不用加 .

//案例

$(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
            log('click')
            $(this).removeClass('u2-l1')  //本身是class 不用加 .
        })
    })

原始dom使用删除class

let self = event.target
       
 self.classList.add('active')

remove(class1, class2, ...) //

toggle(class, true|false)

contains(class)

//增加clss

  $(this).addClass('u2-l1') 


//案例
$(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
            log('click')
            $(this).siblings().addClass('u2-l1')  //本身是class 不用加 .
        })
    })

//玄技（玄中元素被特殊标记）

    $(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
            log('click')
            $(this).removeClass('u2-l1')
            $(this).siblings().addClass('u2-l1')  //本身是class 不用加 .
        })
    })

判断功能

点击是否有某种样式

 $(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
          if ($(this).is('.u2-l1')) {
              alert('have')
          } else if ($(this).not('.u2-l1')) {
              alert('dont have')
          }
        })
    })

//相同效果
  $(function() {
        $('li').on('click', function(e) {
             e.stopPropagation()
          if ($(this).is('.u2-l1')) {
              alert('have')
          } else {  //此处不同
              alert('dont have')
          }
        })
    })

// 判断元素

$(function() {
    $('li').on('click', function(e) {
         e.stopPropagation()
     if ($(this).parent().is('.u2')) {
         $(this).hide()
     }

    })