jQuery知识点

最新推荐文章于 2023-04-07 11:31:46 发布

weixin_52545652

最新推荐文章于 2023-04-07 11:31:46 发布

阅读量192

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_52545652/article/details/125836748

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、jQuery的简介

jQuery内部封装了原生的js代码，还额外添加了很多的功能，能够使得js代码是写得更加简单。

CDN：内容分发网络（前端免费的cdn网站---bootcdn）

二、jQuery的基本语法

jQuery(选择器).action()

其中得jQuery可以用$来简化。

原生js代码与jQuery对比

Eg:将p标签中文本变色。

//原生js代码
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
'red'
//jQuery代码
$('p').css('color','blue')
w.fn.init [p#d1, prevObject: w.fn.init(1)]

基本选择器

（1）id选择器（2）class选择器（3）标签选择器

//id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)
//class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]
//标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]


//jQuery对象和原生js对象的转化

//(1)jQuery ---> 原生js对象
$('#d1')[0]
<div id="d1">…</div>

//(2)原生js对象 --->jQuery
$(原生js对象)

组合选择器（分组与嵌套）

$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]
$('dic#d1')
w.fn.init [prevObject: w.fn.init(1)]
$('*')
w.fn.init(17) [html, head, meta, title, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, script, prevObject: w.fn.init(1)]
$('#d1,.c1,p')
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]

$('div span')   //后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  //儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  //毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  //弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器

$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first')
w.fn.init [li, prevObject: w.fn.init(1)]
$('ul li:last')
w.fn.init [li, prevObject: w.fn.init(1)]
$('ul li:eq(2)')   //取索引为2
w.fn.init [li, prevObject: w.fn.init(1)]
$('ul li:even')    //取偶数的
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]
$('ul li:odd')    //取奇数的
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]
$('ul li:gt(2)')  //取大于2的
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:lt(2)')  //取小于2的
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]
$('ul li:not(“#d1”)')  //移除满足条件的标签
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('div:has("p")')  //选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="aa"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('[username="bb"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="cc"]')
w.fn.init [p, prevObject: w.fn.init(1)]
$('type]')
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') //等价于上面 只有表单才可以
w.fn.init [input, prevObject: w.fn.init(1)]
$(':password')
w.fn.init [input, prevObject: w.fn.init(1)]


:text
:password
:file
:radio
:checkbox
:submit
:reset
:button


表单对象属性
:enabled
:disabled
:checked
:selected

$(':checked')  //会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]
$(':selected')  //只会拿到selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked')  // 加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

$('#d1').next()   //同级别的下一个
w.fn.init [span, prevObject: w.fn.init(1)]
$('#d1').nextAll() 
w.fn.init(6) [span, div#d2, span, span, span.c1, script, prevObject: w.fn.init(1)]
$('#d1').nextUntil('.c1')   // 不包含c1
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]

$('.c1').prev()  //上一个
w.fn.init [span, prevObject: w.fn.init(1)]
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

$('#d3').parent()  // 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]

$('#d2').children()  //儿子
w.fn.init(2) [span, p, prevObject: w.fn.init(1)]
$('#d2').siblings()  // 同级别上下所有
w.fn.init(6) [span#d1, span, span, span, span.c1, script, prevObject: w.fn.init(1)]


//下面两两等价
$('div span:first')
$('div span').first()

$('div span:last')
$('div span').last()

$('div span:not("#d3")')
$('div span').not('#d3')

操作标签

样式操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

CSS

<p>111</p>
<p>222</p>

jQuery的链式操作，使用jQuery可以做到一行代码操作很多标签。

jQuery对象调用jQuery方法之后返回还是当前jQuery对象，也就可以继续调用。

eg：将上面的第一个p标签变成红色第二个变成绿色。

$('p').first().css('color','red').next().css('color','red') f

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
eg：$(window).scrollTop()  //括号内不加参数就是获取，加了就是设置
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

尺寸

$('p').height()     //文本
20.6667
$('p').width()
952
$('p').innerHeight()    //文本+padding
24.6667
$('p').innerWidth()
958
$('p').outerWidth()     //文本+padding+border
958
$('p').outerHeight()
24.6667

文本操作

获取文本

js中---innerText() innerHTML()

jQuery中---text() html()

获取值

js中---value()

jQuery中---val()

属性操作

js中---setAttribute() 、getAttribute() 、removeAttribute()

jQuery中--- attr(name,value) 、attr(name) 、 removeAttr(name)

再用变量储存对象的时候，

js使用xxxEle(标签对象)

jQuery使用$xxxEle(jQuery对象)

对于标签上有的能够看到的属性和自定义属性用attr

对于返回布尔值比如checkbox 、radio 、option是否被选中用prop

文档处理

let $pEle = $('<p>')
$pEle.text('aaaaa')   
w.fn.init [p]
//在一个标签内部后面添加标签
$('#d1').append($pEle)
$pEle.appendTo($('#d1'))
//在一个标签内部前边添加标签
$('#d1').prepend($pEle)
$pEle.prependTo('#d1')
//在一个标签的后面添加标签
$('#d1').after($pEle)
$pEle.insertAfter('#d1')
//在一个标签的前面添加标签
$('#d1').before($pEle)
$pEle.insertBefore('#d1')


$('#d1').remove()   //将标签删除
$('#d1').empty()    //将标签内容删除

jQuery事件

//事件的绑定
script>
    //第一种
    $('#d1').click(function () {
        alert('aaaa')
    })
    //第二种
    $('#d2').on('click',function () {
        alert('bbbb')
    })
</script>

克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="d1">aaaa</button>
<script>
    $('#d1').on('click',function () {
        // console.log(this)    //this指的是当前操作的标签对象
        // $(this).clone().insertAfter($('body'))   //clone默认情况下，只克隆html和css，不克隆事件
        $(this).clone(true).insertAfter($('body'))   //clone里面加参数，就可以克隆事件
    })
</script>
</body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: darkgray;
            z-index: 99;
        }
        .modal {
            position: fixed;
            height: 400px;
            width: 600px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">给我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>
<script>
    let $coverEle = $('.cover')
    let $modalEle = $('.modal')
    $('#d1').click(function () {
        //将两个div标签的hide类属性移除
        $coverEle.removeClass('hide')
        $modalEle.removeClass('hide')
    })
    $('#d2').click(function () {
        //将两个div标签添加hide类属性
        $coverEle.addClass('hide')
        $modalEle.addClass('hide')
    })
</script>
</body>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .left {
            float: left;
            position: fixed;
            background-color: darkgray;
            width: 20%;
            height: 100%;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid white;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜单一
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜单二
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
        <div class="title">菜单三
            <div class="items">111</div>
            <div class="items">222</div>
            <div class="items">333</div>
        </div>
    </div>
</div>
<script>
    $('.title').click(function () {
        //给所有的items加上hide属性
        $('.items').addClass('hide')
        //将被点击的标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
</body>
</html>

回到顶部

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>

自定义用户校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="password" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $username = $('#username')
    let $password = $('#password')
    $('#d1').click(function () {
        //获取用户输入用户名和密码，用于校验
        let username = $username.val()
        let password = $password.val()
        if(!username){
            $username.next().text('用户名不能为空')
        }
         if(!password){
            $password.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        // $(this).next().text('')
        $('input').next().text('')
    })
</script>
</body>
</html>

input实时监控

<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>

hover事件

<script>
    $('#d1').hover(function () {
        alert(123)
    })
</script>

键盘按键事件

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
    })
</script>

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if(event.keyCode == 16){
            alert('你按了shift键')
        }
    })
</script>

阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('aaaa')
        //阻止标签后续事件的执行  方式1
        // return false
        //阻止标签后续事件的执行  方式2
        e.preventDefault()
    })
</script>

阻止事件冒泡

<script>
    $('#d1').click(function () {
        alert('div')
    })
     $('#d2').click(function () {
        alert('p')
    })
    $('#d3').click(function (e) {
        alert('span')
        //阻止事件冒泡 方式1
        return false
        //阻止事件冒泡 方式2
        //e.stopPropagation()
    })
</script>

事件委托

<button>aaaa</button>
<script>
    //给页面所有的button添加点击事件
    //下面的代码对于页面创建的button没有效果
    // $('button').click(function () {
    //     alert(123)
    // })

    //事件委托
    //在指定的范围内，将事件委托给某个标签，无论该标签是事先写好的还是后面动态创建的
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

等待页面加载

等待页面加载完毕再执行代码

window.onload = function(){

//js代码

}

jQuery中等待页面加载完毕

（1）$(document).ready(function(){

//js代码

})

（2）$(function(){

//js代码

})

（3）直接写在body内部的最下面

动画效果

$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.3)
w.fn.init [div#d1]

补充

each（）

第一种使用方法

$('div').each(function(index){console.log(index)})
VM302:1 0
VM302:1 1
VM302:1 2
VM302:1 3
VM302:1 4
VM302:1 5
VM302:1 6
VM302:1 7
VM302:1 8
VM302:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM447:1 0 <div>1</div>
VM447:1 1 <div>2</div>
VM447:1 2 <div>3</div>
VM447:1 3 <div>4</div>
VM447:1 4 <div>5</div>
VM447:1 5 <div>6</div>
VM447:1 6 <div>7</div>
VM447:1 7 <div>8</div>
VM447:1 8 <div>9</div>
VM447:1 9 <div>10</div>
第二种使用方法

$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM978:1 0 111
VM978:1 1 222
VM978:1 2 333

data（）

$('div').data('info','aaa')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
'aaa'
$('div').last().data('info')
'aaa'
$('div').first().removeData('info')
w.fn.init [div, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
'aaa'