• jQuery练习题

    js
    $(‘#i1’)
    r.fn.init [div#i1.container]

    $(‘h2’)
    r.fn.init [h2, prevObject: r.fn.init(1)]

    $(‘input’)
    r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]

    $(‘.c1’)
    r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]

    $(‘.btn-default’)
    r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]

    $(‘.c1,h2’)
    r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]

    $(‘.c1,#p3’)
    r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]

    $(‘.c1,.btn’)
    r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]

    $(‘form’).find(‘input’)
    r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]

    $(‘label input’)
    r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]

    $(‘label+input’)
    r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]

    $(‘#p2~li’)
    r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]

    $(‘#f1 input:first’)
    r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]

    $(‘#my-checkbox input:last’)
    r.fn.init [input, prevObject: r.fn.init(1)]

    $(‘#my-checkbox input[checked!=”checked”]’)
    r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]proto: Object(0)

    $(‘label:has(“input”)’)
    r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]

  • 操作标签

    操作类

    “””
    js版本 jQuery版本
    classList.add() addClass()
    classList.remove() removeClass()
    classList.contains() hasClass()
    classList.toggle() toggleClass()
    “””

    css操作

    111

    222

    “””一行代码将第一个p标签变成红色第二个p标签变成绿色”””
    $(‘p’).first().css(‘color’,’red’).next().css(‘color’,’green’)
    # jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
    # jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
    class MyClass(object):
    def func1(self):
    print(‘func1’)
    return self

    def func2(self):
        print('func2')
        return self
    

    obj = MyClass()
    obj.func1().func2()

    位置操作

    offset() # 相对于浏览器窗口
    position() # 相对于父标签

    scrollTop() # 需要了解
    $(window).scrollTop()
    0
    $(window).scrollTop() #页面滚动的位置
    969
    $(window).scrollTop() # 括号内不加参数就是获取
    1733
    $(window).scrollTop(0) # 加了参数就是设置
    n.fn.init [Window]
    $(window).scrollTop(500)
    n.fn.init [Window]
    scrollLeft()

    尺寸

    $(‘p’).height() # 文本
    20
    $(‘p’).width()
    1670
    $(‘p’).innerHeight() # 文本+padding
    26
    $(‘p’).innerWidth()
    1674
    $(‘p’).outerHeight() # 文本+padding+border
    26
    $(‘p’).outerWidth()
    1674

    文本操作

    “””
    操作标签内部文本
    js jQuery
    innerText text() 括号内不加参数就是获取加了就是设置
    innerHTML html()

    $(‘div’).text()

        有些话听听就过去了,不要在意,都是成年人!
    


    $(‘div’).html()

    有些话听听就过去了,不要在意,都是成年人!


    $(‘div’).text(‘你们都是我的大宝贝’)
    w.fn.init [div, prevObject: w.fn.init(1)]
    $(‘div’).html(‘你个臭妹妹’)
    w.fn.init [div, prevObject: w.fn.init(1)]
    $(‘div’).text(‘

    你们都是我的大宝贝

    ‘)
    w.fn.init [div, prevObject: w.fn.init(1)]
    $(‘div’).html(‘

    你个臭妹妹

    ‘)
    w.fn.init [div, prevObject: w.fn.init(1)]
    “””

    获取值操作

    “””
    js jQuery
    .value .val()
    “””
    $(‘#d1’).val()
    “sasdasdsadsadad”
    $(‘#d1’).val(‘520快乐’) # 括号内不加参数就是获取加了就是设置

    w.fn.init [input#d1]
    $(‘#d2’).val()
    “C:\fakepath\01_测试路由.png”
    $(‘#d2’)[0].files[0] # 牢记两个对象之间的转换
    File {name: “01_测试路由.png”, lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: “”, size: 28733, …}

    属性操作

    “””
    js中 jQuery
    setAttribute() attr(name,value)
    getAttribute() attr(name)
    removeAttribute() removeAttr(name)

    在用变量存储对象的时候
    js中推荐使用
    XXXEle 标签对象
    jQuery中推荐使用
    $XXXEle jQuery对象
    “””
    let $pEle = $(‘p’)
    undefined
    $pEle.attr(‘id’)
    “d1”
    $pEle.attr(‘class’)
    undefined
    $pEle.attr(‘class’,’c1′)
    w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
    $pEle.attr(‘id’,’id666′)
    w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
    $pEle.attr(‘password’,’jason123′)
    w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
    $pEle.removeAttr(‘password’)
    w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

    “””
    对于标签上有的能够看到的属性和自定义属性用attr
    对于返回布尔值比如checkbox radio option是否被选中用prop
    “””

    $(‘#d3’).attr(‘checked’)
    “checked”
    $(‘#d2’).attr(‘checked’)
    undefined
    $(‘#d2’).attr(‘checked’)
    undefined
    $(‘#d4’).attr(‘checked’)
    undefined
    $(‘#d3’).attr(‘checked’)
    “checked”
    $(‘#d3’).attr(‘checked’,’checked’) # 无效
    w.fn.init [input#d3]

    $(‘#d2’).prop(‘checked’)
    false
    $(‘#d2’).prop(‘checked’)
    true
    $(‘#d3’).prop(‘checked’,true)
    w.fn.init [input#d3]
    $(‘#d3’).prop(‘checked’,false)
    w.fn.init [input#d3]

    文档处理

    “””
    js jQuery
    createElement(‘p’) $(‘

    ‘)
    appendChild() append()

    “””
    let $pEle = $(‘

    ‘)
    $pEle.text(‘你好啊 草莓要不要来几个?’)
    $pEle.attr(‘id’,’d1′)
    $(‘#d1’).append($pEle) # 内部尾部追加
    $pEle.appendTo($(‘#d1’))

    $(‘#d1’).prepend($pEle) # 内部头部追加
    w.fn.init [div#d1]
    $pEle.prependTo($(‘#d1’))
    w.fn.init [p#d1, prevObject: w.fn.init(1)]

    $(‘#d2’).after($pEle) # 放在某个标签后面
    w.fn.init [p#d2]
    $pEle.insertAfter($(‘#d1’))

    $(‘#d1’).before($pEle)
    w.fn.init [div#d1]
    $pEle.insertBefore($(‘#d2’))

    $(‘#d1’).remove() # 将标签从DOM树中删除
    w.fn.init [div#d1]

    $(‘#d1’).empty() # 清空标签内部所有的内容
    w.fn.init [div#d1]

事件

// 第一种
$(‘#d1’).click(function () {
alert(‘别说话 吻我’)
});

// 第二种(功能更加强大 还支持事件委托)
$(‘#d2’).on(‘click’,function () {
alert(‘借我钱买草莓 后面还你’)
})

  • 克隆事件

  • 自定义模态框

    “””
    模态框内部本质就是给标签移除或者添加上hide属性
    “””

  • 左侧菜单

    .left { float: left; background-color: rgba(169, 169, 169, 1); width: 20%; height: 100%; position: fixed }
    .title { font-size: 36px; color: rgba(255, 255, 255, 1); text-align: center }
    .items { border: 1px solid rgba(0, 0, 0, 1) }
    .hide { display: none }

  • 返回顶部

  • 自定义登陆校验

    在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息

    username:

    password:

  • input实时监控

  • hover事件

  • 键盘按键按下事件

阻止后续事件执行

html

阻止事件冒泡

html

事件委托

html

页面加载

等待页面加载完毕再执行代码

window.onload = function(){
// js代码
}

“””jQuery中等待页面加载完毕”””

第一种

$(document).ready(function(){
// js代码
})

第二种

$(function(){
// js代码
})

第三种

“””直接写在body内部最下方”””

动画效果

//就是隐藏效果 也可以理解为 渐变消失

$(‘#d1’).hide(5000)
w.fn.init [div#d1]
$(‘#d1’).show(5000)
w.fn.init [div#d1]
$(‘#d1’).slideUp(5000)
w.fn.init [div#d1]
$(‘#d1’).slideDown(5000)
w.fn.init [div#d1]
$(‘#d1’).fadeOut(5000)
w.fn.init [div#d1]
$(‘#d1’).fadeIn(5000)
w.fn.init [div#d1]
$(‘#d1’).fadeTo(5000,0.4)
w.fn.init [div#d1]

补充

each()

第一种方式

$(‘div’)
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$(‘div’).each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$(‘div’).each(function(index,obj){console.log(index,obj)})
VM243:1 0

​1​


VM243:1 1

​2​


VM243:1 2

​3​


VM243:1 3

​4​


VM243:1 4

​5​


VM243:1 5

​6​


VM243:1 6

​7​


VM243:1 7

​8​


VM243:1 8

​9​


VM243:1 9

​10​

第二种方式

$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
“””
有了each之后 就无需自己写for循环了 用它更加的方便
“””

data()

“””
能够让标签帮我们存储数据 并且用户肉眼看不见
“””
$(‘div’).data(‘info’,’回来吧,我原谅你了!’)
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]

$(‘div’).first().data(‘info’)
“回来吧,我原谅你了!”
$(‘div’).last().data(‘info’)
“回来吧,我原谅你了!”

$(‘div’).first().data(‘xxx’)
undefined
$(‘div’).first().removeData(‘info’)
w.fn.init [div#d1, prevObject: w.fn.init(10)]

$(‘div’).first().data(‘info’)
undefined
$(‘div’).last().data(‘info’)
“回来吧,我原谅你了!”

版权声明:本文为molei123ok原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/molei123ok/p/16633804.html