从小白到小黑 python学习之旅日常总结 57（jQuery）

jQuery小练习

//找到本页面中id是i1的标签
$('#i1')

//找到本页面中所有的h2标签
$('h2')

//找到本页面中所有的input标签
$('input')

//找到本页面所有样式类中有c1的标签
$('.c1')

//找到本页面所有样式类中有btn-default的标签
$('.btn-default')

//找到本页面所有样式类中有c1的标签和所有h2标签
$('.c1,h2')

//找到本页面所有样式类中有c1的标签和id是p3的标签
$('.c1,#p3')

//找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
$('.c1,.btn')

//找到本页面中form标签中的所有input标签
$('form').find('input')

//找到本页面中被包裹在label标签内的input标签
$('label input')

//找到本页面中紧挨在label标签后面的input标签
$('label+input')

//找到本页面中id为p2的标签后面所有和它同级的li标签
$('#p2~li')

//找到id值为f1的标签内部的第一个input标签
$('#f1 input:first')

//找到id值为my-checkbox的标签内部最后一个input标签
$('#my-checkbox input:last')

//找到id值为my-checkbox的标签内部没有被选中的那个input标签
$('#my-checkbox input[checked!="checked"]')

//找到所有含有input标签的label标签
$('label:has("input")')

View Code

class操作

js版本                                            jQuery版本

classList.add()                                  addClass()             // 添加类属性
classList.remove()                               removeClass()         // 移除某个类属性
classList.contains()                             hasClass()             // 验证是否包含某个类属性
classList.toggle()                               toggleClass()          // 有则删除无则添加

CSS操作

// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

/*
<p>111</p>
<p>222</p>
一行代码将第一个p标签变成红色第二个p标签变成绿色
*/

$('p').first().css('color','red').next().css('color','green')

class MyClass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

python实现链式操作

位置操作

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()  // 文本的高度

$('p').width()   // 文本的宽度

$('p').innerHeight()  // 文本高+padding高

$('p').innerWidth()   // 文本宽+padding宽

$('p').outerHeight()  // 文本高+padding高+border高

$('p').outerWidth()   // 文本宽+padding宽+border宽

文本操作

操作标签内部文本

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()
$('#d1').val('520快乐')  // 括号内不加参数就是获取加了就是设置
$('#d2')[0].files[0]  // 取文件的值    //小提示：如果说jQuery对象不会或不能操作 可以两个对象之间的转换

属性操作

.attr()

js                                                         jQuery
setAttribute()                                            attr(name,value)  // 增加、修改属性  
getAttribute()                                            attr(name)  // 查看属性
removeAttribute()                                         removeAttr(name)  //  移除属性

//补充
在用变量存储对象的时候 js中推荐使用    
    XXXEle            标签对象
jQuery中推荐使用
    $XXXEle            jQuery对象

let $pEle = $('p')
$pEle.attr('id')  //查看属性
$pEle.attr('class','c1')  //增加属性
$pEle.attr('id','id666')  //修改属性
$pEle.attr('password','jason123')  //增加自定义属性
$pEle.removeAttr('password')  //移除属性

.prop()

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

$('#d2').prop('checked') // 查看
//false
$('#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)  // 内部头部添加
$pEle.prependTo($('#d1'))  // 内部头部添加
         
$('#d2').after($pEle)  // 放在某个标签后面
$pEle.insertAfter($('#d1'))  // 放在某个标签后面
        
$('#d1').before($pEle)  // 放在某个标签前面
$pEle.insertBefore($('#d2'))  // 放在某个标签前面

$('#d1').remove()  // 移除当前标签包括本标签（将标签从DOM树中删除）
           
$('#d1').empty()  // 移除当前标签内部内容 不包括本标签

事件(jQuery)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <button id="d1">吻我</button>
    <button id="d2">亲我</button>
    
    <script>
        // 第一种
        $('#d1').click(function () {
                alert('别说话 吻我')
        });
        // 第二种(功能更加强大 还支持事件委托)
        $('#d2').on('click',function () {
                alert('借我钱买草莓 后面还你')
        })
    </script>
</body>

绑定事件的两种方式

克隆事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <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>
</body>

View Code

自定义模态框

<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="弹" id="i0">

  <div class="cover hide"></div>
  <div class="modal hide">
    <label for="i1">姓名</label>
    <input id="i1" type="text">
     <label for="i2">爱好</label>
    <input id="i2" type="text">
    <input type="button" id="i3" value="关闭">
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

  <script>

    $("#i0").click(function () {
      var coverEle = $(".cover")[0];  // 需要手动转
      var modalEle = $(".modal")[0];

      $(coverEle).removeClass("hide");
      $(modalEle).removeClass("hide");
    })

    // var tButton = $("#i0")[0];
    // tButton.onclick=function () {
    //   var coverEle = $(".cover")[0];
    //   var modalEle = $(".modal")[0];

    //   $(coverEle).removeClass("hide");
    //   $(modalEle).removeClass("hide");
    // };

    var cButton = $("#i3")[0];
    cButton.onclick=function () {
      var coverEle = $(".cover")[0];
      var modalEle = $(".modal")[0];

      $(coverEle).addClass("hide");
      $(modalEle).addClass("hide");
    }
  </script>
</body>

View Code

左侧菜单

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="menu">
            <div class="title">菜单一
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单二
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单三
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
        </div>
    </div>

    <script>
        $('.title').click(function () {
            // 先给所有的items加hide
            $('.items').addClass('hide')
            // 然后将被点击标签内部的hide移除
            $(this).children().removeClass('hide')
        })
    </script>
</body>

View Code

返回顶部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;

            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <a href="" id="d1"></a>
    <div style="height: 500px;background-color: red"></div>
    <div style="height: 500px;background-color: greenyellow"></div>
    <div style="height: 500px;background-color: blue"></div>
    <a href="#d1" class="hide">回到顶部</a>

    <script>
         //.scroll 屏幕滚动事件
        $(window).scroll(function () {
            if($(window).scrollTop() > 100){
                $('#d1').removeClass('hide')
            }else{
                $('#d1').addClass('hide')
            }
        })
    </script>
</body>

View Code

自定义登陆校验

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <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>
</body>

View Code

input实时监控

<head>
    <meta charset="UTF-8">
    <title>k</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text" id="d1">
    
    <script>
        $('#d1').on('input',function () {
            console.log(this.value)
        })
    </script>
</body>

View Code

hover事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
    <p id="d1">到家啊就是度假酒店</p>
    
    <script>
        // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
        //     alert(123)
        // })
    
        $('#d1').hover(
            function () {
                alert('我来了')  // 悬浮
        },
            function () {
                alert('我溜了')  // 移开
            }
        )
    </script>
</body>

View Code

键盘按键按下事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

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

View Code

posted @ 2020-05-20 18:02 It's_cool 阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

It's_cool

从小白到小黑 python学习之旅 日常总结 57（jQuery）

jQuery小练习

class操作

CSS操作

位置操作

尺寸

文本操作

获取值操作

属性操作

.attr()

.prop()

文档处理

事件(jQuery)

克隆事件

自定义模态框

左侧菜单

返回顶部

自定义登陆校验

input实时监控

hover事件

键盘按键按下事件

公告

从小白到小黑 python学习之旅日常总结 57（jQuery）