需要学习:
HTML、CSS、Javascript
Bootstrap: 基于以上三个的一个框架
jQuery:一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程
Ajax:asynchronous javascript and xml:异步Javascript和xml

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有

元素
$("p.test").hide() - 隐藏所有 class="test" 的

元素
$("#test").hide() - 隐藏 id="test" 的元素

jQuery 入口函数:

$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});

JavaScript 入口函数:

window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

Ajax

asynchronous javascript and xml:异步Javascript和xml
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

CSS
JQuery选择器
$('.sel_u option[selected="selected"]').css('color','red')
$('.sel_u option:selected').css('color','red')

JQuery

jquery跟 javascript或html的语法是不一样的。所以,用什么就查什么

可以做什么?
1、可以筛选页面中的所有元素,对其进行各种想做的操作,特别神奇。所看到的任何东西都可以改变其形态。

通过选择器选择出信息后,再通过遍历得到想要的处理效果。

$(function(){

})
等价于
$(document).ready(function(){

})

选择器

select操作

$("#selected_id").change(function(){ }) //为Select添加事件,当选择其中一项时触发

// 获取选择的text与value
. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 这个是所有多个text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值

//设置select选择的Text与Value
$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中


//添加与删除select的optoion项
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
 
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
 
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
 
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Optiona
 
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona
 
内容清空:$("#charCity").empty();
 
1、设置value为pxx的项选中

     $(".selector").val("pxx");
2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

遍历

$.each()

$.each(object,function(index,e){  ...  });    
 
object --> 需要遍历的对象或数组
index  --> 索引    
e      --> 循环的每个元素

例子:

<!DOCTYPE html>
<html>
<body>
<ul id="ul">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>
 
 
<script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
 
	$(function(){
 
		var lis = $("#ul li");
		
		console.debug("方式①:使用普通for循环   ");
		for(var i=0;i<lis.length;i++){
			var li = lis[i];
			var value = $(li).html();
			console.debug(value);
		}
		
		
		console.debug("方式②:使用jquery方式循环");
		$.each(lis,function(index,obj){  //index:索引obj:循环的每个元素
			var value = $(obj).html();
			console.debug(value);
		}); 
		
		console.debug("方式②:使用jquery方式循环");
		lis.each(function(index,obj){
			var value = $(obj).html();
			console.debug(value);
		});
	});
 
</script>

Datatables

datatables.club :中文学习网站
datatable 是JQuery的一个插件

一个基于jQuery的表格插件,可以把一个简单的html表格变得功能强大,搜索或翻页;
1、引入 CSS 样式
2、引入 JS 核心库
3、写上初始化代码
在页面中即可看到强大的表格

在你的项目中使用 DataTables,只需要引入三个文件即可,jQuery库,一个DT的核心js文件和一个DT的css文件
从 datatables的 入门手册 看起,第一步 安装,有个本地模板,之后再进行下一步操作

DOM

网页:HTML与XML的文档编程接口;
list
filter
table
inf
page

JSON

Javascript object notation:一种轻量级的数据交换格式。
一个序列化的对象或数组

1、六个构造字符
[] {} : ,

值: 可以是对象、数组、数字、字符串或三个字面值(true/false/null)
对象: {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}

一些合法的JSON的实例:
{"a": 1, "b": [1, 2, 3]}
[1, 2, "3", {"a": 4}]
3.14
"plain_text"

Data 视频教程

四节 处理模式

客户端处理 (client)
服务器端处理 (ServerSide)

五节 数据源类型 (Data Source Types)

数组 (Arrays[])
对象 (objects{})
实例 (new myclass())

六节:数据源选择

DOM:适合简单报表,字段不多变,复杂表头
HTML5: data-* data-search/data-filter;data-order/data-sort
JavaScript: 数组、对象、实例皆可
Ajax

七节:正交数据

一个单元格数据的四个不同维度:
display
sort
filter
type

数据提供方式:
预定义值:后台格式可以用; HTML5 data-*属性
格式原始格式;

    $(document).ready(function () {
        $('#example').DataTable({
            ajax:"http://localhost:8080/api/objects/format",
            columns:[
                {data:"name"},
                {data:"position"},
                {data:"office"},
                {data:"age"},
                {
                    data:"start_date",
                    render:{
                        _:"display",
                        sort:"timestamp"
                    }
                },
                {data:"salary"}
            ]
        });
    });

八节:render

渲染:把原始数据进行一些列的处理或是格式化的操作;
处理方式:
1、函数:实现复杂的逻辑,用来显示最终数据;
2、字符串

小技巧:
添加一个前缀
格式化时间
字符串的拼接
多个列合并显示
在最后一列追加按钮、添加、修改、删除

九节:ajax

Ajax获取数据,注意两点:
1、需要确认 数据源是否包含表格需要数据;
2、需要确认 每一行数据是否包含每个列要显示数据;

十节:option

1、常用的配置属性;
2、使用默认配置属性简化代码,利用代码

$.extend($.dataTable.default,{
    searching:false,
    ordering:false
});

3、扩展功能; extentions
得确保引用了相应的CSS文件,js文件;

$('#mytable').DataTable({
    select:true
})

十一节:API

组成:
Tables操作表格
Columns操作列
Rows操作行
Cells操作单元格
Core核心方法
Utilities工具方法

访问API,获取api实例

  • $( selector ).DataTable(); D返回的是api实例
  • $( selector ).dataTable().api(); d:小d获取的是jquery
  • new $.fn.dataTable.Api( selector );

chaining:链式调用

多个表:一个实例绑定了多个表格

复数、单数: rows.data(); row().data()

示例:列过滤

十二节:styling 样式

目的:使Datatables插件在项目中达到统一样式

介绍了Datatables的默认样式,提供了对列、单元格、压缩、排序列、鼠标经过等处理;

默认样式;
流行的CSS框架: bootstrap4 foundation jQuery UI

十三节:event 事件

事件是什么?
内部进行通知 达到协同目的;对其相依赖的元素进行操作

监听事件
api实例,直接写事件名称;
jquery,需要在事件的后面追加统一的命名空间 .dt;

移除事件
off; one() 一次性事件处理;

事件冒泡
document是一个树形结构,所以子元素的事件会被父级捕获到,可以在父级上委托监听事件

通过监听事件完成项目中的其他特殊需求;
插件与插件之间如何协同工作;