jQuery学习笔记--介绍、使用、API（API速查表）

jQuery是一个快速、简洁的JavaScript 库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,
做更多的事情。
j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里
面的功能。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
优点：

轻量级。核心文件才几+kb,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持.大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件.轮播图等
免费、开源

2. jQuery的使用

2.1 下载

官网：https://jquery.com/

版本：

1x :兼容IE 678等低版本浏览器,官网不再更新
2x :不兼容IE 678等低版本浏览器,官网不再更新
3x : 不兼容IE 678等低版本浏览器,是官方主要更新维护的版本

各版本下载地址：http://code.jquery.com/

2.2 jQuery 的入口函数

<head>
    <script src="jquery.min.js"></script>
</head>
<body>
    <script>
        // 方法1 这种写法更简单
        $(function(){
            ...//此处是页面DOM加载完成的入口
        });
        // 方法2
        $(document.ready(function(){
            ...//此处是页面DOM加载完成的入口
        }));
    </script>
</body>

等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
相当于原生js中的DOMContentLoaded.
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

2.3 jQuery的顶级对象 $

2.3.1 $ 是jQuery的别称

上面的代码中的‘$’符号可以换成‘jQuery’，代码正常运行

2.3.2 $ 是 jQuery的顶级对象

相当于原生JavaScript中的window.把元素利用$包装成Query对象,就可以调用jQuery的方法。

2.4 jQuery对象和DOM对象

DOM对象：原生js代码获取来的对象

jQuery对象：jQuery方法获取的元素

jQuery对象的本质：利用$对DOM对象包装后产生的对象(伪数组形式存储)。

jQuery对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法

2.4.1 两种对象之间的相互转换

1. DOM对象转换成jQuery对象： $(DOM对象)

$('div')

2. jQuery对象转换成DOM对象

//方法1
$('div')[index]//index是索引号
//方法2
$('div').get(index)//index是索引号

3. jQuery 选择器

3.1 基础选择器

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$('*')	匹配所有元素
类选择器	$(".lass")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	s("div,p,i")	选取多个元素
交集选择器	$("li.current")	交集元素

3.2 层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器	$("u2 li");	使用空格，代表后代选择器，获取u下的所有1i元素,包括孙子等

3.3 隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

3.4 筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even")	获取到的li元素中，选择索引号为偶数的元素

3.5 筛选方法

语法	用法	说明
parent()	$("li").parent();	查找父级,最近一级(亲爸爸)
children(selector)	$("ul").children("li")	相当于$("ul>li"),最近一级(亲儿子)
find(selector)	$("ul").find("li");	相当于$("ul Ii"),后代选择器
siblings(selector)	$(". first").siblings("li");	查找兄弟节点，不包括自己（类名first的元素）本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(" . last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass("protected" )	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq( index)	$("li").eq(2);	相当于$("li:eq(2)"), index从0开始

3.6 jQuery的排他思想

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>点一下</button>
    <button>点一下</button>
    <button>点一下</button>
    <button>点一下</button>
    <button>点一下</button>
    <button>点一下</button>
    <button>点一下</button>
    <script>
        $(function() {
            // 隐式迭代，给所有按钮都绑定了点击事件
            $("button").click(function() {
                $(this).css("background", "blue");
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

</html>

4. jQuery样式操作

4.1 css方法

参数只写属性名,则是返回属性值
$(this).css("color");
参数是属性名,属性值,逗号分隔,是设置一组样式，属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css({
    color:"white",
    width:20
});

4.2 操作类

作用等同于以前的classList ,可以操作类样式，注意操作类里面的参数不要加点
添加类 addClass() //追加类名，不影响原来的类名
$("div").click(function() {
    $(this).addClass("current");
});
删除类 removeClass()
$("div").click(function() {
    $(this).removeClass("current");
});
切换类 toggleClass()
$("div").click(function() {
    $(this).toggleClass("current");
});

4.3 类操作与className的区别

原生JS中className会覆盖元素原先里面的类名。
jQuery.里面类操作只是对指定类进行操作,不影响原先的类名。

5. jQuery 效果

jQuery封装的动画效果，常见的：

显示隐藏	滑动	淡入淡出	自定义动画
show()	slideDown()	fadeln()	animate()
hide()	slideUp()	fadeOut()
toggle()	slideToggle()	fadeToggle()
		fadeTo()

5.1 显示隐藏效果

语法：show ([speed, [easing], [fn]])

hide([speed, [easing], [fn]])

参数：

参数都可以省略,无动画直接显示。
speed:三种预定速度之-的字符串( "slow" ，"normal" . or "fast" )或表示动画时长的毫秒数值(如: 1000)。
easing : (Optional)用来指定切换效果,默认是“swing” , 可用参数"linear” 。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

jQuery API 速查表，查看方法的使用

5.2 滑动效果

语法:slideDown([speed, [easing], [fn]])

slideUp([speed, [easing], [fn]])

slideToggle([speed, [easing], [fn]])

参数说明与现实隐藏效果的参数说明一致

5.3 动画队列及停止其排队的方法

5.3.1 动画（效果）队列

动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。

5.3.2 停止排队

stop()
stop()方法用于停止动画或效果
注意： stop()写到动画或效果的前面，相当于停止结束上一次的动画
$(this).children("ul" ).stop().slideToggle();

5.4 淡入淡出效果

语法: fadeIn([speed, [easing], [fn]])

fadeOut([speed, [easing], [fn]])

fadeToggle([speed, [easing], [fn]])

参数说明与现实隐藏效果的参数说明一致

渐进方式调整到指定的不透明度

fadeTo ([[speed] , opacity, [easing], [fn]])

参数：

opacity透明度必须写,取值0~1之间。
speed :三种预定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。必须写
easing : (Optional)用来指定切换效果,默认是“swing” ,可用参数"Iinear” .
fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

5.5 自定义动画 animate()

animate (params, [speed], [easing], [fn])

参数：
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderleft.其余参数都可以省略。
speed:三种预定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
easing : (Optional)用来指定切换效果,默认是“swing”, 可用参数 "linear" 。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
<script>
    $(function() {
        $(”button").click(function() {
            $("div" ). animate({
                left: 500, 
                top：100
        }, 500);
    })
})
</script>

6. jQuery 属性操作

6.1 设置或获取元素固有属性值 prop()

6.1.1 获取属性语法

prop("属性名")

6.1.2 设置属性语法

prop("属性名","属性值")

6.2 设置或获取元素自定义属性值 attr()

1.获取属性语法
attr("属性") // 类似原生getAttribute()
2.设置属性语法
attr("属性"，"属性值"”) // 类似原生setAttribute()

6.3 数据缓存data()

data0方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。

$("span").data("uname",” andy");
console.1og($(" span") .data("uname" ));

1.附加数据语法

data("name","value") // 向被选元素附加数据

2.获取数据语法

date("name") //向被选元素获取数据

同时,还可以读取HTML5自定义属性data-index ，写法【data("index")，省略了data- 】.得到的是数字型

7. jQuery 内容文本值

7.1 普通元素内容html()（相当于原生js中的innerHTML）

html()//获取元素的内容

html("内容")//设置元素的内容

7.2 普通元素文本内容text()（相当于原生js中的innerText）

text()//获取元素的内容

text("内容")//设置元素的内容

7.3 表单的值val()（相当于原生value）

val()//获取元素的内容

val("内容")//设置元素的内容

8. 元素操作

主要是遍历、创建、添加、删除元素操作

8.1 遍历操作

语法1

$("div") .each (function (index, domEle) { xxx; } )

.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
里面的回调函数有2个参数: index 是每个元素的索引号; domEle是每个DOM元素对象,不是jquery对象

语法2：

$.each (object，function (index，element) {xxx;})

$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
$.each({
    name: " andy" ,
    age: 18
}, function(i, ele) {
    console.1og(i); //输出的是name age属性名
    console.1og(ele); //输出的是andy 18 属性值
})

8.2 创建元素

语法：

$("<li></li>"); //动态的创建了一个<li>

8.3 添加元素

8.3.1 内部添加

$("ul").append("<li></li>"); //添加到元素的后面，类似于appendChild

$("ul").prepend("<li></li>"); //添加到元素的最前面

8.3.2 外部添加

element.after("内容"); //加到后面

element.before("内容"); //加到前面

内部添加的元素是父子关系

外部添加的元素是兄弟关系

8.4 删除元素

element.remove() //删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容子节点

9. jQuery 尺寸、位置操作

9.1 jQuery 尺寸

语法	用法
width()/ height()	取得匹配元素宽度和高度值只算width / height
innerWidth()/innerHeight()	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true)/outerHeig(true)	取得匹配元素宽度和高度值包含padding、border. margin

以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
参数可以不必写单位。

9.2 jQuery 位置

位置主要有三个: offset()、 position()、 scrollTop()/scrollLeft()

9.2.1 offset()设置或获取元素偏移

offset0 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
该方法有2个属性left、top. offset().top 用于获取距离文档顶部的距离, offset().left用于获取距离文档左侧的距离。
可以设置元素的偏移: offset({ top: 10, left: 30 });

9.2.2 position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
这个方法只能获取不能设置

9.2.3 scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部。
返回顶部
$(".back").click(function() {
    // $(document) . scro11Top(0);
    $("body, html").stop().animate({
        scrol1Top: 0
    });
})

shirlyran

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记--介绍、使用、API（API速查表）

目录1. 概述1.1 jQuery？2. jQuery的使用2.1 下载2.2 jQuery 的入口函数2.3 jQuery的顶级对象 $2.3.1 $ 是jQuery的别称2.3.2$ 是 jQuery的顶级对象2.4 jQuery对象和DOM对象2.4.1 两种对象之间的相互转换3. jQuery 选择器3.1 基础选择器3.2 层级选择器3.3 隐式迭代3.4 筛选选择器3.5 筛选方法1. 概述1.1 jQuery？...
复制链接

扫一扫