diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..1baf64fa78af5093674549f5fbca761b8343a396 --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md" @@ -0,0 +1,93 @@ +水果练习 + +```js + +

喜欢的水果： + + +

+ + + +``` + +输出checkbox选中个数 + +```js + + + + + + + + + +``` + +偶数改变背景颜色 + +```js + + + + + + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + + +``` + diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..04e52b8c03502ad40d41d7ace28aa6b106b4742c --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md" @@ -0,0 +1,47 @@ +复制练习 + +```js + + +
+ + +``` + +搜索 + +```js +  
+ 11月21日0-24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例2225例。其中境外输入病例80例（广东35例，福建12例，重庆6例，云南6例，上海5例，浙江4例，四川3例，陕西3例，天津2例，湖南2例，内蒙古1例，江苏1例），含7例由无症状感染者转为确诊病例（浙江4例，福建1例， + 四川1例，陕西1例）；本土病例2145例（广东781例，北京274例，四川240例，重庆178例， + 云南147例，山西89例，内蒙古77例，河南75例，江苏51例，浙江37例，黑龙江28例， + 陕西23例，辽宁22例，山东22例，新疆19例，甘肃14例，贵州13例，湖南11例，福建10例， + 湖北9例，河北5例，海南5例，上海4例，广西3例，青海3例，安徽2例，西藏2例，天津1例）， + 含592例由无症状感染者转为确诊病例（广东434例，重庆38例，四川24例，浙江20例，甘肃14例， + 北京12例，内蒙古7例，湖南7例，江苏6例，陕西6例，山西4例，辽宁4例，黑龙江4例，福建3例， + 河南3例，广西2例，青海2例，安徽1例，云南1例）。新增死亡病例2例，均为本土病例 + （河南1例，四川1例）；无新增疑似病例。 + + + + +``` + diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..354d78e72da1f8b3712dd017b10ec9e27400e60f --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md" @@ -0,0 +1,65 @@ +单击双击练习 + +```js + + + +``` + +获取字符串长度 + +```js + +
字符串长度为： 0
+ + +``` + +下拉框 + +```js + + + + +``` + diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..e49c00452be4860c8e9bb0ee883a3831f5e9e5cb --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md" @@ -0,0 +1,187 @@ +```js + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
2009年员工产品销售走势图
foodautohouseholdfurniturekitchenbath
Mary190160401203070
Tom34030453549
Brad1018010852579
Kate4080902515119
+
+ + + + +``` + diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..c716c4907375cf759a23529668c38abe16a3676a --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md" @@ -0,0 +1,23 @@ +下拉框取值 + +```js + var sel = document.querySelector('#sel'); + sel.onchange = () => { + console.log(sel.value); + } + // var select = document.getElementById('sel'); + // select.onchange = function (e) { + // console.dir(e.target.selectedIndex); + // } +``` + +反向选择 + +```js + $('#selectAll').change(function () { + var $che= $("[class='fruit']").not($(':checked')).prop("checked", true);//找到未选中的修改 + $("[class='fruit']").not($che).prop("checked", false); + }) + +``` + diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..de535d1aed83f220457a10417ce50cff72ec6d74 --- /dev/null +++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md" @@ -0,0 +1,54 @@ +```js + + + + + + + Document + + + + + + +``` + diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..57242089a15eb46814ffe239609b9c7e038bacbe --- /dev/null +++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md" @@ -0,0 +1,344 @@ +# DOM操作 + +jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。 + 常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。**注意：以下的操作方式只适用于jQuery对象。** + +jQuery中的DOM操作可分为： + +- 样式操作 +- 内容及Value属性值操作 +- 节点操作 +- 节点属性操作 +- 节点遍历 +- CSS-DOM操作 + +## 获取DOM信息 + +利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码： + +```js +attr()和removeAttr()方法用于操作DOM节点的属性： + +//
...
+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 +``` + +**prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种**，例如： + +```js + +``` + +等价于： + +```js + +``` + +attr()和prop()对于属性checked处理有所不同： + +```js +var radio = $('#test-radio'); +radio.attr('checked'); // 'checked' +radio.prop('checked'); // true +``` + +prop()返回值更合理一些。不过，用is()方法判断更好： + +```js +var radio = $('#test-radio'); +radio.is(':checked'); // true +``` + +类似的属性还有selected，处理时最好用is(':selected')。 + +### 设置属性 + +因为prop属性不适用于自定义属性所以设置属性使用attr方法 + +attr('属性','属性值'); + +```js +//设置北京节点的name属性的值为dabeijing +$("#bj").attr("name", "dabeijing"); + +//添加自定义属性 +$("#bj").attr("aa", "aabb"); +``` + +### 移除属性 + +| 方法 | 说明 | +| -------------------- | ----------------------- | +| removeAttr('属性名') | 删除属性 | +| removeProp('属性名') | 删除bool类型的属性,少用 | + +```js +//删除北京节点的name属性并检验name属性是否存在 +$("#bj").removeAttr("name"); + +//删除hobby的CheckBox属性 +var hobby_type = $("#hobby").removeProp("checkbox"); +``` + +### attr和prop区别 + +attr（固有属性，自定义属性） prop（返回值是bool的属性） + +- prop获取返回的值类型是bool的时候，返回的是true或者false +- 如果是自定义属性，prop获取不到，attr可以 + +## 修改CSS + +jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构： + +```js + + +``` + +要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现： + +```js +'use strict'; +$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red'); + + +JavaScript +Java +Python +Swift +Scheme +``` + +注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。 + +jQuery对象的css()方法可以这么用： + +```js +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提供的下列方法： + +```js +var div = $('#test-div'); +div.hasClass('highlight'); // false， class是否包含highlight +div.addClass('highlight'); // 添加highlight这个class +div.removeClass('highlight'); // 删除highlight这个class +``` + +## 修改Text和HTML + +jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构： + +```js + + +``` + +分别获取文本和HTML： + +```js +$('#test-ul li[name=book]').text(); // 'Java & JavaScript' +$('#test-ul li[name=book]').html(); // 'Java & JavaScript' +``` + +如何设置文本或HTML？jQuery的API设计非常巧妙：无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作，自己动手试试： + +```js +'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节点上。在上面的例子中试试： + +```js +$('#test-ul li').text('JS'); // 是不是两个节点都变成了JS？ +``` + +所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错： + +```js +// 如果不存在id为not-exist的节点： +$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello' +``` + +这意味着jQuery帮你免去了许多if语句。 + +***** + +## 操作表单 + +对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性： + +```js +/* + + + +*/ +var + input = $('#test-input'), + select = $('#test-select'), + textarea = $('#test-textarea'); + +input.val(); // 'test' +input.val('abc@example.com'); // 文本框的内容已变为abc@example.com + +select.val(); // 'BJ' +select.val('SH'); // 选择框已变为Shanghai + +textarea.val(); // 'Hello' +textarea.val('Hi'); // 文本区域已更新为'Hi' +``` + +**可见，一个val()就统一了各种输入框的取值和赋值的问题。** + +## 修改DOM结构 + +直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。 + +有了jQuery，我们就专注于操作jQuery对象本身，底层的DOM操作由jQuery完成就可以了，这样一来，修改DOM也大大简化了。 + +### 添加DOM + +要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如： + +```js +
+ +
+``` + +如何向列表新增一个语言？首先要拿到`