jQuery是什么？
jQuery是一个JavaScript常用的工具函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
writer less , do more ----- 用更少的代码，解决更多的需求
jQuery的版本问题
目前jQuery有三个大版本，1.xx.xx、 2.xx.xx 和 3.xx.xx
1版本兼容性最高,可以有效的兼容ie浏览器
2版本删除了兼容最低只能兼容到ie9,使代码更加轻量化
3版本重构了底层代码,彻底放弃了ie9以下的浏览器,但是却新增加
了很多的使用的方法，并且代码的安全性也增加很多
jQuery的使用
我们可以根据需要下载一个指定版本的jquery文件，当然也可以选择使用第三方文件。
js 官方网址: http://jquery.com/
例如:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery
jQuery 中的核心语法
在jQuery当中，jQuery是一个核心方法，用来查找元素从而方便对元素的操作，可以简写为 $
jQuery("#btn").click(function() {
alert(123);
});
// 上边的代码也可以改为
$("#btn").click(function(){
alert(123)
})
基础语法
$(selector).action();
- 美元符号定义jQuery
- 选择符(selector) "查询"和"查找"HTML元素
- jQuery的action()执行对元素的操作
文档就绪函数
在js当中，存在一个 window.onload = function(){},函数当中的代码会在整个文档加载完成之后执行
在jquery中,也有类似的方法
$(document).ready(function(){ // jq 代码 }); // 上述代码也可以简写为: $(function(){ // jq 代码 }) //这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码,造成错误。
$(function())与window.onload的区别
- window.onload必须等到页面所有的元素都加载完成之后才能使用,而$(function())只需DOM加载完成就会执行
- window.onload一个页面只能有一个,而$(function())可以有多个,从上到下执行
jQuery 对象
原生的DOM元素与jq的DOM元素的方法，不互通
原生代码可以和jq代码同时存在，只是互相之间对象的属性或方法不互通
jq对象与原生对象之间的转换
1.jq对象转原生对象
解析数组
$("#box")[0].style.background = "blue";
get()方法
$("#box").get(0).style.background = "blue";
2.原生转jq对象
将对象包裹在jq函数中
var obox1 = document.getElementById("box1"); $(obox1).css("background","yellow")
jQuery 选择器
在jq当中，我们可以通过选择器任意的选取html元素，并且操作html元素。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
三个基础选择器如下:
$("p") 元素选择器
$("#d1") id选择器
$(".class") class选择器
高级选择器
$(".msg h2").css("background","red") //后代选择器
$(".msg").find("h2").css("background","red")
$(".msg>h2").css("background","red")
$(".msg").children("h2").css("background","red") //子元素选择器
$(".msg+span").css("background","red") //相邻兄弟选择器
$(".msg").next("span").css("background","red")
$(".msg~span").css("background","red") //普通兄弟选择器
$(".msg").nextAll("span").css("background","red")
$("input[type=text][name]").css("background","red") //属性选择器
伪类选择器
$(".list li:first").css("background","red") //选择第一个子元素
$(".list li").first().css("background","red")
$(".list li:last").css("background","red") //选择最后一个子元素
$(".list li").last().css("background","red")
$(".list li:eq(3)").css("background","red") //选择子元素中的第3+1个(从0开始)
$(".list li").eq(3).css("background","red")
$(".list li:odd").css("background","red") //选择奇数
$(".list li:even").css("background","red") //选择偶数
$(".list li:not(.red)").css("background","red") //选择没有当前类名的
$(".list li").not(".red").css("background","red")
$(".list li:contains(j)").css("background","red") //选择内容含有j的标签
$(".list li:empty").css("background","red") //选择空标签
//注意:$(".list li").empty()方法,是清空标签的内容,该方法不是选择器
$(".list:has(.red)").css("background","red") //选择类名为red的标签
$(".list").has(".red").css("background","red")
$("h1:hidden").css("display","block") //选择隐藏的元素
$("h1:visible").css("display","none") //选择显示的元素
常用选择器还可以访问: