JavaScript & Ajax & jQuery教程

JavaScript & Ajax & jQuery

TODO: 逐步用原生方法替换jQuery,参考You-Dont-Need-jQuery

基本语法

变量

1
2
3
var $a; // es6以前定义变量,if (true) {var a = 1;} console.log(a); 输出为1
let $b; // es6用于定义跨级作用域本地变量,if (true) {let b = 1;} console.log(b);输出为undefined
const $c; // 定义常量

对象

1
object instanceof constructor // 判断某个对象是否属于某个类

数组

1
2
3
4
5
6
7
8
9
arrA.concat(arrB) // 合并两个数组
arr.indexOf('元素') // 获取某个元素在数组中的下标,查看某个元素是否存在于数组中,没有在返回-1
JSON.stringify(Array) // 将数组转换为JSON格式的字符串
arr.toString(): 数组转字符串,中间会自动加上逗号
arr.join(''): 数组转字符串,分隔符可自定义
arr.push(obj): 给数组添加元素
arr.slice(start, end): 数组分片
$.each($array, function(k, v){}); # 遍历数组
$.inArray('a', $arr): 判断数组是否包含某个元素

字符串

1
2
3
4
5
6
JSON.parse(text) // 将字符串转换为JSON
str.replace(reg, function(s, value){}) // 替换字符串,reg可以是正则表达式
str.indexOf(substring) // 查找子字符串出现的位置,-1表示没找到
string.slice(start, end); // 字符串分片
str.split('#') // 字符串分割,返回分割后的列表
parseInt(数字) // 将数字取整

DOM操作

元素查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 原生元素选择
document.querySelector(".myclass"); // 也可以用jQuery的选择起
document.querySelectorAll('div.abc, div.def');
document.getElementById('xxx');
document.getElementByClassName('myclass');
document.getElementByTagName('p');
ele.parentElement; // 获取父元素
ele.parentNode; // 获取父节点
ele.children // 获取子节点
ele.getElementsByTagName('td'); // 查询子元素
ele.getElementsByClassName('myclass'); // 查询子元素
ele.firstElementChild;
ele.lastElementChild
ele.nextElementSibling; // 获取下一个兄弟节点
ele.previousElementSibling;
// jQuery元素选择
$('p') // 选取标签<p>的所有元素
$('p#intro') // id为intro的所有p元素
$('p.intro') // class为intro的所有p元素
$('p:first') // 选取第一个<p>元素
$('p a:first') // 选取p元素下的第一个a元素
$('p[name=abc]')
$('*') // 所有元素
$(this) // 当前元素
$(this).next() // 获取下一个同级元素
$(this).prev() // 获取上一个统计元素
$(this).parent() // 获取父元素
$(this).children() // 获取子元素
$(this).nextAll('cl') // 获取指定元素的所有指定的同级元素
$('p').find('input') // 查找input下的所有input元素
$('input:checked') // 查找所有checked为true的checkbox的input元素
document.getElementById('test:abc') // 有特殊字符的元素的查找,jquery往往无法处理过来

获取元素内容

1
2
3
4
5
6
7
8
9
10
11
12
// js原生方法
ele.attributes; // 一个(name, value)的数组
ele.getAttribute('class');
ele.setAttribute('class', 'highlight');
ele.hasAttribute('class');
ele.removeAttribute('class');
ele.value; // 获取元素内容
// jQuery方法
$('#check').prop('checked') // 获取checkbox是否被check了,不用给你用attr
$('div').height() // 获取元素高度
$('div').height(20) // 设置元素高度

编辑元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// js原生
option = document.createElement('option'); // 创建元素
option.setAttribute('value', 'value1'); // 设置元素属性
text = document.createTextNode('ppp'); // 创建内容
ele.appendChild(text); // 添加子元素
ele.removeChild(text);
ele.replaceChild(el1, el2); // 替换子元素
selection.innerHtml = '<option>a</option'; // 修改内部html内容
parentElement.insertBefore(newElement, referenceElement); // 插入子元素
// 添加元素
html('') // 修改内部的html内容
append() // 在被选元素的结尾插入内容
prepend() // 在被选元素的开头插入内容
after() // 在被选元素之后插入内容
before() // 在被选元素之前插入内容
remove() // 删除当前元素
empty() // 清空当前元素的子元素
// 属性更改
addClass('') // 给元素添加类
removeClass('') // 给元素移除某个类
$('p').css('color', 'red') // 修改CSS属性
$('button').prop('disabled', true) // 设置按钮不可点击disabled
$('p').hide() // 隐藏元素
$('p').show() // 显示元素
// video标签控制
myVideo.play() // 开始播放
myVideo.pause() // 暂停播放

元素事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// js原生事件
ele.onchange = function () {};
ele.onchange = funciton () {};
ele.addEventListener('click', func () {});
ele.removeEventListener('change', func () {});
// jQuery事件列表
change() // 当元素发生改变时触发,常用于input、select
blur() // 元素失去焦点时触发
click // 鼠标点击
dbclick // 鼠标双击
focus() // 元素获得焦点时触发
hover // 模拟光标悬停事件
mouseenter // 鼠标穿过元素
mousedown // 鼠标移动到元素上方,并按下鼠标按键
mousesleave // 鼠标离开元素
mouseup // 在元素上松开鼠标按钮
resize() // 大小调整,一般是$(window).resize(function(){})
// 事件的触发
$('a').trigger('click') // 触发a标签的click事件
$('#myModal').modal('show') // bootstrap中modal的触发
// 事件的订阅
$('p').bind('click', function(){}) // 用bind进行事件的绑定,即使是之后生成的元素也能与事件绑定

页面属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
window.cookie // 当前cookie
window.location.href // 获取当前的url
window.lcoation.href = 'url' // 跳转到某个url
document.referrer // 获取当前页面的referer,是一个read only属性,不可以在ajax里面改变,改不了,md
location.reload() // 刷新当前页面
// 获取url参数的方法,来自Stack Overflow
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
getUrlParameter('page')
// ready()方法
$(document).ready(function); // 当DOM已经加载,并且页面已经完全呈现时,会发生ready事件。

特殊函数

1
2
3
t = setInterval("show()",3000) // 每隔3秒执行该函数
clearInterval(t) // 清楚计时器
debugger; // 代码加入这一行,浏览器会自动断点进行调试,这对于自动编译的开发环境非常实用

Ajax

最普遍的用法:

1
2
3
4
5
6
7
8
9
10
$.ajax({
url: 'url',
dataType: 'json',
type: 'POST',
data: data,
error: function(re){
},
success: function(re){
}
});

直接发送POST请求

1
2
3
4
5
$.post('some.php', {name: 'haofly'})
.done(function(msg){ })
.fail(function(xhr, status, error) {
// error handling
});

推荐阅读

TroubleShooting

  • 根据select的选项不同跳转到不同的页面:
    <select onchange="location.href=this.options[this.selectedIndex].value;">

  • Ajax请求无论是GET还是POST都突然变成了OPTIONS请求
    可能是因为把本地代码提交到服务器时,发生了跨域请求错误,url里面写的是本地的端口地址,这时候只需要修改本地的端口地址修改为相对于服务器的本地地址即可

  • 停止js的冒泡
    window.event? window.event.cancelBubble = true : evt.stopPropagation();

  • select标签disabled掉过后表单提交不上去那个字段: 我也不知道什么原因,但是确实是这样的,可以用stackoverflow里的方法:

    1
    2
    3
    4
    5
    <select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
    </select>
    <input type="hidden" name="myselect" value="myselectedvalue" /> <!--这里用js来控制或者说我现在的需求就是已经有值过后不然更改,那么直接写死这里的value就行了嘛-->
  • 禁用radion标签

    1
    2
    <input type="radio" name="foo" value="Y" checked>
    <input type="radio" name="foo" value="N" disabled>
  • 在Laravel中如果出现TokenMismatchException,有可能是Laravel的CSRF机制造成的,解决办法参见http://www.golaravel.com/laravel/docs/5.0/routing/,即 首先在meta中添加

    1
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    然后设置ajaxSetup:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script type="text/javascript">
    $(function(){
    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    $('#publish').bind('click', function(){ // ajax事件
    $.ajax({
    。。。
    });
    </script>
  • Laravel 5 要使用Input获取输入的信息,必须先use Input,看来Laravel 5 对命名空间的管理更加严格了

  • Ajax请求总是执行error部分代码,原因可能是返回数据的格式不对,一定要返回dataType所规定的数据格式
    上传文件,需要特殊的几个参数和变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $('input#uploadh').bind('change', function(){
    var f = this.files;
    var formdata = new FormData();
    formdata.append('image', f[0]);
    $.ajax({
    url: "{{ url('uploadimg') }}",
    type: "POST",
    data: formdata,
    dataType: "json",
    processData: false,
    contentType: false,
    success: function(data){
    alert('成功');
    }
    });
    });

    如果是通过一个button而不是input提交的话,那么可以这样使用.需要注意的是,只能一个文件一个文件地append,后台才能通过request.FILES看到

    1
    2
    3
    4
    5
    $('button#uploadFile').on('click',function(){
    var f = $('input#uploadFile')[0].files;
    var formadata = new FormData();
    formdata.append('image', f[0]);
    });

    如果要在Ajax中读取其它Json文件,可以使用$.getJson方法,但是由于这个方法使用的是同步ajax的方式,而且即使是在其回调函数中也无法将返回值赋值到外部变量去,所以可以直接用ajax请求来取代它:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var data = [];
    $.ajax({
    url: 'port.json',
    async: false,
    dataType: 'json',
    success: function (json) {
    data = json.一个结点名称;
    alert(data);
    }
    });
  • 获取当前元素的父元素,使用target,但有时候也可以不用target…我也是醉了 获取同级的元素:prev()和next()

    $('button#post').bind('click', function(ele){
    $.ajax({
        url: port,
        type: "POST",
        dataType: "json",
        error: function(error){
            alert('出错啦');
        },
        success: function(data){
            alert($(ele.target).parent().parent().attr('id'));
        }
    });
    

    });

  • 在ajax的url里面,默认是相对于当前地址的url,例如

    当前地址是http://localhost/a,那么url: 'publish'表示http://localhost/publish
    当前地址是http://localhost/a/b,那么url: 'publish'表示http://localhost/hehe/publish
    只有写为url: '/publish'才表示相对于根域名,即http://localhost/publish
    
  • 给生成的元素动态绑定事件:SegmentFault说直接用.on方法可以实现1.7之前.live的动态绑定功能,但是我就是不行,这里使用.on的另外一种方法,绑定到document上去就行了,原理就是将事件委托给父元素,然后由父元素绑定给子元素:

    $(document).on('click', 'button', function(){
        alert('dg');
    });
    
  • 绑定回车事件:

    $(document).on('keypress', 'input', function(event){
    if(event.keyCode == '13'){
        alert('success');
    });
    
  • 提交表单时,如果想增加额外的参数,可以添加动态添加一个隐藏标签:

    1
    2
    var input = $("<input>").attr("type", "hidden").attr("name", "字段名").val("value");
    $('#form1').append($(input));
  • <select>元素的选择<option>事件是change,而获得所选择元素使用的是val(),默认被选择:<option selected="true" value="xxx">xxx</option>,获取文本内容用text()

  • 避免表单回车自动提交:有时候想在表单提交前进行一些操作,但又不想在回车时自动提交表单(当只有input的时候,会强制提交),这时候只需要在button的回车事件中添加return false即可

  • 无法获取iframe里面的内容: 一个iframe表示一个窗口,并且还对应不同的域名,默认情况,放任一个网页,脚本都默认在最上层的窗口上面,在谷歌浏览器的审查元素视图下的Console的左上角可以选择定位到哪个iframe,如果是爬虫或者油猴脚本,要注意对应iframe的url。

haofly wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: haofly
  • 本文链接: https://haofly.net/js/
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!