11.5编程总结_11.5转换大写-CSDN博客

本文链接：https://blog.csdn.net/myvanguard/article/details/53048458

1.文本自动转换大小写

向文本框输入文字时，如何让小写字母自动变为大写呢？有一个简单有效的做法是用CSS。
<input name="t1" type="text" style="text-transform:uppercase;" />

text-transform 有四个可选：
none 默认值。无转换发生
capitalize 将每个单词的第一个字母转换成大写，其余无转换发生
uppercase 转换成大写
lowercase 转换成小写

2.django的外键查主键

listings = listings.filter(wish_product__name=title)
wishproduct是外键 name是外键的字段 是使用主表进行关联外键查询 值得注意

3.批量绑定弹窗

'<button id="table_search" onclick="delete_list(this);" class="btn btn-sm red btn-outline filter-submit margin-bottom">',
        '<a class="alert-danger" href="javascript:void(0)" title="shanchu" >',
        '<i class="fa fa-fw fa-remove"  id="delete"></i>',
        '</button>'


function delete_list(thisobj) {
{#    if(document.querySelector('#table_search')){#}
     tid = thisobj.id;
{#    alert(tid);#}
    swal({
        title: "确定要将该产品删除吗？",
        text: "产品删除后将无法进行销售!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
    if (isConfirm){
      swal("Deleted!", "产品成功删除!请刷新页面", "success");
    } else {
      swal("Cancelled", "产品继续为你保留！", "error");
    }
    });

4.生成漂亮的弹窗

<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>SweetAlert</title>


  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <!-- This is what you need -->
  <script src="dist/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="dist/sweetalert.css">
  <!--.......................-->
<!--
  <link rel="stylesheet" href="example/example.css">
-->
</head>

<body>
<ul class="examples">

  <li class="ajax">
    <div class="ui">
            <button>上架</button>
        </div>

    </li>


    <li class="warning confirm">
        <div class="ui">
            <button>下架</button>
        </div>

    </li>

    <li class="warning cancel">
        <div class="ui">
            <button>删除</button>
        </div>

    </li>
</ul>
<script>
document.querySelector('ul.examples li.ajax button').onclick = function() {
  swal({
    title: '确定要将该产品上架吗？',
    text: "上架后可以进行销售!",
    type: 'info',
    showCancelButton: true,
    closeOnConfirm: false,
    showLoaderOnConfirm: true,
  }, function(){
    setTimeout(function() {
      swal('产品上架成功!请刷新页面');
    }, 2000);
  });
};



document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
    swal({
        title: "确定要将该产品下架吗？",
        text: "下架后可重新上架!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    },
    function(){
        swal("Deleted!", "产品下架成功!请刷新页面", "success");
    });
};

document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
    swal({
        title: "确定要将该产品删除吗？",
        text: "产品删除后将无法进行销售!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
    if (isConfirm){
      swal("Deleted!", "产品成功删除!请刷新页面", "success");
    } else {
      swal("Cancelled", "产品继续为你保留！", "error");
    }
    });
};









</script>



</body>

</html>

js property is null 需要等待页面加载完成以后才能执行js
先使用if条件判断是否存在

获取文档中 id="demo" 的第一个元素：
document.querySelector("#demo");

获取文档中第一个 <p> 元素：
document.querySelector("p");


获取文档中 class="example" 的第一个元素:
document.querySelector(".example");


获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");


获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");



以下实例演示了多个选择器的使用方法。

假定你选择了两个选择器: <h2> 和 <h3> 元素。

以下代码将为文档的第一个 <h2> 元素添加背景颜色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

validate，editable 2个就是插件

{
field: 'price',
title: '价格',
sortable: true,
editable:{
type: 'text',
title: 'price',
validate: function (value) {
value = $.trim(value);
if (!value) {
   return 'This field is required';
}

var data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log("0");
console.log("1:",data);
console.log("2:",value);
console.log("3:",index);
console.log("4");
return '';
},
url: '/update_price/',
pk: '5',
ajaxOptions: {
dataType: 'json',
},

success: function(response, newValue) {
if(!response) {
   return "Unknown error!";
}
console.log(12);
if(response.success === false) {
   return response.msg;
}
}
},