IT博客-青蛙學堂-随笔分类-JavaScript

js 页面加载时间

青蛙學堂 — Mon, 18 Jul 2022 08:33:00 GMT

在页面Head部分加入初始时间
代码如下:

var t1 = new Date().getTime();

在Body中加入
代码如下:

window.onload = function()
{
document.getElementById("TimeShow").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒";
}

青蛙學堂 2022-07-18 16:33 发表评论

js访问.net 接口frombody form

青蛙學堂 — Mon, 09 May 2022 07:29:00 GMT

一、使用jQuery Ajax访问
（一）、表单传参( [FromForm])
数据类型：Object

ContenyType类型：application/x-www-form-urlencoded

1
var model = { name: "刘大大", age: 23, sex: true };
前台请求

var model = { name: "刘大大", age: 23, sex: true };
$.ajax({
    url: "http://localhost:9001/API/Default/FormCall",
    type: "POST",
    async: true,
    dataType: "json",
    data: model,
    contentType: "application/x-www-form-urlencoded",
    success: function (data) {
        console.log("data:");
        console.log(data);
    }
});
(二）、JSON字符串[FromBdy]
数据类型：Json

ContenyType类型：application/json

1
       var json = '{"name":"刘大大","age":23,"sex":true}';
也可以使用JSON.stringify(Object)将Object转换为JSON字符串

前端请求

var model = { name: "刘大大", age: 23, sex: true };
$.ajax({
    url: "http://localhost:9001/API/Default/BodyCall",
    type: "POST",
    async: true,
    dataType: "json",
    data: JSON.stringify(model),
    contentType: "application/json",
    success: function (data) {
        console.log("data:");
        console.log(data);
    }
});
（三）、文件上传
建立FormData对象

数据类型：FromData

ContenyType类型false, //必须false才会避开jQuery对 formdata 的默认处理 processData类型: false, //必须false才会自动加上正确的Content-Type

html

1

JS获取文件对象

var file = document.getElementById("file");
var files = file.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
     formData.append(files[i].name, files[i]);
}　　　　
formData.append("name", "刘大大");//可追加参数
AJAX请求

$.ajax({
           url: "http://localhost:9001/API/Default/Upload",
           type: "POST",
           async: true,
           dataType: "json",
           data: formData,
           contentType: false,
           processData: false,
           success: function (data) {
               console.log(data);
           }
       });
完整HTML源码

Welcome

Learn about building Web apps with ASP.NET Core.

　　
二、使用C#后台访问
（一）、Get访问

var url = "http://localhost:57954/API/Default/Test";
using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
{
var taskResponse = client.GetAsync(url);
taskResponse.Wait();
if (taskResponse.IsCompletedSuccessfully)
{
var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
taskStream.Wait();
using (var reader = new StreamReader(taskStream.Result))
{
jsonString = reader.ReadToEnd();
}
}
}
（二）、Post访问

var url = "http://localhost:57954/API/Default/BodyCall";
var data = new {name="刘大大",age=23,sex=true };
using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
{
    var jsonToSend = JsonConvert.SerializeObject(data, Formatting.None, new IsoDateTimeConverter());
    var body = new StringContent(jsonToSend, Encoding.UTF8, "application/json");
    var taskResponse = client.PostAsync(url, body);
    taskResponse.Wait();
    if (taskResponse.IsCompletedSuccessfully)
    {
        var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
        taskStream.Wait();
        using (var reader = new StreamReader(taskStream.Result))
        {
            jsonString = reader.ReadToEnd();
        }
    }
}
　　

（三）、上传文件


///

/// 上传文件
///

    ///
    [RequestSizeLimit(1_073_741_824)]
    public IActionResult Upload()
    {
        var url = "http://localhost:9001/Api/Default/Upload";

        var data = new MultipartFormDataContent();
        if (Request.HasFormContentType)
        {
            var request = Request.Form.Files;
            foreach (var item in request)
            {
                data.Add(new StreamContent(item.OpenReadStream()), item.Name, item.FileName);
            }

            foreach (var item in Request.Form)
            {
                data.Add(new StringContent(item.Value), item.Key);
            }
        }
        string jsonString = string.Empty;
        using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
        {
            var taskResponse = client.PostAsync(url, data);
            taskResponse.Wait();
            if (taskResponse.IsCompletedSuccessfully)
            {
                var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
                taskStream.Wait();
                using (var reader = new StreamReader(taskStream.Result))
                {
                    jsonString = reader.ReadToEnd();
                }
            }
        }
        return new JsonResult(jsonString);
    }
　　

WebHelper

青蛙學堂 2022-05-09 15:29 发表评论

根据文本定位div并设置属性

青蛙學堂 — Wed, 04 May 2022 08:40:00 GMT

根据文本定位div并设置属性

$('div:contains("*****"):not(:has(*))').parent().css("display", "none");

青蛙學堂 2022-05-04 16:40 发表评论

vue组件实例

青蛙學堂 — Tue, 20 Apr 2021 08:30:00 GMT

    组件基础

my-son

test $emit()

my-father

青蛙學堂 2021-04-20 16:30 发表评论

表格设置bootstrap table样式

青蛙學堂 — Wed, 17 Mar 2021 06:53:00 GMT

通过Bootstrap快速构建表格样式：

（1）外部引入Bootstrap文件

<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">

<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css">script>

（2）通过HTML代码，创建一个表格

接下来通过外部引入Bootstrap来快速构建表格样式

.table    为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped    在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered    为所有表格的单元格添加边框
.table-hover    在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed    让表格更加紧凑

      除此之外，我们还可以给表格添加背景颜色。具体代码如下

.active    对某一特定的行或单元格应用悬停颜色
.success    表示一个成功的或积极的动作
.warning    表示一个需要注意的警告
.danger    表示一个危险的或潜在的负面动作

         <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
      <thead>
              <tr class="active">
                  <th>标题一th>
                  <th>标题二th>
                  <th>标题三th>
              tr>
          thead>
          <tbody>
              <tr class="success">
                  <td>示例一td>
                  <td>示例一td>
                  <td>示例一td>tr>
              <tr class="warning">
                  <td>示例二td>
                  <td>示例二td>
                  <td>示例二td>tr>
              <tr class="danger">
                  <td>示例三td>
                  <td>示例三td>
                  <td>示例三td>tr>
              tbody>
      table>

青蛙學堂 2021-03-17 14:53 发表评论

net webservice ajax访问

青蛙學堂 — Thu, 17 Dec 2020 08:58:00 GMT

///

///WebService 的摘要说明http://localhost:65497/
///

//[WebService(Namespace = "http://tempuri.org/")]
[WebService(Namespace = "http://localhost:65497/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();

    }

    [WebMethod]
    public string HelloWorld() {
        Context.Response.AppendHeader("Access-Control-Allow-Methods", "OPTIONS,POST,GET");
        Context.Response.AppendHeader("Access-Control-Allow-Headers", "x-requested-with");
        Context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
        return "Hello World";
    }
    [WebMethod]
    public string GetAge(string id)
    {
        Context.Response.AppendHeader("Access-Control-Allow-Methods", "OPTIONS,POST,GET");
        Context.Response.AppendHeader("Access-Control-Allow-Headers", "x-requested-with");
        Context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
      Context.Response.AppendHeader("Content-type", "application/json");
        return "ID为:" + id + "的年龄为:" + new Random().Next(10, 41);
    }
}

            $(function () {
                $("#getdata").click(function () {
                    /*
                    $.ajax({
                    type: 'Post',
                    url: 'http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=3344',
                    // data: '{id:"bbut101"}',
                    //  data: 'id=bbut101',
                    // dataType: 'json',
                      dataType: 'xml',
                    contentType: "application/json",
                    success: function (data) {
                    $("#data").append(data.d);
                    }
                    });
                    */
                    // alert("3333333333");

                    //  htmlobj = $.ajax({ url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge", async: false });
                    //  $("#data").html(htmlobj.responseText);
                    /*
                    //  $.post("http://localhost:65497/WebSite1/WebService.asmx/GetAge",
                    {  id: "Duckburg"    },
                    function (data, status) {
                    alert("数据：" + data + "\n状态：" + status);
                    });
                    */
                    /*
                    $.ajax({
                    type: "GET",
                    contentType: "UTF-8",
                    url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=3322",
                    dataType: 'jsonp',
                    // dataType: 'text',
                    success: function (data) {
                    alert(data);
                    }
                    });

                    $.ajax({
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=44333",
                    data: "{id:12345 }",
                    dataType: 'jsonp',
                    success: function (response) {
                    alert("成功：" + response.d);
                    },
                    error: function (msg) {
                    alert("错误：" + msg);
                    }
                    })
                     */
                   // jQuery.support.cors = true; //IE10以下
                    $.ajax({
                        type: "post",
                        url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=44333",
                       // dataType: 'xml',
                        dataType: 'text',
                        data: { id: 'eve7777' },
                        success: function (data) {
                            alert(data); //xml对象
                           // document.write(data);
                          //  $("#data").append(data);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            // console.log(XMLHttpRequest);
                            alert('error:' + errorThrown);
                           // $("#data").append(errorThrown);
                        }
                    });


                });
            });


    获取dddd数据

青蛙學堂 2020-12-17 16:58 发表评论

js 弹窗div方法

青蛙學堂 — Wed, 16 Dec 2020 03:19:00 GMT

1.首先写一个遮罩层div，然后再写一个弹窗的div

    提示

    js弹窗 js弹出DIV,并使整个页面背景变暗

    确定


  // 弹窗
  function showWindow() {
    $('#showdiv').show();  //显示弹窗
    $('#cover').css('display','block'); //显示遮罩层
    $('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
  }
  // 关闭弹窗
  function closeWindow() {
    $('#showdiv').hide();  //隐藏弹窗
    $('#cover').css('display','none');   //显示遮罩层
  }

青蛙學堂 2020-12-16 11:19 发表评论

jshtml固定表头

青蛙學堂 — Tue, 17 Nov 2020 08:49:00 GMT

        表格头部固定

            /*
            .table-head table,.table-body table{width:100%;border-collapse:collapse;}
            .table-head{padding-right:17px;background-color:#999;color:#000;}
            .table-body{width:100%; height:300px;overflow-y:auto;}
            .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

            .table-body table tr td{
                border:1px solid red;
                text-align: center;
            }
            */

               .table-head table,.table-body table{width:1190px;border-collapse:collapse; }

            .table-body{width:1200px; height:300px;overflow-y:auto;}

            .table-body table tr td{

                text-align: center;
            }

序号	内容

1	我只是用来测试的
2	我只是用来测试的
3	我只是用来测试的
4	我只是用来测试的
5	我只是用来测试的
6	我只是用来测试的
7	我只是用来测试的
8	我只是用来测试的
9	我只是用来测试的
10	我只是用来测试的
11	我只是用来测试的
12	我只是用来测试的
13	我只是用来测试的
14	我只是用来测试的
15	我只是用来测试的

青蛙學堂 2020-11-17 16:49 发表评论

页面加载完成后执行js

青蛙學堂 — Tue, 17 Nov 2020 03:25:00 GMT

页面加载完成后执行js:
jQuery方法2，该方法一般使用较多


        $(function () {
            alter("123qew");
        })

青蛙學堂 2020-11-17 11:25 发表评论

Bootstrap table 页脚合计数量

青蛙學堂 — Tue, 20 Oct 2020 03:05:00 GMT

1.表格很好，有的时候需求和，然后bootstrap-table 默认是关闭 footer的，所以表格不显示footer也就是最后一行
2.我们需要在表格初始化的时候打开footer选项 showFooter:true

var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                showFooter:true,
                extend: {
                    index_url: 'cneed/index',
                    add_url: 'cneed/add',
                    edit_url: 'cneed/edit',
                    del_url: 'cneed/del',
                    multi_url: 'cneed/multi',
                    table: 'lvdate',
                }
            });
3.在colums里面将需要显示footer的列，加上footFormatter

columns: [
                    [ {title: '客户需求表',colspan: 14}],//这是第一行大标题
                    [
                        {checkbox: true,footerFormatter:function(data){
                                return '总计';//在第一列开头写上总计、统计之类
                            }
                        },
其中 footerFormatter：后面的 function 需要返回string 这是官方手册上说的
4.我们可以在需要的列进行计算，我这里纯是实验所及计算了一下PID

{field: 'PID', title: __('Pid'),sortable: true,footerFormatter: function (data) {
                                var field = this.field;
                                var total_sum = data.reduce(function (sum, row) {
                                    return (sum) + (parseFloat(row[field]) || 0);
                                }, 0);
                                return total_sum.toFixed(2);
                            }

青蛙學堂 2020-10-20 11:05 发表评论

js函数提交前验证

青蛙學堂 — Tue, 06 Oct 2020 03:01:00 GMT

这里面的return含有一些细节知识：

例如：onClick='return add_onclick()'与 onClick='add_onclick()'的区别

JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。

而该值决定了当前操作是否继续。
当返回的是true时，将继续操作。
当返回是false时，将中断操作。

而直接执行时（不用return）。将不会对window.event.returnvalue进行设置
所以会默认地继续执行操作

详细说明如下：
例如：
当在 Open 中
如果函数 add_onclick() 返回 true, 那么页面就会打开 abc.htm
否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外

)
而 Open
不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm

另外补充：
onclick事件时就相当于onclick="return true/false"
例：
function check()
{
if(obj.value=="" )
   {
     window.alert("不能为空！");
     obj.focus();
     return false;
   }
     return true;
}

调用方法返回true时才提交表单，反之则不提交，这是submit按钮
------------------------------------------------------------------------------------------

调用js函数不需要return，但是表单却无法提交，所以在js函数中加上一句话
例：

function check()
{
if(obj.value=="" )
   {
     window.alert("不能为空！");
     obj.focus();
     return false;
   }
     document.myform.submit();
     return true;
}

注：document.myform.submit();要在return true前

关于javascript中的 return false和return true
return 是javascript里函数返回值的关键字，
一个函数内处理的结果可以使用return 返回，
这样在调用函数的地方就可以用变量接收返回
结果。return 关键字内任何类型的变量数据或表达式
都可以进行返回，甚至什么都不返回也可以比如
function NullReturn(IsNull)
{
if(IsNull==true)
{
return;
}
}
这样写也是可以的，这里的意思是返回空(null)
所以有的时候return 的作用就是用来终止函数执行。
比如

return验证测试

function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
}
alert('登陆成功');
}

用户名
密码
登陆

不加return 的情况
加return

return验证测试

function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
return;
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
return;
}
alert('登陆成功');
}

用户名
密码
登陆

运行就会发现加return 和不加return 的区别，
最简单的测试办法，上面的两个例子什么都不输入直接登陆，楼就明白了。

不加return的现象是先提示用户名没输入，然后提示密码没输入；加了return之后遇到一个没输入之后就不再继续检测

return false表示返回一个false值，也就是说提交是不成功的，就是不会提交上去。
return true表法返回一个true值，也就是提交了，不管你输入没有输入值，都会提交到action指定页面。

青蛙學堂 2020-10-06 11:01 发表评论

nodejs连sqlite3数据库

青蛙學堂 — Wed, 19 Aug 2020 10:50:00 GMT

实例1:
//数据库的名字是"mydatebase.db"
var sqlite3 = require('sqlite3').verbose();
var database;
var database = new sqlite3.Database('mydatebase.db');

//database = new sqlite3.Database("mydatebase.db", function(e){
// if (err) throw err;
//});
//也可以使用内存型，数据不会永久保存
//database = new sqlite3.Database(":memory:", function(e){
// if (err) throw err;
//});
console.log("111111111122222");
/*
database.run("CREATE TABLE foo7 (id INT,name CHAR(50))", function(e){
if(e !== null){
throw e;
}
//循环生成sql语句，批次插入多条数据
var sql = "";
var temp = "";
for(var i = 0 ; i < 500; i ++){
     temp = "name"+i;
//sql += 'INSERT INTO foo6(id,name) VALUES(' + i + ' ,'  +temp + ');'
sql += 'INSERT INTO foo7(id,name) VALUES(' + i + ' ,"boy345");'
}
database.exec(sql);

});
*/
/*
database.run("drop TABLE foo4  ", function(e){
if(e !== null){
throw e;
}

});

*/
  console.log("222222222222");
//Database#each(' select *  from foo ', [param, ], [callback], [complete]);
//database.all("select *  from foo  where id=?", idvalue, function (err, row) {});
database.all("select *  from foo7  where id < 10 ",  function (err, rows) {
    console.log(rows);

});

database.each(" select *  from foo2 where id < 50  ", function(err, row) {
    //console.log(row.id + ": " + row.name);
  });

console.log("333333333333333322222");

实例2：
//数据库的名是"mydatebase.db"
//var sqlite3 = require("sqlcipher");
var sqlite3 = require("sqlite3");
//创建数据库
var database = new sqlite3.Database("mydatebase.db", function(err){
if (err){
console.log("new database error,",err.message);
    }else{
console.log("new database success");

//创建表
database.run("create table if not exists sharewaf_data(time NUMERIC, domain TEXT, ip TEXT, lon_lat TEXT, address TEXT, url TEXT, type TEXT, agent TEXT)",function(err){
if(err){
console.log("create database error,",err.message);
            }else{
console.log("create database success");

//插入数据
database.run("insert into sharewaf_data(time, domain, ip, lon_lat, address, url, type, agent) VALUES(?,?,?,?,?,?,?,?)",["time22", "domain22", "ip22", "lon_lat22", "taiyuan22", "url22", "type", "agent"],function(err){
if(err){
console.log("insert data error,",err.message);
                    }else{
console.log("insert data success");

//查询
database.all("select * from sharewaf_data", function(err, rows) {
if(err){
console.log("select from sharewaf_data error,",err.message);
                            }else{
console.log(rows);
                            }
                        });
                    }

                });
            }
        });
    }
});

青蛙學堂 2020-08-19 18:50 发表评论

nodejs-sqlite3

青蛙學堂 — Wed, 19 Aug 2020 03:17:00 GMT

nodejs与sqlite
//打开数据库
var db = new sqlite3.Database('xx.db');

// 关闭数据库
db.close();

db.run('xx');  // 数据库对象的run函数可以执行任何的SQL语句，该函数一般不用来执行查询
               // create alter 之类的

增:
var stmt = db.prepare("INSERT OR REPLACE INTO note (cdate, content) VALUES (?,?)");
stmt.run(data.cdate, data.content);
stmt.finalize();

删:
db.prepare("DELETE  from note where cdate =?");
stmt.run(data.cdate);
stmt.finalize();

改:
var stmt = db.prepare("UPDATE note set content=? where cdate =?");
stmt.run(data.content, data.cdate);
stmt.finalize();

查:
db.each("SELECT rowid AS id, thing FROM Stuff", function(err, row) {
    console.log(row.id + ": " + row.thing);
  });
});
// or
db.all("SELECT xxx", function (err, res){});

// 使用

先把库下载到node_modules  npm install sqlite3 --save

1.引入sqlite3库
var sqlite3 = require('sqlite3');
// or  var sqlite3 = require("sqlite3").verbose();

var db = new sqlite3.Database(file);
db.serialize(function() {
     //Do stuff
     db.run("CREATE TABLE Stuff (thing TEXT)");

     var stmt = db.prepare("INSERT INTO Stuff VALUES (?)");
     for(var i = 0;i         stmt.run('xx');
     }
     stmt.finalize();

});
db.close();

青蛙學堂 2020-08-19 11:17 发表评论

WEB页面导出为EXCEL文档的方法js-ie

青蛙學堂 — Thu, 13 Aug 2020 07:59:00 GMT

    WEB页面导出为EXCEL文档的方法




        WEB页面导出为EXCEL文档的方法


        列标题1
        列标题2
        列标题3
        列标题4
        列标题5


        aaa
        bbb
        ccc
        ddd
        eee


        AAA
        BBB
        CCC
        DDD
        EEE


        FFF
        GGG
        HHH
        III
        JJJ







    function method1(tableid) {//整个表格拷贝到EXCEL中
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");
        //创建AX对象excel
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象
        var oSheet = oWB.ActiveSheet;
        //激活当前sheet
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        //把表格中的内容移到TextRange中
        sel.select();
        //全选TextRange中内容
        sel.execCommand("Copy");
        //复制TextRange中内容
        oSheet.Paste();
        //粘贴到活动的EXCEL中
        oXL.Visible = true;
        //设置excel可见属性
    }

    function method2(tableid) //读取表格中每个单元到EXCEL中
    {
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");
        //创建AX对象excel
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象
        var oSheet = oWB.ActiveSheet;
        //激活当前sheet
        var Lenr = curTbl.rows.length;
        //取得表格行数
        for (i = 0; i < Lenr; i++) {
            var Lenc = curTbl.rows(i).cells.length;
            //取得每行的列数
            for (j = 0; j < Lenc; j++) {
                oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
                //赋值
            }
        }
        oXL.Visible = true;
        //设置excel可见属性
    }

    function getXlsFromTbl(inTblId, inWindow) {
        try {
            var allStr = "";
            var curStr = "";
            //alert("getXlsFromTbl");
            if (inTblId != null && inTblId != "" && inTblId != "null") {
                curStr = getTblData(inTblId, inWindow);
            }

            if (curStr != null) {
                allStr += curStr;
            }
            else {
                alert("你要导出的表不存在！");
                return;
            }

            var fileName = getExcelFileName();
            doFileExport(fileName, allStr);
        }
        catch (e) {
            alert("导出发生异常:" + e.name + "->" + e.description + "!");
        }
    }

    function getTblData(inTbl, inWindow) {
        var rows = 0;
        //alert("getTblData is " + inWindow);
        var tblDocument = document;
        if (!!inWindow && inWindow != "") {
            if (!document.all(inWindow)) {
                return null;
            }
            else {
                tblDocument = eval(inWindow).document;
            }
        }

        var curTbl = tblDocument.getElementById(inTbl);
        var outStr = "";
        if (curTbl != null) {
            for (var j = 0; j < curTbl.rows.length; j++) {
                //alert("j is " + j);
                for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
                    //alert("i is " + i);
                    if (i == 0 && rows > 0) {
                        outStr += " \t";
                        rows -= 1;
                    }
                    outStr += curTbl.rows[j].cells[i].innerText + "\t";
                    if (curTbl.rows[j].cells[i].colSpan > 1) {
                        for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                            outStr += " \t";
                        }
                    }
                    if (i == 0) {
                        if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                            rows = curTbl.rows[j].cells[i].rowSpan - 1;
                        }
                    }
                }
                outStr += "\r\n";
            }
        }
        else {
            outStr = null;
            alert(inTbl + "不存在!");
        }
        return outStr;
    }

    function getExcelFileName() {
        var d = new Date();
        var curYear = d.getYear();
        var curMonth = "" + (d.getMonth() + 1);
        var curDate = "" + d.getDate();
        var curHour = "" + d.getHours();
        var curMinute = "" + d.getMinutes();
        var curSecond = "" + d.getSeconds();

        if (curMonth.length == 1) {
            curMonth = "0" + curMonth;
        }
        if (curDate.length == 1) {
            curDate = "0" + curDate;
        }
        if (curHour.length == 1) {
            curHour = "0" + curHour;
        }
        if (curMinute.length == 1) {
            curMinute = "0" + curMinute;
        }
        if (curSecond.length == 1) {
            curSecond = "0" + curSecond;
        }

        var fileName = "leo_zhang" + "_" + curYear + curMonth + curDate + "_" + curHour + curMinute + curSecond + ".csv";
        //alert(fileName);
        return fileName;
    }

    function doFileExport(inName, inStr) {
        var xlsWin = null;
        if (!!document.all("glbHideFrm")) {
            xlsWin = glbHideFrm;
        }
        else {
            var width = 6;
            var height = 4;
            var openPara = "left=" + (window.screen.width / 2 - width / 2)
                    + ",top=" + (window.screen.height / 2 - height / 2)
                    + ",scrollbars=no,width=" + width + ",height=" + height;
            xlsWin = window.open("", "_blank", openPara);
        }

        xlsWin.document.write(inStr);
        xlsWin.document.close();
        xlsWin.document.execCommand('Saveas', true, inName);
        xlsWin.close();
    }

青蛙學堂 2020-08-13 15:59 发表评论

Javascript操作excel--IE

青蛙學堂 — Thu, 13 Aug 2020 07:21:00 GMT

Js操作Excel常用方法

1.创建一个新Excel表格

    var XLObj = new ActiveXObject("Excel.Application");
    var xlBook = XLObj.Workbooks.Add;                         //新增工作簿
    var ExcelSheet = xlBook.Worksheets(1);                   //创建工作表

2.保存表格
    ExcelSheet.SaveAs("C:\\TEST.XLS");

3.使 Excel 通过Application 对象可见
    ExcelSheet.Application.Visible = true;

4.打印
    xlBook.PrintOut;
    或者:
    ExcelSheet.PrintOut;

5.关闭
    xlBook.Close(savechanges=false);
    或者:
    ExcelSheet.Close(savechanges=false);

6.结束进程
    ExcelSheet.Application.Quit();
    或者:
    XLObj.Quit();
    XLObj=null;

function endXlsObj(){
    oXL.UserControl = true;
    oXL=null;
    oWB=null;
    activeSheet=null;
    //结束excel进程，退出完成
    idTmr = window.setInterval("Cleanup();",1);
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}

7.页面设置

    ExcelSheet.ActiveSheet.PageSetup.Orientation = 2;
    ExcelSheet.ActiveSheet.PageSetup.LeftMargin= 2/0.035;         //页边距左2厘米
    ExcelSheet.ActiveSheet.PageSetup.RightMargin = 3/0.035;      //页边距右3厘米，
    ExcelSheet.ActiveSheet.PageSetup.TopMargin = 4/0.035;        //页边距上4厘米，
    ExcelSheet.ActiveSheet.PageSetup.BottomMargin = 5/0.035;   //页边距下5厘米
    ExcelSheet.ActiveSheet.PageSetup.HeaderMargin = 1/0.035;   //页边距页眉1厘米
    ExcelSheet.ActiveSheet.PageSetup.FooterMargin = 2/0.035;    //页边距页脚2厘米
    ExcelSheet.ActiveSheet.PageSetup.CenterHeader = "页眉中部内容";
    ExcelSheet.ActiveSheet.PageSetup.LeftHeader = "页眉左部内容";
    ExcelSheet.ActiveSheet.PageSetup.RightHeader = "页眉右部内容";
    ExcelSheet.ActiveSheet.PageSetup.LeftFooter = "页脚左部内容";
    ExcelSheet.ActiveSheet.PageSetup.RightFooter = "页脚右部内容";            ExcelSheet.ActiveSheet.PageSetup.CenterHeader = "&\"宋体,加粗\"&18长天公司" + date1 + "至" + date2 + "(施工图)项目进度检查表";
    ExcelSheet.ActiveSheet.PageSetup.RightHeader = "&D";
    ExcelSheet.ActiveSheet.PageSetup.PrintGridlines = true;
    ExcelSheet.ActiveSheet.PageSetup.PrintTitleRows = "$1:$1";
    ExcelSheet.ActiveSheet.PageSetup.Zoom = 75;

8.对单元格操作，带*部分对于行，列，区域都有相应属性
    ExcelSheet.ActiveSheet.Cells(row,col).Value = "内容";                //设置单元格内容
    ExcelSheet.ActiveSheet.Cells(row,col).Borders.Weight = 1;        //设置单元格边框*()
    ExcelSheet.ActiveSheet.Cells(row,col).Interior.ColorIndex = 1;    //设置单元格底色*(1-黑色，
        2-白色，3-红色，4-绿色，5-蓝色，6-黄色，7-粉红色，8-天蓝色，9-酱土色..可以多做尝试)
    ExcelSheet.ActiveSheet.Cells(row,col).Interior.Pattern = 1;         //设置单元格背景样式*(1-无，
                                                     2-细网格，3-粗网格，4-斑点，5-横线，6-竖线..可以多做尝试)
    ExcelSheet.ActiveSheet.Cells(row,col).Font.ColorIndex = 1;        //设置字体颜色*(与上相同)
    ExcelSheet.ActiveSheet.Cells(row,col).Font.Size = 10;                //设置为10号字*
    ExcelSheet.ActiveSheet.Cells(row,col).Font.Name = "黑体";        //设置为黑体*
    ExcelSheet.ActiveSheet.Cells(row,col).Font.Italic = true;             //设置为斜体*
    ExcelSheet.ActiveSheet.Cells(row,col).Font.Bold = true;             //设置为粗体*
    ExcelSheet.ActiveSheet.Cells(row,col).ClearContents;                //清除内容*
    ExcelSheet.ActiveSheet.Cells(row,col).WrapText=true;               //设置为自动换行*
    ExcelSheet.ActiveSheet.Cells(row,col).HorizontalAlignment = 3; //水平对齐方式枚举* (1-常规，
                                    2-靠左，3-居中，4-靠右，5-填充 6-两端对齐，7-跨列居中，8-分散对齐)
    ExcelSheet.ActiveSheet.Cells(row,col).VerticalAlignment = 2;      //垂直对齐方式枚举*(1-靠上，
                                                                                  2-居中，3-靠下，4-两端对齐，5-分散对齐)
    //行，列有相应操作:
    ExcelSheet.ActiveSheet.Rows(row).
    ExcelSheet.ActiveSheet.Columns(col).
    ExcelSheet.ActiveSheet.Rows(startrow+":"+endrow).                  //如Rows("1:5")即1到5行
    ExcelSheet.ActiveSheet.Columns(startcol+":"+endcol).               //如Columns("1:5")即1到5列
    //区域有相应操作:
    XLObj.Range(startcell+":"+endcell).Select;
        //如Range("A2:H8")即A列第2格至H列第8格的整个区域
    XLObj.Selection.
    //合并单元格
    XLObj.Range(startcell+":"+endcell).MergeCells = true;
        //如Range("A2:H8")即将A列第2格至H列第8格的整个区域合并为一个单元格
    或者:
    XLObj.Range("A2",XLObj.Cells(8, 8)).MergeCells = true;

9.设置行高与列宽
    ExcelSheet.ActiveSheet.Columns(startcol+":"+endcol).ColumnWidth = 22;
        //设置从firstcol到stopcol列的宽度为22
    ExcelSheet.ActiveSheet.Rows(startrow+":"+endrow).RowHeight = 22;
        //设置从firstrow到stoprow行的宽度为22

青蛙學堂 2020-08-13 15:21 发表评论

Layui table 示例

青蛙學堂 — Wed, 05 Aug 2020 02:35:00 GMT

Layui table 示例

查看

编辑

删除


  {{#  if(d.auth > 2){ }}

审核
{{# } }}

青蛙學堂 2020-08-05 10:35 发表评论

boootstrap talbe多列checkbox设置

青蛙學堂 — Fri, 24 Jul 2020 02:31:00 GMT

boootstrap talbe多列checkbox设置

boootstrap talbe 列值进行格式化操作：

{
                          title: '审核',
                          field: '审核',
                        //  width: '10%',
                         // align: "left",
                          formatter: function (value, item, index,row) {
                              if (value == '1') {
                                  return '';
                              }
                              else if (value == '0') {
                                  return '';
                              }
                              else if (value == null) {
                                  return '';
                              }
                          }
                      }

//***************************************************8

2. 在table的cell单击事件里取值赋值

onClickCell:function(field, value, row, $element,index)
            {
               // alert("单击cell-" + value);
               // alert("单击cell-" + row.id);
               // if ($('#a_' + index).get(0).checked) {
                if ($('#a_' + index).is(':checked')) {
                    row.审核 = "1";
                } else {
                    row.审核 = "0";
                }

                alert(value+"单击cell-" + row.id);

            },

青蛙學堂 2020-07-24 10:31 发表评论

easyui多列checkbox-未测试

青蛙學堂 — Thu, 23 Jul 2020 01:59:00 GMT

$('#grid').datagrid({
              columns:[[
                  {field:'CODE_NM',title:'名称',align:'center',width:'40%'},
                  {field:'a',title:'选项A',width:'15%',align:'center',
                      formatter: function (value, rowData, rowIndex) {
                                  if(value=="1"){
                                      return '';
                                  }else if(value="0"){
                                      return '';
                                  }

                            }},
                  {field:'b',title:'选项B',width:'15%',align:'center',
                      formatter: function (value, rowData, rowIndex) {
                                  if(value=="1"){
                                       return '';
                                  }else if(value=="0"){
                                       return '';
                                  }

                            }}
              ]],
              width:'100%',
              hight:'100%',
              rownumbers:true,
              title:'列表信息',
              url:"getDetail",
              onClickRow:function(index,row){
                  $('#grid').datagrid('clearSelections');
                  if($('#a_'+index).get(0).checked){
                      row.a = "0";
                  }else{
                      row.a = "1";
                  }
                  if($('#b_'+index).get(0).checked){
                      row.b = "0";
                  }else{
                      row.b = "1";
                  }
              },
              dataType:"json",
              type:'post',
              onLoadSuccess:function(data){
              }

          });

青蛙學堂 2020-07-23 09:59 发表评论

Jquery ajax示例get-post

青蛙學堂 — Mon, 29 Jun 2020 10:27:00 GMT

Jquery ajax示例get-post

$(function(){

//请求参数

var list = {};

$.ajax({

//请求方式

type : "POST",

//请求的媒体类型

contentType: "application/json;charset=UTF-8",

//请求地址

url : "http://127.0.0.1/admin/list/",

//数据，json字符串

data : JSON.stringify(list),

//请求成功

success : function(result) {

console.log(result);

//请求失败，包含具体的错误信息

error : function(e){

console.log(e.status);

console.log(e.responseText);

}

});

*******************************************************

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

***********************************************

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

青蛙學堂 2020-06-29 18:27 发表评论

用jquery-table2excel，进行导出excel

青蛙學堂 — Tue, 23 Jun 2020 06:00:00 GMT

https://files.cnblogs.com/files/liuchenxing/jquery.table2excel.js

用jquery-table2excel，进行导出excel
　　jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容，不需要的行可以不导出。它文件体积小，使用非常方便。

　1、写好前端的按钮，还需要一个table（要导出的内容存放处）。

　　"button" value="导出" class="Button" onclick="Export();" />  　　<table id='exceltable'><td>内容内容内容td>table>

　　2、初始化js

        function Export（）{　　　　$("#exceltable").table2excel({            //exceltable为存放数据的table    　　　　// 不被导出的表格行的CSS class类    　　　　exclude: ".noExl",    　　　　// 导出的Excel文档的名称    　　　　name: "表格-" + new Date().getTime(),    　　　　// Excel文件的名称     　　　　filename: "表格-" + new Date().getTime() + ".xls",     　　　　bootstrap: false 　　    });         }

    //table2excel插件的可用配置参数有：

　　//exclude：不被导出的表格行的CSS class类。
　　//name：导出的Excel文档的名称。
　　//filename：Excel文件的名称。
　　//exclude_img：是否导出图片。
　　//exclude_links：是否导出超链接
　　//exclude_inputs：是否导出输入框中的内容。

青蛙學堂 2020-06-23 14:00 发表评论

js读取json数据

青蛙學堂 — Tue, 16 Jun 2020 11:51:00 GMT

var json = { contry:{ area:{ man:"12万", women:"10万" } } };

//方式一：使用eval解析

var obj = eval(json);

alert(obj.constructor);

alert(obj.contry.area.women);

//方式二：使用Funtion函数

var strJSON = "{name:'json name'}";//得到的JSON

var obj = new Function("return" + strJSON)();//转换后的JSON对象

alert(obj.name);//json name

alert(obj.constructor);

//复杂一点的json数组数据的解析

var value1 = [{"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},

{"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},

{"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}];

var obj1 = eval(value1);

alert(obj1[0].c01);

//复杂一点的json的另一种形式

var value2 = {"list":[ {"password":"1230","username":"coolcooldool"}, {"password":"thisis2","username":"okokok"}],

"array":[{"password":"1230","username":"coolcooldool"},{"password":"thisis2","username":"okokok"}]};

var obj2 = eval(value2);

alert(obj2.list[0].password);

青蛙學堂 2020-06-16 19:51 发表评论

Bootstraptable-editable在线编辑表格

青蛙學堂 — Tue, 16 Jun 2020 01:51:00 GMT

bootstrap-table-editable.js

首先来看看bootstrap-table-editable.js这个文件

这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。

需要引用的文件如下：

//(****************************************

js 代码

$(function () {

$("#tb_user").bootstrapTable({

toolbar: "#toolbar",

idField: "Id",

pagination: true,

showRefresh: true,

search: true,

clickToSelect: true,

queryParams: function (param) {

return {};

url: "/Editable/GetUsers",

columns: [{

checkbox: true

}, {

field: "UserName",

title: "用户名",

editable: {

type: 'text',

title: '用户名',

validate: function (v) {

if (!v) return '用户名不能为空';

}

}, {

field: "Age",

title: "年龄",

}, {

field: "Birthday",

title: "生日",

formatter: function (value, row, index) {

var date = eval('new ' + eval(value).source)

return date.format("yyyy-MM-dd");

}

{

field: "DeptName",

title: "部门"

}, {

field: "Hobby",

title: "爱好"

}],

onEditableSave: function (field, row, oldValue, $el) {

$.ajax({

type: "post",

url: "/Editable/Edit",

data: row,

dataType: 'JSON',

success: function (data, status) {

if (status == "success") {

alert('提交数据成功');

}

error: function () {

alert('编辑失败');

complete: function () {

}

});

}

});

//*********************

后台对应的更新方法

public JsonResult Edit(User user)

{

//更新实体

return Json(new { }, JsonRequestBehavior.AllowGet);

}

经过测试，用户名这一列基本可以自由编辑。同样，年龄这一列也可改成这样

复制代码

　　　　　　 {

field: "Age",

title: "年龄",

editable: {

type: 'text',

title: '年龄',

validate: function (v) {

if (isNaN(v)) return '年龄必须是数字';

var age = parseInt(v);

if (age <= 0) return '年龄必须是正整数';

}

复制代码

有了上面的知识作为基础，我们来初始化生日这一列：

复制代码

{

field: "Birthday",

title: "生日",

formatter: function (value, row, index) {

var date = eval('new ' + eval(value).source)

return date.format("yyyy-MM-dd");

editable: {

type: 'date',

title: '生日'

}

复制代码

表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式，比如我们的部门这一列的编辑可以写成这样：

复制代码

　　　　　　 {

field: "DeptId",

title: "部门",

editable: {

type: 'select',

title: '部门',

source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]

}

复制代码

　{

field: "DeptId",

title: "部门",

editable: {

type: 'select',

title: '部门',

source: function () {

var result = [];

$.ajax({

url: '/Editable/GetDepartments',

async: false,

type: "get",

data: {},

success: function (data, status) {

$.each(data, function (key, value) {

result.push({ value: value.ID, text: value.Name });

});

}

});

return result;

}

//**************************

除了上述几种常见的编辑框，x-editable还为我们提供了复选框组的编辑。比如：

复制代码

　　　　　　　{

field: "Hobby",

title: "爱好",

editable: {

type: "checklist",

separator:",",

source: [{ value: 'bsb', text: '篮球' },

{ value: 'ftb', text: '足球' },

{ value: 'wsm', text: '游泳' }],

}

复制代码

青蛙學堂 2020-06-16 09:51 发表评论

Bootstraptable入门-合并存储格

青蛙學堂 — Fri, 08 May 2020 07:56:00 GMT

ViewBag.Title = "Index2";

}

json文件：

{

"total":25,

"rows":[

{

"id":1,

"Name":"xiaoming1",

"Mobile":"222",

"Note":"diyihang"

{

"id":2,

"Name":"xiaoming2",

"Mobile":"3333",

"Note":"dier"

{

"id":3,

"Name":"xiaoming2",

"Mobile":"34444",

"Note":"didssssss"

}

{

"id":4,

"Name":"xiaoming4",

"Mobile":"6555544",

"Note":"did5555ss"

}

]

}

<--汉化文件 -->

<--table-->

<--grid-->

<--list-->

青蛙學堂 2020-05-08 15:56 发表评论

Bootstraptable入门

青蛙學堂 — Fri, 08 May 2020 03:21:00 GMT

摘要: 一、什么是Bootstrap-table？　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Car... 阅读全文

青蛙學堂 2020-05-08 11:21 发表评论

IE网址中文加密解密-乱码

青蛙學堂 — Fri, 27 Mar 2020 01:03:00 GMT

script 网址中文加密函数

加密

encodeURI()

解密

Convert.ToString( System.Web.HttpUtility.UrlDecode( "" ))

c# 网址中文加密解密

public Encoding encoding()

{

string browser = Request.Browser.Type.ToUpper();

if (browser.Contains("IE") == true)

{

return Encoding.Default;

}

else

{

return Encoding.UTF8;

}

加密函数

HttpUtility.UrlEncode(“cookies值”, encoding())

解密函数

HttpUtility.UrlDecode(Hc.Values[pitem], encoding);

青蛙學堂 2020-03-27 09:03 发表评论

HTML展开折叠div代码

青蛙學堂 — Mon, 24 Dec 2018 03:01:00 GMT

HTML展开折叠div代码

1
  2
  3
  4
  5

  6         纯CSS实现百叶窗
  7
  8             * {
  9                margin: 0;
10                padding: 0;
11                }
12
13             #parent >li> span{background: #999999;display: block;width: 200px;border:1px solid #ECEEF2;}
14             li {line-height: 40px;display: block;}
15             li  p{
16                     display: inline-block;
17                     width: 0px;
18                     height: 0px;
19                     border-left: 5px solid transparent;
20                     border-right: 5px solid transparent;
21                     border-top: 5px solid#2f2f2f;
22                       }
23              li>ul{display: none;}
24              li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
25              #parent span:hover + ul{display: block;}
26              #parent span:hover >p{
27                      display: inline-block;
28                     width: 0px;
29                     height: 0px;
30                     border-top: 5px solid transparent;
31                     border-bottom: 5px solid transparent;
32                     border-left: 5px solid#2f2f2f;}
33
34
35
36
37

列表
39

子列表

子列表

子列表

列表
47

子列表

子列表

子列表

列表
55

子列表

子列表

子列表

61
62
63
64
65
66
67
68
69
70          71  else{bfq.style.display='none';showbfq.innerText='点击更多';}">点击更多
72
73
74         aaa1111111111111111111111111
75
76
77
78
79
80
81
82
83          84  else{bfq1.style.display='none';showbfq1.innerText='点击更多';}">点击更多
85
86
87         bbb2222222222222222222222
88
89
90
91
92
93
94
95
96          97  else{bfq2.style.display='none';showbfq2.innerText='展开';}">展开
98
99
100         ccc3333333333333333333333333
101
102
103
104
105
106
107
108

109 标题内容
110

111
112     （1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。
113     （2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写
114
115
116
117
118 function test(obj){
119
120     var div1=document.getElementById("div2");
121     if(div1.style.display=="block"){
122         div1.style.display="none";
123         obj.src="image/up.png";
124     }else{
125         div1.style.display="block";
126         obj.src="image/down.png";
127     }
128 }
129

青蛙學堂 2018-12-24 11:01 发表评论

FW:结识正能量，跟对人

青蛙學堂 — Thu, 03 Apr 2014 09:45:00 GMT

结识正能量，跟对人

“沙子是废物，水泥也是废物，但他们混在一起是混凝土，就是精品；大米是精品，汽油也是精品，但他们混在一起就是废物。是精品还是废物不重要，跟谁混，很重要! ＂

朋友不是乱交的，每天在一起喝酒的不一定是真朋友，每天在一起混的也不一定是永远的朋友。人生要交的四位朋友：

1、交一个欣赏你的朋友，即便在你穷困潦倒的时候反而会更安慰你、帮助你。

2、交一个有正能量的朋友，在你情绪低落的时候陪伴你、鼓励你。

3、交一个为你领路的朋友，自愿做你的垫脚石，带你走过泥泞、拨开迷雾。

4、交一个肯指点你的朋友，时刻提醒你、监督你，让你时刻发现自己的不足。!财富不是永远的朋友，朋友却是永远的财富

青蛙學堂 2014-04-03 17:45 发表评论

jquery 使用方法--转

青蛙學堂 — Fri, 04 May 2012 01:12:00 GMT

摘要: jquery 使用方法 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。一... 阅读全文

青蛙學堂 2012-05-04 09:12 发表评论

JQUERY CSS 操作

青蛙學堂 — Thu, 03 May 2012 02:11:00 GMT

jQuery CSS 操作

jQuery 拥有三种供 CSS 操作的重要函数：

$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)

CSS 操作实例

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：

实例

$(selector).css(name,value) $("p").css("background-color","yellow");

TIY

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：

实例

$(selector).css({properties}) $("p").css({"background-color":"yellow","font-size":"200%"});

TIY

函数 css(name) 返回指定的 CSS 属性的值：

实例

$(selector).css(name) $(this).css("background-color");

TIY

jQuery Size 操作

jQuery 拥有两种供尺寸操作的重要函数：

$(selector).height(value)
$(selector).width(value)

Size 操作实例

函数 height(value) 设置所有匹配元素的高度：

实例

$(selector).height(value) $("#id100").height("200px");

TIY

函数 width(value) 设置所有匹配元素的宽度：

实例

$(selector).width(value) $("#id200").width("300px");

TIY

jQuery CSS 函数 - 来自本页

CSS 属性	描述
$(selector).css(name,value)	为匹配元素设置样式属性的值
$(selector).css({properties})	为匹配元素设置多个样式属性
$(selector).css(name)	获得第一个匹配元素的样式属性值
$(selector).height(value)	设置匹配元素的高度
$(selector).width(value)	设置匹配元素的宽度

(selector) jQuery 元素选择器语法

青蛙學堂 2012-05-03 10:11 发表评论

jquery参考资料-网址

青蛙學堂 — Tue, 01 May 2012 01:31:00 GMT

http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

http://v.youku.com/v_playlist/f6596174o1p0.html

青蛙學堂 2012-05-01 09:31 发表评论

IT博客-青蛙學堂-随笔分类-JavaScript

js 页面加载时间

js访问.net 接口frombody form

根据文本定位div并设置属性

vue组件实例

my-son

{{ title }}

my-father

表格设置bootstrap table样式

net webservice ajax访问

js 弹窗div方法

jshtml固定表头

页面加载完成后执行js

Bootstrap table 页脚合计数量

js函数提交前验证

nodejs连sqlite3数据库

nodejs-sqlite3

WEB页面导出为EXCEL文档的方法js-ie

Javascript操作excel--IE

Layui table 示例

boootstrap talbe多列checkbox设置

easyui多列checkbox-未测试

Jquery ajax示例get-post

用jquery-table2excel，进行导出excel

js读取json数据

Bootstraptable-editable在线编辑表格

Bootstraptable入门-合并存储格

Bootstraptable入门

IE网址中文加密解密-乱码

HTML展开折叠div代码

FW:结识正能量，跟对人

jquery 使用方法--转

JQUERY CSS 操作

jQuery CSS 操作

CSS 操作实例

实例

实例

实例

jQuery Size 操作

Size 操作实例

实例

实例

jQuery CSS 函数 - 来自本页

jquery参考资料-网址