JQ操作DOM属性节点相关方法（包含类的操作）
属性节点就是指dom元素的属性
一般如果是标签自身自带的属性，我们用prop方法来获取；如果是自定义的属性，我们用attr方法来获取。
1、attr
作用：获取或者设置属性节点的值
如果传递1个参数，代表获取属性节点的值
如果传递2个参数，代表设置属性节点的值
注意点：
如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
console.log($("span").attr("class"))
如果是设置：找到多少个元素就会设置多少个元素
$("span").attr("class","box")
2、romoveAttr
作用：删除属性节点
注意点：
①会删除所有找到元素指定的属性节点
②属性节点的名称可以用空格隔开，同时删除多个属性节点
$("span").removeAttr("class name")
JQ操作dom对象指定属性的方法（还能查找或者修改属性节点）
1、prop方法
作用：获取或者设置dom对象 属性的值
如果传递1个参数，代表获取属性的值
如果传递2个参数，代表设置属性的值
注意点：
①prop方法不仅能操作属性，还能操作属性节点（前提是该值是本来就存在的dom元素属性节点）
② 例子：
$("input").prop("checked") // true 或者 false
$("input").attr("checked") // checked 或者 undefined
2、removeProp方法
作用：删除属性
操作dom的类：
1、addClass
作用：添加一个类
如果需要添加多个，多个类名之间添加空格
$("div").addClass("class1 class2")
2、removeClass
作用：删除一个类
如果需要删除多个，多个类名之间添加空格
$("div").removeClass("class1 class2")
3、toggleClass
作用：切换类（有就删除，没有就添加）
$("div").toggleClass("class1 class2")
JQ操作元素html文本或者text文本的方法
1、html
作用：给指定的标签内加入HTML代码，与原生JS的innerHTML一样
给div插入html代码
$("div").html("
我是段落
")获取div中的html代码
$("div").html()
2、text
作用：给指定的标签内加入指定文本内容，与原生JS的innerText一样
给div插入文本内容
$("div").text("
我是段落
")获取div中的文本内容
$("div").text()
3、val
作用：获取标签中value属性的值
$("input").val("请输入内容")
JQ获取或操作dom尺寸及位置的方法
操作div尺寸的方法：
width、height方法
获取
$(".content").width()
直接获取到元素通过CSS设置的width宽度值（不包括边框宽度，标准模型下的width值）
设置
$(".content").width("100px")
等同于在CSS中设置width："100px"
位置：
offset方法：
作用：获取或者设置，元素距离窗口的偏移位
获取定位
$(".content").offset().left
获取该元素距离窗口偏移量中的左边偏移数值
设置定位
$(".content").offset({left：10})
设置该元素距离窗口最左边只有10px距离
position方法：
作用：获取元素距离定位（子绝父相中对于父相中的偏移数值）元素的偏移位
$(".content").position().left
注意点：position方法只能获取不能设置，如果想设置可以直接使用css方法设置
scrolltop方法：
作用：获取或者设置元素当前滚动位置距离元素顶部的偏移位
获取滚动偏移
$(".scroll").scrollTop()
设置滚动偏移
$(".scroll").scrollTop(300)
获取或者设置HTML当前页面的滚动偏移位
获取
$("html").scrollTop()+$("body").scrollTop()
设置
$("html,body").scrollTop(300)
上面写法兼容新老浏览器版本
JQ操作标签style样式相关方法
CSS方法设置的样式，都是通过内嵌的形式设置到对应标签中的
1、逐个设置
$("div").css("width","100px")
2、链式设置
$("div").css("width","100px").css("width","200px")
注意：链式操作不建议大于3步
3、批量设置
$("div").css(
{
width:"200px",
height:"100px",
background:"red"
})
JQ查询和筛选DOM相关方法
筛选
eq(index|-index)
作用：获取第 index 或者 -index（集合倒数） 个元素，返回对应单个元素（该元素为JQ对象），元素初始位置为0，最后一个为 -1
例子：
$("p").eq(1)
slice(start, [end])
作用：获取一个集合（数组）中 start 到 end（如果不写end，默认到最后） 的元素集合（数组），返回 数组
例子：
$("p").slice(0, 1)
hasClass(class)
作用：检查当前的元素是否含有某个特定的 class，如果有，则返回true。
例子：
$("p").hasClass("protected")
查找
find(e|o|e)
作用：在当前元素的所有后代中搜索，所有与指定表达式匹配的元素，返回 数组
例子：
$("p").find(".abc")
parents([expr])
作用：同find相反，当前元素的祖先中搜索，所有与指定表达式匹配的元素，返回 数组
例子：
$("p").parents(".abc")
next([expr])
作用：从当前元素同辈的下一个相邻元素中寻找，符合匹配条件的元素，返回 数组
例子：
匹配p标签中下一个同辈元素的类名包含selected的元素
$("p").next(".selected")
结果：
prev([expr])
作用：同next相反，从当前元素同辈的上一个相邻元素中寻找，符合匹配条件的元素，返回 数组
例子：
$("p").prev(".selected")
siblings([expr])
作用：从当前元素的同辈元素中寻找除了自身以外，符合匹配规则的其他元素，返回 数组
例子：
$("p").siblings(".selected")
JQ中AJAX及JSONP使用方法
在jQuery里面，想要使用ajax及jsonp，需要使用如下方法：
格式：
$.ajax(
{
name:value,
name:value,
。。。
}
)
常用的key：
url:'/index.html' //表示发送请求的url，如果为空则默认当前页面当前url
type:"GET" //表示本次请求使用的请求方法，默认是GET
data:{a:'1',b:'2'} //表示本次request请求的body部分需要传递的数据，如果传入对象则自动解析成a=1&b=2
success:()=>{} //表示请求成功后运行的回调函数
error:()=>{} //表示请求失败后运行的回调函数
contentType:"json" //表示request请求里面的content-type字段的内容
dataType:"JSONP" //表示预计服务器响应的内容，当value的是JSONP的时候，则自动将ajax请求变成JSONP的get请求
async:true //表示是否为异步请求，默认为true
cache:true //表示是否缓存被请求的页面
complete:()=>{} //表示请求完成后运行的回调函数（在success和error之后，无论有或者无）
contentType:"text/javascript" //表示request的body内容
用例：
发送POST请求
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"testLogin.aspx",
//提交的数据
data:{Name:"sanmao",Password:"sanmaoword"},
//返回数据的格式
datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
//在请求之前调用的函数
beforeSend:function(){$("#msg").html("logining");},
//成功返回之后调用的函数
success:function(data){
$("#msg").html(decodeURI(data));
} ,
//调用执行后调用的函数
complete: function(XMLHttpRequest, textStatus){
alert(XMLHttpRequest.responseText);
alert(textStatus);
//HideLoading();
},
//调用出错执行的函数
error: function(){
//请求出错处理
}
});
JQ事件绑定以及事件委托绑定
on替代bind方法
on可以替代bind方法，使用方法和bind一致
// 绑定单个事件
$(":button").on("click",function(){
alert("on");
});
// 传递数据
$(":button").on("click",{name:"tom"},function(e){
alert(e.data.name);
});
// 绑定多个事件
$(":button").on("mouseover mouseout",function(e){
alert("移入移出");
});
// 使用对象绑定多个事件
$(":button").on({
mouseover:function(){
alert("移入");
},
mouseout:function(){
alert("移出");
}
});
// 阻止冒泡和默认行为
$(":submit").on("click",function(e){
e.preventDefault();
e.stopPropagation();
alert("取消默认行为和冒泡");
});
off替代unbind方法
off可以替代unbind方法，使用方法不变
例子：
function test(){
alert("test");
}
$(":button").on("click.on",test);//根据函数解除绑定
$(":button").off("click");// 根据事件解除绑定
$(":button").off("click.on");// 根据命名空间解除绑定
事件委托
实际上是给祖先绑定一个事件。子元素通过冒泡将事传递到祖先元素，祖先元素再判断点击的是不是button，如果是，就执行相同的事件。因此，当有很多个相同的按钮需要绑定相同的事件时，可以用事件委托将事件委托给祖先节点，有祖先节点判断子节点是否执行某事件。如果不适用事假委托，那个每一个节点都需要绑定一个事件。
使用方法是：
祖先节点.on(“事件”,”子元素选择器”,”绑定的函数”);
on的第二个参数需要写成所有相同元素通用的写法，不能写成:button:eq(0)这样的选择不具有通用性，祖先节点在判断的时候会无法达到预期的效果。
例子：
$("div:eq(0)").on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});
// 换成document也可：
$(document).on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});
取消委托
off函数还可以取消委托,取消委托必须由祖先节点调用调用方法是：
祖先节点.off(“事件”,”子元素”);
$("div:eq(0)").off('click','.button');
one()
绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。
例子：
$(":button").one("click",function(){
alert("one");
});
用到的方法
clone()
生成被选元素的副本，包含子节点、文本和属性。
$(selector).clone(includeEvents)
- includeEvents 规定是否复制元素的所有事件处理。true/false,默认是false
appendTo()
在被选元素的结尾（仍然在内部）插入指定内容。
$("button").click(function(){
$("sss").appendTo("p");
});
JQ事件自动触发
trigger方法：
例子：
$(".son").trigger("click")
特点：
①、如果使用trigger自动触发事件，会触发事件冒泡（父元素会被点击）
②、会触发默认行为（比如点击a标签，默认行为就是跳转到a的url地址，点击button提交表单就会自动提交表单数据）
triggerHandler方法：
例子：
$(".son").trigger("click")
特点：
①、如果利用triggerHandler自动触发事件，不会触发事件冒泡（父元素不会被点击）
②、不会触发默认行为
注意：
a标签比较特殊，使用trigger无法自动触发a标签的默认行为，但是可以在a标签里嵌套其他标签，使用trigger触发事件冒泡则可以实现触发a标签的默认行为。
JQ的遍历的方法（支持伪数组）
1、利用jquery的each静态方法遍历数组
使用方法：
$.each(Array,function( index, value){})
Array:
可以是真数组，也可以是伪数组，都可以进行遍历
传入回调函数的参数：
第一个参数：遍历到的索引
第二个参数：遍历到的元素
另一种使用jq实例方法调用each方法（遍历Jq对象$('.list_music .list_number')，只需要传入回调函数）：
$('.list_music .list_number').each(function(a,b){
console.log(a,b)
})
注意点：
使用each方法最后返回传递进去的数组，无法在回调函数中对该数组进行操作。
2、利用jquery的map静态方法遍历数组
使用方法：
$.map(Array,function( value, index ){})
Array:
可以是真数组，也可以是伪数组，都可以进行遍历
传入回调函数的参数：
第一个参数：遍历到的索引
第二个参数：遍历到的元素
另一种使用jq实例方法调用map方法（遍历Jq对象$('.list_music .list_number')，只需要传入回调函数）：
$('.list_music .list_number').map(function(a,b){
console.log(a,b)
})
注意点：
使用map方法最后返回空数组，如果在回调函数中使用return可以对返回的数组进行操作。
JQ的显示效果（动画效果）
显示（相当于给元素 display:inline-block 的过程中，增加动画效果）：
格式：
show([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').show(1000,function(){})
隐藏（相当于给元素display:none的过程中，增加动画效果）
格式：
hide([speed,[easing],[fn]])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').hide(1000,function(){})
切换（如果元素本来是显示的，则执行hide，本来是隐藏的，则执行show）
格式：
toggle([speed,[easing],[fn]])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
展开（相当于给元素 display:inline-block 的过程中，增加动画效果，与显示不同的是动画特效不同，动画效果是通过从上到下增加高度展开对应标签内容）：
格式：
slideDown([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').slideDown(1000,function(){})
收起（相当于给元素display:none 的过程中，增加动画效果，与隐藏不同的是动画特效不同，动画效果是通过从下到上减小高度收起对应标签内容）:
格式：
slideUp([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').slideUp(1000,function(){})
停止动画（停止正在执行的动画，并将动画队列清空）
格式：
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
例子：
$('div').stop()
延时动画（延迟链式变成中间的动画时间）
例子:
$('div').animate([width:500],1000).delay(2000).animate([height:500],1000)
上面意思：先执行宽度变为500的动画效果，再执行延时动画2秒，最后执行高度500的动画效果
淡入（相当于给元素 display:inline-block 的过程中，增加动画效果，与显示和展开不同的是动画特效不同，动画效果是逐渐减小透明度动态的显示元素）：
格式：
fadeIn([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').fadeIn(1000,function(){})
淡出（相当于给元素display:none 的过程中，增加动画效果，与隐藏不同的是动画特效不同，动画效果是通过从下到上减小高度收起对应标签内容）:
格式：
fadeOut([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').fadeOut(1000,function(){})
淡入淡出切换（如果元素本来是显示的，则执行淡出，本来是隐藏的，则执行淡入）
格式：
fadeToggle([ speed , [easing] , [fn] ])
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').fadeToggle(1000,function(){})
淡入到（相当如 淡入 ，唯一不同是 淡入到 可以设置元素最终显示的透明度）
格式：
fadeTo([ [ speed ] , opacity , [ easing ] , [ fn ]] )
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
opacity：元素最终显示的透明度，1是不透明，0是完全透明
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').fadeTo(1000, 0.5, function(){})
自定义（CSS改变任何属性都能增加动画效果）
格式：
animate( params ,[ speed ],[ easing ],[ fn ])
params：元素变化的CSS指令，用一个{}（对象包裹起来）
speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒
easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）
fn：动画执行完后会执行该回调函数
例子：
$('div').animate( { marginLeft:500 }, 1000, function(){})
自定义动画的累加属性
使用方法：
$('div').animate({ width:"+=100" },1000)
上面意思为：每次执行该方法都会在原来元素的宽度上累加100像素
自定义动画的关键字属性
使用方法：
$('div').animate({ width:"hide" },1000)
上面意思为：执行该方法后会让元素达到隐藏的效果，动画则是从左到右逐渐减少宽度，最终元素隐藏
$('div').animate({ width:"toggle" },1000)
上面意思为：执行该方法后会让元素原本有宽度，变到没有宽度，元素原本没有宽度，变到有宽度。
网友评论