zoukankan      html  css  js  c++  java
  • jquery datatable 粗犷

    需要学习:
    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是一个树形结构,所以子元素的事件会被父级捕获到,可以在父级上委托监听事件

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

  • 相关阅读:
    383. Ransom Note
    598. Range Addition II
    453. Minimum Moves to Equal Array Elements
    492. Construct the Rectangle
    171. Excel Sheet Column Number
    697. Degree of an Array
    665. Nondecreasing Array
    视频网站使用H265编码能提高视频清晰度吗?
    现阶段的语音视频通话SDK需要解决哪些问题?
    企业远程高清会议平台视频会议系统在手机端使用的必备要求有哪些?
  • 原文地址:https://www.cnblogs.com/qev211/p/15420606.html
Copyright © 2011-2022 走看看