Jquery/Json/BootStrap

1 篇文章 0 订阅
1 篇文章 0 订阅

Jquery
//正则表达式:https://www.w3cschool.cn/zhengzebiaodashi/
1.jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery的字面意思其实就是JavaScript和查询(Query),即用于辅助开发JavaScript的库。
//参考文献:jquery合集:https://www.w3cschool.cn/jquerygroup/
//您还可以在w3cschool上学习以下相关教程:
《jQuery UI教程》《jQuery EasyUI教程》《免费Jquery插件合集》、
《jQuery Mobile教程》《Jquery 合集》
//比较keypress、keydown与keyup事件
• keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
• keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
• keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码.

//jquery’s $(selector).toggle(speed, callback) method:
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
可选的 callback 参数,具有以下三点说明:
1 $(selector)选中的元素的个数为n个,则callback函数会执行n次
2 callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行
3 callback既可以是函数名,也可以是匿名函数

Eg.$(“button”).click(function(){
  $(“p”).toggle();
});

//jquery展示淡入淡出效果:
1.fadeIn() 2. fadeOut() 3。 fadeToggle() 4. fadeTo()
//如果想呈现下拉菜单的扩展和折叠效果及滑下和滑上效果可以用:
slideDown(speed,callback),slideUp(speed,callback),slideToggle(speed, callback)

//创建动画:https://www.w3cschool.cn/jquery/jquery-animate.html
使用KaTeX parse error: Expected '}', got 'EOF' at end of input: …建文本  var txt2=("

").text(“Text.”);   // 使用 jQuery 创建文本
var txt3=document.createElement(“p”);  
txt3.innerHTML=“文本。”;               // 使用 DOM 创建文本 text with DOM
$(“p”).append(txt1,txt2,txt3);         // 追加新元素
}
提示:在jQuery中,append/prepend 是在选择元素内部嵌入,而after/before 是在元素外面追加。
//jquery noConflict:https://www.w3cschool.cn/jquery/jquery-noconflict.html
//表单验证:https://www.w3cschool.cn/jquery/kv69gfnm.html
(尤其注意“实例演示”)
//学习jquery ajax。
//注意“w3cschool”的“jquery教程”的“jquery插件”和“拓展阅读”部分。

BootStrap
//BOOTSTRAP:just like a model with full of css templet which the bootstrap had already write it for you.
//BootStrap使用的css样式下载地址:https://necolas.github.io/normalize.css/
国内推荐使用 BootCDN 上的库:

//bootstrap网格系统:https://www.w3cschool.cn/bootstrap/bootstrap-v2-grid-system.html
//form:https://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html

JSON
***Jsonp(解决跨域请求问题):https://blog.csdn.net/hansexploration/article/details/80314948
https://www.cnblogs.com/xiaoxiaoccaiya/p/7088176.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 是一个基于 Bootstrap 的可扩展的表格插件,可以帮助我们快速、简单地展示数据。在使用 Bootstrap Table 时,我们可以通过指定 data 属性来加载表格数据。而 PHP 与 JSON 可以很方便地将数据从后台传递到前端。 以下是一个简单的示例,演示如何使用 PHP 和 JSON 加载数据到 Bootstrap Table 中。 1. 创建一个 PHP 文件,用于返回数据: ```php <?php // 数据库连接信息 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "dbname"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 查询数据 $sql = "SELECT id, name, email FROM users"; $result = $conn->query($sql); // 将数据转换成 JSON 格式 $data = array(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { array_push($data, $row); } } echo json_encode($data); // 关闭连接 $conn->close(); ?> ``` 2. 在 HTML 页面中引入 Bootstrap Table 和 jQuery,并创建一个空的表格: ```html <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.3/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.3/bootstrap-table.min.js"></script> <table id="table"></table> ``` 3. 使用 jQuery 的 ajax 方法从 PHP 文件中加载数据,并将数据填充到表格中: ```javascript $(function() { $('#table').bootstrapTable({ url: 'data.php', columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'email', title: '邮箱' }] }); }); ``` 这样,当页面加载完成时,就会从 data.php 中加载数据,并将其填充到表格中。其中,data.php 返回的数据为 JSON 格式,通过 jQuery 的 ajax 方法获取并解析成 JavaScript 对象。Bootstrap Table 会根据指定的 columns 属性,将数据显示在表格中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值