write less do more

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

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‘)
    })

改变元素内容（可以用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

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

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

$(‘.button‘).on(‘click‘, function (e) {
        log($(this))
        log(e.target)
    })

重点

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

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

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