JQuery

选择器

基本选择器

1. id选择器

 $("#id名");

2. 类名选择器

$(".类名");

3. 标签选择器

$("标签名");

4. 属性选择器

 $("[name='username']");

5. 组合选择器

$("div.box");

6. 层级选择器

$("ul li");

7. 通配选择器

$("*");

8. 伪类选择器

$("ul li:first-child");

筛选器

$("li:first");   //第一个li
$("li:last");    //最后一个li
$("li:eq(2)");   //选择指定下标的li
$("li:lt(2)");   //选择下标小于指定下标的li
$("li:gt(2)");   //选择下标大于指定小标的li
$("li:odd");     //选择偶数的li  这里选择的偶数不是下标
$("li:even");    //选择奇数的li

表单元素选择器

$(":input");   //所有表单元素
$(":text");    //所有文本框
$(":password") // 所有密码框 
$(":radio");    //所有单选框
$(":checkbox"); //所有多选框
$(":submit");   //所有提交按钮
$(":reset");    //所有重置按钮
$(":image");    //所有图片按钮
$(":button");   // 所有普通按钮
$(":file") ;    //所有文件选择器
$(":hidden")    //所有不显示标签

表单对象选择器

1. :checked —找到被选中的单选框或复选框

2. :selected —找到被选中的下拉框的option

3. :disabled —找到禁用的那些项

4. :enabled — 找到能用的那些项

筛选器方法

1. first() —找到所有子元素集合中的第一个子元素

2. last() —找到所有子元素集合中的最后一个子元素

3. next() —找到后一个兄弟

4. nextAll() —找到后面所有的兄弟

5. prev() —找到前一个兄弟

6. prevAll() —找到前面所有的兄弟

7. eq(数字) —找到括号内指定下标的元素

8. find(选择器) —找到后代中的指定元素

9. parent() —找到父元素

10. parents() —找到所有直系祖宗元素

11. siblings() —所有兄弟元素

12. children() —所有子元素

事件

jquery中的事件是将事件名作为方法名，传入回调函数即可。

$("div").click(function(){
});

标准的事件处理：

$(元素).on(事件类型[,委托的子元素][,传入的参数],处理的函数);
//事件类型 - 必选 
//委托的子标签 - 可选 
//传入回调函数的数据 - 可选 
//事件处理函数 - 必选 

return false¹

解绑事件–off

$(元素).off(事件类型,处理函数);

让事件只触发一次 - one

$(元素).one(事件类型,处理函数);

手动触发事件的方法 - trigger

$(元素).trigger(事件类型,处理函数)；

特殊事件：hover事件，包含鼠标放上去和鼠标离开

$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)；

$(document).ready(function(){
     // 类似于window.onload - 比window.onload优秀
     // 这个事件只会等待html文档结构加载完成就会执行
 })

$(window).scroll(function(){
    // 原生js获取滚动过距离
    // var t = document.documentElement.scrollTop || document.body.scrollTop;
   $(window).scrollTop();
})

##属性操作

1. 设置属性

$('div').prop('属性名','属性值')

2. 获取属性

$('div').prop('属性名'）

3. 设置自定义属性

$("div").attr('属性名','属性值')

4. 获取属性

$('div').attr('属性名'）

5. 删除属性

$('div').removerAttr('属性名')

样式操作

设置样式

$("div").css(属性名，值);//设置一个样式
$("div").css({
  属性名：值，
  属性名：值
})

获取样式

$("div").css("属性名"）

类名操作

添加类名

$("div").addClass(类名);

删除类名

$("div").removeClass(类名);

在添加和删除之间切换

$("div").toggleClass(类名）;

判断是有具有某个类名，返回布尔值

$("div").hasClass(类名)；

内容操作

$("div").text(); // 获取元素内容 
$("div").text("盒子"); // 设置元素内容 
$("div").html(); // 获取元素代标签的内容 
$("div").html("<b>文字</b>"); // 设置元素带标签的内容 
$("input").val(); // 获取表单元素的值 
$("input").val("请输入用户名"); // 设置表单元素的内容 

元素节点操作

创建元素

$("标签和内容") //创建一个标签并给里面放内容

添加元素

给父元素追加子元素

父元素.append(子元素)

给父元素最前面添加子元素

父元素.prepend(子元素);

将子元素添加到父元素中

子元素.appendTo(父元素);//将子元素最佳到父元素中
子元素.prependTo(父元素);//将子元素添加到父元素最前面

添加兄弟元素

元素.after(下一个兄弟元素);//添加下一个兄弟元素
元素.before(上一个兄弟元素);添加上一个兄弟元素：

替换元素

某个元素.replaceWith(新元素);//使用新元素替换某个元素;
新元素.replaceAll(某个元素);//用新元素替换掉某个元素：

删除元素

元素.empty();//删除元素内部所有标签和内容，让自己变成一个空标签
元素.remove();删除自己和自己内部所有内容

复制元素

元素.clone([是否复制自身的事件，默认为false][,是否复制子元素的事件，默认为false])

元素尺寸

元素内容区域尺寸操作

元素.height(); // 获取元素内容区域高度
元素.height(高度); // 设置元素内容区域高度
元素.width(); // 获取元素内容区域宽度
元素.width(宽度); // 设置元素内容区域宽度

获取元素内部区域尺寸

元素.innerHeight(); // 获取元素内部的高度，包含padding，但不包含border
元素.innerWidth(); // 获取元素内部的宽度，包含padding，但不包含border

获取元素占据页面的尺寸

元素.outHeight(); // 获取元素占据的高度，包含padding和border，不包含margin
元素.outHeight(true); // 获取元素占据的高度，包含padding和border，包含margin
元素.outWidth(); // 获取元素占据的宽度，包含padding和border，不包含margin
元素.outWidth(true); // 获取元素占据的宽度，包含padding和border，包含margin

元素位置

元素相对页面的位置操作

元素.offset(); // 获取到元素在页面中的位置，包含left值和top值，返回一个对象
元素.offset({left:值,top:值}); // 将元素设定到指定的位置，使用relative

元素相对父元素的值

元素.position(); // 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top

元素滚动距离的获取和设置

$(window).scrollTop(); // 获取元素滚动过的高度
$(window).scrollTop(值); // 设置元素滚动过的高度
$(window).scrollLeft(); // 获取元素滚动过的宽度
$(window).scrollLeft(值); // 设置元素滚动过的宽度

动画

基本动画

普通的显示隐藏动画：

显示

元素.show();//让元素从隐藏变为显示
可选参数：1.时间
         2.速度方式
         3.动画结束后执行的回调函数            `

隐藏

元素.hide()； // 让元素从显示变为到显示
可选参数和show一样           `

切换显示隐藏

元素.toggle();
可选参数和show一样

元素上下拉动隐藏显示

元素.slideDown() // 让元素向下拉动显示
元素.slideUp() // 让元素向上拉动隐藏
元素.slideToggle() // 让元素切换上下拉动显示隐藏
参数和show一样

元素透明度显示隐藏

元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样

让元素切换到指定的透明度

元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) // 让元素在指定的时间内切换到指定的透明度

自定义动画

开启动画

元素.animate({
    属性名:属性值,
    属性名:属性值,
    。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);

停止动画

元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态

jquery发送ajax请求

get请求

语法：

$.get('请求地址', 参数, 成功的回调函数, 'json'); 
参数1：请求地址 
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式 
参数3：成功的回调函数，参数为响应回来的的数据 
参数4：希望返回的数据格式

post请求

语法：

$.post('请求地址', 参数, 成功的回调函数, 'json'); 
参数与get一样

ajax请求

语法：

$.ajax({
 url: 请求地址, // 必填，请求的地址
 type: 请求方式, // 选填，请求方式，默认是 GET（忽略大小写）
 data: {}, // 选填，发送请求是携带的参数 
 dataType: 'json', // 选填，期望返回值的数据类型，默认是 string 
 async: true, // 选填，是否异步，默认是 true 
 success () {}, // 选填，成功的回调函数 
 error () {}, // 选填，失败的回调函数，参数有xhr，是ajax对象，status状态，err错误信息 cache: true, // 选填，是否缓存，默认是 true 
 timeout: 1000, // 选填，超时时间，单位毫秒 
 context: div, // 选填，回调函数中的 this 指向，默认是 ajax 对象
  })

jsonp请求

语法：

$.ajax({ url: 请求地址,
dataType: 'jsonp', 
data: { name: 'Jack', age: 18 }, 
success (res) {
 console.log(res)
  },j
  sonp: 'cb', // jsonp 请求的时候回调函数的 key
   jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称 })

全局ajax函数

第一个请求在开始的时候就会触发这个函数

$(window).ajaxStart(function () { 
 })

任意一个请求在 准备 send 之前 会触发这个函数

$(window).ajaxSend(function () {
 })

任意一个请求在 准备 send 之前 会触发这个函数

$(window)..ajaxSend(function () { 
 })

任意一个请求在 成功 的时候就会触发这个函数

$(window).ajaxSuccess(function () { 
 })

任意一个请求在 失败 的时候就会触发这个函数

$(window).ajaxError(function () { 
 })

任意一个请求在 完成 的时候就会触发这个函数

$(window).ajaxComplete(function () { 
 })

任意一个请求在 结束 的时候就会触发这个函数

$(window).ajaxStop(function () { 
 })

jquery的标识符

jQuery.noConflict()； // 交出了$使用权，$符号不能使用了，只能使用jQuery
jQuery.noConflict(true)； // 交出了$和jQuery的使用权，$符号和jQuery都不能使用了
var 变量 = jQuery.noConflict(true); // 使用自定义的变量代替$和jQuery

---

1. 阻止一切默认行为/冒泡 ↩︎