码迷,mamicode.com
首页 > 其他好文 > 详细

前端---进阶7

时间:2020-06-06 13:01:14      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:put   完成   doc   --   toc   username   sda   ems   off   

  • jQuery练习题

    $(‘#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操作
    <p>111</p>
    <p>222</p>
    """一行代码将第一个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()
    "
        <p>
            有些话听听就过去了,不要在意,都是成年人!
        </p>
    "
    $(‘div‘).text(‘你们都是我的大宝贝‘)
    w.fn.init?[div, prevObject: w.fn.init(1)]
    $(‘div‘).html(‘你个臭妹妹‘)
    w.fn.init?[div, prevObject: w.fn.init(1)]
    $(‘div‘).text(‘<h1>你们都是我的大宝贝</h1>‘)
    w.fn.init?[div, prevObject: w.fn.init(1)]
    $(‘div‘).html(‘<h1>你个臭妹妹</h1>‘)
    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‘)										$(‘<p>‘)
    appendChild()													append()
    
    """
    let $pEle = $(‘<p>‘)
    $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(‘借我钱买草莓 后面还你‘)
    })
  • 克隆事件

    <button id="d1">屠龙宝刀,点击就送</button>
    
    <script>
        $(‘#d1‘).on(‘click‘,function () {
            // console.log(this)  // this指代是当前被操作的标签对象
            // $(this).clone().insertAfter($(‘body‘))  // clone默认情况下只克隆html和css 不克隆事件
            $(this).clone(true).insertAfter($(‘body‘))  // 括号内加true即可克隆事件
    
        })
    </script>
    
  • 自定义模态框

    """
    模态框内部本质就是给标签移除或者添加上hide属性
    """
    
  • 左侧菜单

    <script>
        $(‘.title‘).click(function () {
            // 先给所有的items加hide
            $(‘.items‘).addClass(‘hide‘)
            // 然后将被点击标签内部的hide移除
            $(this).children().removeClass(‘hide‘)
        })
    </script>
    <!--尝试用一行代码搞定上面的操作-->
    
  • 返回顶部

    <script>
        $(window).scroll(function () {
            if($(window).scrollTop() > 300){
                $(‘#d1‘).removeClass(‘hide‘)
            }else{
                $(‘#d1‘).addClass(‘hide‘)
            }
        })
    </script>
    
  • 自定义登陆校验

    # 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
    <p>username:
        <input type="text" id="username">
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" id="password">
        <span style="color: red"></span>
    </p>
    <button id="d1">提交</button>
    
    <script>
        let $userName = $(‘#username‘)
        let $passWord = $(‘#password‘)
        $(‘#d1‘).click(function () {
            // 获取用户输入的用户名和密码 做校验
            let userName = $userName.val()
            let passWord = $passWord.val()
            if (!userName){
                $userName.next().text("用户名不能为空")
            }
            if (!passWord){
                $passWord.next().text(‘密码不能为空‘)
            }
        })
        $(‘input‘).focus(function () {
            $(this).next().text(‘‘)
        })
    </script>
    
  • input实时监控

    <input type="text" id="d1">
    
    <script>
        $(‘#d1‘).on(‘input‘,function () {
            console.log(this.value)  
        })
    </script>
    
  • hover事件

    <script>
        // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
        //     alert(123)
        // })
    
        $(‘#d1‘).hover(
            function () {
                alert(‘我来了‘)  // 悬浮
        },
            function () {
                alert(‘我溜了‘)  // 移开
            }
        )
    </script>
    
  • 键盘按键按下事件

    <script>
        $(window).keydown(function (event) {
            console.log(event.keyCode)
            if (event.keyCode === 16){
                alert(‘你按了shift键‘)
            }
        })
    </script>
    

今日作业

"""
今日作业
必做
1.利用jQuery链式操作一句话完成菜单显隐展示
2.整理日考题目
3.整理今日内容完成博客书写
选做
1.预习前端框架Bootstrap
"""

前端---进阶7

标签:put   完成   doc   --   toc   username   sda   ems   off   

原文地址:https://www.cnblogs.com/linqiaobao/p/13053956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!