jQuery1

一、认识jQuery
1.jQuery就是JavaScript的一个库
2.优点：方便我们来调用，提高我们的开发效率
3.jQuery能做的JavaScript都能做到，而JavaScript能做的事情，jQuery不一定能做到。
4.jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
5.jQuery的引入：官网的download，CDN直接引入
二、jQuery

//匿名函数的自执行
$(function(){
  console.log(123)
})

//操作样式：css()
$("#wrap").css("background", "green");
console.log($(".wrap"));
window.onload = function(){
  console.log($('#wrap'));
}

//js获取到的变量，可以在jQuery中进行使用
var wrap = document.getElementById("wrap");
$(wrap).css("fortSize", "40px");
$(wrap).css("background", "red");

//添加节点
var oDiv = document.createElement("div");
document.body.appendChild(oDiv);
var jqDiv = $("<div><span>666</span></div>");
document.body.appendChild(jqDiv[0]);

三、加载内容

window.onload = function(){
  console.log(123);
}
//文档加载完的时候代码执行
$(document).ready(function(){
  console.log(123);
})

四、筛选

//css样式如果说要修改多条，得到里面参数用{}写法
$(".box").css({
  "text-align" : "center",
  "lineHeight" : "100px",
  "background" : "red"
})
//错误的写法
$(".box")[0].css("background-color", "yellow")
//不推荐
$($(".box")[0]).css("background-color", "yellow")

//选择下标对应的元素
$(".box").eq(0).css("background", "black")

//first() 选择到第一个样式
//last()  选择到最后一个样式
$(".box").first().css("background", "purple")
$(".box").last().css("background", "purple")

//:odd选择偶数
$(".box:odd").css("font-size", "50px");

//筛选不符合条件的内容
$(".box").not(".box1").css("background", "purple");

//筛选符合条件的内容
$(".box").filter(".box1").css("background", "deeppink");

//next()  下一个=毗邻选择器
//prev()  上一个
$('.box').filter('.box1').next().css('background','deeppink');
$('.box').filter('.box1').prev().css('background','deeppink');
$('.box1+.box').css('background','pink');

五、siblings()

<p>Hello</p>
<div>
  <span>Hello Again</span>
</div>
<p>And Again</p>
<span id='span'>And Again</span>

//除了自己之外选择到对应的兄弟内容
$("div").siblings().css("background", "pink");
$("div").siblings("#span").css("background", "purple");

六、hasClass

//hasClass("wrap")  判断样式是否有XX类名
$("div").on("click", function(){
  if($(this).hasClass("wrap")){
    $(this).css("background", "pink");
  }else{
    $(this).css("background", "purple")
  }
});