1.选择器 & 添加样式
$('.selected-ul>li').addClass('numberli')
document.querySelectorAll('.selected-ul>li')[0].className='numberli'
2.jQuery注意事项
//1.jQuery会比原生js优先执行
//2.解决img标签中https无法显示图片问题
<meta name="referrer" content="no-referrer">
//3.jQuery不会覆盖，js会覆盖
//4.$('div') 返回的是一个伪数组，伪数组的__proto__是object
//5.$("img").width()获取img宽度
// $("img").width(12)设置img宽度 如果不添加eq()，则默认为第一个
3.静态方法和实例方法
//静态方法
function Student(){}
Student.like=function(){
...
}
//静态方法调用
Student.like()
//实例方法
function Student(){}
Student.prototype.like=function(){
...
}
//实例方法调用
let student=new Student()
student.like()
4.$.each()
//forEach()只能遍历真数组,不能遍历伪数组
arr.forEach(function(value,index){})
//利用jQuery的静态方法遍历伪数组
$.each(arr,function(index,value){})
5.$.map()
//map()只能迭代真数组,不能迭代伪数组
arr = arr.map(function (value, index, arr) {return value * 2;});
//$.map()用来迭代伪数组
const res= $.map(obj,function(value,index){return value*2})
6.其他静态方法
$.trim()
$.isArray()
$.isWindow()
$.isFunction()
//暂停入口函数执行
$.holdReady(boolean)
7.jQuery内容选择器
//empty 没有文本内容也没有子元素的指定元素
$('div:empty')
//parent 有文本内容或有子元素的指定元素
$('div:parent')
//contains 包含文本内容的指定元素
$('div:contains('我是div')')
//has 包含指定子元素的指定元素
$('div:has('span')')
8.attr()和removeAttr()
//获取属性节点，如果获取多个，默认第一个
$('div').attr('class')
//设置所有找到元素指定的属性节点
$('div').attr('score',98)
//删除所有找到元素指定的属性节点
$('div').removeAttr('score')
9.prop()
//在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；
//attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
//跟attr效果一样
//prop除了能操作属性还能操作属性节点 注： removeProp只能删除prop设置的自定义属性
//true和false时如checked，selected，disabled，使用prop，其他使用attr
let $input1= $("input").attr("checked");//checked
let $input2= $("input").prop("checked");//true
10.类操作方法
//添加类
$('div').eq(0).addClass(classname1 classname2)
//移除类
$('div').eq(0).removeClass(classname)
//切换 有就删除，没有就添加
$('div').eq(0).toggleClass(classname1 classname2)
11.文本值的相关操作
$('div').html('<p>1</p>')
$('div').text('hhhh')
$('input').val('value')
12.类样式
//单个设置
$('div').css('width','100px')
//批量设置
$('div').css({
width:"200px",
height:"200px",
background:"#1abc9c",
border:"none"
})
//链式设置
$('div').css('width','200px').css('heiggt',"200px").css('background','red')
//获取样式
$('div').css('width')
13.位置操作
//设置元素距离窗口偏移位
$(".son").offset({
left: 10
})
//position()//距离定位元素偏移位
console.log($(".son").position().left);
$("div").scrollTop()
15.事件绑定
//jQuery有两种绑定事件的方式
// 1.eventName(fn)
//编码效率略高，部分事件jQuery没有实现，所以不能添加
$("button").click(function () {
alert("he");
})
$("button").mouseleave(function(){
alert("out");
})
$("button").mouseenter(function(){
alert("over");
})
//2.on(eventName,fn)
//编码效率略低，所有事件均可实现
$("button").on("click",function () {
alert("kao");
})
16.事件解绑
function test1(){
alert("he");
}
$("button").click(test1);
//事件解绑
//off()第二个参数为空时，解除该元素全部click事件
$("button").off("click",test1)
17.自定义事件
//自定义事件两个条件
/*
1.事件必须通过on来绑定
2.事件必须通过trigger来触发
*/
$(".son").on("myclick", function () {
alert("on");
});
//注：trigger会立即触发
$(".son").trigger("myclick");
18.委托delegate()
$("ul").append("<li>我是新增的li</li>");
})
// $("ul>li").click(function () {
// console.log($(this).html());//新增的li没有点击事件 html()类似于innerHTML;
// })
$("ul").delegate("li", "click", function () {
console.log($(this).html());//this指向li?
})
19.鼠标进入离开事件
//用mouseover和mouseout受子元素冒泡影响
// $(".father").mouseover(function () {
// console.log("我进来了！！");
// })
// $(".father").mouseout(function () {
// console.log("我又出来了！");
// })
//用mouseenter和mouseleave不会受子元素影响
// $(".father").mouseenter(function () {
// console.log("我进来了！！");
// })
// $(".father").mouseleave(function () {
// console.log("我又出来了！");
// })
//hover方法两个事件，若只添加一个事件则移入移出相同
$(".father").hover(function () {
console.log("移入事件");
}, function () {
console.log("移出事件");
});
20.siblings()取反
//siblings()表示其他索引
//index()表示索引
$(".nav>li").mouseenter(function () {
$(this).addClass("current");
// console.log($(this).index());
$(this).siblings().removeClass("current");
})
// console.log($(".nav>li").eq(1).siblings());
21.显示和隐藏动画
//宽度高度逐渐改变
//有两个参数，第一个是时间，单位是毫秒。第二个是fn()，动画结束后的事件
//显示动画 display:block;
$("div").show(1000,fn)
//隐藏动画 display:none;
$("div").hide(1000,fn)
//切换 无时间变化
$("div").toggle(1000);
22.展开和收起动画
//高度逐渐改变
//展开动画
$("div").slideDown(1000,fn);
//收起动画
$("div").slideUp(1000,fn);
//切换
$("div").slideToggle(1000);
23.折叠菜单
let flag = true;
$(".nav>li").eq(0).click(function () {
if (flag) {
$(".sub").stop();
$(".sub").slideDown(1000);
flag = false;
}
else {
$(".sub").stop();
$(".sub").slideUp(1000);
flag = true;
}
})
24.折叠菜单
$(".nav>li").click(function () {
//children查找指定元素的儿子
//拿到二级菜单
var $sub = $(this).children(".sub");
//使二级菜单展开
$sub.slideDown(1000);
//拿到所有非当前的二级菜单
var $child = $(this).siblings().children(".sub");
//使非当前的二级菜单收起
$child.slideUp(1000);
//让被点击的一级菜单箭头旋转
$(this).children("span").addClass("cur");
//没点击的一级菜单箭头还原
$(this).siblings().children("span").removeClass("cur");
})
25.淡入淡出动画
//淡入淡出动画就是opacity值的改变display:none-1 透明度变化
//淡入动画
$("div").fadeIn(1000,fn)
//淡出动画
$("div").fadeOut(1000,fn)
//切换
$("div").fadeToggle(1000)
//淡入到
$("div").fadeTo(1000,0.5,fn)
26.自定义动画
$("button").eq(0).click(function () {
//第一个参数：接收一个对象，可以再对象中修改属性
//二：指定动画时长
//三：指定动画节奏，默认是swing
//四：动画执行后的回调函数
$(".one").animate({
width: 300,
marginLeft: 500,
// backgroundColor:"yellow"
}, 1000, "linear", function () {
console.log($(this).css("background-color"));
});
$(".two").animate({
width: 300,
marginLeft: 500
}, 1000, function () {
console.log(getComputedStyle(this).backgroundColor);
})
});
$("button").eq(1).click(function () {
//累加属性
$(".one").animate({
width: "+=100"
}, 1000, "swing", function () {
console.log($(this).width());
})
});
$("button").eq(2).click(function () {
//关键字!!!!
$(".one").animate({
// width:"hide"
width:"toggle"
}, 1000, function () {
console.log(this.offsetWidth);
})
});
27.stop()和delay()
//delay(),延长时间，单位毫秒
$(".one").animate({
width: 300
}, 1000).delay(1000).animate({
height: 300
}, 1000)
//立即完成当前的，并且停止后续所有的
$("div").stop(true,true);
28.添加节点
// 内部插入
// append(content | fn)
// appendTo(content)
// prepend(content | fn)
// prependTo(content)
var $li = $("<li>新添加的节点</li>");
//添加到末尾
// $("ul").append($li);
// $li.appendTo("ul");
//添加到头部,prependTo找到所有ul,并添加li
// $("ul").prepend($li);
// $li.prependTo("ul");
// 外部插入
// after(content | fn)
// before(content | fn)
// insertAfter(content)
// insertBefore(content)
var $li = $("<li>外部添加的节点</li>");
//after()新增到外部的后面
// $("ul").after($li);
// $li.insertAfter("ul");
//before()新增到外部的前面
// $("ul").before($li);
$li.insertBefore("ul");
29.删除节点
//div本身也会删除,被移除的元素所绑定的事件及数据也被移除
$("div").remove();
//div本身不会删除,被移除的元素所绑定的事件及数据也被移除
$("div").empty()
//div本身也会删除,被移除的元素所绑定的事件及数据不会被移除
$("div").detach()
30.替换节点
$("div").replaceWith($h1);
$h1.replaceAll("div")
31.复制节点
//浅复制，不会复制点击事件
$("div").clone(false);
//深复制，会复制点击事件
$("div").clone(true);
32.监听文本框的输入
$("body").delegate("input:text","propertypechange input",function(){
console.log($(this).val());
});
33.find()查找子元素
<script>
$(function () {
console.log($("div").find(".li").html());//li标签
})
</script>
<div>
<ul>
<li></li>
<li class="li">li标签</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
浙公网安备 33010602011771号