筛选选择器（7种）
与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') |
相当于$(‘ul>li’),子类选择器 |
| find(selector) | $('ul').find('li'); |
相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $('#first').siblings('li') |
查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); |
查找父亲 |
| eq(index) | $('li').eq(2); |
相当于$(‘li:eq(2)’),index从0开始 |
| next() | $('li').next() |
找下一个兄弟 |
| prev() | $('li').prev() |
找上一个兄弟 |
创建元素（2种）
-
原生dom创建元素三种方式
document.write();不推荐
innerHTML; 超过100，性能问题
document.createElement();推荐方式 -
jqquery创建元素两种方式
$().html('字符串')相当于innerHTML$('字符串')相当于document.createElement()
添加元素（5种）
-
原生dom添加元素两种方式
父元素.appendChild(子元素)： 添加到最后面
父元素.insertBefore(A元素,B元素)： A元素添加到B元素前面 -
jQuery方式
| 名称 | 用法 | 描述 |
|---|---|---|
| append() | 父元素.append(子元素) |
添加到最后面 |
| appendTo() | 子元素.appendTo(父元素) |
添加到最后面(作用与append一致,调用顺序不一样) |
| prepend() | 父元素.prepend(子元素) |
添加到最前面 |
| before() | 兄弟A.before(兄弟B) |
B插入A前面 |
| after() | 兄弟A.after(兄弟B) |
B插入A后面 |
移除元素（3种）
-
原生DOM移除节点两种方式：
-
清空所有子节点 ：
父元素.innerHTML = '' -
移除单个子节点：
父元素.removeChild(子元素)
-
-
jquery移除节点三种方式
- 清空所有子节点
$().html('');少用
$().empty();推荐使用，性能比html方式要好 - 移除单个子节点
$().remove();
移除$() : 相当于自杀。 底层原理：this.parentNode.removeChild(this)
- 清空所有子节点
类名操作
| 名称 | 用法 | 描述 |
|---|---|---|
| addClass() | $('div').addClass('one') |
添加类 |
| removeClass() | $('div').removeClass('one') |
移除类 |
| hasClass() | $('div').hasClass('one') |
判断类 |
| toggleClass() | $('div').toggleClass('one') |
切换类(有就移除，没就添加) |
案例：
<body>
<input type="button" value="添加类" id="addClass" />
<input type="button" value="移除类" id="removeClass" />
<input type="button" value="判断类" id="hasClass" />
<input type="button" value="切换类" id="toggleClass" />
<div id="div1" class="bgc ">div1</div>
<script src="jquery-1.12.4.js"></script>
<script>
//1 添加类名: $().addClass('类名')
$('#addClass').click(function () {
$('#div1').addClass('width200 height200');
$('#div1').addClass('fontSize30');
});
//2 移除类名: $().removeClass('类名')
$('#removeClass').click(function () {
$('#div1').removeClass('width200');
});
//3 判断类名: $().hasClass('类名') true:有 false:没有
$('#hasClass').click(function () {
console.log($('#div1').hasClass('width200'));
});
//4 切换类名: $().toggleClass('类名')
$('#toggleClass').click(function () {
/*
如果有：则移除
如果没有：则添加
*/
$('#div1').toggleClass('width200');
});
</script>
</body>