diff --git "a/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221128-\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/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221128-\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..d916d8879ffd86d0a3684cb503002ffc3d37e4ae --- /dev/null +++ "b/15\345\220\264\346\230\216\346\235\260/\344\275\234\344\270\232/221128-\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/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221128jQuery\346\226\271\346\263\225.md" "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221128jQuery\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..eb6a4f040838741b8414f7e154335fe1a99a1120 --- /dev/null +++ "b/15\345\220\264\346\230\216\346\235\260/\347\254\224\350\256\260/221128jQuery\346\226\271\346\263\225.md" @@ -0,0 +1,257 @@ +## jQuery方法 + +### 元素方法 + +添加删除方法详情请看DOM操作里的修改DOM解构 + +#### 添加元素 + +- DOM创建: var $p = $('

这是一段文本

>') +- 插入元素 +- prepend()和prependTo() +- append()和appendTo() +- before() 和insertBefore() +- after() 和 insertAfter() + +#### 删除元素 + +- remove() +- detach() +- empty() + +#### 包裹元素 + +- wrap() +- wrapAll() +- wrapInner() + +****** + +### 过滤方法 + +#### 类名过滤: hasClass() + +类名过滤，指的是根据元素的class来过滤。在jQuery中，我们可以使用hasClass()方法来实现类名过滤 + +过滤语法: + +```html +$().hasClass(“类名”) +``` + +hasClass()方法一般用于==判断元素是否包含指定的类名==：如果包含，则返回true；如果不包含，则返回false。 + +**例题:判断p标签是否包含”beauty“的样式** + +```js +

+ + +console.log($('p').hasClass('beauty'));//true +``` + +******** + +#### 下标过滤: eq() + +​ 下标过滤，指的是根据元素集合的下标来过滤。在jQuery中，我们可以使用eq()方法来实现下标过 滤。 + +语法： + +```js +$().eq(index|-index) +``` + +​ 说明： n是一个整数，从0开始。当取值为正整数时，eq(0)获取的是第1个元素，eq(1)获取的是第2个元素，……，以此类推。 当取值为负整数时，eq(-1)获取的是倒数第1个元素，eq(-2)获取的是倒数第2个元素，……，以此类 推。 + +**例题:设置ul下第二个li的背景为红色** + +```js + + + +$('ul>li').eq(1).css('background', 'red'); +``` + +********* + +#### 判断过滤: is() + +判断过滤，指的是根据某些条件进行判断，然后选取符合条件的元素。在jQuery中，我们可以使用is()方法来实现判断过滤。 + +语法： + +``` +$().is(selector) +``` + +说明： + +参数selector是一个选择器。is()方法用于判断当前选择的元素集合中，是否存在符合条件的元素。 + +如果存在，则返回true；如果不存在，则返回false。 + +```js +//判断元素是否可见 +$().is(":visible") +//判断元素是否处于动画中 +$().is(":animated") +//判断单选框或复选框是否被选中 +$().is(":checked") +//判断当前元素是否第一个子元素 +$(this).is(":first-child") +//判断文本中是否包含jQuery这个词 +$().is(":contains('jQuery')") +//判断是否包含某些类名 +$().is(".select") +``` + +**练习**：全选反选 + +```js + + + + + + + + + +
+

+ + + +
+ + + +``` + +***** + +#### 反向过滤: not() + +在jQuery中， 我们还可以使用not()方法来过滤“不符合条件”的元素，并且返回余下符合条件的元素。(就是说从匹配的元素集合中移除指定的元素。) + +其中，not()方法可以使用选择器过滤，也可以使用函数过滤。 + +语法： + +``` +$().not(selector或fn) +``` + +**需求描述：设置ul下li标签的背景为红色，排除第二个li** + +```html + +``` + +```js +var two = $('ul>li').eq(1); +$('ul>li').not(two).css('background', 'red'); +``` + +****** + +#### 选择器过滤: filter() + +filter[选择器]过滤，指的是使用选择器来选取符合条件的元素。 + +语法： + +```js +$().filter(selector or fn) +``` + +**** + +#### has():过滤子代元素 + +在jQuery中，表达式过滤除了可以使用filter()访问外，我们还可以使用has()方法。has()方法虽然没有filter()方法那么强大，**但是它的运行速度比较快**。 + +作用:保留包含特定后代的元素，去掉那些不含有指定后代的元素。 + +语法： + +``` +$().has(selector|element) +``` + +说明： + +参数selector是一个选择器。element是一个DOM元素 + +has()方法与filter()方法功能相似，不过has()方法只有选择器过滤，没有函数过滤。因此我们可以把has() 方法看成是filter()方法的精简版。 + +**示例:给含有ul的li加上背景色** + +```html + +``` + +```js +$('li').has('ul').css('background-color', 'red'); +``` + +******* + +#### index() + +在jQuery中，我们可以使用index()方法来获取当前jQuery对象集合中“指定元素”的索引值。 + +``` +$(selector).index() +``` + +说明： + +index()方法可以接受一个“jQuery对象”或“DOM对象”作为参数，不过一般情况下，我们很少会使用到参 数。当index()不带参数时，一般指的是当前元素相对于父元素的索引值。 + +**示例:** + +```html + +``` + +```js +var index= $('li[class=6]').index(); +console.log(index);//1 +``` + +***** + +## \ No newline at end of file