都选出来
+$('p.red,p.green'); // 把
和
都选出来
+```
+要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如，`
`不会被上面的`$('p.red,p.green')`选择两次。
+## 更多选择器
+(https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp jQuery的选择器)
+### 练习
+使用jQuery选择器分别选出指定元素：
+
++ 仅选择JavaScript
+
++ 仅选择Erlang
+
++ 选择JavaScript和Erlang
+
++ 选择所有编程语言
+
++ 选择名字input
+
++ 选择邮件和名字input
+```
+
+
+
JavaScript
+
Haskell
+
Erlang
+
Python
+
+
+```
+运行查看结果：
+```
+'use strict';
+
+var selected = null;
+selected = ???;
+
+// 高亮结果:
+if (!(selected instanceof jQuery)) {
+ return console.log('不是有效的jQuery对象!');
+}
+$('#test-jquery').find('*').css('background-color', '');
+selected.css('background-color', '#ffd351');
+
+JavaScript
+
+Haskell
+
+Erlang
+
+Python
+```
+1. 仅选择JavaScript
+解题思路:使用ID查找
+````
+var selected = null;
+selected = $('#para-1') ;
+```
+2. 仅选择Erlang
+解题思路:使用class[class也是.]查找
+```
+var selected = null;
+selected = $('.color-red.color-green') ;
+```
+3.选择JavaScript和Erlang
+解题思路:使用属性查找
+```
+var selected = null;
+selected = $('[id^=para-]') ;// 找出所有id包含至少一个以`para-`开头的DOM
+```
+4.选择所有编程语言
+解题思路:首先先找出所有编程语言，然后看代码里有共同的，选择共同的，使用属性查找
+```
+var selected = null;
+selected = $('[class^=color-]') ;
+```
+5.选择名字input
+解题思路:使用组合查找
+```
+var selected = null;
+selected = $('input[name=name]') ;
+```
+6.选择邮件和名字input
+解题思路:使用属性查找和多项选择查找
+```
+var selected = null;
+selected = $('input[name=name],input[name=email]') ;
+```
\ No newline at end of file
diff --git "a/\350\221\243\344\270\226\351\276\231/20211206-jq\346\237\245\350\257\242\343\200\201\350\277\207\346\273\244.md" "b/\350\221\243\344\270\226\351\276\231/20211206-jq\346\237\245\350\257\242\343\200\201\350\277\207\346\273\244.md"
new file mode 100644
index 0000000..a573d6b
--- /dev/null
+++ "b/\350\221\243\344\270\226\351\276\231/20211206-jq\346\237\245\350\257\242\343\200\201\350\277\207\346\273\244.md"
@@ -0,0 +1,62 @@
+## 查找和过滤
+### 1.查找
+栗子如下:
+#### HTML结构
+```
+
+
+
+
+
+
JavaScript
+
+
+
+ - JavaScript
+ - Python
+ - Swift
+ - Scheme
+ - Haskell
+
+
+
+
+
+```
+#### (1)用find()查找
+```
+var ul = $('ul.lang');//得到ul
+var i = ul.find('.dy');//获得JavaScript、Python、Scheme
+var l =ul.find('#swift')//获得Swift
+var o = ul.find('[name = Haskell]')//获得Haskell
+console.log(ul);
+console.log(i);
+console.log(l);
+console.log(o);
+```
+#### (2)当前节点上开始向上查找，使用parent（）方法：
+```
+var swf = $('#swift');//获得Swift
+var parent = swf.parent();//获得Swift的上层节点
+var a = swf.parent('.red');// 获得Swift的上层节点，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象
+console.log(swf);
+console.log(parent);
+console.log(a);
+```
+#### (3)同一层级的节点，可以通过next()和prev()方法:
+当我们已经拿到Swift节点后:
+#### next()方法
+```
+var swift = $('#Swift');
+swift.next();
+swift.next('[name=haskell]')；// 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]
+console.log(swift);
+```
+#### prev()方法
+```
+var swift = $('#swift');
+swift.prev(); // Python
+swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy
+console.log(swift);
+```
+
diff --git "a/\350\221\243\344\270\226\351\276\231/20211207-jq\347\232\204dom\346\223\215\344\275\234.md" "b/\350\221\243\344\270\226\351\276\231/20211207-jq\347\232\204dom\346\223\215\344\275\234.md"
new file mode 100644
index 0000000..e7e2c4a
--- /dev/null
+++ "b/\350\221\243\344\270\226\351\276\231/20211207-jq\347\232\204dom\346\223\215\344\275\234.md"
@@ -0,0 +1,83 @@
+## jQuery基础之DOM操作
+### 1.创建DOM节点
+#### (1)创建元素节点
+创建元素节点并且把节点作为元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。
+例子
+```
+ $li1=$("")
+代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
+ $("ul").append($li1);
+ 添加后页面中只能看到- 元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
+```
+注意：append()方法是添加DOM节点方法详见增--添加DOM节点。
+#### (2)创建文本节点
+ 使用JQuery的工厂函数$()同样能够创建文本节点，创建文本节点的JQuery代码如下：
+```
+ $li2=$("
- 苹果
");
+```
+ 代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
+```
+ $("ul").append($li2);
+```
+ 添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。
+#### (3)创建属性节点
+ 创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：
+```
+ $li3=$("- 榴莲
");
+```
+ 代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
+```
+ $("ul").append($li3);
+```
+ 添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。
+### 2.增--添加DOM节点
+ 动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：
+```
+append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。
+```
+#### (1)append()方法
+append()方法向匹配的元素内部追加内容。
+方法：
+```
+$("target").append(element);
+```
+例子：
+```
+$("ul").append("- 香蕉
");
+该方法查找ul元素，然后向ul中添加新建的li元素。
+```
+#### append()题目理解:
+除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
+```
+
+
+
+ - JavaScript
+ - Python
+ - Swift
+
+
- Pascal
')
+ul.append('- Lua
')
+ul.append('- Ruby
')
+
+var ul =$('#test-div ul');//
+var li =ul.find('li').sort(function(x,y){
+ return x.innerText>y.innerText?1:-1;
+});//制作排序好的DOM节点数组
+ul.append(li);//添加到jQuery对象中
+
+// 测试:
+;(function () {
+ var s = $('#test-div>ul>li').map(function () {
+ return $(this).text();
+ }).get().join(',');
+ if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
+ console.log('测试通过!');
+ } else {
+ console.log('测试失败: ' + s);
+ }
+})();
+```
+https://www.kancloud.cn/idos/vue2/1046687
--
Gitee