JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

DedoChen

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量174

点赞数

分类专栏： Client JavaScript

本文链接：https://blog.csdn.net/DedoChen/article/details/79533871

版权

Client 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

1.What is JQuery?
1).JQuery是JS库;
2).Character：轻量级“code less,do more”;
3).Function:（What does JQuery do?）
HTML Element/Tag Selector-选取/Create 创建-增加 Retrieve-检索/取回 Update Delete
HTML Event
HTML DOM遍历和修改
CSS CRUP
JS特效和动画
AJAX

2.JQuery引入
URL:http://jquery.com;

<script src="..."></script>

type="text/javascript"
不必写;JS是H5默认的脚步语言;

内容分发网络（Content Distribution Network）;
内容传递网络（Content Delivery Network）;

性能
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

Baidu CDN:
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

又拍云CDN：
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>

3.JQuery语法
JQuery构成：1.$(); 2.event/action(); 3.function(){}嵌套与调用组合

1).$(selector);
2).$(function(){
});
3).$(selector).action();
4).$(selector).action(function(){

});

层级写法：
先写选择器；
再写行为动作-事件/方法或叫做函数；
最后写功能函数；
注意闭合；

文档就绪事件
两种写法
$(document).ready(function(){

// 开始写 jQuery 代码...

});

$(function(){

// 开始写 jQuery 代码...

});

4.selector
1).Element选择
2).#id选择器
3).class选择器
4)遍历选择

5.event
DOM Event
Mouse-click/dblclick/mouseenter/mouseleave
Keyboard-keypress/keydown/keyup
form-submit/change/focus/blur
document/window-load/unload/resize/scroll

1.指定一个点击事件：
$("p").click();

2.定义该事件做什么
$("p").click(function{
action;
});

input event
$()

6.JQuery效果
1).隐藏/显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

$(selector).toggle(speed,callback); 开关/触发器/切换

2).淡入/淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);

3).滑动
jQuery slideDown() 方法用于向下滑动元素
$(selector).slideDown(speed,callback);

jQuery slideUp() 方法用于向上滑动元素
$(selector).slideUp(speed,callback);

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

4).动画
$(selector).animate({params},speed,callback); adj.有生气的/v.推动

5).停止动画
$(selector).stop(stopAll,goToEnd);

6).Callback

7).Chaining 方法/动作链接
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

7.HTML
1).获取
text() - 设置或返回所选元素的文本内容 <p>
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值 <input>
获取属性 - attr()

get();
set(value);

2).添加元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3).删除元素
remove() - 删除被选元素（及其子元素）

4).CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

5).JQuery遍历
祖先
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
empty() - 从被选元素中删除子元素

后代
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

同胞
siblings() 方法返回被选元素的所有同胞元素

8.JQuery AJAX
$(selector).load(URL,data,callback);

$.get(URL,callback);
$.post(URL,data,callback);

$("button").click(function(){
$.post("demo_test_post.html",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});

});

--参考文档

https://www.w3cschool.cn/

DedoChen

仰望星空

砥砺前行

如需转载，请注明出处，谢谢！

DedoChen

关注

0
点赞
踩
0

收藏

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

1.What is JQuery?1).JQuery是JS库;2).Character：轻量级“code less,do more”;3).Function:（What does JQuery do?）HTML Element/Tag Selector-选取/Create 创建-增加 Retrieve-检索/取回 Update DeleteHTML EventHTML DOM遍历和修改...
复制链接

扫一扫