jQuery

最新推荐文章于 2020-06-09 10:14:20 发布

weixin_46369568

最新推荐文章于 2020-06-09 10:14:20 发布

阅读量97

点赞数

文章标签： js jquery javascript html

本文链接：https://blog.csdn.net/weixin_46369568/article/details/105344302

版权

什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery官网:jquery.com
CDN服务器:https://www.bootcdn.cn/
jQuery文档:http://jquery.cuishifeng.cn/
jQuery文档可以查询jQuery所提供的功能

加载jQuery方式

1. 本地加载;
jQuery官网提供了可下载的本地js文件的压缩版本和开发版本版本
production 压缩版本，字符量尽可能少，加载速度尽可能快;
development 开发版本，尽可能清晰的展示代码，带有注释可以二次开发;

2. CDN加载;
CDN 付费服务器;
CDN 免费服务器; bootcdn; https://www.bootcdn.cn/

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

如果同一个页面有多个版本jQuery存在冲突怎么办

jQuery自诞生以来，版本越来越多，而且jQuery官网的新版本还在不断的更新和发布中，但如果以前的项目中就已经使用了旧版本的jQuery，由于项目的需要，必然也需要不断的使用较新版的jQuery，直接将jQuery升级到新版本会导致这些基于旧版本jQuery的插件不能工作，我们如何让多个不同的jQuery版本在同一个页面并存而不冲突呢？

解决方法

使用jQuery.noConflict([extreme])

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>   
<script>
    function $(params) {
            console.log(1);
    }
    var jQuery = $;
</script>

例如之前用的版本位1.11.0，当再次引入新的版本

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(); 
</script>

此时$使用权为3.4.1版本，将无法使用$实现之前的$方法,此时打印结果为空

<script>
   jQuery.noConflict();
   $(); // 上一个版本的jQuery;
   (function($){
        // jQuery 3.4.1
   })(jQuery)
</script>

使用jQuery.noConflict();会将$的使用权交回给上个版本的jQuery,此时正常打印出上面的结果，此时3.4.1版本不能再使用$，而是使用jQuery代替
在这里插入图片描述

入口函数

用jQuery代替window.onload
$(document).ready(function(){});
简写
$(function(){})

jQuery选择器

标签用法基本与css选择器用法一致
**id选择器**
js原生写法 
var box = document.getElementById(“#box”);
jQuery写法
var $box = $.(“#box”);
**元素选择器**
$.(“box”);
class选择器
$.(“.box”);

**通配符选择器**
$("*")
**后代选择器      selector children** 
 $(".box div").
**直接子集选择器  selector>children**
$(".box>div")
**兄弟选择器      selector+next 下一个**
$(".box+.pox")
**兄弟选择器 	selector~next 下面所有**
$(".box~.pox")


**伪类选择器**

**位置过滤;**
$("div:first")
$("div:last")
**下标过滤;**
$("div:eq(2)")
$("div:eq(4)")

**奇数过滤;**
$("div:odd")
**偶数过滤;**
$("div:even")

**范围过滤 :  lt  gt**
前面的元素
$("div:lt(3)")
后面的元素
$("div:gt(3)")

**内容过滤器 ;** 
var contains = "hello world1";
$("div:contains("+ contains +")")


**属性选择器**

```javascript
$("div[data]")
$("div[data=hello]")
$("div[data!=hello]")
$("div[data^=a]")
$("div[data$=4]")
$("div[data*=-]")
允许任意组合
$("div[data=hello][class=active]")

CSS操作

获取css属性

$(".box").css("color");
设置css样式
        $(“.box”).css({
            width  : "100px",
            height : 100,
            marginLeft : "+=200",
            backgroundColor : "yellowgreen"
        })

回调函数写法

$(“.box”).css({
    width: function(index, value) {
        // index:下标  value:属性值
        return parseFloat(value) * 1.2;
    }, 
    height: function(index, value) {
        return parseFloat(value) * 1.2;
    }
});

jQuery事件

**
像JS原生的事件操作基本都可以用$.事件(function(){})代替，具体可以查询jQuery中文文档
例如：
单击事件
$.click(function(){})
双击事件
$.dblclick(function(){})
鼠标悬停事件
$.hover(function(){})
键盘被按下
$.keypress(function(){})

事件委托

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

 $(function () {
        $("ul").on("click","li",function () {
            alert(1);
        })
    });

# jQuery动画效果

隐藏元素
$(“.box”).hide([speed], [callback])
显示元素
$(“.box”).show([speed], [callback]))
隐藏和显示之间来回切换
$(“.box”).toggle([speed], [callback]))

淡入淡出
淡入
$(“.box”).fadeIn([speed], [callback])
淡出
$(“.box”).fadeOut([speed], [callback])
淡入和淡出切换
$(“.box”).fadeToggle([speed], [callback])
用于将渐变设置为给定的不透明度
$(“.box”).fadeTo(speed, opacity, [callback])

4.动画
$(“.box”). animate({})

点击设置简单的动画效果

$("#btn").click(function(){
    $("#box1").animate({
        width  : 500,
        // height : 300
    } , 3000 , "linear" , function(){
        alert("动画执行结束");
    } )

    $("#box2").animate({
        width  : 500,
        // height : 300
    } , 3000 , function(){
        alert("动画执行结束");
    })
})

动画队列

$("#box1")
.animate({width : 500})
.animate({height : 200})
.animate({width  : 100})
.animate({height : 100})

当添加其他行为例如说添加css样式的时候

$("#box1")
.animate({width : 500} , 3000)
.animate({height : 200} , 3000)
.css({
    backgroundColor : "skyblue"
})

此时.css里的背景色不会按照顺序执行，而是直接触发，此时需要使用queue来将同步队列放入动画队列中

 $("#box1")
    .stop( true )
    .animate({width : 500} , 3000)
    .animate({height : 200} , 3000)
    // 如果需要把同步队列放入动画队列之中，需要使用queue;
    .queue(function(){
        $(this).css({
            backgroundColor : "skyblue"
        })
    })

jQuery动画手风琴效果

   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 1. 让当前的盒子，宽度变成1380px; 让其与的盒子宽度变成0;
        // 2. 移出的时候让所有的盒子宽度变成345px;

        $(".box").mouseover(function(){
            $(this)
            .stop(true)
            .animate({
                width : 1380
            })
            .siblings(".box")
            .stop(true)
            .animate({
                width : 0
            })
            .end()
            .children(".content")
            .css({
                left : 0
            })
        })

        $(".box").mouseout(function(){
            $(".box")
            .stop(true)
            .animate({
                width : 345
            })
            .queue(function(){
                $(this)
                .children(".content")
                .css({
                    left : 345
                })
            })
        })
    
    </script>

weixin_46369568

关注

0
点赞
踩
0

收藏

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

什么是jQueryjQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和...
复制链接

扫一扫