JavaScript学习笔记[2]
- 使用的是廖雪峰JavaScript教程。
jQuery
-
选择器
- id查找,没有找到返回空数组,使用#
// 查找<div id="abc">: var div = $('#abc');- tag查找
var ps = $('p'); // 返回所有<p>节点 ps.length; // 数一数页面有多少个<p>节点- class查找，使用.
var a = $('.red.green'); // 注意没有空格！ // 符合条件的节点： // <div class="red green">...</div> // <div class="blue green red">...</div>- 属性查找
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM // 例如: name="icon-1", name="icon-2" var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM // 例如: name="startswith", name="endswith"- 组合查找
var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>- 多项选择器,用,组合起来一块选
$('p,div'); // 把<p>和<div>都选出来 $('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来 -
层级选择器
- 样本
<!-- HTML结构 --> <div class="testing"> <ul class="lang"> <li class="lang-javascript">JavaScript</li> <li class="lang-python">Python</li> <li class="lang-lua">Lua</li> </ul> </div>- $('ancestor descendant') 层级之间用空格隔开
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>] $('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]- $('parent>child') 子选择器。child必须是parent的直属子节点
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>] $('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系- filter 过滤器
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点 $('ul.lang li:first-child'); // 仅选出JavaScript $('ul.lang li:last-child'); // 仅选出Lua $('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始 $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素 $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素- 表单相关
-
:input：可以选择input，textarea，select和button；
-
:file：可以选择input type="file"，和input[type=file]一样；
-
:checkbox：可以选择复选框，和input[type=checkbox]一样；
-
:radio：可以选择单选框，和input[type=radio]一样；
-
:focus：可以选择当前输入焦点的元素，例如把光标放到一个input上，用$('input:focus')就可以选出；
-
:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；
-
:enabled：可以选择可以正常输入的input、select
等，也就是没有灰掉的输入； -
:disabled：和:enabled正好相反，选择那些不能输入的。
-
-
查找和过滤
- find(),parent(),next(),prev()
- 用jQuery获得JSON字符串
<form id="test-form" action="#0" onsubmit="return false;"> <p><label>Name: <input name="name"></label></p> <p><label>Email: <input name="email"></label></p> <p><label>Password: <input name="password" type="password"></label></p> <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p> <p><label>City: <select name="city"> <option value="BJ" selected>Beijing</option> <option value="SH">Shanghai</option> <option value="CD">Chengdu</option> <option value="XM">Xiamen</option> </select></label></p> <p><button type="submit">Submit</button></p> </form> var json = null; var obj = {}; $('#test-form :input:not(button)') .map(function() { if(this.name==='gender' && !this.checked) { return; } obj[this.name] = this.value; }); json = JSON.stringify(obj); // 显示结果: if (typeof(json) === 'string') { alert(json); } else { alert('json变量不是string!'); } -
操作DOM
-
修改Text和HTML,text(),html()
-
修改CSS,css(),addClass(),hasClass(),removeClass()
-
显示和隐藏DOM,hide(),show()
-
获取DOM,prop(),attr(),is() 对checked值的处理
// <div id="test-div" name="Test" start="1">...</div> var div = $('#test-div'); div.attr('data'); // undefined, 属性不存在 div.attr('name'); // 'Test' div.attr('name', 'Hello'); // div的name属性变为'Hello' div.removeAttr('name'); // 删除name属性 div.attr('name'); // undefined -
-
操作表单,val()
-
添加DOM,append(),prepend(),同级节点可以用after(),before()
-
删除节点，remove()
-
-
鼠标事件
- click: 鼠标单击时触发；
- dblclick：鼠标双击时触发；
- mouseenter：鼠标进入时触发；
- mouseleave：鼠标移出时触发；
- mousemove：鼠标在DOM内部移动时触发；
- hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
-
键盘事件
- 键盘事件仅作用在当前焦点的DOM上，通常是input和textarea。
- keydown：键盘按下时触发；
- keyup：键盘松开时触发；
- keypress：按一次键后触发。
-
其他事件
- focus：当DOM获得焦点时触发；
- blur：当DOM失去焦点时触发；
- change：当input、select或textarea的内容改变时触发；
- submit：当
- ready：当页面被载入并且DOM树完成初始化后触发。
-
-
事件参数
-
取消绑定
function hello() {
alert('hello!');
}
a.click(hello); // 绑定事件
// 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
-
事件触发条件 change()
-
全选反选
<!-- HTML结构 -->
<form id="test-form" action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
var
form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
selectAllLabel = form.find('label.selectAll span.selectAll'),
deselectAllLabel = form.find('label.selectAll span.deselectAll'),
invertSelect = form.find('a.invertSelect');
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
function refresh() {
let full = (langs.filter(':checked').length == langs.length);
if (full) {
selectAllLabel.hide();
deselectAllLabel.show();
selectAll.prop('checked', true);
} else {
selectAllLabel.show();
deselectAllLabel.hide();
selectAll.prop('checked', false);
}
}
selectAll.on('click', function () {
langs.prop('checked', selectAll.prop('checked'));
refresh();
});
invertSelect.on('click', function () {
let c1 = langs.filter(':checked');
langs.prop('checked', true);
c1.prop('checked', false);
refresh();
});
-
动画
- show(),hide(),toggle()
- slideUp(),slideDown(),slideToggle()
- fadeIn(),fadeOut(),fadeToggle()
- animate()
- 串行动画，delay()
-
jQuery, $.fn, $.extend(target,obj1,obj2,...)，它把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高：
$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
$.fn.highlight2 = function (options) {
// 要考虑到各种情况:
// options为undefined
// options只有部分key
var bgcolor = options && options.backgroundColor || '#fffceb';
var color = options && options.color || '#d85030';
this.css('backgroundColor', bgcolor).css('color', color);
return this;
}
$.fn.highlight = function (options) {
// 合并默认值和用户设定值:
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
// 设定默认值:
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
}
- 特定元素的扩展，external扩展
$.fn.external = function () {
// return返回的each()返回结果，支持链式调用:
return this.filter('a').each(function () {
// 注意: each()内部的回调函数的this绑定为DOM本身!
var a = $(this);
var url = a.attr('href');
if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
a.attr('href', '#0')
.removeAttr('target')
.append(' <i class="uk-icon-external-link"></i>')
.click(function () {
if(confirm('你确定要前往' + url + '？')) {
window.open(url);
}
});
}
});
}