JQuery总结2

Emperorn

已于 2022-10-24 11:36:39 修改

阅读量626

点赞数

文章标签： 1024程序员节

于 2022-10-24 11:31:38 首次发布

本文链接：https://blog.csdn.net/Emperorn/article/details/127488845

版权

一、jQuery入门

jquery介绍

通过JQuery AJAX方法，可以使用http协议按Get/post请求方式从远程服务器上请求文本，HTML，XML，JOSN。将数据载入网页中。
JQuery不是生产者是搬运工，jQuery 是一个 JavaScript 库，简化了 JavaScript 编程。
jQuery 库可以通过一行简单的标记被添加到网页中。

1.使用./js/jquer.min.js

1.1导入（建议放在head里面）

<script src="./js/jquer.min.js"></script>

1.2使用（直接使用）

// jQuery //他是核心的对象里面的方法都是通过他来调用的
console.log(jQuery('body')); //通过jquery对象来调用获取方法
// 使用$来替代jQuery
console.log($('body'));

二、DOM操作

1.选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <ul id="box">
        <li>1</li>
        <li name='jack'>2</li>
        <li class="inner">3</li>
        <li>4</li>
    </ul>
    <script>
        // JQuery核心对象，里面的方法都是通过他来调用的
        console.log(jQuery('ul'))
        // 使用$来代替JQuery
        // $获取的是数组还是元素？
        console.log($("#box"))//id为box
        console.log($(".inner"))
        console.log($("li"))
        console.log($("ul>li"))
        console.log($("li[name='jack']"))//使用 选择器+[属性名=属性值] 获取元素
        // 按照使用的时候来决定获取的方式
        console.log($("li").length)
        Array.from($('li')).forEach(v => {
            console.log(v)
        });
        console.log($('li:first'));//获取第一个li
        console.log($('li:last'));//获取最后一个li
        console.log($('li:eq(2)'));//获取下标为2的li元素
        console.log($('li:odd'));//获取奇数下标
        console.log($('li:even'));//获取偶数下标  
    </script>
</body>
</html>

1.2筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="foot">5</li>
        <li class="foot"><a href="#">6</a></li>
    </ul>
    <script>
        console.log($('li').first());//获取li第一个
        console.log($('li').last())//获取li最后一个
        console.log($('li:eq(2)').prev());//获取li下标为2的上一个
        console.log($('li:eq(2)').prev('.active'));//获取li下标为2的，并且是“.active”的上一个
        console.log($('li:eq(2)').next());//获取li下标为2的下一个
        console.log($('li:eq(2)').next('.foot'));//获取li下标为2的，并且是“.active”的下一个
        console.log($('li:eq(2)').prevAll());//获取li下标为2的上面所有
        console.log($('li:eq(2)').prevAll('.active'));//获取li下标为2的上面所有为“.active”
        console.log($('li:eq(2)').nextAll());//获取li下标为2的下面所有
        console.log($('li:eq(2)').nextAll('.foot'));//获取li下标为2的下面所有为“.active”
        console.log($('li').parent());//获取li的父元素
        console.log($('li').parent("ul"));//获取li的父元素，并且是ul
        console.log($('li').parents());//获取li所有的父元素，直到html为止
        console.log($('li').parents("body"));//获取li的所有父元素中的body，
        console.log($('ul').children());//获取ul的所有子元素（第一级子元素）
        console.log($('ul').children(".foot"));//获取ul的所有子元素（第一级子元素）中的.foot
        console.log($('li:eq(2)').siblings());//获取li下标为2的所有兄弟元素
        console.log($('li:eq(2)').siblings('.foot'));//获取li下标为2的所有兄弟元素中为.foot的元素
        console.log($('ul').find('li'));//查找元素，在ul中查找li 返回查找到的所有
        console.log($('ul').find('a'));
        console.log($('li').eq(3));//相当于$('li:eq(2)')
        
    </script>
</body>
</html>

1.3属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        // prop 隐式添加属性（添加上去了，但是检查器里面没有，对于原本已经有的属性就是显示添加，设置）
        // 传一个参数就是获取，传两个参数就是设置
        console.log($('div').prop('id'))
        $('div').prop('class','inner')//设置class属性，值为inner
        $('div').prop('name','jack')
        console.log($('div').prop('name'));
        // attr 显示添加属性
        console.log($('div').attr('name'));//不能获取隐式添加的内容（本身已经有的属性除外）undefined
        console.log($('div').attr('class'));
        $('div').attr('age', 18)//设置class属性，值为inner
        // 删除
        $('div').removeAttr('class')//显示删除
        $('div').removeProp('name')//隐式删除
        console.log($('div').attr('class'))
        console.log($('div').prop('name'))
        // 属性操作其他方法
        // $('div').addClass() //添加class属性值
        // $('div').removeClass() //删除class属性值
        // $('div').hasClass()//判断是否存在
        // $('div').toggleClass()//对于没有的添加，已有的删除（class开关）
 
    </script>
</body>
</html>

1.4显示内容+样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <div class="box">我是div的内容</div>
    <div><a href="#">hello</a></div>
    <input type="text" value="输入">
    <script>
        // 不传参就是获取，传参就是设置
 
        // 相当于innerText
        console.log($('div').eq(0).text())
        $('div').eq(0).text("我修改了")
        // 相当于innerHTML
        console.log($('div').eq(1).html())
        $('div').eq(1).html("<b>world</b>")
        // 获取input的value属性
        console.log($('input').val())
        // $('input').val('hello woeld')
 
        // 样式操作
        // 传一个参数为获取，传两个参数未设置 相当于getComputerStyle
        console.log($('div').css('width'))
        $('.box').css('backgroundColor','red')
    </script>
</body>
</html>

1.5元素操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <div>我是原来的div</div>
    <ul>
        <li class="save">1</li>
        <li>2 <span></span></li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p></p>
    <script>
        //创建元素
        let $div = $('<div>1</div>')//创建元素节点
        // 添加操作 添加操作不能添加重复的元素
        $('body').append($div)//添加到body元素里面内容的后面
        $div.appendTo($('body'))//将div添加到body里面
        // 往前添加
        let $a = $('<a></a>')
        $a.attr('href','http://www.baidu.com')//设置href属性
        $('body').prepend($a)//body的最前面添加a标签
        $a.prependTo($('body'))//将a标签添加在body前面
        // after 在。。。之后 before在。。。之前（）兄弟节点添加
        let $b = $('<b></b>')
        $('div').eq(0).after($b)//在div的后面进行添加
        $b.insertAfter($('div').eq(0))//将b标签插入到div后面
        let $p = $('<p></p>')
        $('div').eq(0).before($p)//在div前面进行添加
        $p.insertBefore($('div').eq(0))//将p标签插入到div后面
        // replace替换 替换所有
        let $h = $('<h1>hello</h1>')//将div全部替换成h1标签
        $('div').replaceWith($h)//将a标签替换进div标签（div会被删除）
        $('<a></a>').replaceAll($('p'))//将a标签替换进div标签（div会被删除）
        // // 删
 
        // $('ul').remove()//将对应的内容包括自身全部删除（事件也会被删除）
        $('li[class=save]').remove()
        // $('li').remove.('.save')
        // 删除方法 将里面的所有元素全部删除
        // $('li').empty()//将里面的节点全部清空
        // 克隆 clone 是否克隆所有的属性 是否克隆事件 默认false（不克隆）
        $('body').append($('li').eq(0).clone())
    </script>
</body>
</html>

1.6元素大小获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 50px;
            padding: 50px;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let div = $('div') 
        // 使用css获取会带上px，返回的是一个字符串
        console.log(div.css("width"))
        console.log(div.css("height"))
        // width方法，height方法 不包含padding以及margin和border
        console.log(div.width())
        console.log(div.height())
        // innerWidth innerHeight 包含padding 不包含margin 也不包含border
        console.log(div.innerWidth())
        console.log(div.innerHeight())
        // outerWidth outerHeight 包含padding以及border 不包含margin
        console.log(div.outerWidth())
        console.log(div.outerHeight())
        // outerWidth outerHeight有一个参数，表示是否包含margin
        console.log(div.outerWidth(true))
        console.log(div.outerHeight(true))
    </script>
</body>
</html>

1.7元素位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
    <style>
        .box2{
            width: 300px;
            height: 300px;
            /* margin: 50px; */
            /* padding: 50px; */
            border: 10px solid #000;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .box1{
            position: relative;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <script>
        let box3 = document.querySelector('.box3')
        box3.innerText = '123'
        let div = $('.box2') 
        div.text('123')
        // offset 基于body偏移的位置 返回的也是一个对象
        console.log(div.offset())
        console.log(div.offset().left)
        console.log(div.offset().top)
        // position 定位 返回基于父元素定位的位置，返回一个对象
        console.log(div.position())//基于box1的定位
        console.log(div.position().left)
        console.log(div.position().top)
    </script>
</body>
</html>

1.8事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquer.min.js"></script>
</head>
<body>
    <div><button>点我</button></div>
    <script>
        // 事件类型 事件处理函数
        $('button').on('click',data,function(e){
            console.log(e)
            console.log(e.data)
            console.log(this)
        })
 
        // 可以在事件发布的时候携带数据 使用e.data接收
        $('button').on('click',{name:"jack"},function(e){
            e = e || window.event 
            console.log(e.data)
        })
 
        // 事件委托机制
        $('div').on('click',function(e){
            console.log(this)
            console.log(e.target)
            console.log($(e.target)) 
        })
 
        // 只有在button情况下click才会触发 
        $('div').on('click','button',{name:"jack"},function(e){
            console.log(this)
            console.log(e.data)
            console.log(e.target)
        })
 
        // 取消事件off
        $('div').off()
 
        // 只执行一次的事件 
        $('button').one('click',function(){
            console.log('点击了')
        })
 
        // 屏幕滚动栏距离
        $(window).on('scroll',function(){
            console.log($(window).scrollLeft())
            console.log($(window).scrollTop())
        })
 
        // 自动执行事件
        $('button').trigger('click',{name:"jack"})
    </script>
</body>
</html>