JQuery的设计思想
- 多种筛选方式
$("#box").css("backgroundColor", "red")
$(".b1").css("color", "green")
$("ul li").css("marginTop", "10px")
$("li.box").css("color", "red")
$("li").filter(".box").css("color", "red")
$("li:first").css("color", "red")
$("li:last").css("color", "red")
$("li:even").css("color", "red")
$("li:odd").css("color", "red")
$("li:eq(2)").css("color", "red")
$("li").eq(2).css("color", "red")
- 方法函数化
// 原生js写法
window.onload = function() {}
// jquery写法
$(function() {
alert("相当于window.onload")
});
// 添加事件
$("li").click(function() {
alert("我被点击了")
})
$("li").mouseover(function() {
this.style.backgroundColor = "blue"
})
$("li").mouseout(function() {
this.style.backgroundColor = "inherit"
})
- 链式操作
$(function() {
$("h1")
.click(function() {
alert("我被点击了")
})
.css("color", "red")
.mouseover(function() {
this.style.backgroundColor = "#ccc"
})
.mouseout(function() {
this.style.backgroundColor = "inherit"
})
})
- 取值赋值合体
// 原生JS innerHTML
// JQ
$(function() {
// 取值
alert($("#div").html());
// 赋值
$("h1").html("<h1>我是新赋值的内容</h1>")
// 取值
console.log($("input").val())
// 赋值
$("input").val("新的内容")
})
JQuery方法
filter() 过滤
$("li").filter(".selected").css("color", "red")
not() 与filter相反
$("li").not(".selected").css("color", "red")
has() 判断子节点是否有满足的条件（筛选的是父元素）
$("ul").has(".selected").css("color", "red");
prev() 上一个兄弟元素
$("h2").prev().css("color", "red")
next() 下一个兄弟元素
$("h2").next().css("color", "blue")
find() 查找子节点
$("ul").find("li").css("color", "red");
等价于 $("ul li").css("color", "red");
index() 获取当前节点在兄弟节点中的下标
console.log($("li.selected").index())
eq() 通过下标获取元素
$("li:eq(2)").css("color", "red")
attr() 设置和修改行间属性
console.log($("div").attr("id")); // 获得属性
$("div").attr("title", "world"); // 设置属性
$("div").attr({ // 一次性修改多条属性
title: "world",
yyy: "zzz"
})
addClass() 添加class
removeClass() 删除class
$("div").addClass("box2 box3")
// 获取width的方法
width() 内容盒
innerWidth() 填充盒
outerWidth() 边框盒
outerWidth(true) 含margin
$("#div").outerWidth()
offset() 直接获取当前元素（不含margin），距离视口的距离
$("#div2").offset().left
position() 直接获取当前元素（含margin），距离上一个有定位的父节点的距离
offsetParent() 向上查找第一个有定位的父节点，
$("#div2").offsetParent().css("backgroundColor", "red")
val() 获取/设置表单元素的值
console.log($("input").val()) // 获取只能获取第一个
$("input").val("hello") // 赋值，会对所有取到的元素赋值
size() 输出，获取元素的个数
console.log($("input").size())
console.log($("input").length())
each() 循环
$("input").each(function(item, index) {
item.value = index; // js写法
$(item).val(index) // jq写法
})
ready() $(function(){}) == $(document).ready(function(){})
document加载完毕 肯定在 window加载完毕（window.onload） 之前
html() 相当于innerHTML() 含html代码
text() 相当于innerText() 纯文本
数据串联化
serialize() 将表单中的数据拼接成查询字符串（querystring） name1=value1&name2=value2
search ?name1=value1&name2=value2
querystring name1=value1&name2=value2
serializeArray() 将表单中的数据拼接成数组
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
$("input").serialize() // a=1&b=2
事件
on()
off()
// 给一个元素添加一个事件
$("#div1").on("click", function() {
alert("被点击")
})
// 给多个事件添加相同函数
var i = 0;
$("#div1").on("click mouseover", function() {
$(this).html(i++)
})
// 给不同事件添加不同函数
$("#div1").on({
click: () => {alert("被点击了")},
mouseover: function() {$(this).css("backgroundColor", "red")},
mouseout: function() {$(this).css("backgroundColor", "chocolate")},
})
//事件委托
$("ul").on("click", "li", function() {
$(this).css("color", "red");
})
var i = 5;
$("#btn").on("click", function() {
$(`<li>${i++ * 1111}</li>`).appendTo($("ul"))
})
// 取消事件
$("#cancel").click(() => {
$("#div1").off(); // 取消所有事件所有函数
$("#div1").off("click"); //取消某一事件的所有函数
$("#div1").off("click", show); // 取消某一事件下的指定函数
})
// 获取高度
scrollTop
$(window).scrollTop()
// 1、阻止事件冒泡
ev.stopPropagation()
$("div").click(function(ev) {
alert(this.id);
ev.stopPropagation();
})
// 2、阻止默认行为
ev.preventDefault()
// 3、既阻止事件冒泡，又阻止默认行为
return false
$("div").click(function(ev) {
return false
})
// 获取鼠标点击位置
//
$(document).click(function(ev) {
console.log(ev.pageX + " , " + ev.pageY) // 带滚动距离
console.log(ev.clientX + " , " + ev.clientY) // 视口距离
})
which
鼠标事件： button
1 左键
2 滚轮
3 右键
keydown: keyCode编码
keyPress: charCode编码
$(document).mousedown(function(ev) {
console.log(ev.which);
})
$(window).keydown(function(ev) {
console.log(ev.which);
})
ev.target 兼容后触发对象本身 // <button>按钮</button>
ev.type 输出事件类型 // click
ev.data 传入的参数
$("button").on("click", {name: "aaa", age: 18}, function() {
console.log(ev.data);; // 传入的参数
console.log(ev.data.name); // aaa
})
trigger 主动触发(可以触发官方事件，也可以自己绑定的事件)
$("#play").on("next", function() {
alert("下一首")
})
$("button").click(function() {
$("#play").trigger("next")
})
特效函数
hover(funcOver, funcOut)
hide()
show()
可传入两个参数，hide(动画持续毫秒数， 回调函数)
【注】动画效果，从左上角收起及展开
slideDown()
slideUp()
【注】动画效果，从上到下卷闸
fadeIn()
fadeOut()
fadeTo(动画持续时间，透明度，回调函数)
【注】动画效果，淡入淡出
$(function() {
$("#div1").hover(function() {
$("#div1").fadeTo(500,1 , function() {$("#div1").html("移入")})
$("#div2").fadeIn(500, function() {$("#div1").html("移入")})
}, function() {
$("#div1").fadeTo(500, 0.5, function() {$("#div1").html("移入")})
$("#div2").fadeOut(500, function() {$("#div1").html("移出")})
})
})
节点操作
insertBefore() before() 之前插入
insertAfter() after() 之后插入
appendTo() append() 子元素末尾插入
prependTo() prepend() 子元素开头插入
remove() 移除节点,返回删除的节点本身，但不会保留之前的事件和行为
detach() 移除节点,返回删除的节点本身，保留之前的事件和行为
$("span").insertAfter($("div"))
选择器
add() $("div").add("span").add("ul li").css() 等价于 $("div, span, ul li").css()
slice(开始，结束) 获取指定范围的元素节点 $("ul li").slice(1,4).css()
// 【注】下诉所有的方法都可传参数，参数表示选择器 $("#div2").siblings("h2").css("color", "red")
siblings() 除当前节点外，所有兄弟节点
nextAll() 之后所有兄弟元素
prevAll() 之前所有兄弟元素
parentsUntil() 父节点，到……为止
nextUntil() 之后兄弟元素，到……为止
prevUntil() 之前兄弟元素，到……为止
parent() 从父节点开始，获取第一个匹配的父节点
parents() 获取父节点们 ，可传入参数作为选择器
closest() 必须传入参数，作为选择器，从自己开始，获取第一个匹配的父节点
包装
wrap() 给每个满足的元素外加个包装 $("span").wrap("<p class='box'></p>")
wrapAll() 整体外包装
wrapInner() 内包装（填充）
unwrap() 删除上一层包装（如有删除，如无不删除），没有参数
clone() 默认只克隆节点本身，不克隆行为
clone(true) 既克隆本身，也克隆行为
var node = $("#div1").clone(true);
node.appendTo($("#div2"));
动画函数
animate(样式，时间,运动方式，回调函数)
运动形式：慢快慢 swing（默认）
匀速 linear
更多运动方式，需引入jQuery-ui框架(目前基本已被淘汰)
$("#div1").click(function() {
$("#div1").animate({
width: 300,
opacity: 0.5
}, 4000, "swing", function() {$("#div1").html("移入")})
$("#div2").animate({
width: 300,
opacity: 0.5
}, 4000, "linear",function() {$("#div2").html("移入")})
})
停止动画 stop() // 停止该元素当前动画，但是后面动画仍执行
stop(true) // 停止该元素所有动画
stop(true, true) // 停止该元素所有动画 ，并将当前动画直接运动完成
finish() // 停止该元素所有动画 ，并将所有动画直接运动完成
$(function() {
$("#div1").click(function() {
$("#div1").animate({width: 300}, 2000)
$("#div1").animate({height: 300}, 2000)
})
$("#div2").click(function() {
$("#div1").stop() // 停止该元素当前动画，但是后面动画仍执行
$("#div1").stop(true) // 停止该元素所有动画
$("#div1").stop(true, true) // 停止该元素所有动画 ，并将当前动画直接运动完成
$("#div1").finish() // 停止该元素所有动画 ，并将所有动画直接运动完成
})
})
小技巧：调用animate前，先调用stop(true)，取消之前积攒的动画
$("#div1").stop(true).animate({width: 300}, 2000)
delay(延迟时间) 延迟时间后执行动画
$("#div1").animate({width: 300}, 2000).delay(1000).animate({height: 300}, 2000)
jQuery工具方法
$.type() 数据类型 $.type(arr)
$.trim() 删除首尾空格 $.trim(str) str.trim() (es6官方语法)
$.inArray() 查找数据的下标 $.inArray(30, arr) arr.indexOf(30) (es6官方语法)
$.proxy() 功能类似bind
$.makeArray() 将伪数组转为数组 $.makeArray(arr) Array.from(arr) (es6官方语法)
.noConflict() 给$起别名，使用 noConflict() 方法为 jQuery 变量规定新的名称：
var jq=$.noConflict();
jQuery插件方法
给JQ新增函数
$.extend() 拓展工具方法 $.xxx()
$.fn.extend() 拓展JQ方法 $().xxx()
$.extend({
aaa: function() {
alert("这是一个工具方法")
}
})
$.fn.extend({
bbb: function() {
alert("这是一个JQ方法")
}
})
jQuery的cookie方法
$.cookie()
具体调用的格式
$.cookie(name) 通过name取值
$.cookie(name, value) 设置name和value
$.cookie(name, value, {
可选项
raw: true, value不进行编码， 默认false
expires: 7 多少天后过期
})
$.cookie(name, null) 删除cookie
$.cookie("ming", "pwssss", {
expires: 7,
raw: false
})
jQuery的ajax方法
$().load()
$.get()
$.post()
// $.ajax() 使用方法
$(function() {
$("#btn1").click(function() {
$.ajax({
type: "get",
url: "1.txt",
data: {
},
success: function(data, statusText, xhr) {
/*
statusText: success error
xhr: ajax对象
*/
console.log(data);
console.log(statusText)
},
error: function(msg) {
console.log(msg)
}
})
})
})
// 跨域方法
// 加上
dataType: "jsonp"
// $.load()
// $.load(路径 及选择器，回调函数(data, statusText, xhr))
// 如数据内有html标签，可在路径后加选择器，筛选获取的数据
$("button").click(function() {
$("div").load("2.txt h2", function(data, statusText, xhr){
console.log(data);
console.log(statusText);
console.log(xhr.status);
})
})
// $.get()
// $.get(路径，回调函数(data, statusText, xhr))
$.get("1.txt", function(data, statusText, xhr) {
console.log(data)
})
// $.post()
// $.post(路径，回调函数(data, statusText, xhr))
来源：oschina
链接：https://my.oschina.net/u/4460563/blog/3209197