zoukankan      html  css  js  c++  java
  • python之JQuery(操作样式,求值及属性)

    1.操作样式之直接操作css
        .css("color")
        .css("color","red")  //设置值
        用法:
        修改单个属性:$(".c1").css()
        修改多个属性:$({"color":"red","font-size":"18px"})
        
        位置相关:
            offset()    //获取匹配元素在当前的窗口的相对偏移或设置元素位置(传参数才是设置)
            position()     //获取匹配元素相对父元素的偏移
            scrollTop()    //获取匹配元素相对滚动条顶部的偏移
            scrollLeft()//获取匹配元素相对滚动条左侧的偏移
            相关示例:(根据滚动条判断设置返回顶部功能的位置)
                        <!DOCTYPE html>
                        <html lang="zh-CN">
                        <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>
                            .c1 {
                               100px;
                              height: 200px;
                              background-color: red;
                            }
    
                            .c2 {
                              height: 50px;
                               50px;
    
                              position: fixed;
                              bottom: 15px;
                              right: 15px;
                              background-color: #2b669a;
                            }
                            .hide {
                              display: none;
                            }
                            .c3 {
                              height: 100px;
                            }
                          </style>
                        </head>
                        <body>
                        <button id="b1" class="btn btn-default">点我</button>
                        <div class="c1"></div>
                        <div class="c3">1</div>
                        <div class="c3">2</div>
                        <div class="c3">3</div>
                        <div class="c3">4</div>
                        <div class="c3">5</div>
                        <div class="c3">6</div>
                        <div class="c3">7</div>
                        <div class="c3">8</div>
                        <div class="c3">9</div>
                        <div class="c3">10</div>
                        <div class="c3">11</div>
                        <div class="c3">12</div>
                        <div class="c3">13</div>
                        <div class="c3">14</div>
                        <div class="c3">15</div>
                        <div class="c3">16</div>
                        <div class="c3">17</div>
                        <div class="c3">18</div>
                        <div class="c3">19</div>
                        <div class="c3">20</div>
                        <div class="c3">21</div>
                        <div class="c3">22</div>
                        <div class="c3">23</div>
                        <div class="c3">24</div>
                        <div class="c3">25</div>
                        <div class="c3">26</div>
                        <div class="c3">27</div>
                        <div class="c3">28</div>
                        <div class="c3">29</div>
                        <div class="c3">30</div>
                        <div class="c3">31</div>
                        <div class="c3">32</div>
                        <div class="c3">33</div>
                        <div class="c3">34</div>
                        <div class="c3">35</div>
                        <div class="c3">36</div>
                        <div class="c3">37</div>
                        <div class="c3">38</div>
                        <div class="c3">39</div>
                        <div class="c3">40</div>
                        <div class="c3">41</div>
                        <div class="c3">42</div>
                        <div class="c3">43</div>
                        <div class="c3">44</div>
                        <div class="c3">45</div>
                        <div class="c3">46</div>
                        <div class="c3">47</div>
                        <div class="c3">48</div>
                        <div class="c3">49</div>
                        <div class="c3">50</div>
                        <div class="c3">51</div>
                        <div class="c3">52</div>
                        <div class="c3">53</div>
                        <div class="c3">54</div>
                        <div class="c3">55</div>
                        <div class="c3">56</div>
                        <div class="c3">57</div>
                        <div class="c3">58</div>
                        <div class="c3">59</div>
                        <div class="c3">60</div>
                        <div class="c3">61</div>
                        <div class="c3">62</div>
                        <div class="c3">63</div>
                        <div class="c3">64</div>
                        <div class="c3">65</div>
                        <div class="c3">66</div>
                        <div class="c3">67</div>
                        <div class="c3">68</div>
                        <div class="c3">69</div>
                        <div class="c3">70</div>
                        <div class="c3">71</div>
                        <div class="c3">72</div>
                        <div class="c3">73</div>
                        <div class="c3">74</div>
                        <div class="c3">75</div>
                        <div class="c3">76</div>
                        <div class="c3">77</div>
                        <div class="c3">78</div>
                        <div class="c3">79</div>
                        <div class="c3">80</div>
                        <div class="c3">81</div>
                        <div class="c3">82</div>
                        <div class="c3">83</div>
                        <div class="c3">84</div>
                        <div class="c3">85</div>
                        <div class="c3">86</div>
                        <div class="c3">87</div>
                        <div class="c3">88</div>
                        <div class="c3">89</div>
                        <div class="c3">90</div>
                        <div class="c3">91</div>
                        <div class="c3">92</div>
                        <div class="c3">93</div>
                        <div class="c3">94</div>
                        <div class="c3">95</div>
                        <div class="c3">96</div>
                        <div class="c3">97</div>
                        <div class="c3">98</div>
                        <div class="c3">99</div>
                        <div class="c3">100</div>
    
                        <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
                        <script src="jquery-3.3.1.min.js"></script>
                        <script>
                          $("#b1").on("click", function () {
                            $(".c1").offset({left: 200, top:200});
                          });
    
    
                          $(window).scroll(function () {
                            if ($(window).scrollTop() > 100) {
                              $("#b2").removeClass("hide");
                            }else {
                              $("#b2").addClass("hide");
                            }
                          });
    
    
                          $("#b2").on("click", function () {
                            $(window).scrollTop(0);
                          })
                        </script>
                        </body>
                        </html>
                        
        尺寸:
            height()
            width()
            innerHeight()
            innerWidth()
            outerHeight()
            outerWidth()
            
            
        文本操作:
            text("<a href='https://www.baidu.com'>baidu</a>")             //不识别html标签,将原样输出
            html("<a href='https://www.baidu.com'>baidu</a>")              //识别html标签,自动将a转为html标签
            
            
        值:
            val()                    //取得元素的当前值(传参数表示设置值)
            val([val1,val2])        //设置checkbox,select的值
        
        属性操作:
            1.用于ID等或自定义属性(获取文本类)
                attr(attrName)            //返回第一个匹配元素的属性值
                attr(attrName,attrValue)//为所有匹配元素设置一个属性值
                attr({k1:v1,k2:v2})        //为所有元素设置多个属性值
                removeAttr()            //从每一个匹配的元素中删除一个属性
            2.用于checkbox和radio(获取布尔值)
                prop()                     //获取属性(判断是否被选中)
                removeProp()            //移除属性
        
        绑定事件的方式:
            $(".item-title").click(function () {
                $(this).next().toggleClass("hide").parents().siblings().find("item-body").addClass("hide");
            })
            
            
        
    #简单的自定义登录校验:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录验证</title>
    <style>
        .error{
            color:red;
        }
    </style>
    </head>
    <body>
    <form action="">
        <div>
            <label for = "input-name">用户名</label>
            <input type="text" id="input-name" name="name">
            <span class="error"></span>
        </div>
        <div>
            <label for = "input-passwd">密码</label>
            <input type="password" id="input-passwd" name="passwd">
            <span class="error"></span>
        </div>
        <div>
            <input type="button" id="btn" value="提交">
        </div>
    </form>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("#btn").click(function () {
            //获取输入框的值
            var username=$("#input-name").val();
            var password=$("#input-passwd").val();
            if(username.length === 0){
                $("#input-name").siblings(".error").text("用户名不能为空")
            }
            if(password.length === 0){
                $("#input-passwd").siblings(".error").text("密码不能为空")
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    leetcode 13. Roman to Integer
    python 判断是否为有效域名
    leetcode 169. Majority Element
    leetcode 733. Flood Fill
    最大信息系数——检测变量之间非线性相关性
    leetcode 453. Minimum Moves to Equal Array Elements
    leetcode 492. Construct the Rectangle
    leetcode 598. Range Addition II
    leetcode 349. Intersection of Two Arrays
    leetcode 171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/god-for-speed/p/11569938.html
Copyright © 2011-2022 走看看