JQuery

iYannn

已于 2022-11-08 21:16:18 修改

阅读量204

点赞数

文章标签： jquery javascript 前端

于 2022-11-08 21:15:09 首次发布

本文链接：https://blog.csdn.net/qq_52910120/article/details/127759093

版权

Day28 JQuery

概述

jQuery是一个轻量级的js库,他将js的功能进行了封装,它在封装的基础上做了进一步的兼容(兼容性好)

特点

链式调用(里面所有的方法返回的都是一个jQuery对象)

丰富的选择器和筛选器

良好的动画兼容(动画库很强借助了animated.js(主要css3的动画))

中文网

https://www.jquery123.com/

简单入门

核心对象是jQuery(是一个函数(函数也是对象))简写为$

        //读取对象 相当于document.querySelectorAll
        console.log(jQuery('div'));
        //将jQuery对象转为dom对象使用下标获取就可以了
        console.log(jQuery('div')[0]);
        //将dom对象转为jQuery对象
        let dom = document.querySelector('div')
        console.log($(dom));

jQuery的选择器

它是用于筛选获取的元素的

他可以根据条件(根据选择器)及关系筛选(节点关系)

       console.log($('li:eq(1)'));//eq 传入的是下标 获取第二个
       console.log($('li:odd'));//根据下标 获取下标为奇数的
       console.log($('li:even'));//根据下标 获取下标为偶数的
       console.log($('li:first'));//获取第一个
       console.log($('li:last'));//获取最后一个

隔行变色功能实现

 	   let odd = $('li:odd')
       let even = $('li:even')
       for(var i=0;i<odd.length;i++){
        odd[i].style.backgroundColor = 'red'
       }
       for(var i=0;i<even.length;i++){
        even[i].style.backgroundColor = 'yellow'
       }

JQuery的筛选器

用于筛选获取的元素
根据传入的选择器以及关系筛选

jQuery的属性操作

prop 只能操作原生属性(原生属性就是本身自带的属性)
attr 可以操作任意属性

        //jQuery的属性操作可以操作所有获取元素属性
        //属性名  属性值, 如果传递的参数只有一个就是获取,两个就是设置
        $('div').prop('class', 'box')
        console.log($('div').prop('class')); //box
        //prop  只能操作原生属性
        //对应操作的不是原生属性值获取的是undefined
        $('div').prop('content', '1213')
        console.log($('div').prop('content'));
        $('div').attr('name', '1213')
        console.log($('div').attr('name'));

class的相关操作

addClass 添加一个class
removeClass 移除一个class
toggleClass 切换(有就删除没有就添加)

        $('p').addClass('box')
        $('p').addClass('red')
            //先删除属性再添加就是修改
        $('p').removeClass('red')
        $('p').addClass('green')
            //切换  有这个元素则会删除 没有就会添加
        $('p').toggleClass('green') //删除
        $('p').toggleClass('green') //添加

样式操作

css方法

      //样式操作 获取样式 设置样式
        //传递一个参数就获取 传递俩个参数就是设置（参数传满了就是设置）
        //可以获取所有的样式
        console.log($('div').css('backgroundColor'));
        console.log($('div').css('height'));
        //设置样式
        $('div').css('width','100px')

DOM操作

增删改查

append 从后面追加到当前元素里面

prepend 从前面追加到当前元素里面

before 插入到当前元素的前面

after 插入到当前元素的后面

remove 清空当前元素的所有子元素

     //dom元素创建
        let jqueryObj = $('<p>我是新建的标签</p>')
        console.log(jqueryObj);
        //增删改方法
        //添加
        $('div').append(jqueryObj) //从后面追加到div里面
        $('div').prepend(jqueryObj)//从前面追加到div里面
        $('div').before(jqueryObj) //插入到前面
        $('div').after(jqueryObj) //插入到后面
        //删除
        // $('div').empty() //清空(将子元素清空)
        // $('div').remove() //将自己删除
        //改
        $('div').replaceWith($('<b></b>'))
        //克隆 深拷贝
        let p = $('p').clone()
        console.log(p);

宽高获取

width 获取本身的宽度
height 获取本身的高度
innerWidth 获取本身的宽度+padding
innerHei 获取本身的高度+padding(左右都要包)
outerWidth(true) 有true时获取本身的宽度+padding+border+margin 没有true就去掉margin的大小
outerHeight(true) 有true时获取本身的高度+padding+border+margin 没有true就去掉margin的大小

        //宽高相关的方法 传参就是设置 没传参就是获取
        // $('div').width(200) 只包含自身本身的宽度
        console.log($('div').width());//返回number类型的值
        console.log($('div').height());//返回number类型的值
        //innerWidth innerHeight 包含padding
        console.log($('div').innerWidth());
        console.log($('div').innerHeight());
        //outerWidth outerHeight 包含padding和border
        console.log($('div').outerWidth());
        console.log($('div').outerHeight());

获取位置

offset 获取当前的盒子离页面的距离

position 获取当前盒子离父元素的距离(不受margin的影响)

  //获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
        console.log($('p').offset());//返回一个对象
        console.log($('p').offset().left);
        console.log($('p').offset().top);
        console.log($('button').offset());//返回一个对象
        //获取当前的盒子在父元素内容的位置（不受margin影响）
        console.log($('p').position());//返回一个对象
        console.log($('button').position());//返回一个对象

事件

on 监听事件
off 取消事件
one 执行一次

    $('div').on('click', function() {
        console.log('点击了');
    })
    $('div').on('click', handler)

    function handler() {
        console.log('点击了1');
    }
    //取消事件监听()
    $('div').off('click', handler)
        //one 方法  只执行一次
    $('div').one('mouseenter', () => {
            console.log('鼠标移入');
        })
        //针对对应的事件的相关函数
    $('button').click(() => {
        console.log('button点击了');
    })
    $('button').mousemove(() => {
            console.log('移动了');
        })
	$('input').change(()=>{
    console.log('值改变了')
    })
        //hover方法  结合了移进和移出mouseleave mouseenter
    $('div').hover(() => {
        console.log('移进了');
    }, () => {
        console.log('移出了'); //子元素不会触发
    })

显示内容

html 相当于innerHTML
text 相当于innerText
val 相当于获取value

        //无参就是获取 有参数就设置
        $('div').html('<b>你好</b>')
        $('input').val('我是显示的值')
        $('span').text('<b>你好</b>')
        console.log($('div').html())
        console.log($('input').val())
        console.log($('span').text())

jQuery的动画

animate动画

    //操作的元素 怎么动   利用回调函数
    //option(要操作的元素) 时间  回调函数  optiom里面只传number类型的值   
     $('div').animate({
        width: 200,
        left: 200
    }, 1000, () => {
        $('div').animate({
            width: 100,
            top: 300,
            opacity: 0.5
        }, 2000, () => {
            console.log('动画完成了');
        })
    })

show显示 hide隐藏toggle切换 slideUp向上滑动 slideDown向下滑动 slideToggle切换

    //宽高和透明度
    $('div').show(2000, () => {
            $('div').hide(2000)
        })
        //以滑动的方式显示
    $('div').slideDown(2000, () => {
        $('div').slideUp(2000)
    })

jQuery的ajax

概述:

jQuery的ajax对应的原生ajax进行了封装,它对应XMLhttprequest进行了扩展,XMLhttprequests只支持get请求和post,但是ajax他在此基础上进行了增强它还支持其他请求

resultFul

resultFul是一种接口风格,它遵从rest规范,它是以返回json格式数据,以请求的方式来区分对应的功能(跨平台)

常见的result请求

get请求获取数据
post请求添加数据
delete请求删除数据
put请求修改一条
patch请求批量修改数据

对应的方法

get 方法
post方法
ajax方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <button>get方法</button><button>post方法</button><button>ajax方法</button>

</body>

</html>
<script>
    $('button:eq(0)').click(() => {
        //url地址  参数  回调函数
        $.get('https://www.jquery123.com/jQuery.ajax/', {
            _limit: 10
        }, (res) => {
            console.log(res);
        })
    })
    $('button:eq(1)').click(() => {
        $.post('https://www.jquery123.com/jQuery.ajax/', {
            username: 'Jack'
        }, (res) => {
            console.log(res);
        })
    })
    $('button:eq(2)').click(() => {
        $.ajax({
            url: 'https://www.jquery123.com/jQuery.ajax/',
            data: {
                _limit: 10
            },
            method: 'get',
            timeout: 3000,
            async: true, //是否异步
            dataType: 'json',
            success(res) {
                console.log(res);
            },
            error(err) {
                console.log(err);
            },
            complete() {
                console.log('完成了');
            }
        })
    })
</script>

ajax的钩子函数(生命周期函数完成这些事件后自动调用)

ajaxComplete请求完成调用

ajaxError 请求错误调用

ajaxSend 请求发送调用

ajaxStart请求开始发送

ajaxStop请求发送停止

ajaxSuccess请求发送成功

jQuery的多库共存

概述:

当你使用其他的库和jQuery库结合使用的，我们有可能在其他库里面有对应的一个方法叫做jQuery 或者有一个变量叫$,那么这个时候就会发生冲突。多库共存就是为了解决这个问题。

noConflict

//让jQuery释放掉对$控制权让自己控制
let a=$.noConflict(true)
console.log(a('p'))//相当于$('p')

jQuery的插件扩展

使用extend方法

给jQuery的对象进行扩展

//给jQuery对象扩展 静态方法
//第一个名字 扩展的配置
$.extend({
sayHello() {
console.log('hello');
}
})
//调用
$.sayHello()

给jQuery的对象方法进行扩展

        //给jQuery对象的方法扩展 原型方法
        $.fn.extend({
            redColor(){
                $(this).css('color','red')
            }
        })
        $('div').redColor()
        $('p').redColor()