Skip to content

Instantly share code, notes, and snippets.

@Ran-ying
Created January 30, 2023 20:23
Show Gist options
  • Save Ran-ying/fde074029cd148cd65fe5dc35388be88 to your computer and use it in GitHub Desktop.
Save Ran-ying/fde074029cd148cd65fe5dc35388be88 to your computer and use it in GitHub Desktop.

选择器

$("p"); //元素选择器
$("p, span"); //元素选择器
$("#test"); //#id 选择器
$(".test"); //.class 选择器
$("*"); //选取所有元素;
$(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> 元素

事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
$("p").click();
$("p").click(function(){
    // 动作触发后执行的代码!!
});

文档就绪事件

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

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

控制CSS

改变 CSS

$(selector).addClass()    //向被选元素添加一个或多个类
$(selector).removeClass() //从被选元素删除一个或多个类
$(selector).toggleClass() //对被选元素进行添加/删除类的切换操作
$(selector).css("attr")         //返回样式属性
$(selector).css("attr", "value")         //设置样式属性
$(selector).css({
    "attr": "value",
    "attr": "value"
})         //设置样式属性

尺寸控制

$(selector).width()    //设置或返回元素的宽度(不包括内边距、边框或外边距)
$(selector).height()   //设置或返回元素的高度(不包括内边距、边框或外边距)
$(selector).innerWidth()  //方法返回元素的宽度(包括内边距)
$(selector).innerHeight() //方法返回元素的高度(包括内边距)
$(selector).outerWidth()  //方法返回元素的宽度(包括内边距和边框)
$(selector).outerHeight() //方法返回元素的高度(包括内边距和边框)

隐藏和显示

$(selector).hide(speed,callback);    //隐藏
$(selector).show(speed,callback);    //显示
$(selector).toggle(speed,callback);  //显示被隐藏的元素或隐藏已显示的元素

淡入淡出

$(selector).fadeIn(speed,callback);  //淡入已隐藏的元素
$(selector).fadeOut(speed,callback); //淡出可见元素
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeTo(speed,opacity,callback); //渐变为给定的不透明度(值介于 0 与 1 之间)

动画

$(selector).animate({params},speed,callback);   //创建自定义动画

params:
{
    left:'250px',        //操作多个属性
    height:'+=150px',    //使用相对值
    marginRight:'10px'   //使用 Camel 标记法书写所有的属性名
}
  • 停止动画
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此,默认地,stop() 会清除在被选元素上指定的当前动画。

DOM 操作

获取内容和属性

$(selector).text() //返回所选元素的文本内容
$(selector).html() //返回所选元素的内容(包括 HTML 标记)
$(selector).val() //返回表单字段的值
$(selector).attr("attribute") //方法用于获取属性值

设置内容和属性

$(selector).text("value") //设置所选元素的文本内容
$(selector).html("value") //设置所选元素的内容(包括 HTML 标记)
$(selector).val("value") //设置表单字段的值
$(selector).attr("attribute", "value") //方法用于设置属性值
$(selector).attr({
    "attribute" : "value",
    "attribute" : "value"
}) //方法用于设置属性值

添加元素

$(selector).append();  //在被选元素的结尾插入内容
$(selector).prepend(); //在被选元素的开头插入内容
$(selector).after();   //在被选元素之后插入内容
$(selector).before();  //在被选元素之前插入内容

删除元素

$(selector).remove() //删除被选元素(及其子元素)
$(selector).empty()  //从被选元素中删除子元素

向上遍历 DOM 树

$(selector).parent();   //返回被选元素的直接父元素,只会向上一级对 DOM 树进行遍历。
$(selector).parents();  //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
$(selector).parentsUntil(selector); //方法返回介于两个给定元素之间的所有祖先元素。

向下遍历 DOM 树

$(selector).children();  //方法返回被选元素的所有直接子元素
$(selector).find();      //返回被选元素的后代元素,一路向下直到最后一个后代

在 DOM 树中水平遍历

$(selector).siblings();  //方法返回被选元素的所有同胞元素。
$(selector).next();      //方法返回被选元素的下一个同胞元素。
$(selector).nextAll();   //返回被选元素的所有跟随的同胞元素。
$(selector).nextUntil(); //返回介于两个给定参数之间的所有跟随的同胞元素
$(selector).prev();
$(selector).prevAll()
$(selector).prevUntil()

过滤

$(selector).first(); //方法返回被选元素的首个元素。
$(selector).last();  //方法返回被选元素的最后一个元素。
$(selector).eq();    //方法返回被选元素中带有指定索引号的元素。
$(selector).filter(selector); //方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
$(selector).not(selector); //方法返回不匹配标准的所有元素。

AJAX

load

$(selector).load(URL,data,callback);
function callback(responseTxt,statusTxt,xhr){
    //responseTxt - 包含调用成功时的结果内容
    //statusTXT - 包含调用的状态
    //xhr - 包含 XMLHttpRequest 对象
}

GET

$.get(URL,callback);
$.get(URL,function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

POST

$.post(URL,data,callback);
$.post(
"/api.php",
{
    name:"name",
    id:"id"
},
function(data,status){
    alert("数据: \n" + data + "\n状态: " + status);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment