jQuery

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元素距离文档顶部的距离

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值