jQuery 入门教程

$(function () {
  // 此处是页面 DOM 加载完成的入口
});

$(document).ready(function () {
  // 此处是页面 DOM 加载完成的入口
});

$("div");

// index 是索引号
$("div")[index];
$("div").get(index);

// $(this).css("color", "red");
// $(this).siblings("color", "");

$(this).css("color", "red").siblings("color", "");

$(function () {
  // 1. 鼠标经过左侧的小li
  $("#left li").mouseover(function () {
    // 2. 得到当前小li 的索引号
    var index = $(this).index();
    // console.log(index);
    // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
    // $("#content div").eq(index).show();
    // 4. 让其余的图片（就是其他的兄弟）隐藏起来
    // $("#content div").eq(index).siblings().hide();
    // 链式编程
    $("#content div").eq(index).show().siblings().hide();
  });
});

// 1. 参数只写属性名，则是返回属性值
$(this).css("color");

// 2. 参数是属性名，属性值，逗号分隔，属性名必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");

// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性名可以不用加引号
$(this).css({
  backgroundColor: "red"
  width: 20
});

// 1. 添加类
$("div").addClass("current");

// 2. 移除类
$("div").removeClass("current");

// 3. 切换类
$("div").toggleClass("current");

$(function () {
  $(".tab_list li").click(function () {
    var index = $(this).index();
    $(this).addClass("current").siblings().removeClass("current");
    $(".tab_con .item").eq(index).show().siblings().hide();
  });
});

show(speed, easing, fn);
hide(speed, easing, fn);
toggle(speed, easing, fn);

$(".hidebtn").click(function () {
  $("div").hide(1000, "linear", function () {
    alert("Hide() 方法已完成!");
  });
});

slideDown(speed, easing, fn);
slideUp(speed, easing, fn);
slideToggle(speed, easing, fn);

hover(over, out);

// 鼠标经过
$(".nav>li").mouseover(function () {
  // $(this) jQuery 当前元素  this不要加引号
  // show() 显示元素  hide() 隐藏元素
  $(this).children("ul").slideDown(200);
});
// // 鼠标离开
$(".nav>li").mouseout(function () {
  $(this).children("ul").slideUp(200);
});
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(
  function () {
    $(this).children("ul").slideDown(200);
  },
  function () {
    $(this).children("ul").slideUp(200);
  }
);
// 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
  $(this).children("ul").slideToggle();
});

stop();

$(".nav>li").hover(function () {
  // stop 方法必须写到动画的前面
  $(this).children("ul").stop().slideToggle();
});

fadeIn(speed, easing, fn);
fadeOut(speed, easing, fn);
fadeToggle(speed, easing, fn);

fadeTo(speed, opacity, easing, fn);

$("button").click(function () {
  //  修改透明度 fadeTo() 这个速度和透明度要必须写
  $("div").fadeTo(1000, 0.5);
});

animate(params, speed, easing, fn);

$("button").click(function () {
  $("div").animate(
    {
      left: 500,
      top: 300,
      opacity: 0.4,
      width: 500,
    },
    500
  );
});

// 1. 获取属性语法
pror("属性");
// 2. 设置属性语法
pror("属性", "属性值");

// 1. 获取属性语法
attr("属性"); //类似原生getAttribute()
// 2. 设置属性语法
attr("属性", "属性值"); //类似原生setAttribute()

// 1. 附加数据语法
data("name", "value"); //向被选元素附加数据
// 2. 获取数据语法
data("name"); //向被选元素获取数据

$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
console.log($("div").data("index"));

// 1. 普通元素内容 html() , 相当于原生 innerHTML()
html(); //获取元素的内容
html("内容"); //设置元素内容
// 2. 普通元素文本内容 text() , 相当于原生 innerText()
text(); //获取元素的文本内容
text("文本内容"); //设置元素的文本内容
// 3. 表单的值 val() , 相当于原生 value()
val(); //获取表单的值
val("内容"); //设置表单的值

$(selector).each(function(index,element))

// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function (i, domEle) {
  // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
  // console.log(index);
  // console.log(i);
  // 回调函数第二个参数一定是 dom元素对象 也是自己命名
  // console.log(domEle);
  // domEle.css("color"); dom对象没有css方法
  $(domEle).css("color", arr[i]);
  sum += parseInt($(domEle).text());
});
console.log(sum);

$.each(object, callback);

var obj = {
  flammable: "inflammable",
  duh: "no duh",
};
$.each(obj, function (key, value) {
  alert(key + ": " + value);
});

var arr = ["a", "b", "c"];
$.each(arr, function (i, e) {
  alert("下标 #" + i + ": " + e);
});

// 动态地创建了一个 <li>
$("<li></li>");

element.append("内容"); // 类似原生 appenChild
element.prepend("内容"); // 雷速原生 insertBefore

element.after("内容"); // 把内容放入目标元素后面
element.before("内容"); // 把内容放入目标元素前面

element.remove(); // 删除匹配的元素（本身）
element.empty(); // 删除匹配的元素集合中所有子节点
element.html(""); // 删除匹配的元素集合中所有子节点

// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
$(".son").offset({
  top: 200,
  left: 200,
});

// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
//     top: 200,
//     left: 200
// });

$(document).scrollTop(100);
// 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function () {
  // console.log(11);
  console.log($(document).scrollTop());
  if ($(document).scrollTop() >= boxTop) {
    $(".back").fadeIn();
  } else {
    $(".back").fadeOut();
  }
});
// 返回顶部
$(".back").click(function () {
  // $(document).scrollTop(0);
  $("body, html").stop().animate({
    scrollTop: 0,
  });
  // $(document).stop().animate({
  //     scrollTop: 0
  // }); 不能是文档而是 html和body元素做动画
});

element.事件(function () {});
$("div").click(function () {});

element.on(events, [selector], fn);

// 可以绑定多个事件，多个事件处理程序
$("div").on({
  click: function () {},
  mouseenter: function () {},
  mouseleave: function () {},
});

// 如果事件处理程序相同
$("div").on("mouseover mouseout", function () {
  $(this).toggleClass("current");
});

// 可以进行事件委派操作
$("ul").on("click", "li", function () {
  alert("11");
});

// on() 可以给动态生成的元素绑定事件
$("div").on("click", "p", function () {
  alert("俺可以给动态生成的元素绑定事件");
});
$("div").append("<P>我是动态创建的</p>");

$("p").off(); // 解绑 p 元素所有事件处理程序
$("p").off("click"); // 解绑 p 元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托

$("p").one("click", function () {
  alert(11);
});

element.click(); // 第一种简写形式
element.trigger("event"); // 第二种自动触发模式
element.triggerHandler("event"); // 第三种自动触发模式

$("input").on("focus", function () {
  $(this).val("你好吗");
});
$("input").trigger("focus"); // 会触发元素的默认行为
$("input").triggerHandler("focus"); // 不会触发元素的默认行为

element.on(events, [selector], function (event) {});

$("div").on("click", function (event) {
  console.log("点击了div");
  event.stopPropagation();
});

$.extend([deep], target, object1, [objectN]);

var targetObj = {
  id: 0,
  age: 12,
};
var obj = {
  id: 1,
  name: "andy",
};
$.extend(targetObj, obj);
console.log(targetObj); // 相同属性会覆盖 targetObj 里面原来的数据

var targetObj = {
  id: 0,
  msg: {
    sex: "男",
  },
};
var obj = {
  id: 1,
  name: "andy",
  msg: {
    age: 18,
  },
};
$.extend(targetObj, obj);
console.log(targetObj); // msg: {age: 18}
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age = 20;
console.log(targetObj); // msg: {age: 20}
console.log(obj); // msg: {age: 20}
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
console.log(targetObj); // msg :{sex: "男", age: 18}
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj); // msg: {age: 18}

function $(ele) {
  return document.querySelector(ele);
}
console.log($("div"));
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
// 2. 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();