引用
<head>
//这里使用新浪CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
语法
$(selector).action()
$：定义jQuery
(selector)：使用JQ查找HTML元素
action():对元素执行操作
//文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
选择器
| 项 |
描述 |
| $("*") |
选取所有元素 |
| $(this) |
选取当前 HTML 元素 |
| $("p.intro") |
选取 class 为 intro 的 <p> 元素 |
| $("p:first") |
选取第一个 <p> 元素 |
| $("ul li:first") |
选取第一个 <ul> 元素的第一个 <li> 元素 |
| $("ul li:first-child") |
选取每个 <ul> 元素的第一个 <li> 元素 |
| $("[href]") |
选取带有 href 属性的元素 |
| $("a[target='_blank']") |
选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") |
选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $(":button") |
选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") |
选取偶数位置的 <tr> 元素 |
| $("tr:odd") |
选取奇数位置的 <tr> 元素 |
常见DOM事件
| 鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
| click |
keypress |
submit |
load |
| dblclick |
keydown |
change |
resize |
| mouseenter |
keyup |
focus |
scroll |
| mouseleave |
|
blur |
unload |
| hover |
|
|
|
//触发事件
$("p").click();
//事件处理
$("p").click(function(){
$(this).hide();
});
动画效果
| 项 |
语法 |
描述 |
| 显示 |
$(selector).show(speed,callback); |
|
| 隐藏 |
$(selector).hide(speed,callback); |
|
| 切换显示隐藏 |
$(selector).toggle(speed,callback); |
|
| 淡入隐藏元素 |
$(selector).fadeIn(speed,callback); |
|
| 淡出可见元素 |
$(selector).fadeOut(speed,callback); |
|
| 切换淡入淡出 |
$(selector).fadeToggle(speed,callback); |
|
| 渐变到透明度 |
$(selector).fadeTo(speed,opacity,callback); |
opacity：透明度 |
| 下滑 |
$(selector).slideDown(speed,callback); |
|
| 上拉 |
$(selector).slideUp(speed,callback); |
|
| 切换下滑上啦 |
$(selector).slideToggle(speed,callback); |
|
| 动画 |
$(selector).animate({params},speed,callback); |
{params}：形成动画的 CSS 属性 |
| 停止动画 |
$(selector).stop(stopAll,goToEnd); |
stopAll:是否应清除动画队列 goToEnd:是否立即完成当前动画 |
可选参数：speed速度，callback执行完成后的操作。
$("#p").slideDown(100);
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
捕获设置
| 项 |
语法 |
| text()/text(value) |
获取/设置文本内容 |
| html()/html(value) |
获取/设置含 HTML 标记的内容 |
| val()/val(value) |
获取/设置表单字段的值 |
| attr(attribute)/attr({attribute,value}) |
获取/设置属性值 |
$("#test2").html()
$("#test2").html("<b>Hello world!</b>");
//捕获设置函数都有回调
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello";
});
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
添加元素
| 函数 |
描述 |
| append() |
在被选元素的结尾插入内容 |
| prepend() |
在被选元素的开头插入内容 |
| after() |
在被选元素之后插入内容 |
| before() |
在被选元素之前插入内容 |
function appendText()
{
var txt1="<p id="text">文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
$("p").prepend("在开头追加文本");
}
删除元素
| 函数 |
描述 |
| remove() |
删除被选元素（及其子元素） |
| empty() |
从被选元素中删除子元素 |
操作 CSS
| 函数 |
描述 |
| addClass() |
向被选元素添加一个或多个类 |
| removeClass() |
从被选元素删除一个或多个类 |
| toggleClass() |
对被选元素进行添加/删除类的切换操作 |
| css() |
设置或返回样式属性 |
$("h1,h2,p").addClass("blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("background-color","yellow");
尺寸方法
width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()
$("#div1").width()
$("#div1").innerWidth()
$("#div1").outerWidth()
Cookie
引用
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
语法
//设置
$.cookie('name0', 'value');
$.cookie('name', 'value', { expires: 7, path: '/' });
//读取
$.cookie('name0');
$.cookie('name');
//删除
$.removeCookie('name0');
$.removeCookie('name', { path: '/' });