Jquery——基础

目标指定的属性名 是以指定的属性值结尾的

$("div[id$=‘2’]").css(“fontSize”,“30px”);

6. 目标[属性名*=‘属性值’]

目标指定的属性名 只要包含指定的属性值

$(“div[id*=‘iv’]”).html(“我们都被改了”);

7. id

$(“#box”)

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(“抬起”)

  最后

  在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

  包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

  • HTML5新特性，语义化

  • 浏览器的标准模式和怪异模式

  • xhtml和html的区别

  • 使用data-的好处

  • meta标签

  • canvas

  • HTML废弃的标签

  • IE6 bug，和一些定位写法

  • css js放置位置和原因

  • 什么是渐进式渲染

  • html模板语言

  • meta viewport原理

  

  • 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】