jQuery——DOM增删改

最新推荐文章于 2023-07-16 20:05:13 发布

Silent Land

最新推荐文章于 2023-07-16 20:05:13 发布

阅读量258

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/weixin_44757417/article/details/107924033

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

筛选选择器（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>