jQuery基础总结！！！

时间 2021-08-14

标签 css html jquery 程序员数组 app dom ide 函数动画栏目 JQuery 繁體版

原文原文链接

目录css

jQuery简介html

jQuery库的引用jquery

官网下载jQuery程序员

jQuery入门数组

jQuery经常使用的API（重要）app

jQuery选择器dom

jQuery基础选择器ide

jQuery隐式迭代函数

jQuery筛选选择器动画

jQuery筛选方法

jQuery样式操做

操做css方法

设置样式方法

jQuery效果

显示隐藏

滑动

淡入淡出

自定义动画

jQuery属性操做

jQuery文本属性值

jQuery元素操做

遍历元素

建立、添加、删除元素

jQuery尺寸、位置操做

jQuery尺寸

jQuery位置

jQuery事件

jQuery事件注册

jQuery事件处理

on绑定一个或多个事件

on实现事件委托

on动态建立元素绑定事件

off解绑事件

trigger自动触发事件

jQuery事件对象

jQuery简介

jQuery是JavaScript的一个库，目的是为了简化JavaScript的代码量，把JS中的DOM操做进行了封装，若是举个例子的话，就像是上楼同样，你能够经过爬楼梯（DOM），也能够坐电梯（jQuery）

jQuery库的引用

官网下载jQuery

在这里介绍一下jQuery的官网下载https://jquery.com/download/

这两个文件就是jQuery的源码，第一个用于导入咱们的程序中，第二个用于咱们程序员的阅读

导入咱们程序的形式是，在咱们的程序的文件夹下新建一个.js文件，这里以jquery.min.js名为例

当咱们把文件建好并把官网上的jQuery复制过来以后，须要在源文件中声明一下

<script src="jquery.min.js"></script>

如今就能够直接调用jQuery中的一些封装好的函数了

jQuery入门

在使用jQuery库中的函数时，都是以jQuery开头的，jQuery，可是呢，jQuery写起来太麻烦了，就出现了一个别名，也就是$

这里进行一个代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的基本使用</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div></div>
<script>
    //用$()开始，无论jQuery代码写在HTML后面仍是前面都能执行
    //
    $(function () {
        $('div').hide();//这里是隐藏div的意思
    });
</script>

</body>
</html>

有时候一些DOM对象jQuery没有给咱们进行封装，因此须要咱们进行两者的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="#"></video>
<script>
    //jQuery对象中的方法只是DOM中的一些经常使用方法，jQuery对其进行了封装，方便使用
    //DOM转jQuery
    var vid = document.querySelector('video');
    $(vid).hide();
    //有时候jQuery中的方法不够用，需jQuery转DOM,jQuery返回的是一个伪数组
    $('video')[0].play();//这里就是DOM对象了，能够调用DOM中的方法
    $('video').get(0).play();//这是另外一种方法

</script>
</body>
</html>

jQuery经常使用的API（重要）

jQuery选择器

jQuery基础选择器

$("#id") ID选择器，用于获取指定ID的元素

$("*") 全选选择器，用于匹配全部元素

$(".class") 类选择器，用于获取同一类class的元素

$("div") 标签选择器，用于获取多个元素

$("ul>li") 子代选择器，用于获取儿子层的元素，这里只是得到儿子的，不会得到孙子的

$("ul li") 后代选择器，用于获取ul下的全部li元素，包括孙子的

jQuery隐式迭代

这里注意一下，jQuery中有隐式迭代，能够自动进行遍历，这里代码演示下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式迭代</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
<script>
    $("div").css("background", "green");//这里把每一个div都添加了背景颜色
</script>
</body>
</html>

jQuery筛选选择器

$("li:first") 获取第一个li元素

$("li:last") 获取最后一个li元素

$("li:eq(2)") 获取到的li元素中，选择索引号为2的元素

$("li:odd") 获取到的li元素中，选择索引号为奇数的元素

$("li:even") 获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法

$("li").parent() 查找父级

$("ul").children("li") 查找儿子级，这里不包含孙子

$("ul").find("li") 后代选择器，包含孙子

$(".first").siblings("li") 查找兄弟节点，不包括本身自己

$(".first").nextAll() 查找当前元素以后全部的同辈元素

$(".last").prevAll() 查找当前元素以前全部的同辈元素

$("div").hasClass("protected") 检查当前的元素是否含有某个特定的类，若是有返回true

$("li").eq(2) 获取到的li元素中，选择索引号为2的元素

jQuery样式操做

操做css方法

基本语法以div为例，这里更改一个样式

$("div").css("width", "300px");//这里的px能够省略

改多个样式

$("div").css({

width: 400,

height: 400,

backgroundColor: "red"

});

设置样式方法

定义一个类current

.current {

background-color: red;

}

$("div").addClass("current"); 添加类，这里的current就不用加.了

$("div").removeClass("current"); 删除类

$("div").toggleClass("current"); 切换类，能够添加类和删除类

jQuery效果

显示隐藏

show([speed],[easing],[fn]) 显示函数，这里的[]指的是该参数无关紧要

speed：参数是速度的意思，分为slow，normal，fast，或者是填毫秒值

easing：用来指定切换效果，默认是swing，可用参数linear

fn：是回调函数，在动画完成时执行的函数，每一个元素执行一次

hide([speed],[easing],[fn]) 隐藏函数，参数同上

toggle() ([speed],[easing],[fn]) 切换函数，参数同上

滑动

slideDown([speed],[easing],[fn]) 下滑函数，参数同上

slideUp([speed],[easing],[fn]) 上滑函数，参数同上

slideToggle([speed],[easing],[fn]) 切换函数，参数同上

stop() 中止动画排队，当咱们切换的很是快的时候，就须要中止动画排队

淡入淡出

fadeIn([speed],[easing],[fn]) 淡入函数，参数同上

fadeOut() ([speed],[easing],[fn]) 淡出函数，参数同上

fadeToggle([speed],[easing],[fn]) 淡入淡出切换函数，参数同上

fadeTo(speed,opacity,,[easing],[fn]) 修改透明度函数，opacity透明度必须写，取值0~1之间，speed也要必须写

自定义动画

animate(params,[speed],[]easing),[fn]) params是想要更改的样式属性，以对象形式传递，必须写，其余能够省略

举例：以左边500像素为例

$("div").animate({

left: 500

});

jQuery属性操做

$("a").prop("属性") 获取属性,设置元素的固有属性

$("a").prop("属性"，"属性值") 设置属性

$("div").attr("index") 获取自定义属性（这里假设自定义了一个index属性）

$("div").attr("index"，2) 设置自定义属性

jQuery文本属性值

$("div").html() 获取元素内容

$("div").html("123") 设置元素文本内容

$("div").text() 获取元素文本内容

$("div").text("123") 设置元素文本内容

$("input").val() 获取表单值

$("input").val("123") 设置表单值

jQuery元素操做

遍历元素

$("div").each(function(index,domEle){}) index是每一个元素的索引号，demEle是每一个DOM元素对象

$.each($("div"), function(i,ele){}) index是每一个元素的索引号，ele遍历内容

建立、添加、删除元素

var li = $("<li>hello world<li>")

$("ul").append(li) 内部添加而且放到内容的最后面

$("ul").prepend(li) 内部添加而且放到内容的最前面

var div = $("<div>hello world!!!!<div>")

$(".test").after(div) 外部添加到前面 //这里默认在HTML中已存在一个div标签，而且它的class属性是test

$(".test").before(div) 外部添加到前面

$("ul").remove() 能够删除匹配的元素，也就是把ul及其孩子都删除

$("ul").empty() 能够删除匹配元素里的子节点，也就是孩子

$("ul").html("") 能够删除匹配元素里的子节点，也就是孩子

jQuery尺寸、位置操做

jQuery尺寸

$("div").width() 获得匹配元素的宽度，高度只需把width改为height

$("div").width(300) 设置匹配元素的宽度，高度同上

$("div").innerWidth() 获得匹配元素的宽度+padding值，高度同上

$("div").outerWidth() 获得匹配元素的宽度+padding值+border值，高度同上

$("div").outerWidth(true) 获得匹配元素的宽度+padding值+border值+margin值，高度同上

jQuery位置

$(".son").offset()获取距离文档的位置，返回的是一个对象 //这里默认有一个盒子的class属性是son，而且他有一个父盒子

$(".son").offset().left 获取距离文档左侧的位置

$(".son").offset({left: 300}) 设置举例文档左侧的位置

$(".son").position() 获取距离带有定位父级位置

jQuery事件

jQuery事件注册

常见的事件有mouseover mouseout blur focus change keydown keyup resize scroll

$("div").click(function(){}) 这里是给div注册了一个点击事件

jQuery事件处理

on绑定一个或多个事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

$("div").on({

mounseover: function(){}

click: function(){}

}) 该方法能够绑定多个事件

$("div").on("mouseover mouseleave", function(){}) 该方法也能够绑定多个事件

on实现事件委托

$("ul li").click() 这是以前的方法，来进行li上的事件绑定

$("ul").on("click","li",function(){}) 这是事件委托的方式绑定，其中事件是绑定在了ul上，而触发是li

on动态建立元素绑定事件

$("ol").on("click", "li", function(){})

var li = $("<li>hello world</li>")

$("ol").append(li)

通过上面的三个操做，能够动态建立一个绑定事件，在以前不用on的时候是不能这样动态建立

off解绑事件

$("div").off() 这里是解除了div上的全部事件

$("div").off("click") 解除div身上的点击事件

$("ul").off("click", "li") 解除事件委托

$("p").one("click", function(){}) 这里是绑定一个事件，可是只能触发一次

trigger自动触发事件

$("div").click() 会触发事件的默认行为

$("div").trgger("click") 会触发事件的默认行为

$("div").triggerHandler("click") 该事件不会触发默认行为，就像input标签，默认会有光标闪动，但该事件不会触发

jQuery事件对象

$("div").on("click", function(event){}) 这里的event就是事件对象

event对象里有一个方法能够阻止事件冒泡，event.stopPropagation()