js+jquery 笔记

Posted 刘海洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js+jquery 笔记相关的知识,希望对你有一定的参考价值。

  本人也不知道该怎么写javascript笔记,本人就拿一个例子来写,这个例子就从算法所说起吧!

  例如:

    一个整数的数组 [122,393,664,935,1386,1675,1928,2199,2470,2741,3012],假设给定一个整数变量x,我们要找出数组那个成员与x的值最接近。

  javascript sort()方法

  语法:

     1 arrayObject.sort(sortby) 

  sortby(可选。规定是排序顺序。必须是函数)。

  javascript push()方法

  语法:

     1 arrayObject.push(newelement1,newelement2,……,newelementX); 

  newelement1(必须。要添加到数组的第一个元素); 

 1 var arr =  [122,393,664,935,1386,1675,1928,2199,2470,2741,3012];
 2 var num = 500;
 3 arr.push(num);
 4 返回结果:12
 5 
 6 arr.sort(function(a,b){return a-b});
 7 返回结果:[122, 393, 500, 664, 935, 1386, 1675, 1928, 2199, 2470, 2741, 3012]
 8 
 9 var index = arr.indexOf(num);
10 index
11 返回结果:2
12 
13 var result = num-arr[index-1]<arr[index+num]-num?arr[index-1]:
14 arr[index+1];
15 result
16 返回结果:664

   jquery开始头是这样写的:

1 $function({//写执行的方法});
2 //写可以这样写
3 $(document).ready.function({//写执行的方法});

  开头咋写都可以,只要能实现你想要的结果就行。

  下面是上传图片js判断部分代码:

 1 $(‘#file_en_upload‘).on(‘click‘, function(){
 2                 var lang      = $(this).attr(‘data-lang‘);
 3                 var file_data = $(‘#thumbnails_‘+lang).prop(‘files‘)[0];
 4                 if( parseInt(file_data.size)<=512000 ){
 5                     var fu = $(this);
 6                     fu.text(‘上传中...‘);
 7                     fu.attr(‘disabled‘,‘disabled‘);
 8                     var form_data = new FormData();
 9                     form_data.append(‘id‘, ‘WU_FILE_0‘);
10                     form_data.append(‘name‘, file_data.name);
11                     form_data.append(‘type‘, file_data.type);
12                     form_data.append(‘lastModifiedDate‘, file_data.lastModifiedDate);
13                     form_data.append(‘size‘, file_data.size);
14                     form_data.append(‘upfile‘, file_data);
15                     $.ajax({
16                      url: ‘http://127.0.0.1/assets/ueditor/php/controller.php?action=uploadimage&encode=utf-8‘,
17                      type: ‘POST‘,
18                      dataType: ‘json‘,
19                      processData: false,
20                      contentType: false,
21                      cache: false,
22                      data: form_data
23                     }).success(function(json){
24                         if(json.state === ‘SUCCESS‘){
25                             $(‘#uploaded_‘+lang).prop(‘href‘ ,json.url);
26                             $(‘#uploaded_‘+lang).attr(‘data-url‘ , json.url);
27                             $(‘#uploaded_‘+lang).css({‘display‘ : ‘inline‘});
28                             fu.text(‘上传成功‘);
29                             setTimeout(function(){
30                                 fu.css({‘display‘ : ‘none‘});
31                                 fu.removeAttr(‘disabled‘);
32                                 fu.text(‘点击上传‘);
33                             },1500);
34                         }else{
35                             fu.removeAttr(‘disabled‘);
36                             fu.text(‘点击上传‘);
37                             alert(‘产品图片上传失败,原因:‘+json.state);
38                         }
39                     });
40                 }else{
41                     alert(‘产品图片上传失败,原因:图片大小超过512KB限制‘);
42                 }
43             });

       #file_en_upload自定义的按钮。

  自定义百度编辑器和初始化编辑器和加载编辑器哦~

 1 var toolbars = [
 2                 [
 3                     ‘preview‘, //预览
 4                     ‘undo‘, //撤销
 5                     ‘redo‘, //重做
 6                     ‘selectall‘, //全选
 7                     ‘pasteplain‘, //纯文本粘贴模式
 8                     ‘removeformat‘, //清除格式
 9                     ‘formatmatch‘, //格式刷
10                     ‘searchreplace‘, //查询替换
11                     ‘|‘,
12                     ‘forecolor‘, //字体颜色
13                     ‘backcolor‘, //背景色
14                     ‘bold‘, //加粗
15                     ‘italic‘, //斜体
16                     ‘underline‘, //下划线
17                     ‘strikethrough‘, //删除线
18                     ‘subscript‘, //下标
19                     ‘superscript‘, //上标
20                     ‘fontsize‘, //字号
21                     ‘paragraph‘, //段落格式
22                     ‘|‘,
23                     ‘indent‘, //首行缩进
24                     ‘justifyleft‘, //居左对齐
25                     ‘justifyright‘, //居右对齐
26                     ‘justifycenter‘, //居中对齐
27                     ‘justifyjustify‘, //两端对齐
28                 ],[
29                     ‘source‘,
30                     ‘|‘,
31                     ‘horizontal‘, //分隔线
32                     ‘spechars‘, //特殊字符
33                     ‘anchor‘, //锚点
34                     ‘insertimage‘, //单图上传
35                     ‘insertvideo‘, //视频
36                     ‘attachment‘, //附件
37                     ‘link‘, //超链接
38                     ‘unlink‘, //取消链接
39                     ‘insertorderedlist‘, //有序列表
40                     ‘insertunorderedlist‘, //无序列表
41                     ‘insertparagraphbeforetable‘, //"表格前插入行"
42                     ‘|‘,
43                     ‘inserttable‘, //插入表格
44                     ‘edittable‘, //表格属性
45                     ‘edittd‘, //单元格属性
46                     ‘insertrow‘, //前插入行
47                     ‘insertcol‘, //前插入列
48                     ‘mergeright‘, //右合并单元格
49                     ‘mergedown‘, //下合并单元格
50                     ‘deleterow‘, //删除行
51                     ‘deletecol‘, //删除列
52                     ‘splittorows‘, //拆分成行
53                     ‘splittocols‘, //拆分成列
54                     ‘splittocells‘, //完全拆分单元格
55                     ‘deletecaption‘, //删除表格标题
56                     ‘inserttitle‘, //插入标题
57                     ‘mergecells‘, //合并多个单元格
58                     ‘deletetable‘ //删除表格
59                 ]
60             ];
61 
62             // var ue_height = $(window).height()-$(‘#admin_header‘).height()-$(‘#myTabs‘).height()-200;
63             //初始化编辑器
64             var ue_cf = {
65                 // initialFrameHeight: ue_height,
66                 autoHeightEnabled: true,
67                 autoFloatEnabled: true,
68                 elementPathEnabled: false,
69                 enableAutoSave: false,
70                 toolbars: toolbars,
71                 serverUrl: ‘/ueditor/ueditor/php/controller.php‘
72             };
73             //加载编辑器
74             var ue_en = UE.getEditor(‘container‘, ue_cf),
75                 ok_en = false;
76             ue_en.ready(function(){
77                 ue_en.setContent(‘<?php echo str_replace("‘", "\‘", $content);?>‘);
78                 ok_en = true;
79                 $(‘#msg‘).text(‘‘);
80             });

 

下面是ajax+jquery提交

 1 $(‘#save‘).on(‘click‘, function(){
 2                 var title = $.trim($(‘#title‘).val()),
 3                     biaoqian = $.trim($(‘#biaoqian‘).val()),
 4                     container = $.trim($(‘#container‘).val());
 5                 refresh();
 6                 $.ajax({
 7                     type: ‘POST‘,
 8                     url: ‘/index.php/back/compiler/news_save?t=‘+new Date().getTime(),
 9                     dataType: ‘json‘,
10                     cache: false,
11                     data: {
12                         ‘title‘: title,
13                         ‘baioqian‘: biaoqian,
14                         ‘content‘: ue_en.getContent()
15                     }
16                 });
17                 function refresh(){
18                     alert(‘保存成功‘);
19                     window.loacation.herf=‘/index.php/back/compiler/news‘;
20                 }
21             });
22         });
23 //#save是<a href="javascript:void(0);" id="save" class="label label-primary">保存</a>

  ps:jquery+ajax 还没有写完。


以上是关于js+jquery 笔记的主要内容,如果未能解决你的问题,请参考以下文章

Xitrum学习笔记08 - JavaScript and JSON

Chrome-Devtools代码片段中的多个JS库

Javascript代码片段在drupal中不起作用

JQuery学习笔记

jQuery学习笔记

JQuery学习笔记