$.trim( ) 去除字符串两端的空格
<script>
var str = " jjj ";
console.log("----"+str+"-----");
var res = $.trim(str);
console.log(res);
</script>
控制台显示:
$.isWindow();
作用:判断传入的对象是否是window对象
返回值:true/false
$.isArray();
作用:判断传入的对象是否是真数组
返回值:true/false
$.isFunction();
作用:判断传入的对象是否是一个函数
返回值:true/false
tip:$.isFunction(jQuery) 返回值为true,JQuery本质上也是一个函数
<script>
var arr = [1,3,5,7,9];
var obj = {0:1,1:3,2:5,3:7,4:10,length:5}
$.each(arr, function(index,value){
console.log(index,value);
})
$.each(obj, function(index,value){
console.log(index,value);
})
</script>
$.each(obj ,function(index,value)){
} 遍历数组
JQuery中的each静态方法和nap静态方法的区别:
each静态方法默认的返回值就是:遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
mp静态方法可以在回调函数中通过return对遍历的数组进行处理,然后生成一个新的数组返回
$.holdReady(true/false)
作用:暂停或者恢复ready事件
内容选择器
$("div:contains('John')")
匹配包含给定文本的元素
$("div:has(p)").addClass("test");
给所有包含 p 元素的 div 元素添加一个 text 类
attr(name|properties|key,value|fn)
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
<span class="span1" name="qwe"></span>
<span class="span2" name="rrrr"></span>
<script>
var div = $("div:empty");
console.log(div);
var div2 = $("div:parent")
console.log(div2);
var span = $("span").attr("class")
console.log(span);
$('span').attr('class','box');
$('span').attr('abc','detf');
$('span').removeAttr('class');
$('span').removeAttr('class name')
</script>
prop(name|properties|key,value|fn)
概述
获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。
选中复选框为true,没选中为false
$("input[type='checkbox']").prop("checked");
官方推荐在操作属性节点时,具有true 和 false 两个属性节点,如checked,selected或者disabled使用prop(),其他使用attr()
<body>
<div> </div>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<script>
$(function(){
var btn1 = $("button").eq(0);
btn1.on("click",function(){
console.log(123);
$("div").addClass("class1")
})
var btn2 = $("button").eq(1).on("click",function(){
$("div").removeClass("class1")
})
var btn3 = $("button").eq(2).on("click",function(){
$("div").toggleClass("class2")
})
})
</script>
</body>
addClass 添加类 removeClass 删除类 toggleClass 切换类 可以添加和删除多个,用空格隔开即可
事件
<script>
$(function(){
$(".btn1").click(function(){
alert("btn1");
});
$(".btn1").click(function(){
alert("再谈一次,btn1")
});
$(".btn1").mouseleave(function(){
alert("鼠标离开")
});
$(".btn2").on("click",function(){
alert("我是btn2");
});
$(".btn2").on("mouseleave",function(){
alert("我离开btn2了");
})
})
</script>
$(".btn1").off();
// off() 移除所有事件
$(".btn1").off("click"); 移除所有点击事件
$(".btn1").off("click",test1); 移除test1函数 的点击事件
阻止默认行为
$(".btn2").on("click",function(event){
event.preventDefault();
});
或者
return false;
自动触发事件
$(".btn1").trigger("click");
trigger会触发事件冒泡
$(".btn1").triggerHandler("click");
triggerHandler 不会触发事件冒泡
事件委托 delegate
<script>
$(function(){
// $("ul>li").click(function(){
// console.log($(this).html());
// });
$("button").click(function(){
$("ul").append("<li>我是新增的li</li>")
});
$("ul").delegate("li","click",function(){
console.log($(this).html());
})
})
</script>
鼠标移入移出事件
$(".father").mouseover(function(){
console.log("father mouseover");
});
$(".father").mouseout(function(){
console.log("father mouseout");
});
事件冒泡
$(".father").mouseleave(function(){
console.log("father mouseleave");
});
$(".father").mouseenter(function(){
console.log("father mouserenter");
})
不事件冒泡
$(".father").hover(function(){
console.log("father 移入移出");
})
鼠标移入移出事件 和mouseover ➕ mouseleave 效果相同