Jquery小结

虽然如今MVVM框架盛行，可是不免有时候一些时候操做dom时，jquery带来的兼容性大大提升了咱们的效率，因此那就做为日常须要的时候紧急去查找，总结了一些经常使用的写法，对于第一次接触jquery的人来讲也很通俗易懂，由于我就是由于须要才刚刚去学的jquery

若是出现错误，请在评论中指出，我也好本身纠正本身的错误

author： thomaszhou

大坑

千万不要写箭头函数代替function（）的写法

$("p").on("click", function(){
  alert( $(this).text() ); // 指向当前触发click事件的元素p的文本
});

// 若是咱们将function写成箭头函数
$("p").on("click", () => {
  alert( $(this).text() ); // 此时this指向的就是document
});
复制代码

1、寻找元素

（1）选择器

基本选择器、层级选择器、属性选择器 与CSS相似，这里再也不细说

• 1.基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器
复制代码

• 2.层次选择器

$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

eg:
    $("p > .ex1 ") // p元素的class=ex1的子元素
复制代码

• 3.过滤选择器(重点)

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li

// 从0开始
$("li:eq(4)")    //下标等于4的li
$("li:gt(2)")    //下标大于2的li
$("li:lt(2)")    //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 之外的全部li
复制代码

• 3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
复制代码

• 3.3可见性过滤选择器

$("li:hidden")       //匹配全部不可见元素，或type为hidden的元素
$("li:visible")      //匹配全部可见元素
复制代码

• 3.4属性过滤选择器（适用于自定义属性）

$("div[id]")        //全部含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时知足两个属性的条件的元素

eg:
    $("div[class='ex1']")  // class属性值为ex1的div 元素 
    $("div[ex='ex1']")  // ex属性值为ex1的div 元素 
复制代码

• 3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
复制代码

• 4.表单选择器

$(":input")      //匹配全部 input, textarea, select 和 button 元素
$(":text")       //全部的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //全部密码框
$(":radio")      //全部单选按钮
$(":checkbox")   //全部复选框
$(":submit")     //全部提交按钮
$(":reset")      //全部重置按钮
$(":button")     //全部button按钮
$(":file")       //全部文件域
复制代码

（2）筛选器

• 过滤

$("p").eq(0)       //当前操做中第N个jQuery对象,相似索引
$('li').first()    //第一个元素
$('li').last()     //最后一个元素
$(this).hasClass("test")    //元素是否含有某个特定的类,返回布尔值
$('li').has('ul')  //包含特定后代的元素
复制代码

• 查找

$("div").children()      //div中的每一个子元素,第一层
$("div").find("span")    //div中的包含的全部span元素,子子孙孙

$("p").next()          //紧邻p元素后的一个同辈元素
$("p").nextAll()         //p元素以后全部的同辈元素
$("#test").nextUntil("#test2")    //id为"#test"元素以后到id为'#test2'之间全部的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素
$("p").prevAll()         //p元素以前全部的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素以前到id为'#test2'之间全部的同辈元素,掐头去尾

$("p").parent()          //每一个p元素的父元素
$("p").parents()         //每一个p元素的全部祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间全部的父级元素,掐头去尾

$("div").siblings()      //全部的同辈元素,不包括本身
复制代码

2、jQuery HTML / CSS 方法

(1) 属性操做

• 基本属性操做

//
//当该方法用于返回属性值，则返回第一个匹配元素的值。
$("img").attr("src");           //返回文档中全部图像的src属性值

//当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
$("img").attr("src","test.jpg");    //设置全部图像的src属性

$("img").removeAttr("src");      //将文档中全部的img的src属性删除（多个）


//prop()、removeProp() 方法attr()、removeAttr()用法和特性同样
$("input[type='checkbox']").prop("checked", true);    //选中复选框(返回第一个匹配元素的值。)
$("img").removeProp("src");       //删除img的src属性v
复制代码

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

提示：如需移除属性，请使用 removeProp() 方法。

(2) CSS类

<script>
$("p").addClass("selected");    &emsp;&emsp;//为全部p元素加上 'selected' 类
$("p").addClass("selected1 selected2");      // 给全部p加上selected1和selected2类（中间用空格隔开）

$("p").removeClass("selected");    //从p元素中删除 'selected' 类
$("p").addClass("selected1 selected2");      // 移除全部p元素上的selected1和selected2类（中间用空格隔开）

$("p").toggleClass("selected");    //若是存在就删除,不然就添加
//多个类，同上
复制代码

(3) HTML代码/文本/值

// 当该方法用于返回内容时，则返回(第一个)匹配元素的内容。
$('p').html();               //返回p元素的html内容(匹配第一个)
// 当该方法用于设置内容时，则重写全部匹配元素的内容。
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
复制代码

提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html() 方法。

//特性同html
$("input").val();             //获取文本框中的值(匹配第一个)
$("input").val("nick");          //设置文本框中的内容
复制代码

注意：val() 方法一般与 HTML 表单元素一块儿使用。

// 当该方法用于返回内容时，则返回**(全部)**匹配元素的文本内容（会删除 HTML 标记）。
$('p').text();               //返回p元素的文本内容(匹配全部！！！！！)
// 返回的是字符串形式

// 当该方法用于设置内容时，则重写全部匹配元素的内容。
$("p").text("nick");           //设置p元素的文本内容
复制代码

提示：如只需设置或返回被选元素的文本内容(不包括HTML标记)，请使用 text() 方法。

(惟一一个，用于返回内容时，是匹配全部的元素) ! ! ! ! ! ! ! ! ! ! ! !! ! ! !!

(4) CSS操做 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

• 样式

//
$("p").css("color");          //访问查看p元素的color属性(匹配第一个)
$("p").css("color","red");    //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });    //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
复制代码

• 位置

$('p').offset()     //元素在当前视口的相对偏移,Object {top: 122, left: 260}(匹配第一个)
$('p').offset().top // 122
$('p').offset().left // 260
$('p').offset({top: 10, left:10}); // 给全部元素p添加“display:relaative,top:10px,left:10px”的样式(匹配全部)

$("p").position()   //元素相对父元素的偏移,对可见元素有效(匹配第一个)，Object {top: 117, left: 250}
$("p").position().top // 117
$("p").position().left // 250
复制代码

$(window).scrollTop()    //获取滚轮滑的高度
$(window).scrollLeft()   //获取滚轮滑的宽度
$(window).scrollTop('100')    //设置滚轮滑的高度为100
复制代码

提示：当滚动条位于最顶部-scrollTop(最左边-scrollLeft)时，位置是 0。

• 尺寸**********************************************************

// (1) 当下面方法用于返回值时， 则返回（第一个匹配）元素的高度。
// (2) 当下面方法用于设置值时，则设置全部匹配元素的高度。
//
$("p").height();    //获取p元素的高度(仅内容)
$("p").width();     //获取p元素的宽度
$("p").height(30);  //设置全部p元素高度为30px
$("p").width(30);  //设置全部p元素宽度为30px

$("p:first").innerHeight()    //获取第一个匹配元素内部区域高度(内容 + padding)
$("p:first").innerWidth()     //获取第一个匹配元素内部区域宽度(内容 + padding)

$("p:first").outerHeight()    //匹配元素外部高度(内容 + padding + border)
$("p:first").outerWidth()     //匹配元素外部宽度(内容 + padding + border)
$("p:first").outerHeight(true)    //为true时包括边距(内容 + padding + border + margin)
复制代码

border，margin，padding别忘了是两边都有，算的时候记得乘2

（5）文档处理

• 内部插入

//
$("p").append("<b>nick</b>");    //每一个p元素内的尾部追加内容
$("p").appendTo("div"); // 将全部p元素（匹配的值）移动到全部的div元素内的尾部（注意，匹配的p元素是直接移动的，本来的位置都没有了）

$("p").prepend("<b>Hello</b>");  //每一个p元素内的头部追加内容
$("p").prependTo("div");    &emsp;   //将全部p元素（匹配的值）移动到全部的div元素内的头部
复制代码

• 外部插入

//
$("p").after("<b>nick</b>");     //每一个p元素同级以后插入内容
$("p").before("<b>nick</b>");    //在每一个p元素同级以前插入内容

// 下面的其实就是反过来
$("p").insertAfter("#test");     //全部p元素（匹配的值）插入到id为test元素的后面
$("p").insertBefore("#test");    //全部p元素（匹配的值）插入到id为test元素的前面
复制代码

• 替换

$("p").replaceWith("<b>Paragraph. </b>");    //将全部匹配的元素替换成指定的HTML或DOM元素

// 下面同上
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉全部 selector匹配到的元素
复制代码

• 删除

//
$("p").empty();     //删除匹配的元素集合中全部的子节点，不包括自己
$("p").remove();    //删除全部匹配的元素,包括自己
$("p").detach();    //删除全部匹配的元素(和remove()不一样的是:全部绑定的事件、附加的数据会保留下来)
复制代码

• 复制

$("p").clone();      //克隆元素并选中克隆的副本
$("p").clone(true);   //布尔值指事件处理函数是否会被复制
复制代码

clone() 方法生成被选元素的副本，包含子节点、文本和属性。

$("p").clone().appendTo("body"); // 这个和上面的appendTo例子不一样就在于，把匹配的p元素复制一份，添加到body内的尾部，而不是以前的移动到尾部
复制代码

3、jQuery 事件方法

详细看这里

（1）页面载入

当 DOM（document object model 文档对象模型）加载完毕且页面彻底加载（包括图像）时发生 ready 事件。

因为该事件在文档就绪后发生，所以把全部其余的 jQuery 事件和函数置于该事件中是很是好的作法。

ready() 方法规定当 ready 事件发生时执行的代码。

提示：ready() 方法不该该与 一块儿使用。

$(document).ready(function(){
  do something...
});

//简写
$(function($) {
  do something...
});
复制代码

(2) 页面处理

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来不少便利，咱们推荐使用该方法，它简化了 jQuery 代码库。

//on() 方法在被选元素及子元素上添加一个或多个事件处理程序。绑定多个用{}。
$("p").on("click", function(){
  alert( $(this).text() );
});

// 绑定多个事件
$('div').on({
    'click': function() {
      console.log($(this).text());
    },
	'mouseout': function() {
      console.log(`${$(this).text()}移出了！`);
	}
});        


$("p").one( "click", fun...)    // 主要区别：one 绑定一个一次性的事件处理函数
$("p").off( "click" )        //解绑一个事件
复制代码

注意：使用 on() 方法添加的事件处理程序适用于当前及将来的元素（好比由脚本建立的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件而后移除，请使用 one() 方法。

(3)事件

$("p").click();      //单击事件
$("p").dblclick();    //双击事件

$("input[type=text]").focus()  //元素得到焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件

$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
复制代码

$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件

$("p").mouseover()     //当鼠标指针位于元素及其子元素上方时触发事件
$("p").mouseenter()    //当鼠标指针位于元素上方时触发事件(与mouseover有区别！)

$("p").mouseout()     //当鼠标指针从元素及其子元素上移开时触发事件
$("p").mouseleave()     //当鼠标指针从元素上移开时触发事件(与mouseout有区别！)
复制代码

区别：

• 区别一（mouseenter和mouseover）
  • mouseenter 事件只有在鼠标指针进入被选元素时被触发
  • mouseover 事件在鼠标指针进入任意子元素时也会被触发
• 区别二（）
  • mouseleave：只有在鼠标指针离开被选元素时被触发
  • mouseout：在鼠标指针离开被选元素或任意子元素时都会被触发

// 与 keydown 事件相关的事件顺序：keydown -> keypress -> keyup

//当键盘或按钮被按下时触发事件 (window能够换成别的元素，例如input)
$(window).keydown()   
 //keypress 事件与 keydown (window能够换成别的元素) 事件相似。当按钮被按下时发生该事件(区别看下面)
$(window).keypress()  

$("input").keyup()     //当按钮被松开时触发事件

// 请使用 event.which 属性来返回哪一个键被按下（keydown）或者松开（keyup）
$("input").keydown(function(event){ // keyup同理
    $("div").html("Key: " + event.which);
});
// delete : 8
// enter: 13
// 空格: 32 
复制代码

注意一：keypress 事件不会触发全部的键（好比 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。

// scroll 事件适用于全部可滚动的元素和 window 对象（浏览器窗口）。
$(window).scroll()     //当用户滚动时触发事件(window能够换成别的元素)
$(window).resize()     //当调整浏览器窗口的大小时触发事件

// 当元素的值改变时发生 change 事件（仅适用于表单字段）
$("input[type='text']").change()    //当元素的值发生改变时触发事件
复制代码

• 当用于 select 元素时，change 事件会在选择某个选项时发生。
• 当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。并且初始化的时候要设置value属性值(即便为'')

// 当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
复制代码

(4) (event object) 对象

全部的事件函数均可以传入event参数方便处理事件

$("p").click(function(event){  
 alert(event.type); //"click"  
}); 

(evnet object)属性方法：
event.pageX   //事件发生时，鼠标距离网页左上角的水平距离
event.pageY   //事件发生时，鼠标距离网页左上角的垂直距离
event.type   //事件的类型
event.which   //按下了哪个键
event.data   //在事件对象上绑定数据，而后传入事件处理函数
event.target  //性返回哪一个 DOM 元素触发了事件。

//阻止事件的默认行为(好比点击连接，会自动打开新页面\当点击提交按钮时阻止对表单的提交\)
event.preventDefault()  
event.stopPropagation()  //中止事件向上层元素冒泡
复制代码

提示：请使用event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法

提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了stopPropagation方法。

4、jQuery 效果 方法

(1) 基本

//
$("p").show()        //显示隐藏的匹配元素
$("p").show("slow");    //参数表示速度,("slow","normal","fast")
$("p").show(1000);      //也可为设置毫秒
// 当隐藏/显示元素时，如何使用 callback 参数。
$("p").show(1000,function(){
	alert("Show()方法已完成!");
});

// hide() 和 show() 用法相同
$("p").hide()        //隐藏显示的元素

$("p").toggle();      //toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。
复制代码

注意：show() 适用于经过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于经过 visibility:hidden 隐藏的元素）

(2) 滑动-至关于以滑动的方式实现show()和hide()、toggle()

• slideDown(): 以滑动方式显示元素
• slideUp():以滑动方式隐藏元素
• slideToggle():以滑动方式切换slideDown(),slideUp()

speed（("slow","normal","fast"，毫秒数），callback参数和show(),hide()方法同样

$("p").slideDown("900");    //用900毫秒时间将段落滑下
$("p").slideUp("900");     //用900毫秒时间将段落滑上

$("p").slideToggle("900");  //用900毫秒时间将段落滑上，滑下
复制代码

(3) 淡入淡出-至关于以淡入淡出的方式实现show()和hide()、toggle()

speed（("slow","normal","fast"，毫秒数），callback参数和show(),hide()方法同样

$("p").fadeIn("900");        //用900毫秒时间将段落淡入
$("p").fadeOut("900");       //用900毫秒时间将段落淡出

$("p").fadeToggle("900");     //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用900毫秒时间将段落的透明度调整到0.6
复制代码

(4) animate() 方法-执行 CSS 属性集的自定义动画

该方法经过 CSS 样式将元素从一个状态改变为另外一个状态。CSS属性值是逐渐改变的，这样就能够建立动画效果。

只有数字值可建立动画（好比 "margin:30px"）。字符串值没法建立动画（好比 "background-color:red"）。

提示：请使用 "+=" 或 "-=" 来建立相对动画。

注意： 当与 animate() 方法一块儿使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

$("button").click(function(){
    $("#box").animate({height:"300px"});
});

$(".btn1").click(function(){
	$("body").animate({
		backgroundPositionX:"+=100px", 
		backgroundPositionY:"+=200px"
	});
});
复制代码

更多例子见这里 $.trim(str)

5、jQuery 杂项方法

$.trim(str)   //去除字符串两端的空格

$("li").each(function(){ // 输出每一个 <li> 元素的文本
    alert($(this).text())
}); &emsp;&emsp;

$.inArray( "John", arr )  //返回值John在数组arr中的索引位置，不存在返回-1  
$.grep() &emsp; //返回数组中符合某种标准的元素
$.extend()  //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type()    //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction()    //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"创建的对象
$.support()       //判断浏览器是否支持某个特性
复制代码