Day29-jquery


1、选择器


基本
    :first  :last  :even  :odd  :not  :eq()
内容
    contains  内容包含某某某的节点
    has 写一个选择器,
    $('li:has(a)')  li里面有a的li
属性
    input[name]       有属性name的input
    input[name=user]  name属性等于user的input
    input[name!=user] name属性不等于user的input
    // 有属性name的input
    // $('input[name]').css('backgroundColor', 'cyan')
    // 属性name值为user的input
    // $('input[name=user]').css('backgroundColor', 'cyan')
    // 属性name值不为user的input
    // $('input[name!=user]').css('backgroundColor', 'cyan')
    // 属性name值以user开头的input
    // $('input[name^=user]').css('backgroundColor', 'cyan')
    // 属性name值以user结束的input
    // $('input[name$=user]').css('backgroundColor', 'cyan')
子元素
    :first-child
    :last-child
    :nth-child
    // 找到li标签,li是第一个儿子节点的li标签
    // $('li:first-child').css('backgroundColor', 'cyan')
    // 找到li标签,li是最后一个儿子节点的li标签
    // $('li:last-child').css('backgroundColor', 'cyan')
    // 找li标签,找指定下标的li标签,这个下标是儿子节点里面的第几个
    // $('li:nth-child(1)').css('backgroundColor', 'cyan')


2、样式添加、属性获取


css({})
    // 可以连写-链式操作
    // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
    // 可以传递一个js对象,直接全部修改
    // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
attr()
    // 获取指定节点的class属性
    // console.log($('#lala').attr('class'))
    // 只能获取第一个符合要求的id属性
    // console.log($('.libai').attr('id'))
    // 通过eq选择第二个符合要求的id属性
    // console.log($('.libai:eq(1)').attr('id'))
    // 给指定节点添加属性
    // $('#lala').attr('class', 'bai').attr('name', '狗蛋')
removeAttr()
    // 将指定节点的属性删除
    // $('#lala').removeAttr('class')
prop()
    经常用来设置checked、selected等属性,设置的值就是true、false
    // 所有下标大于1的多选框选中
    // $('input:gt(1)').prop('checked', true)
    // 将第二个下拉框设置为默认选中
    // $('#se > option:eq(2)').prop('selected', true)
addClass     
    // $('#lala').addClass('hei')
removeClass  
    // 给指定的节点添加类名
    // $('#lala').addClass('hei')
    // 给指定的节点移除指定的节点class名  bai
    // $('#lala').removeClass('bai')
toggleClass 
    // 有bai这个class,那就是删除这个class,没有bai这个class,那就是添加class
    // $('#lala').toggleClass('bai')
html()
    // 读取或者设置节点内容,和innerHTML功能相同
    // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
text()
    读取或者设置节点内容,和innerText功能相同
val()
    // 读取input框里面的内容
    // console.log($('#ip').val())
    // 设置input框里面的内容
    // console.log($('#ip').val('今天中午吃什么呢?'))
width() 
height()  
    // 读取指定对象宽度  不带px
    // console.log($('#dudu').width())
    // 设置宽度  不带px
    // console.log($('#dudu').width(300))
    // 读取高度
    // console.log($('#dudu').height())
    // 设置高度
    // console.log($('#dudu').height(400))
offset() 
    // 获取div的top值和left值
    // console.log($('#dudu').offset().top, $('#dudu').offset().left)
$(function () {
    // 可以连写-链式操作
    // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
    // 可以传递一个js对象,直接全部修改
    // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

    // 获取指定节点的class属性
    // console.log($('#lala').attr('class'))
    // 只能获取第一个符合要求的id属性
    // console.log($('.libai').attr('id'))
    // 通过eq选择第二个符合要求的id属性
    // console.log($('.libai:eq(1)').attr('id'))
    // 给指定节点添加属性
    // $('#lala').attr('class', 'bai').attr('name', '狗蛋')

    // 将指定节点的属性删除
    // $('#lala').removeAttr('class')

    // 所有下标大于1的多选框选中
    // $('input:gt(1)').prop('checked', true)
    // 将第二个下拉框设置为默认选中
    // $('#se > option:eq(2)').prop('selected', true)

    // 给指定的节点添加类名
    // $('#lala').addClass('hei')
    // 给指定的节点移除指定的节点class名  bai
    // $('#lala').removeClass('bai')

    // 有bai这个class,那就是删除这个class,没有bai这个class,那就是添加class
    // $('#lala').toggleClass('bai')

    // 读取或者设置节点内容,和innerHTML功能相同
    // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

    // console.log($('#lala').text())
    // console.log($('#lala').html())

    // 读取input框里面的内容
    // console.log($('#ip').val())
    // 设置input框里面的内容
    // console.log($('#ip').val('今天中午吃什么呢?'))

    // 读取指定对象宽度  不带px
    // console.log($('#dudu').width())
    // 设置宽度  不带px
    // console.log($('#dudu').width(300))
    // 读取高度
    // console.log($('#dudu').height())
    // 设置高度
    // console.log($('#dudu').height(400))

    // 获取div的top值和left值
    // console.log($('#dudu').offset().top, $('#dudu').offset().left)
})


3、js对象和jquery对象转化


js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化
// var odiv = document.getElementById('dudu')
// js对象转化jquery对象
// console.log($(odiv).width())

// jquery对象转化为js对象
// console.log($('#dudu')[0].style.width)
// console.log($('.lala')[1].style.width)


4、文档处理


append
appendTo
prepend
prependTo
    // 向父节点添加子节点
    // $('#car').append('
  • 本田飞度
  • ') // 通过子节点调用,添加到父节点 // $('
  • 本田飞度
  • ').appendTo($('#car')) // 通过父节点调用,添加到父节点的最前面 // $('#car').prepend('
  • 本田飞度
  • ') // 通过子节点调用,添加到父节点的最前面 // $('
  • 通用别克
  • ').prependTo($('#car')) after before // 是兄弟节点关系,在mao节点后面添加一个指定节点 // $('#mao').after('
  • 铃木雨燕
  • ') // 是兄弟节点关系,在mao节点前面添加一个指定节点 // $('#mao').before('
  • 铃木雨燕
  • ') empty remove // 清空指定节点里面的内容,节点还在 // $('#mao').empty() // 原生js中:父节点.removeChild(子节点) // 通过子节点直接调用,删除当前节点 // $('#mao').remove()
    
    

    5、筛选和查找


    eq
        // $('li').eq(n).css('backgroundColor', 'red')
        // $('li:eq(0)').css('backgroundColor', 'red')
        // $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
    first
    last
        // 第一个li   和:first 一模一样
        // $('li').first().css('backgroundColor', 'red')
        // 最后一个li   和:last 一模一样
        // $('li').last().css('backgroundColor', 'red')
    hasClass
        // 判断有没有这个class,有就返回true,没有返回false
        // console.log($('li').eq(0).hasClass('wang'))
    filter
        // 找到所有li,过滤出来 .jing 的这些li
        // $('li').filter('.jing').css('backgroundColor', 'cyan')
    slice
        // 取出符合要求li里面的第0个和第1个   [start, end)
        // $('li').slice(0, 2).css('backgroundColor', 'cyan')
    
    children
        // 所有的儿子节点
        // $('#nan').children().css('backgroundColor', 'red')
        // 儿子节点中 有 .feng 的节点
        // $('#nan').children('.feng').css('backgroundColor', 'red')
    find
        // 去子孙节点中查找所有的 .feng 的节点
        // $('#nan').find('.feng').css('backgroundColor', 'cyan')
    next
    nextAll
        // 指定对象的下一个兄弟节点
        // $('#wu').next().css('backgroundColor', 'cyan')
        // 指定对象的后面所有的节点
        // $('#wu').nextAll().css('backgroundColor', 'cyan')
    prev       指定对象的上一个兄弟节点
    prevAll    指定对象的上面所有的兄弟节点
    parent     
    parents
        // 找到当前节点的父节点
        // $('.lin').parent().css('backgroundColor', 'cyan')
        // 查找得到所有的上层节点
        // $('#qing').parents().css('backgroundColor', 'cyan')
        // 查找得到指定的上层节点
        // $('#qing').parents('div').css('backgroundColor', 'cyan')
    siblings
        // 查找qing节点所有的兄弟节点
        // $('#qing').siblings().css('backgroundColor', 'orange')
        // 查找qing节点所有的兄弟节点,而且是.lin的兄弟节点
        // $('#qing').siblings('.lin').css('backgroundColor', 'orange')
    
    
    

    查找

    
    

    6、事件


    添加事件
        $('div).click(function () {})
    事件绑定
        on  off  one
        绑定事件
        $('div').on('click', test1)
        $('div').on('click', test2)
        取消事件绑定
        $('div').off('click', test2)
    
        // 事件只能触发一次
        $('div').one('click', test2)
    取消冒泡
        ev.stopPropagation()
    阻止默认行为
        ev.preventDefault()
    获取鼠标坐标
        ev.pageX, ev.pageY
    index
        // 得到指定jquery对象在前面数组中的下标
        // console.log($('div').index($('#heng')))
    

    7、动画


    show()
        // 参数1:动画的事件
        // 参数2:动画完毕之后执行的函数
        $('#dudu').show(5000, function () {
            alert('菊花残,满地伤')
        })
    hide()
        和show一样
        $('#dudu').hide(5000, fn)
    slidedown()
        原来不显示,动画下拉显示
        $('#dudu').slideDown(5000)
    slideup()
        原来显示,动画的上拉消失
    slideToggler()
        如果隐藏就下拉显示,如果显示就上拉消失
    fadeIn()
        // 慢慢的显示出来
        // $('#dudu').fadeIn(5000)
    fadeOut()
        // 慢慢的消失
        // $('#dudu').fadeOut(5000)
    fadeTo()
        // 5秒之内,透明度变为0.01
        // $('#dudu').fadeTo(5000, 0.01)
    fadeToggle()
        如果隐藏就淡入显示,如果显示就淡出消失
    自定义的动画效果
    animate()
        // 自定义动画
        // $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
    stop()
        停止动画
        $('#dudu').stop()
    
    $(function () {
        /*
        $('.didi').click(function () {
            alert('滴滴打车')
        })
        $('#dudu').click(function () {
            // console.log(this)
            // 获取到背景色
            var color = $(this).css('backgroundColor')
            console.log(color)
            if (color == 'rgb(255, 0, 0)') {
                $(this).css('backgroundColor', 'gold')
            } else {
                $(this).css('backgroundColor', 'red')
            } 
        }) */
        // 事件绑定
        // $('#dudu').on('click', function () {
        //     alert('给我一个血色的回忆')
        // })
        // function lala() {
        //     alert('夏天夏天悄悄过去')
        // }
        // $('#dudu').on('click', lala)
        // $('#dudu').off('click', lala)
    
        // 绑定的函数只能执行一次
        // $('#dudu').one('click', lala)
    })
    
    

    8、一些其他事件


    
    

    你可能感兴趣的:(Day29-jquery)