首页 > 其他分享 >day28 jQuery

day28 jQuery

时间：2022-11-08 20:44:25浏览次数：72  
标签：jQuery console day28 li 获取 div log

概述 :

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

特点 : (优势)

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

  • 有丰富的选择器和筛选器

  • 有良好的动画兼容 ( 动画库非常强大 , 借助了animated.js ( 主要用到css3的动画 ) )

官网地址

中文网

简单入门

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

  • dom对象转为jQuery对象 , 需要把dom对象传入jQuery函数中

  • jQuery对象转为dom对象 , 可使用下标获取对应的dom对象

// jQuery的核心对象都是函数
console.log(jQuery)
console.log($)
//相当于是document.querySelectorAll
console.log(jQuery('div'))//是jQuery对象
// 将jQuery对象转成dom对象使用下标获取就可以了
console.log(jQuery('div')[0]) //dom对象
// 将dom对象转成jQuery对象只要直接把对象传入jQuery函数中就可以
let dom = document.querySelectorAll('div')[1]
console.log($(dom))

jQuery的选择器

  • 所有的css选择器都可以使用 ,

  • 新增相关选择器 ( odd , even , first , last ,eq... )

//css选择器
console.log($('ul>li:nth-child(1)'))
//新增的选择器
console.log($('li:eq(1)'))  //传入的是下标
console.log($('li:odd'))    //根据下标，获取下标为奇数的
console.log($('li:even'))   //根据下标，获取下标为偶数的
console.log($('li:first'))  //获取第一个元素
console.log($('li:last'))   //获取最后一个元素
隔行变色功能实现
//获取li的奇数和偶数
let odd = $('li:odd')
let even = $('li:even')
//遍历奇数和偶数并给他们添加样式
for (let i = 0; i < odd.length; i++) {
    odd[i].style.backgroundColor = 'red'
}
for (let i = 0; i < even.length; i++) {
    even[i].style.backgroundColor = 'hotpink'
}

jQuery的筛选器

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

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

相关筛选器

  • eq 筛选对应下标的元素

  • last 筛选最后一个

  • first 筛选第一个

  • param 父元素

  • children 子元素

  • siblings 兄弟元素

  • prev 前面的元素

  • next 后面的元素

  • prevAll 前面所有的元素

  • nextAll 后面所有的元素

  • find 查找子元素内容

<script src="./jquery.min.js"></script>
<script>
    // 获取元素进行筛选
    // 获取第三个li
    console.log($('ul>li').eq(2))
    // 获取第一个
    console.log($('ul li').first())
    // 获取最后一个
    console.log($('ul li').last())
    // 父子关系
    console.log($('ul li').parent())//获取元素的父元素
    console.log($('ul li').parent('div'))//获取符合条件的父元素，不符合就没有
    // 兄弟关系
    console.log($('ul li').children())//获取子元素
    console.log($('ul li').eq(2).children().eq(1).siblings())//获取第2个子元素的兄弟们
    console.log($('ul li').eq(2).children().eq(1).next())//获取第2个子元素的下一个
    console.log($('ul li').eq(2).children().eq(1).nextAll())//获取第2个元素后面所有的
    console.log($('ul li').eq(2).children().eq(1).prev())//获取第2个元素前面的
    console.log($('ul li').eq(2).children().eq(1).prevAll())//获取第2个元素前面所有的
    // 查找
    console.log($('ul li').eq(2).find('.box'))//查找第2个元素内带有class为box的
</script>

jQuery的属性操作

  • prop 只能操作原生属性 ( 原生属性, 本身自带属性 )

  • attr 可以操作任意属性

//传入属性名和属性值，如果传入的参数是一个就是获取，2个就是设置
//prop 
$('div').prop('class','box')//设置
console.log($('div').prop('class'))//获取
//prop只能操作原生属性
console.log('div').eq(1).prop('id')
//如果不是原生属性，获取到的值是undefined
console.log('div').eq(1).prop('name')
​
//attr 底层的实现是setAttribute，getAttribute，removeAttribute
//原生的和定义的属性都可以设置和获取
$('div').attr('message','ok')
console.log($('div').attr('message'))
console.log($('div').attr('id'))
console.log($('div').attr('name'))

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

  • removeAttr 删除属性（也就是removeAttribute）

class属性的 相关操作

  • addClass 添加一个class属性

  • removeClass 移除一个class属性

  • toggleClass 切换 ( 有就删除 , 没有就添加 )

//class属性操作
//增删查改
//添加class
$('p').addClass('box')//给p添加一个class属性
$('p').addClass('red')
//查 通过prop获取
console.log($('p').prop('class'))
//删除class
$('p').removeClass('box')
//修改=>就是先删后加
$('p').removeClass('red')
$('p').addClass('green')
//切换 有就删除，没有就加上
$('p').toggleClass('green')
$('p').toggleClass('green')

样式操作

css方法
//传递1个参数是获取,2个参数是设置
//获取样式
console.log($('div').css('backgroundColor'))
console.log($('div').css('width'))
//设置样式
console.log($('div').css('padding','10px'))
DOM操作

增删查改

  • append 从后面追加到里面

  • prepend 从前面追加到里面

  • before 插入到当前元素之前

  • after 插入到当前元素之后

  • empty 清空子元素

  • remove 删除本身

  • replaceWith 替换

  • clone 克隆 ( 深拷贝 , 和之前的元素没有关系 )

//dom元素创建
let p = $('<p>我是创建的标签</p>')
console.log(p)
//从后面追加到div里面
$('div').append(p) 
//从前面追加到div里面
$('div').prepend(p) 
//插入到元素后面
$('div').after(p)
//插入到元素前面
$('div').before(p)
// 改
$('div').replaceWith(p)
//删除
$('div').empty()
$('div').remove()
//克隆 是深拷贝
let p = $('p').clone()

宽高获取

  • width 获取本身的宽度

  • height 获取本身的高度

  • innerWidth 获取本身的宽度+填充

  • innerHeight 获取本身的高度+填充

  • outerWidth 获取本身的宽度+填充+边框

  • outerHeight 获取本身的高度+填充+边框

//获取自身的宽度
console.log($('div').width()) 
//获取自身的高度
console.log($('div').height()) 
//获取自身的高度+填充
console.log($('div').innerHeight()) 
//获取自身的宽度+填充
console.log($('div').innerWidth()) 
//获取自身的宽度+填充+边框
console.log($('div').outerWidth())
//获取自身的高度+填充+边框
console.log($('div').outerHeight())

位置获取

  • offset 获取当前元素在页面上的位置

  • position 获取当前的盒子在父元素内容的位置 ( 不受margin影响 )

//获取元素到页面的距离(top和left值)
console.log($('p').offset())//返回一个jQuery对象
console.log($('p').offset().left)
console.log($('p').offset().top)
//获取元素到父元素的距离(不包含margin)
console.log($('p').position())//返回一个jQuery对象
console.log($('p').position().left)
console.log($('p').position().top)

事件

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

  • on 监听事件

  • off 取消事件

  • one 执行一次

//on 添加事件，传入事件名和处理函数
$('div').on('click',()=>{
    console.log('点击了')
})
function handler(){
    console.log('移动了')
}
$('div').on('mousemove',handler)
//off 取消事件,传入事件名和处理函数（函数要保证是一个）
$('div').off('mousemove',handler)
//one 只执行一次，传入事件名和处理函数
$('div').one('click',()=>{
    console.log('只执行一次')
})
jQuery针对所有的常用事件都实现了对应的方法

  • click

  • dblclick

  • mouseenter

  • mouseleave

  • keydown

  • keyup

  • keypress

  • change

  • hover （综合了mouseenter和mouseleave）

  • ....

$('div').mouseenter(()=>{
    console.log('移入了')
})
$('div').mouseleave(()=>{
    console.log('移出了')
})
$('span').mousemove(()=>{
    console.log('移动了')
})
$('input').change(()=>{
    console.log('内容改变了，失去焦点就触发')
})
//hover相当于mouseenter和mouseleave，它有两个处理函数
$('button').hover(()=>{
    console.log('移入了')
},()=>{
    console.log("移出了")
})
jQuery实现事件委托
//利用事件委托来操作
$('ul').mouseover((e) => {
    //事件源兼容写法
    e = e || window.event
    //如果目标元素的标签名是li
    if (e.target.tagName == 'LI') {
        //给它自己添加class样式
        $(e.target).addClass('selected')
        //移除兄弟元素的样式
        $(e.target).siblings().removeClass('selected')
    }
})

显示内容的获取和设置

有参就是设置，无参就是获取

  • html 相当于innerHTML

  • text 相当于innerText

  • val 相当于value

//设置
$('input').val('我是显示的内容')
$('div').text('divdiv')
$('span').html('我是span')
//获取
console.log($('input').val())
console.log($('div').text())
console.log($('span').html())

jQuery的动画

animate 动画
show 显示， hide 隐藏， toggle切换
slideUp 上去（隐藏），slideDown 下来（显示），slideToggle切换
//传入时间 回调函数
//改变的是宽高，透明度
$('div').show(2000,()=>{
    $('div').hide(2000)
})
//slideDown，slideUp 变化的是高度
$('div').slideDown(2000,()=>{
    $('div').slideUp(2000
})
//show和hide是配对的，toggle显示就调用hide，隐藏就调用show
//slideToggle显示就调用slideUp，隐藏就调用slideDown
$('div').toggle(2000,()=>{
    $('div').slideToggle(2000)
})
fadeOut隐藏，fadeIn显示，fadeToggle切换，fadeTo切换到对应的透明的
//只改变透明度，fadeToggle，如果显示就调用fadeOut，隐藏就调用fadeIn
$('p').fadeIn(2000,()=>{
    $('p').fadeOut(2000,()=>{
        $('p').fadeToggle(2000)
    })
})

jQueryde ajax

概述 ：jQuery的ajax是对原生的ajax进行了封装（核心点还是xmlhtmlrequest）并对它进行了拓展，，原生ajax只支持get和post请求，jQuery在原生ajax的基础上增强了其他支持的请求（put，delete，patch，patch...）

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()
 

标签：jQuery,console,day28,li,获取,div,log
From： https://www.cnblogs.com/itlulu/p/16871112.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99