码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2018-03-13 00:57:07      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:addclass   ...   注意   函数   sele   mouse   删除元素   html dom   leave   

ComputerScience - 前端 - 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 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/

JQuery

标签:addclass   ...   注意   函数   sele   mouse   删除元素   html dom   leave   

原文地址:https://www.cnblogs.com/DedoChen/p/8552297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!