# jQuery

$;
jQuery.noConflict();
$;
jQuery;

$.fn.jquery;

// <div id="abc"></div>
// 返回的对象是jQuery对象
// 不会返回null / undefined
var div = $("#abc");

var ps = $("p"); // 返回所有的p节点
ps.length; // 页面有多少个节点

// <div class="red"></div>
// <div class="blue red"></div>
var a = $(".red"); // 所有包含class='red'都将返回

// 按属性查找
var email = $("[name = email]");

// 按属性中前缀/后缀查找

// name = 'icon-1', name = 'icon-2'
var iocns = $("[name ^= icon]"); // 所有name属性值以icon开头的DOM

// name = 'startwith', name = 'endwith'
var names = $("[name $= with]"); // 所有name属性值以with结尾的DOM

var emailInput = $("input[name = email]"); // 不会找出<div name="email"></div>

$("p,div"); // 把<p>和<div>都选择出来
$("p.red,p.green"); // 把<p class="red"></p>和<p class="green"></p>都选出来

$("ul.lang li.lang-javascript");
// or
$("div.testing li.lang-javascript");

$("ul.lang li");
$("ul.lang li:first-child");

var ul = $("ul.lang");
var dy = ul.find(".dy"); // 获得JavaScript, Python, Scheme
var swf = ul.find("#swf"); // 获得Swift
var hsk = ul.find("[name=haskell]"); // 获得Haskell

var swf = $("#swift"); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(".red"); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象

var swf = $("#swift");
swf.next(); // 获得Scheme
swf.next("[name=haskell]"); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swf.prev(); // 获得Python
swf.prev(".dy"); // 获得Python

var langs = $("ul.lang li"); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(".dy"); // 拿到JavaScript, Python, Scheme

// or
var langs = $("ul.lang li");
langs.filter(function() {
  return this.innerHTML.indexOf("S") === 0; // 返回S开头的节点
});
// 获得Swift, Scheme

var langs = $("ul.lang li"); // 获得JavaScript, Python, Swift, Scheme和Haskell
var arr = langs
  .map(function() {
    return this.innerHTML;
  })
  .get();
console.log(arr); // ['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

var langs = $("ul.lang li"); // 获得JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // avaScript 相当于$('ul.lang li:first-child')
var haskell = langs.last(); //Haskell 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); //Swift, Scheme, 参数与数组的slice()方法一致

div.css("color"); // 获取css属性
div.css("color", "#333"); // 设置css属性
div.css("color", ""); // 清除css属性

div.hasClass("highlight"); // 判断是否含有highlight这个class
div.addClass("highlight"); // 添加highlight这个class
div.removeClass("highlight"); // 删除highlight属性这个class

// hide()方法是隐藏DOM节点，并不是删除节点

// <div id="a" name="A"></div>
var div = $("#a");
div.attr("B"); // undefined
div.attr("name"); // A
div.attr("name", "B"); // name='B'
div.removeAtt("name"); //删除name属性
div.attr("name"); //undefined

// <input id="test-radio" type="radio" name="test" checked value="1">
var ra = $("#test-radio");
ra.attr("checked"); // checked
ra.prop("checked"); //true

ra.is(":checked"); // true

// ready事件

// 第一种写法:
$(document).on("ready", function() {
  $("#testForm").on("submit", function() {
    alert("submit");
  });
});

// 第二种写法:
$(document).ready(function() {
  $("#testForm").submit(function() {
    alert("submit");
  });
});

// 第三种写法:
$(function() {
  // ...
});

function hello() {
  console.log("hello");
}

a.click(hello); // 绑定事件

// 解除绑定
setTimeout(function() {
  a.off("click", hello);
}, 10000);

// 无效写法
a.click(function() {
  console.log("hello");
});

a.off("click", function() {
  console.log("hello");
});

var div = $("#test-animate");
div.animate(
  {
    opacity: 0.25,
    width: "256px",
    height: "256px"
  },
  3000
); // 在3秒钟内CSS过渡到设定值

// 传入函数
div.animate(
  {
    opacity: 0.25,
    width: "256px",
    height: "256px"
  },
  3000,
  function() {
    console.log("动画已结束");
    // 恢复至初始状态:
    $(this)
      .css("opacity", "1.0")
      .css("width", "128px")
      .css("height", "128px");
  }
);

var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

var jqxhr = $.ajax("/api/categories", {
  dataType: "json"
});
// 请求已经发送了

var jqxhr = $.get("/path/to/resource", {
  name: "yequn",
  check: 1
});

// 第二个参数是object, jQuery自动把它变成query string，然后添加到url后面

// 传入第二个参数默认被序列化 application/x-www-form-urlencoded

var jqxhr = $.post("/path/to/resource", {
  name: "Bob Lee",
  check: 1
});

// name=Bob%20Lee&check=1

// getJSON()快速通过GET获取一个JSON对象
var jqxhr = $.getJSON("/path/to/resource", {
  name: "Bob Lee",
  check: 1
}).done(function(data) {
  // data已经被解析为JSON对象了
});

// 跨域请求数据
// 使用JSONP
ajax({
  jsonp: "callback"
});

$.fn.highlight1 = function() {
  this.css("backgroundColor", "#fffceb").css("color", "#d85030");
};