jQuery基础总结

目录

jQuery简介

jQuery库的引用

官网下载jQuery

jQuery入门

jQuery常用的API(重要)

jQuery选择器

jQuery基础选择器

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的官网下载Download jQuery | jQuery

这两个文件就是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()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

贺志营

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

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

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

打赏作者

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

抵扣说明:

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

余额充值