day28Jquery

最新推荐文章于 2024-06-24 11:05:01 发布

H_Z_W001

最新推荐文章于 2024-06-24 11:05:01 发布

阅读量75

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/H_Z_W001/article/details/127873100

版权

概述：

Jquery是一个轻量级的js库，它将js功能进行了封装（所有的都是函数），它在封装的基础上做了进一步的兼容（兼容性好）。

特点

链式调用（里面所有的方法返回的都是一个Jquery对象）
丰富的选择器和筛选器
良好的动画兼容（动画库很强大借助了animated.js（主要事css3动画））

官方地址jQuery

中文网jQuery API 中文文档 | jQuery 中文网 (jquery123.com)

简单入门

核心对象Jquery（是一个函数）简写为$

dom对象转为jQuery对象将dom对象传入jQuery的函数
将jQuery对象转为dom对象使用下标获取对应的dom元素

<div>hello</div>
<div>world</div>
<script src="./jquery.min.js"></script>
<script>
    //核心对象（都是函数）
    console.log(jQuery);
    console.log($);
    //相对于是document.querySelectorAll
    console.log(jQuery('div'))//jQuery对象
    //将jQuery对象转为dom对象使用下标获取就可以了
    console.log(jQuery('div')[0])//dom对象
    //将dom对象转为jQuery对象
    let dom = document.querySelector('div')
    console.log($(dom))
</script>

jQuery的选择器

所有css选择器都可以使用
新增相关选择器（odd even first laet eq）

//css选择器
console.log($('ul>li:nth-child(2)'));
//新增的选择器
console.log($('li:eq(1)'))//eq传入的是下标 获取第二个
console.log($('li:add'))//根据下标 获取下标为奇数的
console.log($('li:even'))//根据下标 获取下标为偶数的
console.log($('li:first'))//获取第一个
console.log($('li:last'))//获取最后一个

隔行变色功能实现

//隔行变色
let odd = $('li:odd')
let even = $('li:even')
//length获取里面元素的个数
for(var i = 0; i<odd; i++){
    odd[i].style.backgroundColor = 'red'
}
for(var i = 0; i<even; i++){
    even[1].style.backgroundColor = 'yellow'
}

Jquery的筛选器

它是用于筛选获取的元素的
它可以根据条件（根据选择器）及关系筛选（节点属性）

相关筛选器

eq 筛选对应下标的元素
last 筛选最后一个
first 筛选第一个
parent 父元素
children 子元素
sibings 兄弟元素
prev 前面的兄弟
next 后面的兄弟
prevAll 前面的所有兄弟
nextAll 后面的所有兄弟
find 查宅子元素内容

//获取元素进行筛选
console.log($('ul>li').eq(2))//得到第三个li
console.log($('ul>li').first())//获取第一个
console.log($('ul>li').last())//获取最后一个
//父子关系
console.log($('ul>li').eq(2).parent('div'))//获取符合选择器的父元素（不符合就没有）
console.log($('ul>li').eq(2).parent())//获取对应的父元素
console.log($('ul>li').eq(2).children())//获取所有的子元素
console.log($('ul>li').eq(2).children('a'))//获取所有的子元素a
//兄弟关系
console.log($('ul>li:eq(2)').children().eq(1).sibings('span'))//获取第三个li的第二个子元素的所有的span兄弟
console.log($('ul>li:eq(2)').children.eq(1).sibings())//获取第三个li的第二个子元素所有的兄弟
console.log($('ul>li:eq(2)').prev())//获取第三个li前一个元素
console.log($('ul>li:eq(2)').prev('box'))//获取第三个li的前面box元素（符合条件才返回结果）
console.log($('ul>li:eq(2)').next())//获取第三个li后一个box元素（符合条件才返回结果）
console.log($('ul>li:eq(2)').next())//获取第三个li后一个box元素（符合条件才返回结果）
cosnole.log($('ul>li:eq(2)').nextAll())//获取第三个元素li后面的所有
console.log($('ul>li:eq(2)').nextAll())//获取第三个li后面的所有
console.log($('ul>li:eq(2)').prevAll())//获取第三个li前后的所有
console.log($('ul>li:eq(2)').prevAll('box'))//获取第三个li前面的所有box元素
//查找find
console.log($('ul).find('.box'))//查找所有子元素内容找到对应的条件 对应的class名字为box的
console.log($('ul>li').eq(2).find('.box'))//查找所有子元素内容找到对应的条件（跨级）

jQuery的属性操作

prop只能操作原生属性（原生属性本身自带属性）
attr 可以操作任意属性

//jQuery属性操作都可以操作所有获取元素属性
//属性名 属性值 如果传递的参数只有一个就是获取 如果是俩个就是设置
$('div').prop('class','box')//设置
console.log($('div').prop('class'));//获取
//prop只能操作原生属性
console.log($('div').eq(0).prop('id'));
//对应不是原生属性值获取的是undefined
console.log($('div').eq(0).prop('name'));
//设置到对应的元素对象上 element.id element.name
$('div').prop('content','我是内容')//设置
console.log($('div').prop('content'));
//attr 底层实现setAtrribute getAttribute
$('div').attr('message','ok')
console.log($('div').attr('message'));
console.log($('div').attr('id'));
console.log($('div').attr('name'));
console.log($('div').attr('content'));

removeProp 删除prop设置的属性（原生的属性）
removeAttr 删除属性（removeAttribute）

class相关操作

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

//class属性操作
//增删改查
//添加class
$('p').addClass('box')
$('p').addClass('red')
//获取 通过attr获取prop获取
console.log($('p').prop('class'));
//删除class
$('p').removeClass('box')
//修改
// 先删再加
$('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 插入到当前的后面
empty 清空
remove 删除
replaceWith 替换
clone 克隆

//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 获取本身的宽度+填充
innerHeight 获取本身的高度+填充
outerWidth 获取本身的宽度+填充+边框
outerHeight 获取本身的高度+填充+边框

//宽高相关的方法 传参就是设置 没传参就是获取
// $('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());//返回一个对象

事件

jQuery的事件用到的就是观察者模式，它设计了对应的方法。

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('鼠标移进');
})

jQuery针对所有的常用事件都实现了对应的方法

click
dblclick
mouseenter
mouseleave
keydown
keyup
change
hover (总和了mouseleave mouseenter)
...

//事件名 处理函数
$('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').mouseenter(()=>{
    console.log('移进去了');
})
$('button').mouseleave(()=>{
    console.log('移出去了');
})
$('button').mousemove(()=>{
    console.log('移动');
})
$('input').change(()=>{
    console.log('改变值');
})
//hover方法 结合了移进和移出（mouseenter和mouseleave）
$('p').hover(()=>{
    console.log('移进');
},()=>{
    console.log('移出');
})

jQuery实现对应的事件委托

// 利用事件委托来操作
$('ul').mouseover((e)=>{
    //获取事件源
    e = e || window.event
    if(e.target.tagName == 'LI'){
        //给对应的li添加class
        $(e.target).addClass('selected')//给自己添加样式
        $(e.target).siblings().removeClass('selected')//移出兄弟的样式
    }
})

显示内容

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(需要变化的样式) 时间（执行时间） 回调函数 option里面只传number类型的值 (可以带单
位)
$('div').animate({
    width:200,
    left:200
},2000,()=>{
    $('div').animate({
        width:100,
        top:300,
        opacity:0.5
    },2000,()=>{
        console.log('动画完成了');
    })
})

show 显示 hide 隐藏 toggle 切换

slideUp 上去 slideDown 下去 slideToggle 切换

//传入时间 回调函数
//宽高和透明度
$('div').show(2000,()=>{
    $('div').hide(2000)
})
//显示隐藏 slideDown 变化高度
$('div').slideDown(2000,()=>{
    $('div').slideUp(2000)
})
//show和hide配对的 显示就调用hide 隐藏调用show
//slideToggle 显示调用slideUp 隐藏调用slideDown
$('div').toggle(2000,()=>{
    $('div').slideToggle(2000)
})

fadeOut 隐藏 fadeIn 显示 fadeToggle 切换 fadeTo 切换到对应透明度

//显示隐藏 只改变透明度 fadeToggle 如果显示fadeOut 隐藏调用fadeIn
$('div').fadeIn(2000,()=>{
    $('div').fadeOut(2000,()=>{
        $('div').fadeToggle(3000)
    })
})

Jquery的ajax

概述：

jquery的ajax对应的原生的ajax进行了封装（xmlhttprequest），它对应xmlhttprequest进行了扩展，xmlhttprequest只支持get请求和post，但是ajax它在此基础上进行了增强它还支持其他的请求（putdelete patch option...）

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>
    </head>
    <body>
        <button>get方法</button>
        <button>post方法</button>
        <button>ajax方法</button>
        <script src="./jquery.min.js"></script>
        <script>
            $('button:eq(0)').click(()=>{
                //url地址 参数 回调函数
                $.get('https://jsonplaceholder.typicode.com/todos',{
                    _
                    limit:10
                },(res)=>{
                    console.log(res);
                })
            })
            $('button:eq(1)').click(()=>{
                //url地址 参数 回调函数
                $.post('https://jsonplaceholder.typicode.com/posts',{
                    username:
                    '
                    jack'
                },(res)=>{
                    console.log(res);
                })
            })
            $('button:eq(2)').click(()=>{
                // $.ajax('https://jsonplaceholder.typicode.com/todos',{
                // data:{
                //
                _
                limit:10
                // },
                // method:'get',
                // timeout:3000,
                // async:true,
                // dataType:'json',
                // success(res){
                //
                console.log(res);
                // },
                // error(err){
                //
                console.log(err);
                // },
                // complete(){
                //
                console.log('完成了');
                // }
                // })
                $.ajax({
                    url:'https://jsonplaceholder.typicode.com/todos',
                    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>
    </body>
</html>

ajax的钩子函数（生命周期函数自动调用）

ajaxComplete 请求完成调用
ajaxError 请求错误调用
ajaxSend 请求发送调用
ajaxStart 请求开始发送
ajaxStop 请求发送停止
ajaxSuccess 请求发送成功

jQuery的多库共存

概述:

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

noConflict

console.log(jQuery);
console.log($);
//如果不传参数 默认干掉$ 传入true俩个都干掉
let a = $.noConflict(true)
console.log($);//被干掉了
console.log(jQuery);
console.log(a);

jQuery的插件扩展

使用extend方法

给jQuery对象进行扩展

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

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