【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

前言

【内容】

【目的】

【学习资料】

jQuery教程-菜鸟教程

【温馨提示】

jQuery快速了解

啥是jQuery？

能干什么？

如何在网页文件中引入jQuery？

方法一：本地引用

方法二：通过CDN（内容分发网络） 引用

/*Staticfile CDN*/
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
/*百度 CDN:*/
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
/*又拍云 CDN*/
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
/*新浪 CDN*/
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
/*Microsoft CDN*/
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

【PS】推荐使用方法二引入jQuery

如何查看jQuery使用版本？

如何使用jQuery？

jQuery语法

基础语法

【格式】

$(selector).action()

$：定义jQuery

selector（选择符）："查询"和"查找" HTML 元素（具体详情）

action()：执行对元素的操作

文档就绪事件

【格式】

格式一：

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

格式二：简洁写法（与以上写法效果相同）

$(function(){
   // 开始写 jQuery 代码...
});

【拓展】JavaScript文档就绪事件

格式:

window.onload = function () {
    // 执行代码
}

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

jQuery选择器

常用选择器 格式
元素选择器 $("元素名")
id 选择器 $("#id名")
class 选择器 $(".类名")

了解更多（无须深究可暂时跳过，用到时再具体了解）

如何在独立文件中使用jQuery函数？

【好处】

jQuery事件

啥是事件？

了解更多（无须深究可暂时跳过，用到时再具体了解）

如何设置jQuery事件?

【格式】

$("selecter").action（function(){
    //动作触发后执行的代码！！！
}）;

selecter：选择器

action：事件

function：函数

jQuery 效果

隐藏/显示

hide()【隐藏】和 show()【显示】

【格式】

$("selecter").hide(speed,callback);
$("selecter").hide(speed,callback);

speed（隐藏/显示的速度）：可选

callback（隐藏/显示后执行的函数）：可选

toggle()【将显示的隐藏，将隐藏的显示】

【格式】

$("selecter").toggle(speed,callback);

淡入/淡出

【注意】

fadeln()【淡入已已隐藏的元素】和 fadeOut() 【淡出可见元素】

【格式】

$("selector").fadeIn(speed,callback);
$("selector").fadeOut(speed,callback);

speed（隐藏/显示的速度）：可选

callback（淡入后执行的函数）：可选

fadeToggle() 【元素已淡出，添加淡入效果；元素已淡入，添加淡出效果】

【格式】

$("selector").fadeToggle(speed,callback);

fadeTo() 【渐变淡入淡出】

【格式】

$("selector").fadeTo(speed,opacity,callback);

opacity(不透明度)：将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

【注意】

滑动

slideDown() 【向下滑动元素】 和 slideUp()【向上滑动元素】

【格式】

$("selector").slideDown(speed,callback);
$("selector").slideUp(speed,callback);

speed（效果的时长）：可选

callback（滑动后执行的函数）：可选

slideToggle()【已向下滑动的元素，向上滑动；已向上滑动的元素，向下滑动】

【格式】

$("selector").slideToggle(speed,callback);

动画

animate()【创建自定义动画】

【格式】

 $("selector").animate({params},speed,callback);

params（形成动画的 CSS 属性）：必需

speed（效果的时长）：可选

callback（动画完成后执行的函数）：可选

【注意】

停止动画

stop() 【在它们完成之前，停止动画或效果】

【格式】

 $("selector").stop(stopAll,goToEnd);

stopAll(是否应该清除动画队列)：

goToEnd（是否立即完成当前动画）：

Callback方法（回调）

链（Chaining）

【格式】

$("selecter").action1().action2().action3()....actionN();

【缩进格式】

$("selecter").action1()
    .action2()
    .action3()
    ...
    .actionN();

【注意】

更多方法【了解即可】

jQuery 效果方法

jQuery HTML

【拓展】什么是DOM？

获取内容和属性

获取内容方法

方法名 设置或返回内容
text() 所选元素的文本内容
html() 所选元素的内容（包括 HTML 标记）
val() 表单字段的值

获取属性

attr() 【获取自定义属性值】

【格式】

$("selecter").attr("想要获取值的属性")

prop()【获取固有属性值】

【格式】

$("selecter").prop("想要获取值的属性")

【PS】

【拓展】啥是固有属性？

attr()和prop()的区别

attr() prop()
用途 获取自定义属性值 获取固有属性值
如果没有相应的属性，返回值 undefined 空字符串

设置内容和属性

设置内容方法

方法名 设置或返回内容
text("文本内容") 所选元素的文本内容
html("带标签的内容") 所选元素的内容（包括 HTML 标记）
val("值") 表单字段的值

text()、html() 以及 val() 的回调函数

【格式】

$("selecter").text(function(index,origText){
    //方法代码
});
$("selecter").html(function(index,origText){
    //方法代码
});
$("selecter").val(function(index,origText){
    //方法代码
});

index：被选元素列表中当前元素的下标

origText：原始（旧的）值。

设置属性

attr()方法设置属性值

【格式】

//设置单个属性
$("selecter").attr("属性","想要设置的值");
//设置多个属性
$("selecter").attr({
    "属性1":"属性1的值",
    "属性2":"属性2的值",
    ....
    "属性N":"属性N的值",
});

attr() 的回调函数

【格式】

$("selecter").attr("属性",function(index,orgValue){
    //方法代码
});

index：被选元素列表中当前元素的下标

orgValue：原始（旧的）值

添加元素/内容

append()【在被选元素的结尾插入内容（仍然在该元素的内部）】

【格式】

$("selecter").append("追加文本");

prepend() 【在被选元素的开头插入内容（仍然在该元素的内部）】

【格式】

$("selecter").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素、

【思路】

【格式】

var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素

after() 【在被选元素之后插入内容】 和 before()【在被选元素之前插入内容】

【格式】

$("selecter"").after("在元素后面添加文本");
$("selecter").before("在元素前面添加文本");

通过 after() 和 before() 方法添加若干新元素

【思路】

【格式】

var txt1="<b>I </b>";                    // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
$("selecter").after(txt1,txt2,txt3);          // 在图片后添加文本

【append/prepend】和【after/before】有什么区别?

删除元素/内容

remove()方法

删除被选元素和子元素

【格式】

$("selecter").remove();

过滤被删除的元素

【格式】

$("selecter").remove("selecter");

empty()方法

删除被选元素的子元素

【格式】

$("selecter").empty();

获取并设置CSS类

方法名 功能
addClass() 向不同的元素添加 class 属性
removeClass() 在不同的元素中删除指定的 class 属性
toggleClass() 对被选元素进行添加/删除类的切换操作

【格式】

$("元素1,元素2,元素3,...,元素N").addClass("类名1 类名2 类名N");
$("元素1,元素2,元素3,...,元素N").removeClass("类名1 类名2 类名N");
$("元素1,元素2,元素3,...,元素N").toggleClass("类名1 类名2 类名N");

【注意】

CSS()方法

返回指定的 CSS 属性的值

【格式】

$("selecter").css("propertyname");

propertyname：想要获取值的CSS属性

设置指定的 CSS 属性

【格式】

$("selecter").css("propertyname","value");

propertyname：想要设置值的CSS属性

value：该属性的值

设置多个 CSS 属性

【格式】

$("selecter").css({
    "属性1":"值1",
    "属性2":"值2",
    ...
    "属性N":"值N",
});

尺寸

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

【设置或返回元素的宽度】

方法名 描述
width() 不包括内边距、边框或外边距
innerWidth() 包括内边距
outerWidth() 包括内边距和边框

【格式】

$("selecter").width();
$("selecter").innerWidth();
$("selecter").outerWidth();

【设置或返回元素的高度】

方法名 描述
height() 不包括内边距、边框或外边距
innerWidth() 包括内边距
outerWidth() 包括内边距和边框

【格式】

$("selecter").height();
$("selecter").innerHeight();
$("selecter").outerHeight();

了解更多

jQuery HTML / CSS 方法

jQuery 遍历

什么是遍历？

对DOM 进行遍历

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

祖先【向上遍历 DOM 树】

方法名 功能描述 方法返回
parent() 只会向上一级对 DOM 树进行遍历 被选元素的直接父元素
parents() 一路向上直到文档的根元素 (<html>) 被选元素的所有祖先元素
parentsUntil() 介于两个给定元素之间的所有祖先元素

【格式】

/* parent方法 */
//返回"selecter"的直接父元素
$("selecter").parent();
/* parents方法 */
//返回"selecter"的所有祖先元素
$("selecter").parents();
//返回"selecter"的所有祖先元素中的被选中元素
$("selecter").parents("selecterChosen");
/* parentsUntill方法 */
//返回"selecterStart"到"selecterEnd"中所有祖先元素
$("selecterStart").parentsUntill("selecterEnd");

后代【向下遍历 DOM 树】

方法名 功能描述 方法返回
children() 只会向下一级对 DOM 树进行遍历 被选元素的所有直接子元素
find() 一路向下直到最后一个后代 被选元素的后代元素

【格式】

/* children方法 */
//返回被选元素的所有直接子元素
 $("selecter").children();
//使用可选参数来过滤对子元素的搜索
 $("selecter").children("selecterChosen");
/* find方法 */
//返回属于"selecter"后代的所有"selecterChosen"元素
$("selecter").find("selecterChosen");
//返回"selecter"的所有后代
$("selecter").find("*");

同胞【在 DOM 树中水平遍历】

方法名 方法返回 方向相反方法
siblings() 被选元素的所有同胞元素
next() 只返回一个元素，被选元素的下一个同胞元素 prev()
nextAll() 被选元素的所有跟随的同胞元素 prevAll()
nextUntil() 介于两个给定参数之间的所有跟随的同胞元素 prevUntil()

【格式】

/* siblings() 方法 */
//返回 "selecter" 的所有同胞元素
$("selecter").siblings();
//返回属于 "selecter" 的同胞元素中的所有 "selecterChosen" 元素
$("selecter").siblings("selecterChosen");
/* next() 方法 */
//返回 "selecter" 的下一个同胞元素
$("selecter").next();
/* nextAll() 方法 */
//返回 "selecter" 的所有跟随的同胞元素
$("selecter").nextAll();
/* nextUntil() 方法 */
//返回介于 "selecterStart" 与 "selecterEnd" 元素之间的所有同胞元素
$("selecterStart").nextUntil("selecterEnd");

过滤【缩小搜索元素的范围】

基本过滤方法

方法名 方法返回
first() 被选元素的首个元素
last() 被选元素的最后一个元素
eq() 被选元素中带有指定索引号的元素

【格式】

/* first() 方法 */
//选取首个 "selecterFather" 元素内部的第一个 "selecterSon" 元素
$("selecterFather selecterSon").first();
/* last() 方法 */
//选择最后一个 "selecterFather" 元素中的最后一个 "selecterSon" 元素
$("selecterFather selecterSon").last();
/* eq() 方法 */
//选取第 index+1 个 "selecter" 元素    (索引号从 0 开始)
$("selecter").eq(index);

其他过滤方法

filter() 方法

【格式】

//返回带有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").filter("selecterChosen");

not() 方法

【格式】

//返回不带有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").not("selecterChosen");

了解更多

jQuery 遍历方法

jQuery AJAX

啥是AJAX？

jQuery与AJAX有啥关系？

AJAX load()方法

【格式】

$(selector).load(URL,data,callback);

URL（希望加载的 URL）：必需

data（与请求一同发送的查询字符串键/值对集合）：可选

callback（ load() 方法完成后所执行的函数名称）：可选

AJAX get()/post()方法

HTTP 请求：GET 与 POST 的区别

GET POST
对指定的资源操作 请求数据 提交要处理的数据
数据能否缓存 可缓存 无法缓存
发送的数据数量 只能发送有限数量的数据 可以发送大量的数据
数据发送位置 在 URL 中发送 在正文主体中发送
安全性 发送的数据不受保护 发送的数据是安全的
数据在 URL 栏中是否公开 公开 不公开
可变大小 2000 个字符 最多允许 8 Mb
主要作用 获取信息 更新数据
表单提交时编码 只接受 ASCII 字符 不绑定表单数据类型，并允许二进制和 ASCII 字符

jQuery $.get() 方法

【格式】

$.get(URL,callback);

URL（希望请求的 URL）：必需

callback（请求成功后所执行的函数名）：可选

jQuery $.post() 方法

【格式】

$.post(URL,data,callback);

URL（希望请求的 URL）：必需

data（连同请求发送的数据）：可选

callback（请求成功后所执行的函数名）：可选

了解更多

jQuery AJAX 方法

结语

【感谢】

感谢菜鸟编程提供学习的平台!!!

感谢各位读者能看到最后!!!

标签 , ,