老司机Studio 第六章

// demo1

function foo() { console.log('function foo') }
var foo = 20;
console.log(foo); // 20

console.log(foo); // function foo
function foo() { console.log('function foo') }
var foo = 20;

//顺序
function foo() { console.log('function foo') } // 先检查函数定义
var foo; // 再检查变量定义，如果存在则跳过
foo = 20;
console.log(foo);

function foo() { console.log('function foo') } // 先检查函数定义
var foo; // 再检查变量定义，如果存在则跳过
console.log(foo);
foo = 20;

// demo2

function test() {
    console.log(a);
    console.log(foo());
    
    var a = 1;
    function foo() {
        return 2;
    }
}
test();

//
function foo() {return 2;}
var a;
console.log(a);
console.log(foo());
a = 1;

// demo3

function test() {
    console.log(foo);
    console.log(bar);
    var foo = 'Hello';
    console.log(foo);
    var bar = function () { // 函数的赋值
        return 'world';
    }

    function foo() { // 函数的声明
        return 'hello';
    }
}
test();

// 
function foo() { return 'hello';} //函数的声明
var foo; // 变量声明
var bar; // 变量声明
console.log(foo);
console.log(bar);
foo = 'Hello';
console.log(foo);
bar = function () {return 'world';}

<html>

<body>
    <p>To do List</p>
    <div>
        <input type="text" name="" id="text" />
        <button onclick="add()">add</button>
        <button onclick="remove()">remove</button>
    </div>
    <div id="list" style="margin-top: 10px;">
        
    </div>
</body>

<script type="text/javascript">
    
    let toDoList = document.getElementById('list')

    function add(){
        let buttonText = document.getElementById('text').value;
        let newItem = document.createElement('div');
        newItem.innerHTML = `<span class="item-content">${buttonText}</span><input type="checkbox" class="item-checkbox"/>`
        toDoList.appendChild(newItem);
    }

    function remove(){
        let allItems = document.querySelectorAll('.item-checkbox');
        let item, toRemove=[];
        for (item of allItems){
            if (item.checked) toDoList.removeChild(item.parentNode);
        }
    }
    
</script>

<style type="text/css">
    .item-content{
        line-height: 1.7;
        border: 1px solid #888;
        padding: 0 10px;
        width: 200px;
        display: inline-block;
        margin-right: 4px;
        margin-bottom: 4px;
    }
</style>
</html>

jquery

jquery简单来讲就是一系列原生接口的封装，它是一个库(library)，而非框架(framework)。
jquery的思路和原生思路类似，都是DOM驱动。在使用jquery后原生的语法仍可使用。

最基本的符号就是$，$是一个函数对象。

和CSS3通用的选择器
$()
表单元素选择
$(':input') 可以选择<input>，<textarea>，<select>和<button>
$(':radio') 可以选择单选框，和input[type=radio]一样；
$(':focus') 可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；
$(':enabled') 可以选择可以正常输入的<input>、<select>
等，也就是没有灰掉的输入；
$(':disabled') 和:enabled正好相反，选择那些不能输入的。
查找（find）和过滤（filter）

<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

find, parent, next, prev
在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。

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

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找，直到找到某个符合条件的节点并返回

var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell，因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev('.js'); // JavaScript，因为JavaScript是往前第一个符合选择器条件的节点

filter

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

操作DOM内容及样式
除了缩短所写语句外，另一个好处是可以批量修改，不用编码者自己写循环

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>
<script>
// 获取
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
// 修改
let j1 = $('#test-ul li.js');
let j2 = $('#test-ul li[name=book]');
j1.html('<span style="color: red">JavaScript</span>'); // 注意安全问题
j2.text('JavaScript & ECMAScript');
</script>

// 样式
<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>
<script>
$('#test-css li.dy>span').css('background-color'); //获取
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red'); // 批量修改
</script>

$('#test-css li.dy>span').hasClass(); // 是否有class
$('#test-css li.dy>span').addClass(); // 添加class
$('#test-css li.dy>span').removeClass(); // 删除class
$('#test-css li.dy>span').prop(); // 获取或修改特定属性的值
$('#test-css li.dy>span').attr(); // 获取或修改特定属性的值

修改DOM结构

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
<script>
let ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');
</script>

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

// 添加函数对象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

prepend(); //添加到元素下级最前
after(); //添加到元素前
before(); //添加到元素后
remove(); //删除元素
hide(); //隐藏元素

其他函数
深拷贝：let copied = $.extend(true, {}, toCopy);

y = {a:1};
x =  $.extend(true, {}, y);
x.a =2;
console.log(y);

参考jquery接口：

AJAX

读音：
通过AJAX完成浏览器和远端服务器的数据交流

/* 
$.ajax(url, options, 
@params url: 请求地址
@params options: 配置项 
@params callback: 完成的回调
*/
var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}, function(data){
    
);

async：是否异步执行AJAX请求，默认为true；

method：发送的Method，缺省为'GET'（查），可指定为'POST'（改）、'PUT'（增）、'DELETE'（删）等；

contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；

data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；

headers：发送的额外的HTTP头，必须是一个object；

dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

作业：

用jquery完成上次的to-do list页面

老司机Studio 第六章

jquery

AJAX

推荐阅读更多精彩内容