1、官网：jquery.com 1.12.1版本
正常版本 压缩版本：开发都可以，上线使用压缩版本
//引入jquery文件
<script src="jquery-q.21.1.js"></script>
//点击按钮，设置div样式
$("#btn").click(function(){
$("#dv").css({"width":"200px","height":"100px"});
});
2、顶级对象
用$符号来代替jQuery
$.属性/方法
$("#id属性值").方法(匿名函数);
3、与DOM互转
//DOM调用jQuery方法
$(DOM对象).方法(匿名函数);
//jQuery调用DOM方法
jQuery对象[0].方法(匿名函数);
4、网页开关灯
$("#btn").click(function(){
if($(this).val()=="关灯"){ //此处this为DOM对象，判断按钮value值是不是关灯
$("body").css("background":"black");
$(this).val("开灯");
}else{
$("body").css("background":"");
$(this).val("关灯");
}
});
.val();-------设置或获取该元素value属性值
.css("css属性名字":"属性的值");-------设置元素样式属性
.css();-------设置或获取该元素css样式属性值
.html();-------设置或获取标签中html内容
.index()方法------当前这个元素的索引
:eq(索引值)-------选择器对应索引的元素
5、页面加载事件
（1）$(window).load(function(){console.log("页面加载");});
（2）$(document).lready(function(){console.log("页面加载");});
（3）jQuery(function(){console.log("页面加载");});
（4）$(function(){console.log("页面加载");}); //最快
6、id选择器操作元素属性
$("选择器")
$(function(){
$("#btn").click(function(){
console.log($(this).val());
$(this).val("haha");------this.value="哈哈";
});
});
7、标签选择器操作元素属性
$("标签名字")
$(function(){
$("#btn").click(function(){
//根据标签选择器获取p标签
$("p").text(""我们都是p);
});
});
8、类选择器操作元素属性
$(".类样式名字")
$(function(){
$("#btn").click(function(){
$(".cls").css("backgroundColor","yellow");
});
});
9、交集选择器：先找标签，再找类样式元素---标签+类选择器
$("标签.类样式")
$("p.cls").css();
10、并集选择器---多条件选择器
$(选择器,选择器)
$("#div,p,.cls").css();
11、div中添加p
$(function(){
$("#btn").click(function(){
$("#dv").html("<p></p>");
});
});
12、层次选择器
$(父级选择器 后代选择器)
$(父级选择器>父级选择器中直接子元素)
$(父级选择器~父级元素后面的所有兄弟元素)
$(父级选择器+父级元素后面直接的兄弟元素)
$("#div span").css();
$("#div>span").css();
$("#div~span").css();
$("#div+span").css();
13、隔行变色---奇红偶黄
$(function(){
$("#btn").click(function(){
$("#uu>li:odd(奇数)").css("backgroundColor","yellow");
$("#uu>li:even(偶数)").css("backgroundColor","red");
});
});
14、显示隐藏下拉菜单
$(function(){
$(".wrap(div标签)>ul>li").mouseenter(function(){
$(this).children("ul").stop().show();
});
$(".wrap(div标签)>ul>li").mouseleave(function(){
$(this).children("ul").stop().hide();
});
});
15、高亮显示
$(function(){
$("#uu>li").mouseenter(function(){ //鼠标进入
$(this).css("backgroundColor","red");
});
$("#uu>li").mouseleave(function(){ //鼠标离开
$(this).css("backgroundColor","");
});
$("#uu>li").click(function(){ //鼠标点击
$(this).css("color","green");
});
16、验证输入是不是中文名
<input type="text" value="" id="txt" />
<input type="button" value="验证" id="btn" />
$(function(){
$(#btn).click(function(){
if(/^[\u4e00-\u9fa5]{2,6}$/.test($(#"txt").val())){
$(#"txt").css("backgroundColor","green");
}else{
$(#"txt").css("backgroundColor","red");
}
});
});
17、淘宝精选
<div class="wrapper">
<ul id="left"></ul>
<ul id="center"></ul>
<ul id="right"></ul>
</div>
$(function(){
//左边ul中li
$("#left>li").mouseenter(function(){
var index=$(this).index(); //获取索引
$("#center>li").hide(); //先隐藏所有图片
//$("#center>li:eq(索引值)")---对应li标签
//显示当前对应li
$("#center>li:eq("+index+")").show();
});
//右边ul中li
$("#right>li").mouseleave(function(){
$("#left>li").mouseenter(function(){
var index=$(this).index()+9; //获取索引
$("#center>li").hide(); //先隐藏所有图片
//$("#center>li:eq(索引值)")---对应li标签
//显示当前对应li
$("#center>li:eq("+index+")").show();
});
});