diff --git "a/\346\236\227\346\263\223\347\202\234/1.html" "b/\346\236\227\346\263\223\347\202\234/1.html" index e405a5daf6844368cfd63850003d21517f3e9de9..1ef2cde0fd88f571e2764921e2e80ce75785d9fa 100644 --- "a/\346\236\227\346\263\223\347\202\234/1.html" +++ "b/\346\236\227\346\263\223\347\202\234/1.html" @@ -5,14 +5,24 @@ Document - -
-

javascript

-

Java

-
- - +
+ 请选择想要学习的编程语言： +
+

+ 反选

+

+

+

+

+

+

+
+
+ - \ No newline at end of file diff --git "a/\346\236\227\346\263\223\347\202\234/1.js" "b/\346\236\227\346\263\223\347\202\234/1.js" index 3985ae61869d9fa8cff45febabe5a8016853c4c4..1a4143f839b96cc9d88abfa43929c8a15189fc97 100644 --- "a/\346\236\227\346\263\223\347\202\234/1.js" +++ "b/\346\236\227\346\263\223\347\202\234/1.js" @@ -1,155 +1,121 @@ 'use strict' -// var a =['1','3','5'] -// a.forEach(function (el,em,ec ){ -// console.log(el) -// }) - - - -// var s =new Map([['1','4'],['2','3'] ,['5','6']]) -// s.forEach(function(aa,ab,ac){ -// console.log(aa) -// }) - -// var abs = function (x) { -// if (x >= 0) { -// return x; -// } else { -// return -x; +// var +// form=$('#test-form'), +// langs=form.find('[name=lang]'), +// selectAll=form.find('label.selectAll :checkbox'), +// selectAllLabel=form.find('label.selectAll span.selectAll'), +// deselectAll=form.find('label.selectAll span.deselectAll'), +// invertSelect=form.find('a.invertSelect'); + + +// selectAll.click(function(){ +// if(selectAll.is(':checked')){ +// langs.prop('checked',true); +// selectAllLabel.hide(); +// deselectAll.show() +// }else{ +// langs.prop('checked',false); +// selectAllLabel.show(); +// deselectAll,hide(); +// } + +// }) +// langs.click(function(){ +// abs(); +// }) +// function abs(){ +// if(langs.map(':checked').length ==5){ +// selectAllLabel.prop('checked',true); +// selectAllLabel.hide(); +// deselectAll.show(); +// }else{ +// selectAllLabel.prop('checked',false); +// selectAllLabel.show(); +// deselectAll.hide(); +// } +// } +// invertSelect.click(function(){ +// langs.map(function() { +// $(this).prop('checked',!$(this).prop('checked')) +// }) +// }) + + +// 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'); + +// // TODO:绑定事件 +// selectAll.click(function () { +// if(selectAll.is(':checked')){ +// langs.prop('checked', true); +// selectAllLabel.hide(); +// deselectAllLabel.show(); +// } +// else{ +// langs.prop('checked', false); +// selectAllLabel.show(); +// deselectAllLabel.hide(); // } -// console.log(x) -// }; - -// function area_of_circle(r, pi) { -// // if(arguments.length<2){ -// // return r*r*3.14 -// // }else{ -// // return r*r*pi -// // } -// if (arguments.length < 2) { -// pi = 3.14 +// abs(); +// }); + +// langs.click(function(){ +// abs(); +// }); + +// function abs(){ +// if(langs.filter(':checked').length == 5){ +// selectAllLabel.prop('checked',true); +// selectAllLabel.hide(); +// deselectAllLabel.show(); +// }else{ +// selectAllLabel.prop('checked',false); +// selectAllLabel.show(); +// deselectAllLabel.hide(); // } -// return pi * r * r; // } -// // 测试: -// if (area_of_circle(2) === 125.6 && area_of_circle(2, 3.1416) === 12.5664) { -// console.log('测试通过'); -// } else { -// console.log('测试失败'); -// } -// function max(a, b) { -// if (a > b) { -// return a; -// } else { -// return b; -// } - -// } -// console.log(max(15, 20)); - -// 描述 -// 移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组 -// 输入描述： -// [1, 2, 3, 4, 2], 2 -// 输出描述： -// [1, 3, 4] -// let arr=[1,2,3,4,2] +// invertSelect.click(function(){ +// langs.map(function(){ +// $(this).prop('checked',!$(this).prop('checked')) +// }) + +// }) -// let newarr=arr.slice() -// newarr.splice(1,1) -// newarr.pop() -// console.log(arr) -// console.log(newarr); -// ================================== -// let arr = [1,2,3,4,2] -// let newarr=[] -// let o=0 -// for (let i= 0;ijavascript

节点: -// let js =document.querySelector('#test-js'); - -// // 修改文本为JavaScript: -// // TODO: -// js.innerText='JavaScript'; -// // 修改CSS为: color: #ff0000, font-weight: bold -// // TODO: -// js.style.color='#ff0000'; -// js.style.fontWeight=bold; // // 测试: -// if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') { -// if (js.innerText === 'JavaScript') { -// if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) { -// console.log('测试通过!'); -// } else { -// console.log('CSS样式测试失败!'); -// } -// } else { -// console.log('文本测试失败!'); -// } -// } else { -// console.log('节点测试失败!'); -// } - - +// console.log('请测试功能是否正常。'); -function test (resolve,reject){ - var s = Math.floor(Math.random * 2)+1 - setTimeout(function(){ - if(s===1){ +// let arr=[1,2,3,4]; +// let brr=['a','b','c',1]; +// let crr=[]; +// crr=arr.concat(brr) +// console.log(crr); - resolve(s) - alerta("成功") - } - else{ - reject(s) - alert("不成功") - } - },1000) +// let b=[]; +// let arr=[1,2,4,4,3,4,3]; +// let item=4; +// for(let i=0;i 1) { + logging.removeChild(logging.children[logging.children.length - 1]); +} + +// 输出log到页面: +function log(s) { + var p = document.createElement('p'); + p.innerHTML = s; + logging.appendChild(p); +} +new Promise(function (resolve, reject) { + log('start new Promise...'); + var timeOut = Math.random() * 2; + log('set timeout to: ' + timeOut + ' seconds.'); + setTimeout(function () { + if (timeOut < 1) { + log('call resolve()...'); + resolve('200 OK'); + } + else { + log('call reject()...'); + reject('timeout in ' + timeOut + ' seconds.'); + } + }, timeOut * 1000); +}).then(function (r) { + log('Done: ' + r); +}).catch(function (reason) { + log('Failed: ' + reason); +}); +``` + +Log: + +可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了 + + +Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。 + +要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写： + +``` +job1.then(job2).then(job3).catch(handleError); +``` + +其中，job1、job2和job3都是Promise对象。 + +下面的例子演示了如何串行执行一系列需要异步计算获得结果的任务： + +``` +'use strict'; + +var logging = document.getElementById('test-promise2-log'); +while (logging.children.length > 1) { + logging.removeChild(logging.children[logging.children.length - 1]); +} + +function log(s) { + var p = document.createElement('p'); + p.innerHTML = s; + logging.appendChild(p); +} +// 0.5秒后返回input*input的计算结果: +function multiply(input) { + return new Promise(function (resolve, reject) { + log('calculating ' + input + ' x ' + input + '...'); + setTimeout(resolve, 500, input * input); + }); +} + +// 0.5秒后返回input+input的计算结果: +function add(input) { + return new Promise(function (resolve, reject) { + log('calculating ' + input + ' + ' + input + '...'); + setTimeout(resolve, 500, input + input); + }); +} + +var p = new Promise(function (resolve, reject) { + log('start new Promise...'); + resolve(123); +}); + +p.then(multiply) + .then(add) + .then(multiply) + .then(add) + .then(function (result) { + log('Got value: ' + result); +}); +``` + + + +setTimeout可以看成一个模拟网络等异步执行的函数。现在，我们把上一节的AJAX异步执行函数转换为Promise对象，看看用Promise如何简化异步处理： + +``` +'use strict'; + +// ajax函数将返回Promise对象: +function ajax(method, url, data) { + var request = new XMLHttpRequest(); + return new Promise(function (resolve, reject) { + request.onreadystatechange = function () { + if (request.readyState === 4) { + if (request.status === 200) { + resolve(request.responseText); + } else { + reject(request.status); + } + } + }; + request.open(method, url); + request.send(data); + }); +} +var log = document.getElementById('test-promise-ajax-result'); +var p = ajax('GET', '/api/categories'); +p.then(function (text) { // 如果AJAX成功，获得响应内容 + log.innerText = text; +}).catch(function (status) { // 如果AJAX失败，获得响应代码 + log.innerText = 'ERROR: ' + status; +}); +``` + +Result: +除了串行执行若干异步任务外，Promise还可以并行执行异步任务。 + +试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下： + +``` +var p1 = new Promise(function (resolve, reject) { + setTimeout(resolve, 500, 'P1'); +}); +var p2 = new Promise(function (resolve, reject) { + setTimeout(resolve, 600, 'P2'); +}); +// 同时执行p1和p2，并在它们都完成后执行then: +Promise.all([p1, p2]).then(function (results) { + console.log(results); // 获得一个Array: ['P1', 'P2'] +}); +``` + +有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现： + +``` +var p1 = new Promise(function (resolve, reject) { + setTimeout(resolve, 500, 'P1'); +}); +var p2 = new Promise(function (resolve, reject) { + setTimeout(resolve, 600, 'P2'); +}); +Promise.race([p1, p2]).then(function (result) { + console.log(result); // 'P1' +}); +``` + +由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃。 + +如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。 \ No newline at end of file diff --git "a/\346\236\227\346\263\223\347\202\234/20231214-jQuery2.0.md" "b/\346\236\227\346\263\223\347\202\234/20231214-jQuery2.0.md" index 46311274d579114a29a86a43223bb0ab3e7079da..1bb6816c886932fd910769063f6acddf1ecce552 100644 --- "a/\346\236\227\346\263\223\347\202\234/20231214-jQuery2.0.md" +++ "b/\346\236\227\346\263\223\347\202\234/20231214-jQuery2.0.md" @@ -1,3 +1,398 @@ ## 操作DOM ### 修改Text和HTML jQuery对象的text()和html()可以分别获取节点文本和原始HTML文本。 +``` + +``` +分别获取文本和HTML： + +``` +$('#test-ul li[name=book]').text(); // 'Java & JavaScript' +$('#test-ul li[name=book]').html(); // 'Java & JavaScript' +``` + +如何设置文本或HTML？jQuery的API设计非常巧妙：无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作，自己动手试试： + +``` +'use strict'; +var j1 = $('#test-ul li.js'); +var j2 = $('#test-ul li[name=book]'); +j1.html('JavaScript'); +j2.text('JavaScript & ECMAScript'); + + +// JavaScript +// Java & JavaScript +``` + +一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试： + +``` +$('#test-ul li').text('JS'); // 是不是两个节点都变成了JS？ +``` + +所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错： + +``` +// 如果不存在id为not-exist的节点： +$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello' +``` + +这意味着jQuery帮你免去了许多if语句。 + +### 修改CSS + +jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构： + +``` + + +``` + +要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现： + +``` +'use strict'; +$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red'); + + +JavaScript +Java +Python +Swift +Scheme +``` + +注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。 + +jQuery对象的css()方法可以这么用： + +``` +var div = $('#test-div'); +div.css('color'); // '#000033', 获取CSS属性 +div.css('color', '#336699'); // 设置CSS属性 +div.css('color', ''); // 清除CSS属性 +``` + +为了和JavaScript保持一致，CSS属性可以用'background-color'和'backgroundColor'两种格式。 + +css()方法将作用于DOM节点的style属性，具有最高优先级。如果要修改class属性，可以用jQuery提供的下列方法： + +``` +var div = $('#test-div'); +div.hasClass('highlight'); // false， class是否包含highlight +div.addClass('highlight'); // 添加highlight这个class +div.removeClass('highlight'); // 删除highlight这个class +``` + +### 添加DOM + +要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如： + +``` +
+
    +
  • JavaScript
    • +
  • Python
    • +
  • Swift
    • +
+
+``` + +如何向列表新增一个语言？首先要拿到`