1 html DOM操作

1-1 插入节点

image

  • 父子间的操作
<h3>刘大帅</h3>
<div class="box"></div>
<script>
    $(function () {
        //创建节点
        var $h1Tag = $('<span></span>');
    	$h1Tag.html('wxx');
        //append() appendTo() 后置追加
        //方法一:参数可以是js对象
        $('.box').append(h1Tag);
        
        //方法二:参数可以是字符串
        $('.box').append('<h3>hello world</h3>')
        
        //方法三:参数可以是jQuery对象
        $('.box').append($('h3'));

        //创建h4标签,在添加到.box标签中,颜色为绿色,添加点击事件,打印文本.
        $('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function () {
            console.log(this); //<h4 style="color: green;">老村长</h4>
            console.log($(this).text()); //老村长
        });

        //prepend() prependTo() 前置追加
        $('box').prepend('<a href="#">百度</a>');
        $('<a href="#">淘宝</a>').prependTo('.box');
    })
</script>
  • 兄弟间的操作

image

<h3>刘大帅</h3>
<script>
    //在h3后面添加兄弟h4标签
    $('h3').after('<h4>alex</h4>');
    //在h4后面添加兄弟h2标签
    $('<h2>老男孩</h2>').insertAfter('h4');
</script>

image

<h3>刘大帅</h3>
<script>
    //在h3前面添加兄弟h4标签
    $('h3').before('<h4>alex</h4>');
    //在h4前面添加兄弟h2标签
    $('<h2>老男孩</h2>').insertBefore('h4');
</script>

1-2 删除节点

  • remove & detach

从 DOM 中删除所有匹配的元素,传入的参数用于根据jQuery 表达式来删选元素

<div class="box">
    <p>刘大帅</p>
    <p>wxx</p>
</div>
<div class="wrap">
    <button>按钮</button>
</div>
<script>
    $(function () {
        $('.wrap button').click(function () {
            //即删除节点,又删除节点上的绑定事件
            var btnJq = $(this).remove(); //删除后返回当前节点对象
            //只删除节点,不删除节点上的绑定事件
            var btnJq = $(this.detach()); //删除后返回当前节点对象
            $('.box').prepend(btnJq);// 把刚才删除的元素添加到 <div> 元素中复制代码
        })
    })
</script>
  • empty
<div class="box">
    <p>刘大帅</p>
    <p>wxx</p>
</div>
<div class="wrap">
    <button>按钮</button>
</div>
<script>
    $(function () {
            //清空 div.box
            $('.box').empty();
            //获取所有.box下的文本
            console.log($('.box').text());
            //获取所有.box下的标签和文本
            console.log($('.box').html());
            //清空元素
            $('.box').html('');
        })
    })
</script>

1-3 复制节点

复制节点可以使用 clone() 方法

<div class="clone">
    <ul>
        <li>刘大帅</li>
    </ul>
</div>
<script>
    $(function () {
        //克隆元素
        $('.clone ul li').click(function () {
            //.clone() 只克隆本身
            $(this).clone().appendTo('.clone ul');
            //.clone(true) 克隆本身和事件
            $(this).clone(true).appendTo('.clone ul');
        })
    })
</script>
<div class="outer">
    <div class="item">
        <input type="button" value="+" class="add_btn">
        <input type="text">
    </div>
</div>
<script>
    $('.add_btn').click(function () {
        var $clone = $(this).parent().clone();
        $clone.children('.add_btn').val('-').attr('class','remove_btn');
        $('.outer').append($clone);
    })
    $('.outer').on('click','.remove_btn',function () {
        $(this).parent().remove();
    })
</script>

1-4 替换节点和包裹节点

  • replaceWith(‘</b’)

    将所有匹配的元素替换成指定的HTML或DOM元素。

  • replaceAll(selector)

    用匹配的元素替换掉所有selector匹配到的元素。

<div class="replace">
    <p>hello</p>
    <p>world</p>
</div>
<script>
    $(function () {
        //替换节点
        // 将所有p标签替换成i斜体标签
        $('.replace p').replaceWith('<i>hello</i>');
        //将网页上所有的p标签都替换成i斜体标签
        $('<i>hello</i>').replaceAll('p');
    })
</script>
  • wrap()

    把所有匹配的元素用其他元素的结构化标记包裹起来。

  • unwrap()

    这个方法将移出元素的父元素

<div class="replace">
    <p>hello</p>
    <p>world</p>
</div>
<script>
    $(function () {
		//wrap() 给p标签的外层,包裹一层span父集标签
        $('.replace p').wrap('<span class="box2"></span>');
        //unwrap() 删除包裹p的父集span标签
        $('.replace p').unwrap();
    })
</script>
  • wrapInner()

    将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

<div class="replace">
    <p>hello</p>
    <p>world</p>
</div>
<script>
    $(function () {
		//wrapInner()
        //取到p标签的字内容,用strong标签包裹起来
        $('.replace p').wrapInner('<string></string>');
    })
</script>

1-5 属性操作

  • attr()

获取和设置元素属性,传递一个参数为获取元素属性,传递两个参数为设置元素属性

  • removeAttr()

删除文档中某个元素的特定属性

<style>
    #box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
</style>
<div class="replace">
    <p>hello</p>
    <p>world</p>
</div>
<script>
    $(function () {
        //设置单个属性值
        $('div').attr('id','box');
        //设置多个属性值
        $('div').attr({id:"box",title:"盒子"});
        //获取属性值
        console.log($('div').attr('name')); //b
        //删除属性值
        $('div').removeAttr('name');
        
        setTimeout(function () {
            $('img').attr({
                src:'https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg',
                alt:'妹妹'
            })
        },2000);
    })
</script>
  • prop()
<input type="checkbox">
<script>
    $(function () {
        //使用attr方法时,表单中不存在属性,返回undefined
        console.log($(':checkbox').attr('checked'));
        //使用prop方法时,表单中不存在属性,返回false,有值返回true
        //prop一般使用在表单中
        console.log($(':checkbox').prop('checked'));

    })
</script>

prop案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jQuery-3.6.0.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<table border="1">
    <tr>
        <td>选择</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>张山</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>23</td>
    </tr>
</table>
<script>
    $('.select_all').click(function () {
        $('table input:checkbox').prop('checked',true);
    })
    $('.cancel').click(function () {
        $('table input:checkbox').prop('checked',false);
    })
    $('.reverse').click(function () {
        /*var $ele = $('table input:checkbox');
        for (var i=0; i<$ele.length; i++){
            var start = $($ele[i]).prop('checked');
            if (start){
                $($ele[i]).prop('checked',false);
            }else {
                $($ele[i]).prop('checked',true);
            }
        }*/

        /*$('table input:checkbox').each(function () {
            var state = $(this).prop('checked');
            if (state){
                $(this).prop('checked',false);
            }else {
                $(this).prop('checked',true);
            }
        })*/

        $('table input:checkbox').each(function () {
            $(this).prop('checked',!$(this).prop('checked'))
        })
    })
</script>
</body>
</html>

1-6 类操作

  • addClass()

追加样式

  • removeClass()

删除样式

  • toggleClass()

切换样式 如果类名存在则删除,如果类名不不存在则添加

  • hasClass()

是否含有某个类,返回布尔值

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .active{
        background-color: greenyellow;
    }
</style>
<div class="box"></div>
<script>
    $(function () {
        var isRed = true;
        $('.box').click(function () {
            if (isRed){
            //此方法不推荐
            //为box添加一个class类
                $(this).addClass('active');
                isRed = false;
            }else {
                $(this).removeClass('active');
                isRed = true;
            }
			
            //此方法不推荐
            //判断box中有没有active类,有返回true么有返回false
            if (!$(this).hasClass('active')){
                 $(this).addClass('active');
            }else {
                 $(this).removeClass('active');
            }

            //可以添加多个类
            $(this).addClass('active a b');
            //可以移除多个类
            $(this).removeClass('active a b');
			
            //此方法推荐
            //根据当前的box类,判断有么有active的类,有则移除无则添加
            $(this).toggleClass('active')
        })
    })
</script>

1-7 值操作

  • html()

读取或者设置某个元素中的HTML 内容 没有参数为获取HTML 中的内容,传递一个参数为设置 HTML 的内容

  • text()

读取或者设置某个元素中的文本内容 没有参数为获取文本内容,传递一个参数为设置文本内容

  • val()

读取或设置元素的值 在用于表单元素时,可以设置相应的元素被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jQuery-3.6.0.js"></script>
</head>
<body>
<div id="content">
    <ul>
        <li></li>
    </ul>
    <input type="text" value="妹妹">
    <select name="" id="single">
        <option>苹果</option>
        <option>香蕉</option>
    </select>
    <select name="" id="multiple" multiple>
        <option selected>苹果</option>
        <option>香蕉</option>
        <option selected>橘子</option>
    </select>
    <input type="checkbox" value="A">A
    <input type="checkbox" value="B">B
    <input type="radio" value="1">男
    <input type="radio" value="0">女
</div>
<script>
    $(function () {
        //设置html中的标签名和文本值
        $('#content ul li').html(`<img src="../day4/JS特效/images/girl-1.jpeg">
            <p>刘大帅</p>`);
        //获取html中的所有值包括标签和文本
        console.log($('#content ul li').html());
        //获取HTML中的文本值
        console.log($('#content ul li').text());
        //设置html中的文本值
        $('#content ul li').text('hahahahahhahhaha');

        //获取文本输入框的值
        // console.log($('input[type=text]').val());
        //设置文本输入框的值
        // $('input[type=text]').val('姐姐');

        //select单选框默认值设置
        $('#single').val('香蕉'); //单选默认选中
        //select多选框默认值设置
        $('#multiple').val(['香蕉','橘子']); //多选默认选中
        //给input设置默认值,使用value属性的值 不能使用文本的值
        $('input').val(['B','0']);
    })
</script>

</body>
</html>

1-8 筛选的方法

  • children()

获得匹配元素的子元素的集合 (子元素非后代元素)

  • next()

获得匹配元素后面紧邻的同辈元素

  • siblings()

获得匹配元素前后⾯面紧邻的同辈元元素

  • parent()

获得集合中每个元素的父级元素

  • parents()

获得集合中每个元素的祖先元素

  • prev()

获得匹配元素前面紧邻的同辈元素

  • eq()

获得匹配元素的第几个元素

<div class="box">
    <p>alex</p>
    <h3>刘大帅</h3>
    <ul>
        <li>wxx</li>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>
<div class="box2"></div>
<div class="box3"></div>
<script>
    $(function () {
        //只获取匹配元素的子元素的集合
        console.log($('.box').children());
        //获取匹配元素的下一个兄弟标签
        console.log($('.box').next());
        //获取匹配元素的上一个兄弟标签
        console.log($('.box2').prev());
        //获取匹配元素的父集标签
        console.log($('.box').parent());
        //获取匹配元素的所有父集标签
        console.log($('.box ul li').parents()); //[ul, div.box, body, html]
        //获取ul li下的第二个元素,并设置颜色
        $('ul li').eq(2).css('color','red');
    })
</script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    $(function () {
        $('button').click(function () {
            //当点击这个元素设置背景色为红色,并且除它之外的其它兄弟元素,给它们设置的背景色为白色
             $(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#fff');
        })
    })
</script>
<ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
    <li><button>按钮3</button></li>
    <li><button>按钮4</button></li>
    <li><button>按钮5</button></li>
</ul>
<script>
    $(function () {
        $('button').click(function () {
            //当点击这个元素设置背景色为红色,并且除它之外的其它ul li下的元素,给它们设置的背景色为白色
            $(this).css('backgroundColor','red').parent().siblings('li').children().css('backgroundColor','#fff');
        })
    })
</script>

2 CSS的DOM操作

  • css()

读取和设置 style 对象的各种属性(如果值是数字,将会⾃自动转化为像素值,样式名不不带 “”样式使⽤用驼峰写法)

<div class="box">刘大帅</div>
<script>
    $(function () {
        //获取值
        console.log($('.box').css('color'));
        //设置值
        $('.box').css('color','red');
        $('.box').css('fontSize',20);
        //设置多个值
        $('.box').css({
            color:'red',
            fontSize:20
        })
    })
</script>
  • offset()

获取元素在当前视窗的相对偏移,返回的对象包含两个属性 top 、 left

  • position()

获取元素相对于最近一个position样式属性设置为relative或者absolute的父节点相对偏移

<style>     
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 800px;
        height: 500px;
        margin: 100px auto;
        background-color: lightgreen;
        position: relative;
    }
    .c1{
        width: 200px;
        height: 200px;
        background-color: #e4393c;
    }
</style>
<div class="box">
    <div class="c1">刘大帅</div>
</div>
<script>
    $(function () {
        //获取当前窗口的相对偏移 获取出来是一个对象 里保存着top和left属性
        var $offset = $('.c1').offset();
        console.log('offset Top:',$offset.top); //100
        console.log('offset Left:',$offset.left); //274.5

        //获取当前已定位的父集标签偏移量 获取出来是一个对象 里保存着top和left属性
        var $position = $('.c1').position();
        console.log('position Top:',$position.top); //0
        console.log('position Left:',$position.left); //0
        
        //设置偏移量
        $('.c1').click(function () {
            $(this).offset({top:100,left:100});
        })
    })
</script>
  • scrollTop()

获取元素滚动条距离顶端的距离

  • scrollLeft()

获取元素滚动条距离左侧的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jQuery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            position: absolute;
            top: 200px;
        }
        body{
            padding: 60px;
        }
        .fixHeader{
            width: 100%;
            height: 60px;
            background-color: red;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .return_top{
            width:120px;
            height:50px;
            background-color:red;
            color:white;
            text-align:center;
            line-height:50px;
            position:fixed;
            bottom:20px;
            right:20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="fixHeader"></div>
<div class="box"><p>刘大帅</p></div>
<div class='return_top hide'>返回顶部</div>
<script>
    $(function () {
      //scroll监测窗口滚动事件
        $(window).scroll(function () {
            var offset = $('p').offset(); //获取p标签的上方和右方距离px
            var scrollTop = $(this).scrollTop();
            if (scrollTop>offset.top){
                // $('.fixHeader').stop().show(); //关闭上一个动画在导航条出现(可设置时间ms)
                // $('.fixHeader').stop().fadeIn(); //关闭上一个动画在导航条淡出现(可设置时间ms)
                $('.fixHeader').stop().slideDown(1000); //关闭上一个动画在导航条拉出来(可设置时间ms)
                $('.return_top').removeClass('hide'); //显示返回顶部
            }else {
                // $('.fixHeader').stop().hide(); //关闭上一个动画在导航条隐藏(可设置时间ms)
                // $('.fixHeader').stop().fadeOut(); //关闭上一个动画在导航条淡隐藏(可设置时间ms)
                $('.fixHeader').stop().slideUp(1000); //关闭上一个动画在导航条拉隐藏(可设置时间ms)
                $('.return_top').addClass('hide'); //隐藏返回顶部
            }
        })
        // 返回顶部
        $(".return_top").click(function(){
            $(window).scrollTop(0);
        })
    })
</script>
</body>
</html>
  • width()/height()

获取和设置宽度和高度

  • innerWidth()/innerHeight()

获取匹配元素内部区域宽度(包括补白,不不包括边框)

  • outerWidth()/outerHeight()

获取匹配元素外部宽度(默认包括补白和边框)

<style>
    .box{
        width: 200px;
        height: 200px;
        background: red;
        border: 2px solid #000;
        padding: 50px;
        margin: 50px
    }
</style>
<div class="box"></div>
<script>
    $(function () {
        //获取宽度和高度
        console.log($('.box').width()); //200
        console.log($('.box').height()); //200
        //设置宽度和高度
        $('.box').width(300);
        $('.box').height(300);
        //获取宽度和高度(包括padding值)
        console.log($('.box').innerWidth()); //400
        console.log($('.box').innerHeight()); //400
        //获取宽度和高度(包括padding值和border值)
        console.log($('.box').outerWidth()); //404
        console.log($('.box').outerHeight()); //404
        //获取宽度和高度(包括padding值和border值和margin值)
        console.log($('.box').outerWidth(true)); //504
        console.log($('.box').outerHeight(true)); //504
    })
</script>

3 jquery文本操作

<div class="box"><span>刘大帅</span></div>
<script>
    $(function () {
        $('.box').click(function () {
            //获取文本
            // console.log(this.innerHTML);
            // console.log(this.innerText);
            console.log($(this).html());
            console.log($(this).text());

            //设置文本
            $(this).html('<a href="#">hello world</a>');
            //$(this).text('<a href="#">hello world</a>');
        })
    })
</script>

4 jquery value操作

<input type="text" id="i1">
<select id="i3">
    <option value="hebei">河北</option>
    <option value="hubei">湖北</option>
    <option value="guangdong">广东</option>
</select>
<p><textarea name="" id="i2" cols="30" rows="10">123</textarea></p>
<script>
    $(function () {
        $('#i1').blur(function() {
            //获取jquery对象value属性值
            console.log($(this).val());
            //设置value属性值
            $(this).val('hello world');
        })
        $('#i3').change(function () {
            //获取值
            console.log($(this).val());
            //设置值
            $(this).val('guangdong');
        })
        //获取值
        console.log($('#i2').val());
        //设置值
        console.log($('#i2').val('hello pig'));
    })
</script>

5 jquery的each循环

<ul>
    <li>23</li>
    <li>45</li>
    <li>78</li>
    <li>32</li>
</ul>
<script>
    var arr = [111,222,333]
    $.each(arr,function (i,j) {
        //i:为索引值,j:为值
        console.log(i,j);
    });

    var obj = {name:'lxx',age:12};
    $.each(obj,function (k,y) {
        //k:key值,y:值
        console.log(k,y);
    })

    $('ul li').each(function () {
        //循环函数中this,代指的事每一次循环的dom对象
        console.log(this);
        var v = $(this).html();
        if (parseInt(v)>40){
            $(this).css('color','red');
        }
    })
</script>

6 jquery链式操作

class A(object):
    def foo(self):
        print('foo...')
        return self

    def bar(self):
        print('bar...')
        return self

a = A()
a.foo().bar() # 链式操作
<div class="c1">hello Js</div>
<script>
    $('.c1').click(function () {
        $(this).addClass('.c2').removeClass('.c3');
    })
</script>
版权声明:本文为角角边原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/mimiICC/p/16555128.html