jQuery复习-(jQuery入门,jQuery语法(DOM),jQuery动画)

已于 2022-02-12 19:45:05 修改
阅读量884 收藏 4
点赞数 2
分类专栏： jQuery 文章标签： jquery javascript 前端
于 2022-01-04 19:06:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64526818/article/details/122309328
版权
本文详细介绍了jQuery的基础知识，包括jQuery的概述、作用、优点、使用方法以及不同版本的区别。讲解了如何引入jQuery文件，设置入口函数，以及选择器、DOM操作、事件处理、样式和属性操作等内容。此外，还涵盖了动画效果、尺寸操作和jQuery的类名操作，是初学者全面了解jQuery的实用指南。
摘要由CSDN通过智能技术生成

jQuery入门

jQuery的概述

  1. jQuery是概念:

    jQuery是一个第三方框架(库)

    框架：别人写好的js代码文件

    框架好处：复制粘贴提高代码效率

  2. jQuery的作用:

    DOM操作（主要）

    其他功能

  3. jQuery的优点:

    a.入口函数可以写多个

    b.代码简洁(隐式迭代)

    c.api简单好记

    d.浏览器兼容性好

    e.容错率高(某些情况下，前面代码有问题，也不影响后面代码执行)

  4. 如何使用jQuery

    a.引入jQuery文件.

    <script src="jquery-1.12.4.js"></script>

    b.写一个入口函数.

    c.利用选择器(id选择器/标签选择器....)选到你想要操作的元素.

    d.找到元素后,就使用jQuery中提供的那些方法来操作他(设置样式/设置文本/设置事件...)

jQuery不同版本的区别

  1. jq有三个大版本

    1.x : 兼容IE5678浏览器, 停止更新

    2.x : 不兼容IE5678浏览器, 停止更新

    3.x : 不兼容IE5678浏览器,正在更新中

    国内用的最多的是1.x , 因为国内主要是为了兼容更多的浏览器

  2. jq没一个版本分为min和正常版

        min版本： 压缩小， 体积小

        正常版本： 代码、注释比较齐全

jQuery的入口函数

  1. 原生入口函数 ： window.onload = function(){}

  2. jq入口函数 :

        2.1 简写： $( function(){} )

        2.2 标准: $( document ).ready( function(){} )

  1. jq入口函数 与 原生入口函数区别

        (1)执行时机不同

        jq : dom树加载完毕就执行

        原生 : dom树 + 外部资源

        (2)次数不同

        jq : 可以注册多个入口函数

        原生: 只能注册一次

    <script>
        //1.原生入口函数 : 页面dom树 + 外部资源加载完毕后执行
        window.onload = function(){
            console.log('111-原生入口函数')
        }
​
        window.onload = function(){
            console.log('222-原生入口函数')
        }
​
        //2.jq入口函数
        $( function(){
            console.log('111--jq入口函数');
        } )
​
        $( function(){
            console.log('222--jq入口函数');
        } )
​
        $( document ).ready( function(){
            console.log('3333-jq入口函数');
            
        })
    </script>

DOM对象与jQuery对象区别

  1. DOM对象:使用dom原生语法获取的对象

  2. jq对象:使用jq语法获取的对象  jq对象本质: 伪数组

  3. DOM对象和jq对象的区别:(原型链不同)

        3.1 DOM对象只能使用DOM原生的语法,无法使用jq语法

        3.2 jq对象只能使用jq的语法,无法使用DOM语法

  1. DOM对象与jq对象转换:

        4.1 DOM对象转jq对象: $(DOM对象)

        4.2 jq对象转DOM对象: $()[下标]

    <script>
        // 1. DOM对象:使用dom原生语法获取的对象
        let box = document.querySelector('#box')
        console.log(box)
​
        // 2. jq对象:使用jq语法获取的对象
        let $box = $('.box')
        console.log($box)
​
        // 3. DOM对象和jq对象的区别:(原型链不同)
        // 3.1 DOM对象只能使用DOM原生的语法,无法使用jq语法
        box.style.backgroundColor = 'red'
        // box.css('backgroundColor', 'blue')  报错
​
        // 3.2 jq对象只能使用jq的语法,无法使用DOM语法
        $box.css('backgroundColor', 'blue')
        // $box.style.backgroundColor = 'red'  报错
​
        // 4. DOM对象与jq对象转换: 
        // 4.1 DOM对象转jq对象:  $(DOM对象)
        console.log($(box))
​
        // 4.2 jq对象转DOM对象:  $()[下标]
        console.log($box[0])

$函数介绍

  1. $是一个函数

  2. $与jQuery完全等价: 凡是用$的地方都可以替换成jQuery  $ === jQuery // true

  3. $根据参数的不同,功能不同

    (1)参数是选择器, 功能就是获取jq对象 $('选择器')

    (2)参数是函数, 功能就是入口函数 $(function(){})

    (3)参数是DOM对象, 功能就是DOM转jq $(DOM对象)

语法(DOM)

基本选择器

名称用法描述
ID选择器$('#id')获取指定ID的元素
类选择器$('.class')获取同一类class的元素
标签选择器$('div')获取同一类标签的所有元素
并集选择器$('div,p,li')使用逗号分隔，只要符合条件之一就可
交集选择器$('div.red')获取class为red的div元素

层次选择器

名称用法描述
子代选择器$('ul > li')使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$('ul li')使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

过滤选择器: jq独有选择器

语法: $('选择器: 过滤条件')

名称用法描述
:eq（index）$('li:eq(2)').css('color', 'red')获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd$('li:odd').css('color', 'red')获取到的li元素中，选择索引号为奇数的元素
:even$('li:even').css('color', 'red')获取到的li元素中，选择索引号为偶数的元素

css属性操作

  1. 原生DOM和jq注册事件的区别

        原生: box.onclick = function(){}

        jq: $().on('click',function(){})

  1. 原生DOM和jq样式操作的区别:

        2.1 原生DOM: DOM元素.style.样式名 = 样式值

        2.2 jq: 获取: $().css('样式名')

                  设置: $().css('样式名',样式值)

        2.3 jq的设计思想:

        (1)方法统一: 获取和设置方法名一样的,参数不同作用不同

        (2)隐式迭代: jq底层偷偷帮我们遍历伪数组

        a.设置: 才有隐式迭代

  b.获取: 没有隐式迭代,默认只会获取一个

        (3)链式编程:

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            height: 200px;
            background-color: pink;
            margin-top: 10px;
        }
​
        #box {
            border: 1px solid red;
        }
    </style>
    
</head>
​
<body>
    <button id="btn1">获取样式属性</button>
    <button id="btn2">设置样式属性</button>
    <div id="box" class="one" style="width: 100px"></div>
    <div class="one" style="width: 200px"></div>
    <div class="one" style="width: 300px"></div>
​
    <!-- 导入jq -->
    <script src="jquery-1.12.4.js"></script>
    
    <script>
        //1.获取css样式
        $('#btn1').on('click',function(){
            //获取第一个元素的样式
            let width = $('div').css('width')
            console.log( width )
        })
​
        //2.设置css样式
        $('#btn2').on('click',function(){
            //设置所有的元素样式
            $('div').css('backgroundColor','green')
        })
    </script>
        
</body>
​
</html>

html属性操作

1. 原生DOM的HTML属性

1.1 元素内容属性

(1)元素.innerText 获取文本

(2)元素.innerHTML 获取文本+标签

1.2 元素标准属性

元素,属性名

1.3 元素自定义属性

设置: 元素.setAttribute('属性名',属性值)

获取: 元素.getAttribute('属性名')

移除: 元素.removeAttribute('属性名')

2.jq的HTML属性

2.1 元素内容属性

文本: $().text()

文本+标签: $().html()

2.2 元素标准+自定义属性

获取: $().attr('属性名')

设置: $().attr('属性名',属性值)

移除: $().removeAttr('属性名')

<script>
    // 1.文本属性
    // 获取文本：  $().text()
    console.log( $('div').text() )
    // 设置文本 :  $().text('文本')
    $('div').text('<h1>我是标题</h1><b>我是内容</b>')
​
    // 获取文本+标签：  $().html()
    console.log( $('div').html() )
    // 设置文本+标签 :  $().html('文本')
    $('div').html('<h1>我是标题</h1><b>我是内容</b>')
​
    // 2.标准属性+自定义属性
    // 2.1 设置
    $('div').attr('aaa','123')
    $('a').attr('href','http://www.baidu.com')
    $('img').attr('src','./images/0002.jpg')
​
    // 2.2 获取
    console.log( $('div').attr('aaa') )
    console.log( $('a').attr('href') )
    console.log( $('img').attr('src') )
​
    // 2.3 移除
    $('div').removeAttr('aaa')
</script>

表单元素属性操作

1. 原生DOM表单属性

1.1 表单元素

DOM元素.value

1.2 布尔类型属性

DOM元素.disabled

DOM元素.checked

DOM元素.selected

2. jq对象表单属性

2.1 表单元素

$().val()

2.2 布尔类型属性

$().prop('disabled')

$().prop('checked')

$().prop('selected')

节点操作7种方式

名称用法描述
children(selector)$('ul').children('li')相当于$('ul>li'), 子类选择器
parent()$('#first').parent()查找父亲
prev()$('li').prev()找上一个兄弟
next()$('li').next()找下一个兄弟
siblings(selector)$('#first').siblings('li')查找兄弟节点, 不包括自己本身
find(selector)$('ul').find('li')相当于$('ul li'), 后代选择器
eq(index)$('li').eq(2)相当于$('li:eq(2)'), index从0开始

创建元素2种方式

  1. DOM原生创建元素: 3种方式

    (1)document.write() 不推荐

    (2)元素.innerHTML 少用,超过100个有性能问题

    (1)document.createElement() DOM推荐

    a 在内存中创建空对象

    b 设置内容

    c 添加到DOM树

  2. jq创建元素: 2种方式

    (1)$().html('') 相当于innerHTML

    (2)$('标签') 相当于document.createElement()

        <script>
        // 2.1 $().html('')
        $('#btnHtml1').on('click', function () {
            // $('#div1').html('<h1>我是标题</h1>') // 会覆盖默认值
            $('#div1').html($('#div1').html() + '<h1>我是标题</h1>')
        })
​
        // 2.2 $('标签')
        $('#btn1').on('click', function () {
            // (1)在内存中创建空对象
            // let $a = $('<a href="#">我是链接</a><br>')
​
            // // (2)设置内容
            // $a.css('color', 'pink')
​
            // // (3)添加到DOM树
            // $('#div1').append($a)
​
            // 简写
            // append() 如果参数是一个html字符串,jq底层会自动帮你创建一个jq对象
            $('#div1').append($('<a href="#">我是链接</a><br>').css('color', 'pink'))
        })
    </script>

添加元素5种方式

名称用法描述
append()父元素.append(子元素)添加到最后面
appendTo()子元素.appendTo(父元素)添加到最后面(作用与append一致,调用顺序不一样)
prepend()父元素.prepend(子元素)添加到最前面面
before()兄弟A.before(兄弟B)B插入A前面
after()兄弟A.after(兄弟B)B插入A后面
    <script>
        //  添加到最后面: $(父元素).append(子元素)
        $('#btnAppend').on('click', function () {
            // 新创建,则添加
            $('#ul1').append($('<li>i am a new</li>'))
            // 已有元素,则移动
            $('#ul1').append($('#li3'))
        })
​
        // 添加到最后面: $(子元素).appendTo(父元素)
        $('#btnAppendTo').on('click', function () {
            // 新创建,则添加
            $('<li>i am a new</li>').appendTo($('#ul1'))
            // 已有元素,则移动
            $('#li3').appendTo('#ul1')
        })
​
        // 添加到最前面: $(父元素).prepend(子元素)
        $('#btnPrepend').on('click', function () {
            // 新创建,则添加
            $('#ul1').prepend($('<li>i am a new</li>'))
            // 已有元素,则移动
            $('#ul1').prepend($('#li3'))
        })
​
        // 添加到某个元素前面: A元素.before(B元素)  B元素插入A元素前面
        $('#btnBefore').on('click', function () {
            // 将newLi插入到li2前面
            $('#li2').before('<li>i am a new</li>')
            // 将li3插入到li2前面
            $('#li2').before($('#li3'))
        })
​
        // 添加到某个元素后面: A元素.after(B元素)   B元素插入A元素后面
        $('#btnAfter').on('click', function () {
            // 将newLi插入到li2后面
            $('#li2').after('<li>i am a new</li>')
            // 将li3插入到li2后面
            $('#li2').after($('#li3'))
        })
    </script>

移除元素3种方式

  1. DOM原生移除元素: 两种方式

    (1)移除单个元素: 父元素.removeChild(子元素)

    (2)移除所有子元素: 父元素.innerHTML=''

  2. jq移除元素: 三种方式

    (1)移除单个元素: $().remove() 相当于自杀 底层原理:this.parentNode.removeChild(this)

    (2)移除所有子元素: $().html('') 底层原理: this.innerHTML=''

    $().empty() jq推荐

    <script>
        // 移除单个元素: $().remove()
        $('#li2').remove()
​
        // 移除所有子元素: $().html('') 移除ul1+所有li
        $('#ul1').html('')
​
        // 移除所有子元素: $().empty()  移除所有li
        $('#ul2').empty()
    </script>

  1. DOM原生类名操作 (1)获取： 元素.className (2)设置： 元素.calssNmae = 类名 修改类名，样式也会修改

  2. jquery类名操作 (1)添加类： $().addClass('类名') (2)移除类： $().removeClass('类名') (3)判断类： $().hasClass('类名') 返回布尔类型 (4)切换类： $().toggleClass('类名') 如果没有这个类就添加，如果有就移除

    <script>
        $(function () {
            //1.添加类
            $('#addClass').on('click', function () {
                $('div').addClass('fontSize30 width200')
            })
​
            //2.移除类
            $('#removeClass').on('click', function () {
                //如果不写参数,就会删除所有的类,但是class这个属性名还保留着.
                // $('div').removeClass()
                //如果要移除对应的类,就写对应的类名参数.
                $('div').removeClass('fontSize30')
            })
​
            //3.判断类
            $('#hasClass').on('click', function () {
                console.log($('#div1').hasClass('fontSize30'))
            })
​
            //4.切换类.
            //如果你有某个类,就移除这个类; 如果你没有某个类,就添加上这个类.
            $('#toggleClass').on('click', function () {
                $('#div1').toggleClass('fontSize30')
            })
        })
    </script>

jQuery动画

名称用法描述
show()$('div').show(动画时间，动画完成回调)展示动画，主要修改元素 宽高 + display为block
hide()$('div').hide(动画时间，动画完成回调)隐藏动画，主要修改元素 宽高 + display为none
slideDown()$('div').slideDown(动画时间，动画完成回调)滑入动画（卷帘门效果），主要修改元素 高度+ display为block
slideUp()$('div').slideUp(动画时间，动画完成回调)滑出动画（卷帘门效果），主要修改元素 高度+ display为none
fadeIn()$('div').fadeIn(动画时间，,动画完成回调)淡入动画(渐变效果)，主要修改元素 透明度1+ display为block
fadeOut()$('div').fadeOut(动画时间，,动画完成回调)淡出动画(渐变效果)，主要修改元素 透明度0+ display为block
fadeTo()$('div').fadeTo(动画时间，目标透明度,动画完成回调)淡入动画(渐变效果)，主要修改元素 透明度+ display为block
animate()$('div').animate(属性对象,动画时间,动画速度,回调函数)相当于webApi中封装的缓动动画animationSlow()，只是参数不同而已

显示与隐藏

显示 $().show()

隐藏 $().hide()

切换 $().toggle()

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>


<body>
    <input type="button" value="显示" id="show" />
    <input type="button" value="隐藏" id="hide" />
    <input type="button" value="切换" id="toggle" /> <br /><br />
    <div id="div1"></div>
    <br /><br />
    <div id="div2"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 显示 $().show()
        $('#show').on('click', function () {
            /**
             * @description:
             * @param {number|string} 动画时长
             * 如果没有动画时间,则没有动画
             * number单位 毫秒
             * 'fast'200|'normal'400|'slow'600
             * @param {function} 动画完成回调(类似于定时器)
             * @return: 
             */

            $('div').show(2000, function () {
                alert('111')
            })
        })

        // 隐藏 $().hide()
        $('#hide').on('click', function () {
            // hide()所有用法与show()完全一致,只是动画效果相反

            $('div').hide(2000, function () {
                alert('222')
            })
        })

        // 切换 $().toggle()
        $('#toggle').on('click', function () {
            /* 
            $().toggle()
            display:block, 则执行hide()隐藏
            display:none, 则执行hide()显示
            */

            $('div').toggle()
        })
    </script>
</body>

滑入与滑出

滑入 $().slideDown()

滑出 $().slideUp()

切换 $().slideToggle()

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>

<body>
    <input type="button" value="滑入" id="slideDown" />
    <input type="button" value="滑出" id="slideUp" />
    <input type="button" value="切换" id="slideToggle" /><br /><br />
    <div id="div1"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 滑入 $().slideDown()
        $('#slideDown').on('click', function () {
            // 滑入滑出所有的语法与 show()与hide()一致
            // 唯一的区别: 不传参,默认动画时长400ms

            $('div').slideDown(2000, function () {
                alert('111')
            })
        })

        // 滑出 $().slideUp()
        $('#slideUp').on('click', function () {
            $('div').slideUp(2000, function () {
                alert('222')
            })
        })
        
        // 切换 $().slideToggle()
            $('#slideToggle').on('click', function () {
                $('div').slideToggle()
            })
    </script>
</body>

淡入与淡出

淡入 $().fadeIn()

淡出 $().fadeOut()

切换 $().fadeToggle()

淡入到指定透明度$().fadeTo()

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>

<body>
    <input type="button" value="淡入" id="fadeIn" />
    <input type="button" value="淡出" id="fadeOut" />
    <input type="button" value="切换" id="fadeToggle" />
    <input type="button" value="淡入到指定透明度" id="fadeTo" /><br /><br />
    <div id="div1"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 淡入 $().fadeIn()
        $('#fadeIn').on('click', function () {
            // 淡入淡出所有的语法与 slideDown()与slideUp()一致,只是动画效果不同

            $('div').fadeIn(2000, function () {
                alert('111')
            })
        })

        // 淡出 $().fadeOut()
        $('#fadeOut').on('click', function () {
            $('div').fadeOut(2000, function () {
                alert('222')
            })
        })

        // 切换 $().fadeToggle()
        $('#fadeToggle').on('click', function () {
            /* 
            透明度为0: 则淡入fadeIn()
            透明度不为0: 则淡出fadeOut()
            */

            $('div').fadeToggle()
        })

        // 淡入到指定透明度$().fadeTo()
        $('#fadeTo').on('click', function () {
            /* 
            第一个参数: 动画时间
            第二个参数: 目标透明度
            第三个参数: 完成回调
            */
            $('div').fadeTo(2000, .5, function () {
                alert('333')
            })
        })
    </script>

自定义动画

$().animate(Object, duration, easing, Function)

$().animate({动画属性对象}, 动画时间,'动画速度', function () {动画完成回调}

参数1:是一个对象,代表做动画的属性, 必选 参数2:动画执行的时长. 可选,如果没有写那就相当于是一个normal 400毫秒 参数3:easing:执行效果, 可选,默认为swing（缓动） 可以是linear（匀速） 参数4:动画执行完毕后的回调函数, 可选

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }

        #div1 {
            top: 50px;
        }

        #div2 {
            left: 300px;
            top: 200px;
            background-color: green;
        }
    </style>
    <body>
    <input type="button" value="从左到右800" id="btn" />
    <div id="div1"></div>
    <div id="div2"></div>
    <script src="jquery-1.12.4.js"></script>

    <script>
        $('#btn').on('click', function () {
            /**
             * @description:
             * @param {object} 动画属性对象  必选
             * @param {duration} 动画时间  可选，默认normal 400
             * @param {easing} 动画速度  可选，默认缓动:'swing' 匀速:'linear'
             * @param {function} 动画完成回调  可选
             * @return: jq对象(支持链式编程)
             */
            $('#div1').animate({
                width: 300,
                height: 300,
            }, 2000,'linear', function () {
                //  动画完成回调
                $('#div1').animate({
                    left: 300,
                    top: 300,
                    width: 200,
                    height: 200,
                })
            })
        })
    </script>
</body>

动画队列

stop(true|false,true|false)

第一个参数: 是否清除队列 ​ true:清除. 后面的动画不执行 ​ false:不清除. 后面的动画还会执行 ​ 第二个参数: 是否跳转本次最终结果 ​ true:跳转. 动画会立即跳转到最终状态 ​ false:不跳转. 动画会停留在原地

    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>

<body>
    <input type="button" value="开始动画" id="start" />
    <input type="button" value="停止动画" id="stop" /> <br><br>
    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        /* 
        动画队列: jq的动画会按照顺序依次执行
       */

        $('#start').on('click', function () {
            $('div').slideDown(2000).slideUp(2000)
        })

        // 结束动画队列
        $('#stop').on('click', function () {
            /* 
            第一个参数: 是否清除队列
                true:清除. 后面的动画不执行
                false:不清除. 后面的动画还会执行
            第二个参数: 是否跳转本次最终结果
                true:跳转. 动画会立即跳转到最终状态
                false:不跳转. 动画会停留在原地    
            */
           $('div').stop(true,false)
        })
    </script>
</body>

jq三大家族操作(尺寸操作)

名称用法描述
outerWidth()|outerHieght()$('div').outerWidth()获取 width + padding·+ border(相当于原生的offsetWidth/Height)
width()|height()$('div').width()获取 width
innerWidth()|innerHeight()$('div').innerWidth()获取 wdith + padding
outerWidth(true)|outerHeight(true)$('div').outerWidth(true)获取 width + padding·+ border + margin
position()$('div').position()对象类型，自身左外边框 到 定位父级 左内边框距离（相当于原生的offsetLeft/Top）
offset()$('div').offset()对象类型, 自身左外边框 距离 页面 左内边框距离
scrollLeft()|scrollTop()$('div').scrollLeft()与原生的scrollLeft/Top作用一样.支持修改
$(window).width()获取页面可视区域宽高：固定语法

端端1023
关注
专栏目录
Jquery复习
m0_63949551的博客
11-28 671
jquery： 1. Jquery的描述 2. Jquery与js的关系 3. jquery简写形式 4. Jquery选择器、 遍历 5. Jquery的隐藏、显示、淡入、淡出、上滑、下滑 6. Jquery操作样式 7. Jquery读取文本、匹配文本、获取文本框内容等的方法 8. Jquery追加元素的四个方法 9. Jquery动画处理（添加动画、检查是否处于动画状态、停止动画） 10. Jquery事件的写法（与JS的不同），分类（鼠标事件、键盘事件、表单事件） 1...
jQuery的复习
weixin_44540616的博客
05-15 272
开发工具与关键技术：jQuery的复习 作者：李梓良 撰写时间：2019年5月15日 一． 分享一下学习jQuery学习的一些总结，首先是show显示，hide隐藏的一些操作 ，大家一般都是在刚开始学打代码的时候，一般是要写两个按钮，显示，隐藏的两个 按钮，其实不用这么麻烦的，只需要一个键就可以解决问题的，今天就来给大家简单 做个实例，在英文之中toggle的意思是开关 jQuery toggl...
jquery复习
jinyuhenjianwang的博客
10-05 279
快速复习jQuery的常用知识点
Jquery的复习与总结（一）
zl428312的博客
08-10 450
Jquery 一，什么是jquery? 二，Jquery选择器 1,基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器 2，层次选择器 $("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id +
jQuery1.8.3-20121215.zip（jQuery语法包）
最新发布
02-18
jQuery是JavaScript库中的一款经典工具，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery1.8.3是该库的一个稳定版本，发布于2012年12月15日。这个压缩包“jQuery1.8.3-20121215.zip”...
jquery-1.8.2.min.js
04-02
"jquery-1.8.2.min.js"是jQuery库的一个版本，它是1.8.2版本的最小化(minified)版本，用于优化网页加载速度，减少文件大小，提高页面性能。在SSM（Spring、SpringMVC和MyBatis）整合课程中，这个文件扮演着关键角色...
JQuery-latest-Chinese-document.rar_jquery_jquery-latest
09-24
这个“JQuery-latest-Chinese-document.rar”压缩包包含了jQuery的最新中文文档，旨在帮助开发者更方便地理解和应用jQuery库。 **jQuery 的核心特性** 1. **选择器（Selectors）**：jQuery 以其强大的CSS选择器而...
jquery-3.4.1.zip
01-11
"jquery-3.4.1.zip" 是一个压缩包，其中包含了两个关键文件："jquery-3.4.1.min.js" 和 "jquery-3.4.1.js"。这两个文件都是jQuery的核心库，但它们有着不同的应用场景。 "jquery-3.4.1.js" 是未压缩的源代码版本，...
jQuery入门-1.0笔记
12-10
jQuery入门笔记涵盖了JavaScript库jQuery的基本知识点，包括其核心概念、语法、选择器、事件处理以及页面元素操作等内容。在深入之前，我们先明确jQuery是一个高效的JavaScript库，它通过简化DOM操作、事件处理、...
JQuery复习
qq_46448507的博客
04-26 161
隐世迭代思想 jquery在获取元素的时候就已经给我们把获取的这一大类元素遍历了，并且获取的元素是以伪数组的形式存在的，我们要单独修改属性或者样式的话，直接遍历获取的元素 <script src="./jquery/jQuery.min.js"></script> </head> <script> $(function() { ...
jQuery基础内容
SINGLEP的博客
04-16 365
jQuery:jquery: js的库，比js写得少，做的多jquery使用： 1、下载库文件 http://www.jq22.com/jquery-info122版本选择： 2.0版本以上没有做ie6-8的兼容性处理，一般选用1.8-1.11版本2、通过cdn加速服务器直接引入线上的jquery库jquery对象和DOM对象的区别和相互转换的方式：jquery对象不能直接使用DOM对象的属性和方...
jQuery复习
weixin_45902969的博客
08-15 221
简单知识点 1.JavaScript和jQuery入口函数 //jquery 固定写法 $(document).ready(function (item) { alert("hello,jq") }) //js固定写法 window.onload = function () { alert("hello,lwq1") } 2.JavaScript和jQuery入口函数的不同 <!DOCTYPE html> <html lang
jQuery 复习
qq_55053682的博客
03-16 429
jQuery 在js基础上进行开发 1》模板为： selector( ). operator( ) /* * jQuery 公式 : $selector().action() * * $: 代表jquery * selector():选择器 * action():行为 * */ operator( ) 中可以嵌套function（ ） 2》 以jQuery 为基础写出的 鼠标移动求坐标值 <!DOCTYPE html> <html lang="en"&g
JQuery的复习
zhangbin18607544869的博客
05-30 248
      今天抽出时间来对之前学过的JQuery进行复习和巩固，学无止境，还需努力.
JQuery 复习
weixin_30764137的博客
08-21 99
1.入口函数 2.DOM对象，jq对象区别和转换 加$符号，还有就是取出来 $符号的实质 5.基本选择器 id，class，标签，交集，并集 6. 7.过滤选择器 第一小节复习： //jquery:简单、粗暴 //jq和js的关系 //js是什么？ js是一门编程语言 //jq仅仅是基于js的一个库，jq可理解为就是开发js的...
Jquery复习1
小恶魔的博客
09-25 309
一、JQuery对象与DOM对象 1、jQuery中得到顶级对象 jquery----可以用符号来代替，为了方便jQuery（jQuery)中的js文件中的所有东西都是jquery或者都是符号来代替，为了方便jQuery（jQuery)中的js文件中的所有东西都是jquery或者都是符号来代替，为了方便jQuery（jQuery)中的js文件中的所有东西都是jquery或者都是符号下的 2、知识点...
5天入门：jQuery教程-优雅编程利器
5天驾驭JQuery教程是一个针对初学者的快速入门指南，旨在帮助读者掌握这个强大的JavaScript库。jQuery的核心理念是"write less, do more"，即通过简洁的代码实现复杂的网页操作，从而提升开发效率。以下是本教程重点...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

端端1023

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值