第9章 jQuery#

1
// 查找<div id="abc">:
2
let div = $('#abc');

1
[<div id="abc">...</div>]

1
[]

1
let div = $('#abc'); // jQuery对象
2
let divDom = div.get(0); // 假设存在div，获取第1个DOM元素
3
let another = $(divDom); // 重新把DOM包装为jQuery对象

1
let ps = $('p'); // 返回所有<p>节点
2
ps.length; // 数一数页面有多少个<p>节点

1
let a = $('.red'); // 所有节点包含`class="red"`都将返回
2
// 例如:
3
// <div class="red">...</div>
4
// <p class="green red">...</p>

1
let a = $('.red.green'); // 注意没有空格！
2
// 符合条件的节点：
3
// <div class="red green">...</div>
4
// <div class="blue green red">...</div>

1
let email = $('[name=email]'); // 找出<??? name="email">
2
let passwordInput = $('[type=password]'); // 找出<??? type="password">
3
let a = $('[items="A B"]'); // 找出<??? items="A B">

1
let icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
2
// 例如: name="icon-1", name="icon-2"
3
let names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
4
// 例如: name="startswith", name="endswith"

1
let icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
2
// 例如: class="icon-clock", class="abc icon-home"

1
let emailInput = $('input[name=email]'); // 不会找出<div name="email">

1
let tr = $('tr.red'); // 找出<tr class="red ...">...</tr>

1
$('p,div'); // 把<p>和<div>都选出来
2
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

1
<!-- HTML结构 -->
2
<div id="test-jquery">
3
    <p id="para-1" class="color-red">JavaScript</p>
4
    <p id="para-2" class="color-green">Haskell</p>
5
    <p class="color-red color-green">Erlang</p>
6
    <p name="name" class="color-black">Python</p>
7
    <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
8
        <legend>注册新用户</legend>
9
        <fieldset>
10
            <p><label>名字: <input name="name"></label></p>
11
            <p><label>邮件: <input name="email"></label></p>
12
            <p><label>口令: <input name="password" type="password"></label></p>
13
            <p><button type="submit">注册</button></p>
14
        </fieldset>
15
    </form>
16
</div>

1
let selected = null;
2

3
selected = ???;
4

5
// 高亮结果:
6
if (!(selected instanceof jQuery)) {
7
    return console.log('不是有效的jQuery对象!');
8
}
9
$('#test-jquery').find('*').css('background-color', '');
10
selected.css('background-color', '#ff8000');

1
<!-- HTML结构 -->
2
<ul class="lang">
3
    <li class="js dy">JavaScript</li>
4
    <li class="dy">Python</li>
5
    <li id="swift">Swift</li>
6
    <li class="dy">Scheme</li>
7
    <li name="haskell">Haskell</li>
8
</ul>

1
let ul = $('ul.lang'); // 获得<ul>
2
let dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
3
let swf = ul.find('#swift'); // 获得Swift
4
let hsk = ul.find('[name=haskell]'); // 获得Haskell

1
let swf = $('#swift'); // 获得Swift
2
let parent = swf.parent(); // 获得Swift的上层节点<ul>
3
let a = swf.parent('.red'); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象

1
let swift = $('#swift');
2

3
swift.next(); // Scheme
4
swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]
5

6
swift.prev(); // Python
7
swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy

1
<!-- HTML结构 -->
2
<ul id="test-ul">
3
    <li class="js">JavaScript</li>
4
    <li name="book">Java &amp; JavaScript</li>
5
</ul>

1
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
2
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

1
let j1 = $('#test-ul li.js');
2
let j2 = $('#test-ul li[name=book]');
3

4
j1.html('<span style="color: #c00">JavaScript</span>');
5
j2.text('JavaScript & ECMAScript');

1
$('#test-ul li').text('JS'); // 是不是两个节点都变成了JS？

1
// 如果不存在id为not-exist的节点：
2
$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello'

1
<!-- HTML结构 -->
2
<ul id="test-css">
3
    <li class="lang dy"><span>JavaScript</span></li>
4
    <li class="lang"><span>Java</span></li>
5
    <li class="lang dy"><span>Python</span></li>
6
    <li class="lang"><span>Swift</span></li>
7
    <li class="lang dy"><span>Scheme</span></li>
8
</ul>

1
$('#test-css li.dy>span').css('background-color', '#ff0').css('color', '#c00');

1
let div = $('#test-div');
2
div.css('color'); // '#000033', 获取CSS属性
3
div.css('color', '#336699'); // 设置CSS属性
4
div.css('color', ''); // 清除CSS属性

1
let div = $('#test-div');
2
div.hasClass('highlight'); // false， class是否包含highlight
3
div.addClass('highlight'); // 添加highlight这个class
4
div.removeClass('highlight'); // 删除highlight这个class

1
<!-- HTML结构 -->
2
<style>
3
.highlight {
4
    color: #c00;
5
    background-color: #ff0;
6
}
7
</style>
8

9
<div id="test-highlight-css">
10
    <ul>
11
        <li class="py"><span>Python</span></li>
12
        <li class="js"><span>JavaScript</span></li>
13
        <li class="sw"><span>Swift</span></li>
14
        <li class="hk"><span>Haskell</span></li>
15
    </ul>
16
</div>

1
let div = $('#test-highlight-css');
2
// TODO:

1
let a = $('a[target=_blank]');
2
a.hide(); // 隐藏
3
a.show(); // 显示

1
// 浏览器可视窗口大小:
2
$(window).width(); // 800
3
$(window).height(); // 600
4

5
// HTML文档大小:
6
$(document).width(); // 800
7
$(document).height(); // 3500
8

9
// 某个div的大小:
10
let div = $('#test-div');
11
div.width(); // 600
12
div.height(); // 300
13
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
14
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

1
// <div id="test-div" name="Test" start="1">...</div>
2
let div = $('#test-div');
3
div.attr('data'); // undefined, 属性不存在
4
div.attr('name'); // 'Test'
5
div.attr('name', 'Hello'); // div的name属性变为'Hello'
6
div.removeAttr('name'); // 删除name属性
7
div.attr('name'); // undefined

1
<input id="test-radio" type="radio" name="test" checked value="1">

1
<input id="test-radio" type="radio" name="test" checked="checked" value="1">

1
let radio = $('#test-radio');
2
radio.attr('checked'); // 'checked'
3
radio.prop('checked'); // true

1
let radio = $('#test-radio');
2
radio.is(':checked'); // true

1
/*
2
    <input id="test-input" name="email" value="test">
3
    <select id="test-select" name="city">
4
        <option value="BJ" selected>Beijing</option>
5
        <option value="SH">Shanghai</option>
6
        <option value="SZ">Shenzhen</option>
7
    </select>
8
    <textarea id="test-textarea">Hello</textarea>
9
*/
10
let
11
    input = $('#test-input'),
12
    select = $('#test-select'),
13
    textarea = $('#test-textarea');
14

15
input.val(); // 'test'
16
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
17

18
select.val(); // 'BJ'
19
select.val('SH'); // 选择框已变为Shanghai
20

21
textarea.val(); // 'Hello'
22
textarea.val('Hi'); // 文本区域已更新为'Hi'

1
<html>
2
<head>
3
    <script>
4
        // 代码有误:
5
        $('#testForm').on('submit', function () {
6
            alert('submit!');
7
        });
8
    </script>
9
</head>
10
<body>
11
    <form id="testForm">
12
        ...
13
    </form>
14
</body>

1
<html>
2
<head>
3
    <script>
4
        $(document).on('ready', function () {
5
            $('#testForm).on('submit', function () {
6
                alert('submit!');
7
            });
8
        });
9
    </script>
10
</head>
11
<body>
12
    <form id="testForm">
13
        ...
14
    </form>
15
</body>

1
$(document).ready(function () {
2
    // on('submit', function)也可以简化:
3
    $('#testForm).submit(function () {
4
        alert('submit!');
5
    });
6
});

1
$(function () {
2
    // init...
3
});

1
$(function () {
2
    console.log('init A...');
3
});
4
$(function () {
5
    console.log('init B...');
6
});
7
$(function () {
8
    console.log('init C...');
9
});

1
$(function () {
2
    $('#testMouseMoveDiv').mousemove(function (e) {
3
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
4
    });
5
});

1
function hello() {
2
    alert('hello!');
3
}
4

5
a.click(hello); // 绑定事件
6

7
// 10秒钟后解除绑定:
8
setTimeout(function () {
9
    a.off('click', hello);
10
}, 10000);

1
// 绑定事件:
2
a.click(function () {
3
    alert('hello!');
4
});
5

6
// 解除绑定:
7
a.off('click', function () {
8
    alert('hello!');
9
});

1
let input = $('#test-input');
2
input.change(function () {
3
    console.log('changed...');
4
});

1
let input = $('#test-input');
2
input.val('change it!'); // 无法触发change事件

1
let input = $('#test-input');
2
input.val('change it!');
3
input.change(); // 触发change事件

1
<!-- HTML结构 -->
2
<form id="test-form" action="test">
3
    <legend>请选择想要学习的编程语言：</legend>
4
    <fieldset>
5
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
6
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
7
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
8
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
9
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
10
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
11
    <p><button type="submit">Submit</button></p>
12
    </fieldset>
13
</form>

1
let
2
    form = $('#test-form'),
3
    langs = form.find('[name=lang]'),
4
    selectAll = form.find('label.selectAll :checkbox'),
5
    selectAllLabel = form.find('label.selectAll span.selectAll'),
6
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
7
    invertSelect = form.find('a.invertSelect');
8

9
// 重置初始化状态:
10
form.find('*').show().off();
11
form.find(':checkbox').prop('checked', false).off();
12
deselectAllLabel.hide();
13
// 拦截form提交事件:
14
form.off().submit(function (e) {
15
    e.preventDefault();
16
    alert(form.serialize());
17
});
18
// TODO:绑定事件
19

20
// 测试:
21
console.log('请测试功能是否正常。');

1
let div = $('#test-show-hide');
2
div.hide(3000); // 在3秒钟内逐渐消失

1
let div = $('#test-show-hide');
2
div.show('slow'); // 在0.6秒钟内逐渐显示

1
let div = $('#test-slide');
2
div.slideUp(3000); // 在3秒钟内逐渐向上消失

1
let div = $('#test-fade');
2
div.fadeOut('slow'); // 在0.6秒内淡出

1
let div = $('#test-animate');
2
div.animate({
3
    opacity: 0.25,
4
    width: '256px',
5
    height: '256px'
6
}, 3000); // 在3秒钟内CSS过渡到设定值

1
let div = $('#test-animate');
2
div.animate({
3
    opacity: 0.25,
4
    width: '256px',
5
    height: '256px'
6
}, 3000, function () {
7
    console.log('动画已结束');
8
    // 恢复至初始状态:
9
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
10
});

1
let div = $('#test-animates');
2
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
3
div.slideDown(2000)
4
   .delay(1000)
5
   .animate({
6
       width: '256px',
7
       height: '256px'
8
   }, 2000)
9
   .delay(1000)
10
   .animate({
11
       width: '128px',
12
       height: '128px'
13
   }, 2000);
14
}
15
</script>

1
function deleteFirstTR() {
2
    let tr = $('#test-table>tbody>tr:visible').first();
3
    // TODO:
4
    tr.remove();
5
}
6

7
deleteFirstTR();