Jquery——基础，限时删除

8. class

$(".box")

9. 标签名

$("div")

10. 通用选择器

$("*");

11. 层级选择器

$("div>span");

12. 后代

$("div span");

13. 连续的子代

$("div>span>span");

14. 群组选择器

$("div,p");

15. 交叉选择器：两个条件必须同时满足

$("#btn.box");

16. 紧邻选择器：

条件1: 紧挨着制定目标 (这里的指定目标： .box)

条件2： 需要在目标的下方书写

$(".box+p");

17. 同辈选择器（同级选择器,同胞选择器)

可以获取到目标下方 所有的元素(无论是否紧邻)

$(".box~p");

过滤选择器：

1. :first 匹配到第一个符合条件的元素

$('li:first').css("background","yellow");

2. :last 匹配到最后一个符合条件的元素

$('li:last');

3. :not 除了()中指定的条件，获取:前指定的所有元素，

$("li:not(.list)");

4. :even 索引为偶数的

$("li:even");

5. :odd 索引为奇数

$("li:odd:not(.list)");

6. :eq(指定索引值)

$("li:eq(0)");

7. :gt(大于索引值)

$("li:gt(1)");

8. :lt(小于索引值)

$("li:lt(5)");

后代选择器和 find()方法：

$("p span").html("我被html方法改了");

$("p").find("span").css("background","red");

子元素选择器和 children 方法：

$("p>span").css("color","blue");

$("p").children().css("fontSize","30px");

紧邻选择器和 next()方法、nextAll() 方法：

$(".d+button").html("点我");

$(".d").next().css("color","blue");

$(".d").nextAll("button").html("哈哈哈");

prev 方法、prevAll 方法：

$(".d").prev().html("我是新来的div");

$(".d").prevAll().html("我是新来的div");

siblings 方法：

$(".d").siblings("button");

parent([expr])方法：

用一个包含着所有匹配元素的唯一父元素的元素集合。

$('#item1').parent().parent；

parents方法：

//得到含有子元素或者文本的元素

1.$('li:parent');

2.parents([expr])；

//得到一个包含着所有匹配元素的祖先元素的元素集合。

//可以通过一个可选的表达式进行筛选。

$('#items').parents('.parent1');

closest([expr])方法：

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。

如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。

如果什么都没找到则返回一个空的jQuery对象。

---

jq操作DOM

=================================================================

创建节点：

var $li =$("

榴莲

");

添加节点：

方法：

1. appendTo：将内容添加到目标 中 的最后一位

内容.appendTo(目标);

$li.appendTo($("ul"));

$("

芒果

").appendTo("ul");

2. prepend：将内容添加到目标 的第一位

目标.prepend("内容")

$("ul").prepend("

西瓜

");

$("ul").prepend("

椰子

");

3. after：在指定的元素之后 插入元素

目标.after(内容);

$(".box").after("上面卖的是假货");

4. insertAfter：将内容添加到目标之后

备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置

内容.insertAfter(目标) :

$("ul").insertAfter($(".box"));

5. before：在指定的元素之前 插入元素

$(".box").before("我是新来的span");

6. insertBefore：将内容添加到目标之前

备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置

$(".s").insertBefore($(".box"));

删除节点：

作用： 删除该节点

指定目标.remove()

$(".s").remove();

清空目标子节点：

作用： 清空目标的子节点，但不对目标自身造成影响

目标.empty()

$("ul").empty();

复制：

作用： 会返回指定目标的复制体，需要接受或者直接使用

目标.clone()

var $b =$(".box").clone();

---

jq动画效果

================================================================

hide：

作用： 让目标隐藏（修改的display属性）

目标.hide()

小括号中，可是设置动画执行的时间

$(".box").hide('slow');

show：

作用： 让目标显示

目标.show()

小括号中，可以设置动画执行的时间

$(".box").show(5000);

toggle：

作用： 会先进行目标的属性，如果是显示，就设置为隐藏，

如果是隐藏，就设置为显示

目标.toggle()

$(".box").toggle(2000);

淡入：

$(".box").fadeIn(2000);

淡出：

$(".box").fadeOut(2000);

淡入、淡出：

$(".box").fadeToggle(2000);

渐变到指定的透明度：

参数1 ： 执行的时间

参数2 : 指定的透明度

$(".box").fadeTo(2000,0.3);

滑入：

$(".box").slideDown(2000);

滑出：

$(".box").slideUp(2000);

滑入、滑出：

$(".box").slideToggle(2000);

animate自定义动画：

$(".text:first").animate({

'opacity':1,

fontSize:"40px"

},3000,function () {

$(this).animate({

fontSize:"16px"

},1000)

$(".text:eq(1)").animate({

'opacity':1,

fontSize:"40px"

},3000,function () {

$(this).animate({

fontSize:'16px'

},1000)

})

})

---

jq事件绑定

================================================================

jq 历史中绑定事件的三种方式：

1. on/off

2. bind/unbind

3. live/delegete

备注：

在JQuery 1.7之后 推出了 .on() 和 .0ff()方法 废弃了live() 和 delegete()方法

on/off 整合了 bind/unbind 方法

所以我们使用较多的绑定方法为 on/off

方法： .on

参数：

参数 1 事件类型 （必填）

可以同时绑定多个事件，但限于事件功能相同时

事件功能不相同时，可以采用链式编程，在该方法的后面续写

参数 2 具体执行功能的 子元素！ (可选)

参数 3 传递到函数内部的数据(有些类似实参) （可选）

参数 4 具体功能 (必填)

语法示例：

$(".box").on("click mouseout",".min_box",{sum:20},function(e){

console.log("天气不错");

//通过参数3 传递进来的参数 我们通过 event.data 来获取

console.log(e.data.sum);

});

---

通过on绑定事件和直接通过事件名绑定 的区别：

通过事件名绑定 是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；

而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。

简单概述区别： 通过事件名添加的话 新元素 不能获得同样的事件 而通过on绑定的话可以

读取和使用鼠标状态：==

$('button').mousedown(function(e){

alert(e.which)

// 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键

return false;

//阻止链接跳转

return true;

//返回正常的处理结果.

return false;

//返回错误的处理结果;终止处理;阻止提交表单;

//阻止执行默认的行为.

return;

//把控制权返回给页面.

})

---

使用对象的方式 绑定多个事件：

$("button").on({

mousedown:function () {

alert("按下");

},

mouseup:function () {

alert("抬起")

}

})

---

阻止冒泡和默认行为：

$("button").on('click',function (e) {

//阻止默认事件

e.preventDefault();

//阻止冒泡事件

e.stopPropagation();

})

---

事件的命名空间：

为什么存在： 有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。

$('input').on('click.abc', function () {

alert('abc');

});

---

.off() 解除事件绑定：

参数1 ：必需 符合要解除目标的 事件类型 事件命名

参数2 ：可选 指定哪些后代元素可以触发绑定的事件

参数3 ：可选。规定当事件发生时运行的函数。

$('input').off('click.abc');

//移除 命名为abc的click 事件

备注：

也可以直接使用(’.abc’) 这样的话 可以移除相同命名空间的不同事件。

对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。

如果该事件已经删除，则无法模拟使用

$('input').trigger('click.abc');

---

事件绑定叠加问题：

var iCount = 0;

function sayHello() {

alert("Hello!");

}

每Click1次，多响应事件一次（叠加了）

$('.btn3').on('click', function () {

iCount = iCount + 1;

$(".box").html("Say Hello" + iCount + "次");

$(".box").on("click", sayHello); // 绑定事件（事件叠加了）

});

通过off()来解决 永远只响应1次事件 避免事件叠加冲突

$('.btn3').on("click", function () {

iCount = iCount + 1;

$('.box').html("Say Hello" + iCount + "次");

$(".box").off('click').on('click', sayHello);

//先移除事件（避免事件叠加），再绑定事件

})

---

prop()与attr()的区别：

prop()的设计目标用于设置或获取指定DOM元素

(指的是JS对象，Element类型)上的属性(property);

attr()的设计目标是用于设置或获取指定DOM元素所对

应的文档节点上的属性(attribute)。

prop只能对html标签本身的属性可以进行获取值或者赋值

attr可以对html标签以外的属性（自定义DOM属性）进行获取值或者赋值

attr可以给元素添加一个自定义的属性值

prop不可以

---

each方法的使用：

$.each(arr1,function(i,val){

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。 开源分享：docs.qq.com/doc/DSmRnRG…