JQuery
基本知识
JQuery就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
文件类型分为完整版和被编译过的
使用：在文件中新建文件夹，然后将JQuery包复制到文件夹中，引用
$符号是JQuery的特有符号必须写
选择器
例：
<div id="div1" class="div1">
<a>aaaaaaaaaaaaaa</a>
</div>
<div class="div"></div>
<div id="div2"></div>
基本选择器
ID选择器：$("#div1")
Class选择器：$("div")
标签选择器
并列：用逗号隔开 $("#div1,#div2")可以在后面加.css(样式)
后代：用空格隔开
过滤选择器
基本过滤
首尾
$(".div:first/last ")
任意个
eq（索引号）$(".div：eq（）")
不等于
大于
：gt（）；$(".div：gt（）")
小于
：lt（）；$(".div：lt（）")
排除
$(".div：not（.div:eq（索引号））")
奇偶
$(".div:odd/even ")
属性名过滤
$(".div[属性名] ")
内容过滤
文字 $(".div::contains("字符串")")
子元素 $(".div:has(选择器)")
事件
常规事件
1.把js中的onclick的on去掉即可
格式：
$(".div").click(function(){
}); （双击dblclick）
复合事件
$(".div").hover(function(){
$(this).css("background-color","red");
}，function(){
$(this).css("background-color","white");
});(光棒)
$(".div").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","green");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","gray");
}); (不断点击切换)
事件冒泡
阻止时间冒泡：
$(".aa").click(function(){
return false;
})
DOM操作
操作内容(改变内容)
$("#a").click(function(){
$(this).text("bbbb");
});
文本框内的内容改变
$("#按钮").click(function(){
$("#文本框").val("改变的内容")；
$(this).val("按钮改变的内容")；
})
如果写到head里面要加上
$(document).ready(function(){
在内部写
})
操作内容
表单元素
取值：var s = $("选择器").val()
赋值：$("选择器").val("值")
非表单元素
取值：var s = $("选择器").html(), var s = $("选择器").text()
赋值：$("选择器").html("内容"), $("选择器").text("内容")
操作属性
获取属性：var s = $("选择器").attr("属性名")
设置属性：$("选择器").attr("属性名","属性值")
删除属性：$("选择器").removeAttr("属性名")
操作样式
操作内联样式
获取样式：var s = $("选择器").css("样式名")
设置样式：$("选择器").css("样式名","值")
操作样式表的css
添加class：$("选择器").addClass("class名")
移除class：$("选择器").removeClass("class名")
添加移除交替class:$("选择器").toggleClass("class名")
操作相关元素
例：<style type="text/css">
#div1{
width:400px;
height:400px;
background-color:red;
}
#div2{
width:300px;
height:300px;
background-color:blue;
}
#div3{
width:200px;
height:200px;
background-color:yellow;
}
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
查找
父、前辈
$("div3").click(function(){
var a=$(this).parent();
});(前一个)
在parent后面加.parent就是再前一级
$("div3").click(function(){
var a=$(this).parents("#div1");
});(前辈)
子、后辈
$("div1").click(function(){
var a=$(this).children();（子）
});
$("div1").click(function(){
var a=$(this).find("#div3"); (后辈)
});
例：
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
兄弟
next后面一个元素 nextAll（所有的）（选择器）后面兄弟级的元素
prev前面一个元素 prevAll（所有的）（选择器）
$("div1").click(function(){
var a=$(this).next().next();
});
操作
新建
$("HTML字符串")
添加
（1）appen(jquery对象)内部添加 （2）after(,..)下部平级添加（3）before("...") 上部平级添加
复制
clone()
移除
（1）empty()清空内部全部元素 （2）remove()移除元素
