jQuery

Pi皮蛋儿

于 2021-04-06 10:58:32 发布

阅读量136

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_50723416/article/details/115401540

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Javascript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 amimate、hide、show，比如获取元素等。

一个JS文件，里面对我们原生js代码进行了封装，存放到里面。

jQuery,就是为了快速方便操作DOM，里面基本都是函数（方法）。

常见的Javascript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto

等页面DOM加载完毕再去执行 js 代码：$(function() {})；相当于DOMContentLoaded

$是jQuer中的顶级对象，相当于原生js中的window对象。

jQuery对象和DOM对象

用原生js获取的对象是DOM对象 document.querySelector(‘div’)
jQuery方法获取的对象是jQuery对象 $(‘div’)
jQuery对象本质是：利用$对DOM对象进行封装后产生的对象（以伪数组形式存储）
jQuery对象只能使用jQuery方法，DOM对象只能使用原生Js 属性和方法

jQuery对象和DOM对象相互转换

<!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="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <video src="" muted></video>
    <script>
        // $('div').hide();
        // 等页面DOM加载完毕再去执行 js 代码

        // $(document).ready(function(){
        //     $('div').hide();
        // });

        // $(function() {
        //     $('div').hide();
        // })

        // jQuery对象和DOM对象相互转换
        // DOM 转 jq
        // (1)直接获取到的是 jquery 对象
        $('video');
        // (2)使用原生js获取到的是 DOM 对象
        var myVideo = document.querySelector('video');
        $(myVideo); // 转 jq
        // jq 转 DOM
        $('video')[0];
        $('video').get(0);
    </script>
</body>

</html>

$(‘div’).css(‘属性’，‘值’)
隐式迭代：遍历内部DOM元素（伪数组形式存储）的过程
$(‘选择器’) 里面的选择器直接写CSS选择器即可，但是要加引号

<!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="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>aaaaaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbbbbbb</li>
        <li>cccccccccccccccc</li>
    </ul>
    <ol>
        <li>AAAAAAAAAAAAAAAAAA</li>
        <li>AAAAAAAAAAAAAAAAAA</li>
        <li>AAAAAAAAAAAAAAAAAA</li>
        <li>AAAAAAAAAAAAAAAAAA</li>
        <li>AAAAAAAAAAAAAAAAAA</li>
    </ol>
    <div class="ye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

    <div class="nav">
        <p>一级</p>
        <div>
            <p>二级</p>
            <p>二级</p>
        </div>
    </div>
    <script>
        $(function() {
            // 隐式迭代 修改jQuery修改样式
            $('ul li').css('backgroundColor', 'red');
            $('ul li').css('color', 'white');

            // 子带选择器
            console.log($('ol>li'));

            // 后代选择器
            console.log($('ol li'));

            // 筛选选择器
            $('ol li:first').css('color', 'red'); // :first 获取第一个
            $('ol li:last').css('color', 'blue'); // :last 获取最后一个
            $('ol li:eq(1)').css('backgroundColor', 'yellow'); // 通过索引号 获取第几个
            $('ol li:odd').css('fontSize', '22px'); // 获得 索引号为 奇数的 元素
            $('ol li:even').css('fontSize', '10px'); // 获得 索引号为 偶数的 元素

            // 筛选方法
            // 1.父元素 parent() 返回的是最近一级的父元素
            console.log($('.son').parent());

            // 2.子元素 children() 相当于 子代选择器 ul>li
            $('.nav').children('p').css('color', 'green');
            // 类似于后代选择器 ul li
            $('.nav').find('p').css('fontSize', '20px')

            // 3.同级元素 siblings() 
            console.log($('.nav').siblings());
        })
    </script>
</body>

</html>

<!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="jquery.min.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        $(function() {
            // 1.兄弟元素
            $('ol .item').siblings().css('color', 'red');
            // 2.第n个元素
            var index = 3;
            // (1) 利用选择器的方式
            $('ul li:eq(2)').css('color', 'blue');
            // (2) 利用方法的方式
            $('ul li').eq(index).css('color', 'yellow');
            // 3.判断是否拥有某个类名
            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));
        })
    </script>
</body>

</html>

jQuery中的排它思想

$(this).css(‘backgroundColor’, ‘pink’).siblings().css(‘background’, ‘’)
隐式迭代给所有按钮都绑定了点击事件，给当前元素设置样式背景颜色其余兄弟样式为空

jQuery样式操作
可以使用CSS方法修改简单元素样式；也可以操作类，修改多个样式。

参数只写属性名，则返回属性值

$(this).css(‘color’);

参数是属性名，属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(‘color’,‘red’);

参数可以是对象形式，方便设置多组样式。属性名和属性值冒号隔开，属性可以不用加引号，如果是复合属性则必须采用驼峰命名法写

$(this).css({‘color’:‘white’,‘fontSize’:‘20px’});
S

添加类 | 移除类 | 切换类

$(‘div’).addClass(‘current’); | $(‘div’).removeClass(‘current’); | $(‘div’).toggleClass(‘current’);
原生的className会覆盖之前的类名，addClass则是在原先的基础上追加类名，不会影响之前的类名

jQuery效果

显示隐藏：show()、hide()、toggle();
滑动：slideDown()、slideUp()、slidetoggle();
淡入淡出：fadeIn()、fadeOut()、fadetoggle()、fadeTo();
自定义动画：amimate()

jQuery属性操作

获取属性：prop(‘属性名’); 设置属性：prop(‘属性名’，‘属性值’)
设置或获取元素固有属性值 prop()，固有属性就是元素自带的属性，比如 < a > 的 href、< input > 的 type

获取自定义属性：attr(‘属性名’)；类似原生的getAttribute(); 设置自定义属性：attr(‘属性名’，‘属性值’); 类似原生的setAttribute();

jQuery文本属性值

获取设置元素内容 html() ：$ (‘div’).html();
获取设置元素文本内容 text()：$ (‘div’).text();
获取设置表单值 val()：$(‘input’).val();

jQuery元素操作
jQuery 隐式迭代是给同一类元素做了同样操作，如果给同一类元素做不同操作，就需要用到遍历。

遍历元素
$(“div”).each ( function ( index, domEle ) { xxx }); each() 方法遍历匹配每一个元素，里面的回调函数有2个参数：index每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象。需要给 DOM元素对象转换成 jQuery 元素对象 $(domEle)
$ .each ( object, function, ( index, element ) { xxx }); $.each() 方法可以遍历任何对象。主要用于数据处理，比如数组，对象。里面的函数有2个参数：index每个元素的索引号，element是遍历内容

创建元素
$ ("< li >< / li >") 动态创建了一个 li 标签

添加元素
内部添加：element.append(“内容”)；把内容放再匹配元素内部最后，类似原生appendChild; 与之相反的 element.prepend(“内容”)
外部添加：element.after(“内容”)；把内容放在目标元素后面；element.before(“内容”)；把内容放在目标元素前面；
内部添加元素，生成之后，是父子关系；外部添加元素，生成之后，是兄弟关系；

删除元素
element.remove(); 删除匹配元素
element.empty(); 删除匹配元素的子节点，与其等价的：element.html(" ");

jQuery事件

事件注册
element.事件类型(处理函数)；
element.on({事件类型：处理函数；事件类型：处理函数；…})；
element.on(“事件类型，事件类型”，处理函数)；

on绑定事件的优势：可以绑定多个事件，可以事件委派操作，可以动态创建的元素绑定事件

事件委培定义就是，把原来给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$(‘ul’).on(‘click’，‘li’，function(){ 执行函数 })

绑定事件与事件解绑

off()方法可以移除通过on()方法添加的事件处理程序。
$(“p”).off() // 解除p元素所有事件处理程序
$(“p”).off(“click”，foo) // 解除指定的事件，后面的foo是侦听函数名
$(“ul”).off(“click”，“li”); // 解绑事件委托
如果事件只触发一次，可以使用one(“click”，“function”)来绑定事件。

自动触发事件 trigger()
比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()
element.trigger(“type”)
element.triggerHandler(“type”)；不会触发元素的默认行为

jQuery事件对象：事件被触发，就会有事件对象产生。

element.on ( events，[ selector ]，function ( event ) { } )；
阻止默认行为：eveny.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

jQuery对象的拷贝方法

$.extend([ deep ]，target，object，[ objectN ])

deep：如果设为true 为深拷贝，默认为false 浅拷贝
taret：要拷贝的目标对象
object1：待拷贝到第一个对象的对象。
objectN：待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象，复杂数据类型中的地址，拷贝给目标对象。如果修改目标对象，原来被拷贝的对象也会发生变化，因为它们指向同一块内存地址。
深拷贝，前面加true，完全克隆（拷贝的对象，不是地址，新开辟了一块内存），修改目标对象不会影响目标对象。

jQuery多库共存

如果$ 符号冲突可以使用jQuery
让jquery 释放$ 控制权，自定义 jQuery.noConflict()

jQuery尺寸
在这里插入图片描述

参数为空，获取值，返回数字类型，参数为数字，则修改相应值，参数不用写单位

jQuery位置操作
位置主要有三个：offset()、position()、scrollTop() / scrollLeft()

offset()设置或获取元素偏移，相对于文档。主要有两个属性 left top ，直接给top left赋值可以设置元素的偏移

position()获取元素相对于带有定位的父级元素的距离，如果没有父级，则以文档为准。

scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧
scroll 滚动事件 | $(document).scrollTop元素距离文档顶部的距离

Pi皮蛋儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jQuery

Javascript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 amimate、hide、show，比如获取元素等。一个JS文件，里面对我们原生js代码进行了封装，存放到里面。jQuery,就是为了快速方便操作DOM，里面基本都是函数（方法）。常见的Javascript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等页面DOM加载完毕再去执行 js
复制链接

扫一扫

专栏目录